:root {
  /* compliance trace: Inter** Inte navigation fragments Interlude:** Interlude: panels dissolve into fogged overlays where visitor uncovers hovering single trembles wordmark. Grotesk** Grotes `tsundere.stream` masthead */
  --sauna-cranberry: #7A1231;
  --lingonberry-shadow: #3B0718;
  --birch-white: #F7F3EA;
  --ice-glass: #DDE8E6;
  --bubble-blue: #9FD9E5;
  --warm-steam: #FFD8C7;
  --charcoal-ink: #191416;
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-hand: "Nanum Pen Script", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--charcoal-ink);
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 76% 8%, rgba(159, 217, 229, 0.44), transparent 22rem),
    radial-gradient(circle at 12% 72%, rgba(255, 216, 199, 0.38), transparent 24rem),
    linear-gradient(115deg, var(--birch-white) 0%, #fffaf2 42%, var(--ice-glass) 100%);
  overflow-x: hidden;
}

button { font: inherit; }

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(25, 20, 22, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(25, 20, 22, 0.035) 1px, transparent 1px);
  background-size: 8.5rem 8.5rem, 8.5rem 8.5rem;
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 82%, transparent);
}

.slat {
  position: absolute;
  height: 150vh;
  width: 1px;
  top: -20vh;
  background: linear-gradient(to bottom, transparent, rgba(122, 18, 49, 0.18), transparent);
  transform: rotate(12deg);
}

.slat-one { left: 14%; }
.slat-two { left: 62%; opacity: .55; }
.slat-three { left: 88%; opacity: .75; }

.heat-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sauna-cranberry), transparent);
  opacity: .14;
  transform-origin: left;
  animation: heatTravel 7.5s ease-in-out infinite;
}

.heat-line-one { top: 38%; }
.heat-line-two { top: 69%; animation-delay: -3s; }

.stream-shell { position: relative; z-index: 1; }

.chamber {
  min-height: 100vh;
  position: relative;
  padding: clamp(2rem, 5vw, 5rem);
}

.cold-open {
  display: grid;
  place-items: center;
  align-content: center;
  isolation: isolate;
}

.cold-open::after {
  content: "";
  position: absolute;
  width: min(72vw, 52rem);
  height: min(72vw, 52rem);
  border: 1px solid rgba(221, 232, 230, .8);
  border-radius: 50%;
  filter: blur(.2px);
  z-index: -1;
}

.kicker, .section-label, .pane-type {
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(25, 20, 22, .62);
}

h1 {
  margin: .9rem 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 8vw, 8.8rem);
  letter-spacing: -.07em;
  font-weight: 700;
  transform: translateX(-3vw);
}

.denial-line {
  max-width: 32rem;
  margin: 1.2rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.45rem);
  letter-spacing: -.025em;
}

.primary-bubble {
  width: clamp(3.8rem, 9vw, 7.8rem);
  height: clamp(3.8rem, 9vw, 7.8rem);
  border: 1px solid rgba(122, 18, 49, .48);
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .84), transparent 18%),
    radial-gradient(circle at 65% 72%, rgba(59, 7, 24, .36), transparent 24%),
    linear-gradient(145deg, rgba(122, 18, 49, .8), rgba(255, 216, 199, .42));
  box-shadow: inset 0 0 2rem rgba(255, 216, 199, .65), 0 1.4rem 4rem rgba(122, 18, 49, .25);
  animation: nervousBubble 2.4s ease-in-out infinite;
  position: relative;
}

.primary-bubble.popped { animation: popFlash .65s ease forwards; }
.bubble-glint { position: absolute; inset: 18% auto auto 24%; width: 22%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, .82); }

.tiny-bubbles span, .corner-bubbles i, .apology-droplets span, .merge-field span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(159, 217, 229, .62);
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.85), rgba(159,217,229,.16) 38%, rgba(159,217,229,.05));
  box-shadow: inset -.25rem -.45rem 1rem rgba(122, 18, 49, .08);
}

