/* THE SECOND SUMMER — Second Summer Air Co. (fictional) · HVAC flagship world.
   Thesis: in Houston, summer comes back — the film cools from scorch to evening
   as one missed call becomes an answered one. Color temperature IS the story.
   World tokens only; engine mechanics live in ../../assets/scrollstory.css. */

:root {
  --scorch: #140b06;        /* burnt near-black ground of the heat world */
  --ember: #c96f2a;         /* Houston heat amber */
  --ember-deep: #8a4514;
  --haze: #f2d9b8;          /* hot-light text */
  --cool: #0e3b3a;          /* conditioned deep teal */
  --cool-deep: #092523;
  --frost: #d9ece8;         /* cool-light text */
  --signal-hot: #ff9d57;    /* the unanswered call */
  --signal-cool: #7fe0d4;   /* the carried call */
  --white: #ffffff;
  --w-display: "Bodoni MT", "Didot", "Playfair Display", "Georgia", serif;
  --w-body: "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--scorch);
  color: var(--haze);
  font-family: var(--w-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- chrome over the film (white + scrim, never cream) ---------- */

.skip-link { position: absolute; left: -999px; top: 0; z-index: 40; background: #000; color: #fff; padding: 0.6rem 1rem; font-weight: 700; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.private-banner {
  position: relative; z-index: 30;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: #000; color: #fff;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.45rem clamp(1.25rem, 4vw, 3rem);
}

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  color: #fff;
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 180%; z-index: -1;
  background: linear-gradient(to bottom, rgba(8, 4, 2, 0.62), rgba(8, 4, 2, 0));
  pointer-events: none;
}
.site-header a { color: #fff; text-decoration: none; text-shadow: 0 1px 22px rgba(0, 0, 0, 0.55); }
.w-brand { font-family: var(--w-display); font-size: 1.15rem; letter-spacing: 0.02em; font-weight: 500; }
.w-brand small { display: block; font-family: var(--w-body); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; }
.header-links { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; }
.header-links a { font-size: 0.82rem; font-weight: 700; }
.header-links a:hover, .header-links a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.exit-demo {
  border: 1px solid rgba(255, 255, 255, 0.75); padding: 0.45rem 0.75rem;
  font-size: 0.68rem !important; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
:focus-visible { outline: 2px solid var(--signal-cool); outline-offset: 3px; }

/* ---------- the film ---------- */

.film { background: var(--scorch); }
.film-stage { background: var(--scorch); }

/* world ground shifts amber -> teal with overall film progress (--film-p set by world.js) */
.world-ground {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(201, 111, 42, 0.5), transparent 60%),
    linear-gradient(180deg, #2a1509, var(--scorch) 55%);
  opacity: calc(1 - var(--film-p, 0));
}
.world-ground--cool {
  background:
    radial-gradient(120% 100% at 30% 100%, rgba(20, 90, 86, 0.55), transparent 60%),
    linear-gradient(180deg, #0a2f2d, var(--cool-deep) 60%);
  opacity: var(--film-p, 0);
}

/* film grain — pure SVG turbulence, no requests */
.grain {
  position: absolute; inset: -60%; z-index: 6; pointer-events: none; opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* the temperature line — narrative spine across the whole film */
.temp-line { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.temp-line path {
  fill: none; stroke-width: 2.5;
  stroke: color-mix(in srgb, var(--signal-hot) calc((1 - var(--film-p, 0)) * 100%), var(--signal-cool));
  stroke-dasharray: 1600;
  stroke-dashoffset: calc(1600 - var(--film-p, 0) * 1600);
  filter: drop-shadow(0 0 6px rgba(255, 157, 87, 0.35));
}
html.rm .temp-line path, html:not(.js) .temp-line path { stroke-dashoffset: 0; stroke: var(--signal-cool); }

/* ---------- scene 1 · SCORCH ---------- */

.sun {
  position: absolute; z-index: 1; top: 8vh; right: 10vw; width: min(44vh, 44vw); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffb469 0%, #e57c2a 45%, rgba(201, 111, 42, 0) 72%);
  transform: translateY(calc(var(--pl, 0) * 16vh)) scale(calc(1 + var(--p, 0) * 0.15));
  filter: saturate(1.1);
}
.scene-1 .scene-copy { position: absolute; z-index: 5; left: clamp(1.25rem, 6vw, 6rem); bottom: 14vh; max-width: 46rem; }
.w-kicker {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--signal-hot); margin: 0 0 1.2rem;
}
.scene--cooling .w-kicker, .scene--cool .w-kicker { color: var(--signal-cool); }
.w-display {
  font-family: var(--w-display); font-weight: 500; line-height: 0.94; letter-spacing: -0.015em;
  font-size: clamp(3.4rem, 11vw, 9rem); margin: 0 0 1.2rem; color: var(--white);
  text-wrap: balance;
}
.w-display em { font-style: italic; color: var(--signal-hot); }
.scene--cool .w-display em, .scene--finale .w-display em { color: var(--signal-cool); }
.w-lede { max-width: 34rem; font-size: 1.12rem; color: var(--haze); }
.scene--cool .w-lede, .scene--finale .w-lede { color: var(--frost); }

.heat-shimmer {
  position: absolute; inset: 55% 0 0 0; z-index: 2; pointer-events: none;
  backdrop-filter: blur(calc((1 - var(--film-p, 0)) * 1.6px));
  opacity: calc(1 - var(--film-p, 0));
}
html.rm .heat-shimmer, html:not(.js) .heat-shimmer { display: none; }

/* ---------- scene 2 · THE CALL ---------- */

.ringburst { position: absolute; z-index: 2; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 0; height: 0; }
.ringburst i {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 2px solid var(--signal-hot);
  width: calc(var(--p, 0) * var(--ring-size)); height: calc(var(--p, 0) * var(--ring-size));
  transform: translate(-50%, -50%);
  opacity: calc(0.9 - var(--p, 0) * 0.85);
}
.ringburst i:nth-child(1) { --ring-size: 46vmin; }
.ringburst i:nth-child(2) { --ring-size: 72vmin; transition-delay: 0.1s; }
.ringburst i:nth-child(3) { --ring-size: 100vmin; }
html.rm .ringburst i, html:not(.js) .ringburst i { width: var(--ring-size); height: var(--ring-size); opacity: 0.12; }

.ring-count {
  position: absolute; z-index: 5; left: 50%; top: 44%; transform: translate(-50%, -50%);
  font-family: var(--w-display); font-size: clamp(5rem, 16vw, 12rem); color: var(--white);
  font-variant-numeric: tabular-nums;
}

/* ---------- scene 3 · THE ANSWER ---------- */

.relay-strip { position: absolute; z-index: 4; left: 50%; top: 56%; transform: translateX(-50%); width: min(80vw, 60rem); }
.relay-strip svg { width: 100%; height: auto; overflow: visible; }
.relay-strip .track { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; stroke-dasharray: 6 7; fill: none; }
.relay-strip .carried {
  stroke: var(--signal-cool); stroke-width: 3; fill: none;
  stroke-dasharray: 800; stroke-dashoffset: calc(800 - var(--p, 0) * 800);
  filter: drop-shadow(0 0 8px rgba(127, 224, 212, 0.5));
}
.relay-strip .dot {
  fill: color-mix(in srgb, var(--signal-hot) calc((1 - var(--p, 0)) * 100%), var(--signal-cool));
  offset-path: path("M10 70 C 190 70, 260 20, 430 20 C 560 20, 620 60, 790 60");
  offset-distance: calc(var(--p, 0) * 100%);
  r: 7;
}
html.rm .relay-strip .carried, html:not(.js) .relay-strip .carried { stroke-dashoffset: 0; }
html.rm .relay-strip .dot, html:not(.js) .relay-strip .dot { offset-distance: 100%; }

.capture-chips { position: absolute; z-index: 5; left: 50%; top: 66%; transform: translateX(-50%); display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; width: min(84vw, 56rem); }
.capture-chips span {
  border: 1px solid rgba(255, 255, 255, 0.4); color: var(--white);
  background: rgba(9, 37, 35, 0.55); backdrop-filter: blur(3px);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 14px));
}
html.rm .capture-chips span, html:not(.js) .capture-chips span { opacity: 1; transform: none; }

/* ---------- scene 4 · THE COOL ---------- */

.house { position: absolute; z-index: 2; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(70vw, 46rem); }
.house svg { width: 100%; height: auto; }
.house .frame { stroke: rgba(217, 236, 232, 0.55); stroke-width: 2; fill: none; }
.house .cool-fill {
  fill: rgba(127, 224, 212, 0.14);
  transform-origin: 50% 0%;
  transform: scaleY(var(--p, 0));
}
html.rm .house .cool-fill, html:not(.js) .house .cool-fill { transform: none; }

/* ---------- scene 5 · FINALE ---------- */

.scene--finale .scene-copy { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 60rem; width: calc(100% - 2.5rem); }
.wordmark { font-family: var(--w-display); font-weight: 500; color: var(--white); font-size: clamp(2.8rem, 9vw, 7.5rem); line-height: 0.96; letter-spacing: 0.01em; margin: 0 0 1rem; }
.wordmark small { display: block; font-family: var(--w-body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: var(--signal-cool); margin-top: 1.1rem; }

/* fiction stamp — set ON the film, never striking through copy */
.fiction-stamp {
  display: inline-block; margin-top: 2rem; transform: rotate(-2deg);
  border: 2px solid var(--signal-hot); color: var(--signal-hot); background: rgba(20, 11, 6, 0.8);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; line-height: 1.35; padding: 0.5rem 0.8rem;
}
.fiction-stamp small { display: block; font-size: 0.56rem; letter-spacing: 0.06em; }

/* ---------- beats ---------- */

.beat { color: var(--white); }
.beat::before {
  content: ""; position: absolute; z-index: -1; inset: -55% -20% -55% -12%;
  background: radial-gradient(60% 58% at 22% 50%, rgba(6, 3, 1, 0.62), rgba(6, 3, 1, 0.34) 45%, transparent 78%);
}
.beat h2 { font-family: var(--w-display); font-weight: 500; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.beat p { font-size: 1.02rem; margin: 0; opacity: 0.92; max-width: 26rem; }
.beat--tl { left: clamp(1.25rem, 6vw, 6rem); top: 22vh; }
.beat--bl { left: clamp(1.25rem, 6vw, 6rem); bottom: 14vh; }
.beat--br { right: clamp(1.25rem, 6vw, 6rem); bottom: 16vh; text-align: right; }
.beat--tr { right: clamp(1.25rem, 6vw, 6rem); top: 22vh; text-align: right; }
.beat--tr::before { inset: -55% -12% -55% -20%; background: radial-gradient(60% 58% at 78% 50%, rgba(6, 3, 1, 0.62), rgba(6, 3, 1, 0.34) 45%, transparent 78%); }
.beat--br::before { inset: -55% -12% -55% -20%; background: radial-gradient(60% 58% at 78% 50%, rgba(6, 3, 1, 0.62), rgba(6, 3, 1, 0.34) 45%, transparent 78%); }

/* ---------- after-film sections ---------- */

.section { min-height: min(92vh, 900px); display: grid; align-content: center; padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem); border-top: 1px solid rgba(217, 236, 232, 0.14); }
.section .wrap { max-width: 72rem; width: 100%; margin: 0 auto; }
.after-film { background: var(--cool-deep); color: var(--frost); }

.sec-kicker { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--signal-cool); margin: 0 0 1.3rem; }
.sec-display { font-family: var(--w-display); font-weight: 500; color: var(--white); font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -0.01em; margin: 0 0 1.4rem; text-wrap: balance; }
.sec-lede { color: var(--frost); opacity: 0.88; max-width: 36rem; font-size: 1.08rem; }

.desk-jobs { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.desk-jobs li { border-top: 2px solid var(--signal-cool); padding-top: 1rem; }
.desk-jobs h3 { font-family: var(--w-body); font-size: 0.98rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--white); }
.desk-jobs p { font-size: 0.9rem; margin: 0; opacity: 0.8; }

/* challenge card (scripted; local state only) */
.challenge { border: 1px solid rgba(217, 236, 232, 0.25); background: rgba(9, 37, 35, 0.5); margin-top: 2.6rem; }
.challenge-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.6rem; border-bottom: 1px solid rgba(217, 236, 232, 0.18); }
.challenge-head h3 { font-family: var(--w-display); font-weight: 500; font-size: 1.5rem; margin: 0; color: var(--white); }
.challenge-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-hot); border: 1px solid var(--signal-hot); padding: 0.3rem 0.55rem; }
.challenge-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1.1rem 1.6rem; border-bottom: 1px solid rgba(217, 236, 232, 0.18); }
.challenge-chips [role="tab"] {
  border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: var(--white); cursor: pointer;
  font: 700 0.78rem/1.3 var(--w-body); letter-spacing: 0.03em; padding: 0.6rem 0.85rem; min-height: 2.75rem; text-align: left;
}
.challenge-chips [role="tab"][aria-selected="true"] { background: var(--frost); color: var(--cool-deep); border-color: var(--frost); }
.challenge-body { padding: 1.6rem; }
.exchange { margin: 0; display: grid; gap: 0.9rem; }
.exchange .line { display: grid; grid-template-columns: 6.2rem 1fr; gap: 1rem; align-items: start; }
.exchange dt { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.7; padding-top: 0.5rem; }
.exchange dd { margin: 0; padding: 0.6rem 0.9rem; font-size: 0.97rem; }
.exchange .line--caller dd { border: 1px solid rgba(217, 236, 232, 0.3); }
.exchange .line--desk dd { background: var(--frost); color: var(--cool-deep); }
.exchange .line--limit dd { border: 1px dashed var(--signal-cool); }
.challenge-note { padding: 1rem 1.6rem; border-top: 1px solid rgba(217, 236, 232, 0.18); font-size: 0.85rem; opacity: 0.75; margin: 0; }