.tiny-bubbles span { width: .8rem; height: .8rem; animation: rise 6s ease-in-out infinite; opacity: .75; }
.tiny-bubbles span:nth-child(1) { left: 22%; bottom: 18%; animation-delay: .2s; }
.tiny-bubbles span:nth-child(2) { left: 34%; bottom: 13%; width: 1.2rem; height: 1.2rem; animation-delay: 1.1s; }
.tiny-bubbles span:nth-child(3) { left: 51%; bottom: 20%; animation-delay: 2.4s; }
.tiny-bubbles span:nth-child(4) { left: 66%; bottom: 16%; width: .55rem; height: .55rem; animation-delay: 3s; }
.tiny-bubbles span:nth-child(5) { left: 76%; bottom: 24%; width: 1.65rem; height: 1.65rem; animation-delay: 1.8s; }
.tiny-bubbles span:nth-child(6) { left: 45%; bottom: 9%; width: .6rem; height: .6rem; animation-delay: 4s; }

.thermometer {
  position: absolute;
  right: clamp(1.5rem, 5vw, 4rem);
  top: 12vh;
  display: grid;
  gap: .75rem;
}

.thermometer span { width: 2rem; height: 2px; background: var(--sauna-cranberry); transform-origin: right; opacity: .45; }
.thermometer span:nth-child(2n) { width: 1.1rem; }

.masonry-current { padding-top: 12vh; }
.masonry-wall { columns: 3 18rem; column-gap: clamp(1rem, 2vw, 2rem); max-width: 118rem; margin: 0 auto; }

.pane {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(1rem, 2vw, 2rem);
  padding: clamp(1.1rem, 2.6vw, 2.25rem);
  break-inside: avoid;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 1.8rem;
  backdrop-filter: blur(18px);
  box-shadow: 0 1.4rem 4rem rgba(25, 20, 22, .08);
  transform: translateY(5rem) rotate(var(--tilt, 0deg));
  opacity: 0;
  transition: transform .9s cubic-bezier(.19,1,.22,1), opacity .7s ease, filter .7s ease;
}

.pane.in-view { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
.pane:hover, .pane.disclosed { filter: saturate(1.1); }
.pane.disclosed .hidden-copy, .pane:hover .hidden-copy { opacity: 1; transform: translateY(0); filter: blur(0); }

.pane h2, .glass-panel h2, .final-card h2 {
  margin: .75rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 5.6rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.pane h3 { margin: 1.5rem 0 0; font-family: var(--font-display); font-size: clamp(2.8rem, 8vw, 7rem); letter-spacing: -.08em; }

.frost { background: rgba(247, 243, 234, .68); }
.vent { background: linear-gradient(180deg, var(--lingonberry-shadow), var(--sauna-cranberry)); color: var(--birch-white); min-height: 29rem; }
.water { background: rgba(159, 217, 229, .2); min-height: 32rem; }
.note { --tilt: -2.6deg; background: linear-gradient(145deg, rgba(255, 216, 199, .82), rgba(247, 243, 234, .7)); }
.tile { background: linear-gradient(130deg, rgba(221,232,230,.72), rgba(247,243,234,.55)); min-height: 20rem; }
.shadow { background: linear-gradient(160deg, rgba(25,20,22,.92), rgba(59,7,24,.92)); color: var(--birch-white); }
.tall { min-height: 34rem; }
.medium { min-height: 27rem; }
.short { min-height: 17rem; }
.wide { min-height: 24rem; }

.hidden-copy {
  margin: 1.4rem 0 0;
  font-family: var(--font-hand);
  font-size: clamp(2.1rem, 4vw, 4.7rem);
  line-height: .85;
  color: var(--sauna-cranberry);
  opacity: 0;
  transform: translateY(1rem);
  filter: blur(9px);
  transition: opacity .45s ease, transform .55s ease, filter .55s ease;
}

.vent .hidden-copy, .shadow .hidden-copy { color: var(--warm-steam); }
.script-line { font-family: var(--font-hand); font-size: clamp(2.2rem, 4vw, 4rem); line-height: .85; color: var(--sauna-cranberry); opacity: .16; filter: blur(6px); transition: .5s ease; }
.note:hover .script-line, .note.disclosed .script-line { opacity: 1; filter: blur(0); }

.heat-fill::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0;
  background: linear-gradient(0deg, rgba(255,216,199,.55), transparent);
  transition: height .7s ease;
}
.heat-fill:hover::before, .heat-fill.disclosed::before { height: 78%; }

.corner-bubbles i { width: 1rem; height: 1rem; right: 1rem; bottom: 1rem; animation: paneBubble 3.8s ease-in-out infinite; }
.corner-bubbles i:nth-child(2) { right: 2.7rem; animation-delay: .7s; width: .65rem; height: .65rem; }
.corner-bubbles i:nth-child(3) { right: 4rem; animation-delay: 1.5s; width: 1.35rem; height: 1.35rem; }

.rise-bubbles { position: absolute; inset: 1.5rem; }
.pop-bubble {
  position: absolute;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 1px solid rgba(159, 217, 229, .8);
  color: var(--lingonberry-shadow);
  cursor: pointer;
  background: radial-gradient(circle at 35% 20%, white, rgba(159,217,229,.34) 34%, rgba(247,243,234,.12));
  box-shadow: inset 0 0 1.2rem rgba(255,255,255,.76), 0 .8rem 2rem rgba(159,217,229,.25);
  animation: bubbleDrift 4.6s ease-in-out infinite;
}
.pop-bubble:nth-child(1) { left: 6%; bottom: 10%; }
.pop-bubble:nth-child(2) { right: 12%; top: 18%; animation-delay: -1.1s; width: 5rem; height: 5rem; }
.pop-bubble:nth-child(3) { left: 35%; top: 43%; animation-delay: -2s; width: 6rem; height: 6rem; }
.pop-bubble span { font-family: var(--font-hand); font-size: 2.2rem; }
.pop-bubble.popped { transform: scale(1.7); opacity: 0; pointer-events: none; transition: .35s ease; }

.subtitle-runner { margin-top: 2rem; display: grid; gap: .7rem; font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 2.3rem); }
.subtitle-runner span { width: max-content; max-width: 100%; padding: .5rem .8rem; background: rgba(255, 255, 255, .48); border-radius: 999px; animation: subtitleFloat 5s ease-in-out infinite; }
.subtitle-runner span:nth-child(2) { animation-delay: -1.5s; margin-left: auto; }
.subtitle-runner span:nth-child(3) { animation-delay: -3s; }

.silhouette { height: 14rem; margin-top: 2rem; border-radius: 45% 45% 0 0; background: radial-gradient(ellipse at center, rgba(255,216,199,.22), transparent 62%); filter: blur(4px); }

.wipe-pane::after, .glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--wipe-x, 50%) var(--wipe-y, 50%), transparent 0 6rem, rgba(221,232,230,.76) 9rem),
    repeating-linear-gradient(105deg, rgba(255,255,255,.18), rgba(255,255,255,.18) 1px, transparent 1px, transparent 9px);
  transition: opacity .35s ease;
  pointer-events: none;
}
.wipe-pane:hover::after, .glass-panel:hover::after { opacity: .58; }
.steam-writing { position: relative; z-index: 1; margin-top: 2rem; font-family: var(--font-hand); font-size: clamp(2.6rem, 5vw, 5.6rem); color: var(--sauna-cranberry); }
.wipe-orb { position: absolute; width: 8rem; height: 8rem; border-radius: 50%; background: rgba(255,255,255,.18); transform: translate(-50%, -50%); left: var(--wipe-x, 50%); top: var(--wipe-y, 50%); z-index: 2; pointer-events: none; }

.steam-interlude { display: grid; place-items: center; }
.glass-panel {
  position: relative;
  width: min(94vw, 76rem);
  min-height: 72vh;
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  border-radius: 3rem;
  border: 1px solid rgba(255,255,255,.76);
  background: linear-gradient(135deg, rgba(221,232,230,.72), rgba(247,243,234,.55));
  box-shadow: 0 2rem 7rem rgba(25,20,22,.12);
  backdrop-filter: blur(22px);
}
.glass-denial { font-size: clamp(1.1rem, 1.7vw, 1.5rem); max-width: 38rem; }
.hidden-handwriting { position: absolute; right: 7%; bottom: 13%; max-width: 34rem; font-family: var(--font-hand); font-size: clamp(3rem, 7vw, 7rem); line-height: .78; color: var(--sauna-cranberry); transform: rotate(-4deg); text-shadow: 0 0 1rem var(--warm-steam); }
.handprint { position: absolute; left: 9%; bottom: 12%; width: 14rem; height: 17rem; border-radius: 48% 52% 42% 42%; background: rgba(255,255,255,.22); filter: blur(6px); }