/* boundary + close */
.demo-boundary { background: #071d1b; }
.boundary-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.8rem; max-width: 40rem; }
.boundary-list li { border-top: 1px solid rgba(217, 236, 232, 0.2); padding-top: 0.8rem; font-size: 0.96rem; font-weight: 600; }

.close { text-align: center; background: var(--cool-deep); }
.close .sec-display { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
.primary-action {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; margin-top: 1.6rem;
  background: var(--signal-cool); color: var(--cool-deep); border: 0; cursor: pointer;
  padding: 1rem 1.7rem; font-family: var(--w-body);
  box-shadow: 0 0 0 1px rgba(127, 224, 212, 0.4), 0 0 34px rgba(127, 224, 212, 0.25);
}
.primary-action span { font-size: 1.05rem; font-weight: 800; }
.primary-action small { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.primary-action:hover, .primary-action:focus-visible { box-shadow: 0 0 0 1px rgba(127, 224, 212, 0.7), 0 0 48px rgba(127, 224, 212, 0.4); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .primary-action:hover { transform: none; } }
.separate-product { margin-top: 2.2rem; font-size: 0.85rem; opacity: 0.75; max-width: 34rem; margin-left: auto; margin-right: auto; }

.site-footer { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.4rem clamp(1.25rem, 6vw, 6rem); border-top: 1px solid rgba(217, 236, 232, 0.14); font-size: 0.78rem; color: var(--frost); opacity: 0.8; background: var(--cool-deep); }

/* boundary dialog */
dialog.boundary { border: 1px solid var(--frost); background: var(--cool-deep); color: var(--frost); padding: 2.2rem; }
dialog.boundary h2 { font-family: var(--w-display); font-weight: 500; color: var(--white); font-size: 1.7rem; margin: 0 0 0.8rem; }
dialog.boundary p { font-size: 0.95rem; opacity: 0.85; }
.dialog-close { position: absolute; top: 0.6rem; right: 0.8rem; border: 0; background: transparent; font-size: 1.7rem; cursor: pointer; color: var(--frost); }
.dialog-confirm { border: 1px solid var(--frost); background: var(--frost); color: var(--cool-deep); padding: 0.8rem 1.1rem; font-weight: 800; cursor: pointer; margin-top: 0.6rem; }

/* ---------- responsive ---------- */

@media (max-width: 768px) {
  .w-display { font-size: clamp(2.7rem, 13vw, 4.6rem); }
  .beat { max-width: min(86vw, 26rem); }
  .beat--br { text-align: left; right: auto; left: 1.25rem; }
  .desk-jobs { grid-template-columns: 1fr 1fr; }
  .exchange .line { grid-template-columns: 1fr; gap: 0.3rem; }
  .exchange dt { padding-top: 0; }
  .sun { right: 4vw; top: 12vh; }
  .relay-strip { top: 58%; }
  .capture-chips { top: 74%; }
}
@media (max-width: 480px) {
  .desk-jobs { grid-template-columns: 1fr; }
  .header-links a:not(.exit-demo) { display: none; }
}

/* ---------- cinematic layer: WebGL sky + parallax rooflines + 3D house ---------- */

.gl-sky { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
html.gl .world-ground, html.gl .world-ground--cool { display: none; }
html.gl .sun { display: none; }
html.gl .heat-shimmer { display: none; }

/* silhouetted Houston rooflines, three depths (engine drives --shift via data-depth) */
.roofline { position: absolute; left: -4%; right: -4%; width: 108%; bottom: 0; z-index: 2; pointer-events: none; }
.roofline--far  { height: 26vh; opacity: 0.55; }
.roofline--far path  { fill: #241207; }
.roofline--mid  { height: 32vh; opacity: 0.8; }
.roofline--mid path  { fill: #170b04; }
.roofline--near { height: 38vh; }
.roofline--near path { fill: #0b0502; }
html.rm .roofline, html:not(.js) .roofline { position: relative; height: 10vh; display: block; }

/* ray-marched hero object canvas (desktop full-motion); CSS rig is the fallback */
.gl-obj { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
html.globj .house3d { display: none; }

/* the 3D house — a glass architectural model the camera orbits */
.house3d { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; perspective: 1300px; perspective-origin: 50% 30%; }
.h3-rig {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate(-50%, -46%)
             rotateX(calc(-14deg + var(--p, 0) * 6deg))
             rotateY(calc(-42deg + var(--p, 0) * 74deg))
             scale(calc(0.72 + var(--p, 0) * 0.4));
}
.h3-face, .h3-slab {
  position: absolute; left: 0; top: 0;
  background: rgba(14, 59, 58, 0.16);
  border: 1.5px solid rgba(127, 224, 212, 0.75);
  box-shadow: inset 0 0 34px rgba(127, 224, 212, 0.12);
  backface-visibility: visible;
}
/* THE EXPLODED CONDENSER — industry-specific 3D. Layers hang exploded in the heat
   and close into one working unit as the film cools (--p closes the gaps). */
.cd-layer, .cd-ring, .cd-house { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.cd-gap { }
.cd-grille {
  width: 300px; height: 300px; transform-origin: 50% 0;
  transform: translate(-150px, calc(-96px - (1 - var(--p, 0)) * var(--k) * 1px)) rotateX(90deg);
  background: repeating-linear-gradient(90deg, rgba(127, 224, 212, 0.55) 0 3px, transparent 3px 21px);
  border: 1.5px solid rgba(127, 224, 212, 0.75); box-shadow: inset 0 0 34px rgba(127, 224, 212, 0.12);
}
.cd-fanx, .cd-fany {
  width: 240px; height: 70px;
  background: linear-gradient(90deg, rgba(127, 224, 212, 0.5), rgba(127, 224, 212, 0.08) 45%, rgba(127, 224, 212, 0.5));
  border: 1.5px solid rgba(127, 224, 212, 0.6);
}
.cd-fanx { transform: translate(-120px, calc(-66px - (1 - var(--p, 0)) * var(--k) * 1px)) rotateY(calc(var(--p, 0) * 540deg)); }
.cd-fany { transform: translate(-120px, calc(-66px - (1 - var(--p, 0)) * var(--k) * 1px)) rotateY(calc(90deg + var(--p, 0) * 540deg)); }
.cd-ring { width: 0; height: 0; transform: translateY(calc(12px - (1 - var(--p, 0)) * var(--k) * 1px)); }
.cd-ring i {
  position: absolute; left: -62px; top: -45px; width: 124px; height: 90px;
  background: rgba(14, 59, 58, 0.18);
  border: 1.5px solid rgba(127, 224, 212, 0.55);
  background-image: repeating-linear-gradient(180deg, rgba(127, 224, 212, 0.35) 0 2px, transparent 2px 10px);
}
.cd-ring i:nth-child(1) { transform: rotateY(0deg)   translateZ(150px); }
.cd-ring i:nth-child(2) { transform: rotateY(45deg)  translateZ(150px); }
.cd-ring i:nth-child(3) { transform: rotateY(90deg)  translateZ(150px); }
.cd-ring i:nth-child(4) { transform: rotateY(135deg) translateZ(150px); }
.cd-ring i:nth-child(5) { transform: rotateY(180deg) translateZ(150px); }
.cd-ring i:nth-child(6) { transform: rotateY(225deg) translateZ(150px); }
.cd-ring i:nth-child(7) { transform: rotateY(270deg) translateZ(150px); }
.cd-ring i:nth-child(8) { transform: rotateY(315deg) translateZ(150px); }
.cd-house { width: 0; height: 0; }
.h3-front { width: 340px; height: 84px; transform: translate(-170px, 66px) translateZ(130px); }
.h3-back  { width: 340px; height: 84px; transform: translate(-170px, 66px) translateZ(-130px); }
.h3-left  { width: 260px; height: 84px; transform: translate(-130px, 66px) rotateY(90deg) translateZ(170px); }
.h3-right { width: 260px; height: 84px; transform: translate(-130px, 66px) rotateY(90deg) translateZ(-170px); }
.h3-slab  { width: 380px; height: 300px; transform-origin: 50% 0; transform: translate(-190px, 152px) translateZ(150px) rotateX(90deg); background: rgba(9, 37, 35, 0.55); border-color: rgba(127, 224, 212, 0.3); }
/* the hot core: glows amber inside the exploded stack, cools with the film */
.cd-house::before {
  content: ""; position: absolute; left: -60px; top: 30px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, rgba(255, 157, 87, 0.85) calc((1 - var(--film-p, 0)) * 100%), rgba(127, 224, 212, 0.75)), transparent 70%);
  filter: blur(6px);
  transform: translateY(calc(-40px - (1 - var(--p, 0)) * 30px));
}
.h3-shadow {
  position: absolute; left: 0; top: 128px; width: 520px; height: 120px;
  transform: translate(-50%, 0);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5), transparent 70%);
}
html.rm .house3d, html:not(.js) .house3d { position: relative; left: auto; top: auto; width: 100%; height: 60vh; perspective: none; display: grid; place-items: center; }
html.rm .h3-rig, html:not(.js) .h3-rig { position: relative; transform: rotateX(-14deg) rotateY(-30deg) scale(0.9); }
@media (max-width: 768px) {
  .h3-rig { transform: translate(-50%, -46%) rotateX(calc(-14deg + var(--p, 0) * 6deg)) rotateY(calc(-42deg + var(--p, 0) * 74deg)) scale(calc(0.45 + var(--p, 0) * 0.28)); }
}

/* scene-copy hands off before the beats arrive (no text-over-text) */
.scene-1 .scene-copy { opacity: calc(1 - clamp(0, (var(--pl, 0) - 0.32) * 2.4, 1)); }
html.rm .scene-1 .scene-copy, html:not(.js) .scene-1 .scene-copy { opacity: 1; }