.apology-droplets span { width: .7rem; height: 2.8rem; border-radius: 999px; background: linear-gradient(var(--bubble-blue), transparent); animation: droplet 4s ease-in infinite; }
.apology-droplets span:nth-child(1) { left: 18%; top: 30%; }
.apology-droplets span:nth-child(2) { left: 72%; top: 24%; animation-delay: -1.4s; }
.apology-droplets span:nth-child(3) { left: 83%; top: 62%; animation-delay: -.5s; }
.apology-droplets span:nth-child(4) { left: 31%; top: 75%; animation-delay: -2.3s; }

.overflow-finale { display: grid; place-items: center; overflow: hidden; }
.cranberry-current { position: absolute; inset: auto 0 0; height: var(--current-height, 26%); background: linear-gradient(180deg, rgba(122,18,49,.05), var(--sauna-cranberry) 44%, var(--lingonberry-shadow)); transition: height .9s cubic-bezier(.19,1,.22,1); }
.overflow-finale.flooded .cranberry-current { height: 100%; }
.merge-field span { width: clamp(4rem, 8vw, 10rem); height: clamp(4rem, 8vw, 10rem); animation: mergeRise 8s ease-in-out infinite; }
.merge-field span:nth-child(1) { left: 12%; bottom: 5%; }
.merge-field span:nth-child(2) { left: 28%; bottom: 12%; animation-delay: -1s; }
.merge-field span:nth-child(3) { left: 47%; bottom: 6%; animation-delay: -2.1s; }
.merge-field span:nth-child(4) { left: 63%; bottom: 18%; animation-delay: -3.2s; }
.merge-field span:nth-child(5) { left: 78%; bottom: 8%; animation-delay: -4s; }
.merge-field span:nth-child(6) { left: 88%; bottom: 28%; animation-delay: -5.1s; }

.final-card {
  position: relative;
  width: min(90vw, 68rem);
  padding: clamp(2rem, 5vw, 4.6rem);
  border-radius: 2.6rem;
  background: rgba(247, 243, 234, .82);
  box-shadow: 0 2rem 8rem rgba(59,7,24,.18);
  backdrop-filter: blur(22px);
}
.warm-line { margin: 1rem 0 2rem; font-family: var(--font-hand); color: var(--sauna-cranberry); font-size: clamp(2.2rem, 5vw, 5.2rem); line-height: .85; }
.narrative-cue { border: 0; border-radius: 999px; padding: .9rem 1.25rem; cursor: pointer; color: var(--birch-white); background: var(--lingonberry-shadow); box-shadow: 0 1rem 2.5rem rgba(59,7,24,.2); transition: transform .25s ease, background .25s ease; }
.narrative-cue:hover { transform: translateY(-3px); background: var(--sauna-cranberry); }

@keyframes nervousBubble { 0%,100% { transform: translateY(0) scale(1); } 25% { transform: translate(3px,-4px) scale(1.02); } 50% { transform: translate(-2px,2px) scale(.98); } 75% { transform: translate(2px,-1px) scale(1.01); } }
@keyframes rise { 0% { transform: translateY(0) scale(.7); opacity: 0; } 20% { opacity: .85; } 100% { transform: translateY(-38vh) scale(1.25); opacity: 0; } }
@keyframes paneBubble { 0%,100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-4rem); opacity: 1; } }
@keyframes bubbleDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1rem) translateX(.5rem); } }
@keyframes subtitleFloat { 0%,100% { transform: translateX(0); } 50% { transform: translateX(1.2rem); } }
@keyframes droplet { 0% { transform: translateY(-3rem); opacity: 0; } 20% { opacity: .8; } 100% { transform: translateY(12rem); opacity: 0; } }
@keyframes mergeRise { 0% { transform: translateY(18vh) scale(.75); opacity: 0; } 45% { opacity: .8; } 100% { transform: translateY(-85vh) scale(1.4); opacity: 0; } }
@keyframes heatTravel { 0%,100% { transform: scaleX(.1); opacity: .04; } 50% { transform: scaleX(1); opacity: .22; } }
@keyframes popFlash { 0% { transform: scale(1); opacity: 1; } 72% { transform: scale(1.55); opacity: .35; } 100% { transform: scale(.86); opacity: 1; } }

@media (max-width: 720px) {
  .chamber { padding: 1.25rem; }
  h1 { transform: none; }
  .masonry-wall { columns: 1; }
  .pane { border-radius: 1.25rem; }
  .glass-panel, .final-card { border-radius: 1.6rem; }
}