/* =============================================================
   AWARD — top-layer design polish.
   Loaded LAST. Overrides / enhances everything for an editorial,
   awwwards-style finish. Safe to disable by removing the link.
   ============================================================= */

/* -------- Global atmosphere ---------------------------------- */

:root {
  --award-grain-opacity: 0.06;
  --award-vignette: 0 0 180px 40px rgba(0,0,0,0.55) inset;
}

html { scroll-behavior: smooth; }
body { overscroll-behavior-y: none; }

/* Film grain overlay — fixed, screen-blended, masks banding */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
  opacity: var(--award-grain-opacity);
  mix-blend-mode: overlay;
}

/* Selection — warm terracotta wash */
::selection { background: rgba(198,93,58,0.35); color: #fff8f0; }

/* -------- Scroll progress — hairline rainbow on top --------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #c65d3a, #e8c65a, #7ba05b, #3a5a78, #7a45a5);
  box-shadow: 0 0 12px rgba(198,93,58,0.5);
  z-index: 10000;
  transition: width 80ms linear;
  mix-blend-mode: difference;
}

/* -------- Custom cursor — blend-difference ring -------------- */
.cursor.dot {
  width: 6px; height: 6px;
  background: #fff;
  mix-blend-mode: difference;
  box-shadow: 0 0 12px rgba(255,255,255,0.5);
}
.cursor.ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.8);
  mix-blend-mode: difference;
  transition: transform 180ms cubic-bezier(0.2,0.7,0.2,1),
              width 220ms ease, height 220ms ease, border-color 220ms ease;
}

/* -------- Act-label — editorial corner marker ---------------- */
.act-label {
  font-family: var(--lw-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.act-label::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.act-label .act-number {
  font-feature-settings: "tnum";
  opacity: 0.85;
  margin-right: 0;
}

/* -------- Eyebrow — add leading rule ------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--lw-font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* -------- Headings — lift the italic serif ------------------- */
.h-display, .h-section {
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1 !important;
  text-wrap: balance;
}
em {
  font-feature-settings: "ss01";
  /* slight optical shift for italic swashes */
  transform: translateY(1px);
  display: inline-block;
}

/* -------- Act seam — bloom between sections ------------------ */
.act + .act::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0; height: 80px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,255,255,0.06), transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* -------- Vignette for dark acts ----------------------------- */
.act--storm::after,
.act--wave::after,
.act--threed::after,
.act--kinetic::after,
.act--goo::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: var(--award-vignette);
  pointer-events: none;
  z-index: 1;
}

/* -------- Figure cells — lift on hover ----------------------- */
.figure-cell {
  position: relative;
  transition: transform 480ms cubic-bezier(0.2,0.7,0.2,1);
  isolation: isolate;
}
.figure-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  pointer-events: none;
  transition: border-color 320ms ease, box-shadow 320ms ease;
}
.figure-cell:hover {
  transform: translateY(-4px);
}
.figure-cell:hover::before {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 0 40px rgba(255,255,255,0.03);
}
.figure-label {
  font-family: var(--lw-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  opacity: 0.55;
  transition: opacity 240ms ease, letter-spacing 240ms ease;
}
.figure-cell:hover .figure-label {
  opacity: 1;
  letter-spacing: 0.28em !important;
}

/* -------- Geometry garden — crisper cards -------------------- */
.geo-card {
  position: relative;
  transition: transform 420ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 420ms ease;
  border: 1px solid color-mix(in oklab, var(--lw-ink, #1a1613) 8%, transparent);
  background: color-mix(in oklab, var(--lw-paper, #f5efe4) 96%, var(--lw-ink, #1a1613) 4%);
}
.geo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 140% 80% at 50% 0%, rgba(255,255,255,0.35), transparent 55%);
  opacity: 0;
  transition: opacity 320ms ease;
}
.geo-card:hover {
  transform: translateY(-6px) rotate(-0.2deg);
  box-shadow: 0 24px 60px rgba(60,40,20,0.18), 0 4px 12px rgba(60,40,20,0.08);
}
.geo-card:hover::after { opacity: 1; }
.geo-card .label {
  font-family: var(--lw-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
}

/* -------- Storm — richer atmospheric gradient ---------------- */
.act--storm .storm-sky {
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(198,93,58,0.12), transparent 65%),
    radial-gradient(ellipse 120% 80% at 50% 0%, #0a0e17, #05070c 60%, #02030a);
}

/* -------- Wave — deeper mood -------------------------------- */
.act--wave {
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, #1a2538 0%, #0a1018 60%, #05080d);
}

/* -------- Becalmed — painterly light ------------------------ */
.act--becalmed {
  background:
    radial-gradient(ellipse 140% 80% at 50% 40%, #f8f0dd 0%, #e8dcc2 50%, #d8c9ab 100%);
}
.act--becalmed::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 40% 30% at 50% 35%, rgba(255,248,215,0.6), transparent 70%);
  pointer-events: none;
}
.becalmed-title {
  font-variation-settings: "opsz" 144, "SOFT" 100 !important;
}

/* -------- Kinetic — layered text shimmer ---------------------- */
.kinetic-title {
  background: linear-gradient(180deg, #f5efe4 0%, #e8a88f 60%, #c65d3a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 30px rgba(198,93,58,0.25));
}
.kinetic-marquee {
  font-family: var(--lw-font-serif);
  font-style: italic;
}
.kinetic-marquee em { color: var(--lw-terra); }

/* -------- Goo — richer backdrop ------------------------------ */
.act--goo {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, #1c0e1a 0%, #0a0610 70%, #02010a);
}

/* -------- Calm — fade into cream ----------------------------- */
.act--calm {
  background:
    linear-gradient(180deg, #f8f0dd 0%, #f5efe4 100%);
}
.calm-title em {
  background: linear-gradient(135deg, var(--lw-terra), var(--lw-terra-deep));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.calm-rule {
  width: 64px;
  height: 1px;
  background: var(--lw-terra);
  margin: 40px auto;
  opacity: 0.6;
}

/* -------- Footer — editorial lockup ------------------------- */
.footer {
  background: #0a0810;
  color: rgba(255,255,255,0.85);
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,93,58,0.8), transparent);
}
.footer-wordmark {
  font-family: var(--lw-font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(80px, 14vw, 200px);
  letter-spacing: -0.05em;
  line-height: 0.9;
  background: linear-gradient(180deg, #f5efe4 0%, rgba(245,239,228,0.3) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.footer-wordmark .dot { color: var(--lw-terra); -webkit-text-fill-color: var(--lw-terra); }
.footer-cols h4 {
  font-family: var(--lw-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}
.footer-cols a {
  display: block;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease, padding-left 240ms cubic-bezier(0.2,0.7,0.2,1);
}
.footer-cols a:hover {
  color: var(--lw-terra);
  padding-left: 10px;
}
.footer-sig {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap;
  font-family: var(--lw-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* -------- Scroll-linked reveal (modern) ---------------------- */
@supports (animation-timeline: view()) {
  .act h1, .act h2, .act .eyebrow, .figure-cell, .geo-card {
    animation: award-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  @keyframes award-reveal {
    0%   { opacity: 0; transform: translateY(28px); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }
}

/* -------- Focus states — accessible & branded ---------------- */
:where(a, button):focus-visible {
  outline: 2px solid var(--lw-terra);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------- Storm — center the title in the frame -------------- */
.storm-title-wrap {
  top: 50% !important;
  transform: translateY(-50%);
  padding: 0 24px;
}

/* -------- Wave — center the copy vertically ------------------ */
.act--wave {
  display: grid;
  place-items: center;
}
.wave-copy {
  padding: 0 48px !important;
}

/* -------- Figures in space — more breathing room ------------- */
.threed-hero {
  padding: 120px 24px 96px !important;
}
.threed-space-label {
  position: absolute;
  top: 320px;
  left: 58%;
  transform: translateX(0);
  font-family: var(--lw-font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(72px, 10vw, 160px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  font-variation-settings: "opsz" 144;
  background: linear-gradient(180deg, #fff 0%, #d89945 60%, #c65d3a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 40px rgba(216,153,69,0.4));
  pointer-events: none;
  z-index: 6;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 768px) {
  .threed-space-label { top: 140px; font-size: clamp(44px, 12vw, 80px) !important; }
}
.threed-hero h2 {
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.threed-hero h2 em {
  letter-spacing: 0.04em;
  padding-left: 0.15em;
  background: linear-gradient(180deg, #fff 0%, #d89945 60%, #c65d3a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 40px rgba(216,153,69,0.4));
}

/* -------- BREAK — flashlight-reveal hidden elements ---------- */
.break-hidden {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  color: #f5efe4;
  font-family: var(--lw-font-serif);
  /* Only visible under the spotlight — mask follows --mx/--my */
  -webkit-mask-image: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.6) 40%, transparent 70%);
          mask-image: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.6) 40%, transparent 70%);
  transition: -webkit-mask-image 80ms linear, mask-image 80ms linear;
}
.break-hidden > * {
  position: absolute;
  color: rgba(255,230,200,0.75);
  mix-blend-mode: screen;
}
/* Greek / math symbols — the stars of the reveal */
.bh-sym {
  font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,230,200,0.85);
  text-shadow:
    0 0 14px rgba(255,200,140,0.55),
    0 0 34px rgba(255,160,90,0.3);
  animation: bh-sym-float 12s ease-in-out infinite;
  transform-origin: center;
}
.bh-sym.bh-sm { font-size: clamp(18px, 2.2vw, 28px); opacity: 0.65; }
.bh-sym.bh-md { font-size: clamp(28px, 3.6vw, 52px); opacity: 0.78; }
.bh-sym.bh-lg { font-size: clamp(44px, 5.4vw, 84px); opacity: 0.85; }
.bh-sym.bh-xl { font-size: clamp(60px, 8vw, 128px);  opacity: 0.92; }
.bh-sym:nth-child(odd)  { animation-direction: reverse; animation-duration: 16s; }
.bh-sym:nth-child(3n)   { animation-duration: 20s; }
.bh-sym:nth-child(4n+1) { animation-delay: -5s; }
.bh-sym:nth-child(5n)   { animation-delay: -9s; }
@keyframes bh-sym-float {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  50%      { transform: translate(6px, -10px) rotate(3deg); }
}

/* Equations — lighter, monospaced-serif mix */
.bh-eq {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 1.3vw, 17px);
  letter-spacing: 0.02em;
  color: rgba(255,220,180,0.75);
  text-shadow: 0 0 10px rgba(255,180,120,0.4);
  white-space: nowrap;
}
.bh-eq sup { font-size: 0.7em; vertical-align: super; }

/* Cryptic decimals — monospace */
.bh-num {
  font-family: var(--lw-font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255,220,180,0.6);
  text-shadow: 0 0 8px rgba(255,180,120,0.35);
}

.bh-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,220,180,0.7), transparent);
}

/* Starfield — hundreds of tiny points, each with its own twinkle */
.bh-star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(255,245,220,0.85);
  box-shadow: 0 0 3px rgba(255,230,190,0.6);
  animation: bh-twinkle 3.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
.bh-star.bh-star-med {
  width: 3px; height: 3px;
  background: #fff4d8;
  box-shadow: 0 0 6px rgba(255,220,160,0.75);
}
.bh-star.bh-star-bright {
  width: 4px; height: 4px;
  background: #fff;
  box-shadow:
    0 0 6px rgba(255,240,200,0.9),
    0 0 16px rgba(255,200,140,0.55),
    0 0 30px rgba(255,160,90,0.25);
}
.bh-star.bh-star-bright::before,
.bh-star.bh-star-bright::after {
  content: "";
  position: absolute;
  background: rgba(255,245,220,0.55);
  top: 50%; left: 50%;
}
.bh-star.bh-star-bright::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.bh-star.bh-star-bright::after  { width: 1px; height: 14px; transform: translate(-50%, -50%); }
@keyframes bh-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* Constellations — line + dot diagrams with a mono label */
.bh-constellation {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  color: rgba(255,220,180,0.8);
  overflow: visible;
}
.bh-constellation line {
  stroke: rgba(255,220,180,0.35);
  stroke-width: 0.12;
  stroke-dasharray: 0.6 1.2;
}
.bh-constellation circle {
  fill: #fff;
  filter: drop-shadow(0 0 1.2px rgba(255,220,160,0.9));
}
.bh-constellation text {
  font-family: var(--lw-font-mono);
  font-size: 1.6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: rgba(255,220,180,0.5);
}

/* Cardinal directions — N/S/E/W at the frame edges */
.bh-cardinal {
  position: absolute;
  font-family: var(--lw-font-mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: rgba(255,220,180,0.45);
  text-shadow: 0 0 10px rgba(255,180,120,0.4);
}

/* Moon phase row */
.bh-moon {
  position: absolute;
  font-size: 16px;
  color: rgba(255,240,210,0.65);
  text-shadow: 0 0 8px rgba(255,200,140,0.5);
  animation: bh-twinkle 6s ease-in-out infinite;
}
.bh-moon:nth-child(odd) { animation-delay: -3s; }

/* Tiny sketched ship — discoverable secret */
.bh-ship {
  position: absolute;
  top: 82%;
  left: 46%;
  width: 56px;
  height: auto;
  color: rgba(255,220,180,0.55);
  filter: drop-shadow(0 0 6px rgba(255,180,120,0.4));
  animation: bh-ship-bob 5s ease-in-out infinite;
}
@keyframes bh-ship-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-4px) rotate(1deg); }
}

/* Shooting stars — streak with fading trail */
.bh-shooting {
  position: absolute;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,240,200,0.9), #fff);
  filter: drop-shadow(0 0 6px rgba(255,220,160,0.8));
  opacity: 0;
  animation: bh-shoot 7s ease-out infinite;
}
@keyframes bh-shoot {
  0%   { opacity: 0; transform: rotate(var(--r, -20deg)) translateX(-40px); }
  4%   { opacity: 1; }
  12%  { opacity: 0; transform: rotate(var(--r, -20deg)) translateX(200px); }
  100% { opacity: 0; transform: rotate(var(--r, -20deg)) translateX(200px); }
}

/* Spinning compass + geometric diagrams */
.bh-compass, .bh-geo {
  color: rgba(255,220,180,0.7);
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(255,180,120,0.45));
}
.bh-compass { animation: bh-compass-spin 40s linear infinite; }
.bh-geo     { animation: bh-compass-spin 80s linear infinite reverse; }
@keyframes bh-compass-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* -------- Reduced motion ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ROUND 4 ×10 — Flashlight: volumetric lens + aurora halo.
   Dual mask (inner + outer), warm beam tint, chromatic fringe,
   ambient breathing halo behind centered text, subtle scan-line. */
.act--break {
  contain: paint;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(12,14,22,1), #050608 100%);
}
.break-hidden {
  will-change: mask-position, mask-image;
  transform: translateZ(0);
  backface-visibility: hidden;
  mask-image: radial-gradient(
    circle 240px at var(--mx, 50%) var(--my, 50%),
    #000 0%,
    rgba(0,0,0,0.95) 30%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.12) 82%,
    transparent 100%
  ) !important;
  -webkit-mask-image: radial-gradient(
    circle 240px at var(--mx, 50%) var(--my, 50%),
    #000 0%,
    rgba(0,0,0,0.95) 30%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.12) 82%,
    transparent 100%
  ) !important;
}
.break-hidden > * { will-change: transform, opacity; }
/* Warm beam tint — multiplies over revealed area */
.act--break::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    circle 260px at var(--mx, 50%) var(--my, 50%),
    rgba(248,220,170,0.08) 0%,
    rgba(232,198,90,0.04) 40%,
    transparent 75%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  transition: background-position 80ms linear;
}
/* Chromatic fringe — cool outer ring */
.act--break::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    circle 280px at var(--mx, 50%) var(--my, 50%),
    transparent 0%,
    transparent 55%,
    rgba(122,69,165,0.06) 72%,
    rgba(58,90,120,0.05) 85%,
    transparent 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}
/* Ambient breathing halo behind center text */
.act--break .break-title,
.act--break .h-section,
.act--break h2 {
  position: relative;
  z-index: 3;
}
.act--break .h-section::before,
.act--break h2::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 520px; height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(198,93,58,0.10), transparent 55%);
  filter: blur(24px);
  z-index: -1;
  animation: lw-halo-breathe 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lw-halo-breathe { 0%,100% { opacity: 0.6; transform: translate(-50%,-50%) scale(0.95); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } }
/* Scan-line gradient overlay */
.act--break .break-hidden::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,0.015) 3px 4px);
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ============================================================
   STILL WATER + SPACE — act--calm cinematic surface
   Space is still in shapes: motionless celestial rings + planet
   reflect in a perfectly still water plane below the horizon.
   ============================================================ */

.act--calm {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 14vh 0 10vh;
  background: #04060d;
  background: radial-gradient(ellipse 120% 80% at 50% 18%, #1a2644 0%, #0a1124 45%, #04060d 100%);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #f5efe4;
}
.act--calm .act-label { color: rgba(245,239,228,0.55); }

.still-water {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.act--calm > *:not(.still-water) { position: relative; z-index: 2; }

/* --- sky (upper half) --- */
.sw-sky {
  position: absolute;
  left: 0; right: 0; top: 0; height: 50%;
  background:
    radial-gradient(1.5px 1.5px at 8% 22%,  rgba(255,255,255,0.9),  transparent 60%),
    radial-gradient(1px 1px   at 22% 14%,  rgba(255,255,255,0.7),  transparent 60%),
    radial-gradient(2px 2px   at 38% 32%,  rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1px 1px   at 54% 18%,  rgba(255,255,255,0.6),  transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 28%,rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px   at 82% 12%,  rgba(255,255,255,0.7),  transparent 60%),
    radial-gradient(2px 2px   at 92% 34%,  rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1px 1px   at 14% 42%,  rgba(255,255,255,0.5),  transparent 60%),
    radial-gradient(1px 1px   at 46% 44%,  rgba(255,255,255,0.6),  transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 46%,rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1px 1px   at 4% 8%,    rgba(255,255,255,0.5),  transparent 60%),
    radial-gradient(1.2px 1.2px at 30% 6%, rgba(255,255,255,0.7),  transparent 60%);
  animation: sw-twinkle 7s ease-in-out infinite alternate;
}
@keyframes sw-twinkle { 0% { opacity: 0.55; } 100% { opacity: 0.95; } }

/* --- space shapes (motionless — stillness made shape) --- */
.sw-space-shapes {
  position: absolute;
  left: 0; right: 0; top: 0; height: 50%;
  pointer-events: none;
}
.sw-ring {
  position: absolute;
  left: 50%; top: 22%;
  width: 540px; height: 540px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(248,220,170,0.10);
  box-shadow: inset 0 0 60px rgba(248,220,170,0.04);
}
.sw-ring-2 { width: 380px; height: 380px; border-color: rgba(248,220,170,0.16); }
.sw-ring-3 { width: 240px; height: 240px; border-color: rgba(248,220,170,0.22); }
.sw-ring-tilt {
  left: 22%; top: 30%;
  width: 220px; height: 44px;
  border: 1px solid rgba(200,220,255,0.18);
  transform: translate(-50%,-50%) rotate(-14deg);
}
.sw-ring-tilt-2 {
  left: 82%; top: 24%;
  width: 160px; height: 32px;
  border: 1px solid rgba(200,220,255,0.14);
  transform: translate(-50%,-50%) rotate(18deg);
}
.sw-planet {
  position: absolute;
  left: 18%; top: 34%;
  width: 16px; height: 16px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c7d4ff, #6a7fbf 60%, #2a3a72 100%);
  box-shadow: 0 0 14px rgba(140,170,255,0.35);
}
.sw-planet-sm {
  left: 86%; top: 18%;
  width: 8px; height: 8px;
  background: radial-gradient(circle at 35% 35%, #ffd7a8, #c99060 60%, #6b4020 100%);
  box-shadow: 0 0 10px rgba(240,180,120,0.35);
}

/* --- moon --- */
.sw-moon {
  position: absolute;
  top: 22%; left: 50%;
  width: 110px; height: 110px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fff8e4 0%, #f5dfa8 55%, #c9a870 100%);
  box-shadow:
    inset -22px -14px 40px rgba(120,90,40,0.35),
    0 0 50px rgba(248,220,170,0.45),
    0 0 160px rgba(248,220,170,0.25);
}
.sw-moon-glow {
  position: absolute;
  top: 22%; left: 50%;
  width: 420px; height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,220,170,0.22), rgba(248,220,170,0.04) 50%, transparent 72%);
  filter: blur(14px);
  animation: sw-glow-breathe 9s ease-in-out infinite;
}
@keyframes sw-glow-breathe {
  0%,100% { opacity: 0.75; }
  50%     { opacity: 1; }
}

/* --- horizon + water --- */
.sw-horizon {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(248,220,170,0.35) 20%,
    rgba(248,220,170,0.75) 50%,
    rgba(248,220,170,0.35) 80%,
    transparent);
  box-shadow: 0 0 24px rgba(248,220,170,0.45);
}
.sw-surface {
  position: absolute;
  left: 0; right: 0; top: 50%; bottom: 0;
  background:
    linear-gradient(180deg, #0d1729 0%, #08111f 35%, #040810 70%, #02040a 100%);
  overflow: hidden;
}

/* reflection of moon column */
.sw-reflection {
  position: absolute;
  left: 50%; top: 50%; bottom: 0;
  width: 180px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(248,220,170,0.55) 0%,
    rgba(248,220,170,0.35) 10%,
    rgba(248,220,170,0.18) 28%,
    rgba(248,220,170,0.06) 55%,
    transparent 85%);
  filter: blur(1.2px);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: sw-reflect-sway 11s ease-in-out infinite;
}
@keyframes sw-reflect-sway {
  0%,100% { transform: translateX(-50%) scaleX(1);    opacity: 0.85; }
  50%     { transform: translateX(-50%) scaleX(1.06); opacity: 1; }
}

/* soft horizontal bands drifting across water */
.sw-shimmer {
  position: absolute;
  left: -10%; right: -10%; top: 62%;
  height: 1.2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(248,220,170,0) 20%,
    rgba(248,220,170,0.45) 48%,
    rgba(248,220,170,0.7)  50%,
    rgba(248,220,170,0.45) 52%,
    rgba(248,220,170,0) 80%,
    transparent 100%);
  filter: blur(0.6px);
  mix-blend-mode: screen;
  opacity: 0.65;
  animation: sw-shimmer-drift 16s ease-in-out infinite;
}
.sw-shimmer-2 { top: 74%; animation-duration: 21s; animation-delay: -6s; opacity: 0.45; }
.sw-shimmer-3 { top: 86%; animation-duration: 25s; animation-delay: -11s; opacity: 0.3; }
@keyframes sw-shimmer-drift {
  0%,100% { transform: translateX(-3%); opacity: 0.25; }
  50%     { transform: translateX(3%);  opacity: 0.8; }
}

/* ripples — gentle, finite radius so they don't blow out the frame */
.sw-ripples {
  position: absolute;
  left: 0; right: 0; top: 50%; bottom: 0;
  overflow: hidden;
}
.sw-ripple {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 70%);
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(248,220,170,0.6);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: sw-ripple-expand 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: var(--d, 0s);
}
.sw-ripple::before,
.sw-ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(248,220,170,0.4);
  transform: scale(0);
  opacity: 0;
  animation: sw-ripple-expand 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}
.sw-ripple::before { animation-delay: calc(var(--d, 0s) + 1.8s); }
.sw-ripple::after  { animation-delay: calc(var(--d, 0s) + 3.6s); border-color: rgba(248,220,170,0.25); }
@keyframes sw-ripple-expand {
  0%   { transform: translate(-50%,-50%) scale(0.4); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(8);   opacity: 0; }
}
/* for pseudo rings that already use inset: 0 (no translate) */
.sw-ripple::before,
.sw-ripple::after {
  animation-name: sw-ripple-pseudo;
}
@keyframes sw-ripple-pseudo {
  0%   { transform: scale(0.4); opacity: 0; }
  10%  { opacity: 0.75; }
  100% { transform: scale(8);   opacity: 0; }
}

/* --- title + mirror reflection --- */
.calm-wrap {
  position: relative;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.calm-wrap .calm-title {
  margin: 0 !important;
  color: #f5efe4;
  text-shadow:
    0 0 36px rgba(248,220,170,0.2),
    0 2px 0 rgba(10,20,40,0.6);
}
.calm-wrap .calm-title em {
  background: linear-gradient(180deg, #fff8e4 0%, #f5dfa8 55%, #c9a870 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(248,220,170,0.35));
  font-style: italic;
}
.calm-wrap .calm-title-reflect,
h1.calm-title-reflect {
  display: block !important;
  margin: -12px 0 0 !important;
  transform: scaleY(-1) !important;
  transform-origin: center !important;
  opacity: 0.4 !important;
  filter: blur(2.2px);
  -webkit-mask-image: linear-gradient(180deg, transparent 5%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.85) 100%) !important;
          mask-image: linear-gradient(180deg, transparent 5%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.85) 100%) !important;
  animation: sw-reflect-ripple 6s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
  direction: ltr;
}
@keyframes sw-reflect-ripple {
  0%,100% { transform: scaleY(-1) translateY(0)   skewX(0deg)    !important; filter: blur(2.2px); }
  50%     { transform: scaleY(-1) translateY(1px) skewX(-0.2deg) !important; filter: blur(2.8px); }
}

.calm-rule {
  width: 64px;
  height: 1px;
  background: rgba(248,220,170,0.55);
  margin: 88px auto 32px;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .sw-ripple, .sw-ripple::before, .sw-ripple::after,
  .sw-shimmer, .sw-reflection, .sw-sky, .sw-moon-glow,
  .calm-title-reflect { animation: none !important; }
  .calm-title-reflect { opacity: 0.2; }
}

/* ============================================================
   MOBILE — tighten every act for viewports < 768px
   ============================================================ */

@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* hide custom cursor on touch */
  .cursor, .cursor.ring { display: none !important; }
  body { cursor: auto !important; }

  /* nav: compact, keep it readable */
  .nav {
    padding: 12px 16px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }
  .nav .brand { font-size: 18px !important; }
  .nav ul { gap: 14px !important; }
  .nav ul li:first-child { display: none; }

  /* act scaffolding — each scene fills its own screen */
  section.act {
    padding: 72px 0 !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .act-label {
    top: 14px !important;
    left: 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }
  .act-number { font-size: 12px !important; }

  /* display type — mobile reads big */
  .h-display { font-size: clamp(56px, 16vw, 96px) !important; line-height: 0.94 !important; letter-spacing: -0.02em !important; }
  .h-section { font-size: clamp(44px, 13vw, 72px) !important; line-height: 0.96 !important; letter-spacing: -0.015em !important; }
  .h-upright { font-size: clamp(22px, 5.2vw, 32px) !important; }
  .lede { font-size: clamp(16px, 4vw, 20px) !important; line-height: 1.45 !important; }
  .eyebrow { font-size: 10px !important; letter-spacing: 0.24em !important; }

  /* Becalmed — remove the boat on mobile, soften horizon */
  .act--becalmed .horizon { height: 40vh; }
  .act--becalmed .tiny-boat,
  .act--storm .storm-boat,
  .act--storm svg.boat,
  [class*="boat"] { display: none !important; }

  /* Storm / Wave / Break — cinematic vertical composition */
  section.act.act--storm, section.act.act--wave, section.act.act--break {
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: 100vh !important;
  }
  .act--storm h1, .act--storm h2, .act--storm .h-display,
  .act--wave h1,  .act--wave h2,  .act--wave .h-display {
    font-size: clamp(48px, 15vw, 84px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.02em !important;
    word-break: keep-all;
  }
  .act--storm .storm-title-wrap { padding: 0 20px !important; z-index: 5; position: relative; }
  .act--storm .rain-layer { opacity: 0.85 !important; }
  .act--storm .bolt { filter: drop-shadow(0 0 30px rgba(232,168,143,0.8)); }
  .act--storm .waves { height: 40vh !important; }
  .act--wave .wave-copy {
    position: relative;
    z-index: 5;
    padding: 12vh 20px 0 !important;
  }
  .act--wave .wave-giant {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60vh !important;
  }

  /* Break — no flashlight on touch, so reveal a subtle atmospheric
     field instead. Hide the loud/big elements, show small ones dimly. */
  .act--break .break-hidden {
    display: block !important;
    visibility: visible !important;
    opacity: 0.14 !important;
    filter: blur(0.4px);
  }
  .act--break .bh-star,
  .act--break .bh-constellation,
  .act--break .bh-shooting,
  .act--break .bh-ship,
  .act--break .bh-moon,
  .act--break .bh-compass,
  .act--break .bh-xl,
  .act--break .bh-lg { display: none !important; }
  .act--break .bh-sym,
  .act--break .bh-eq { color: rgba(245,239,228,0.55) !important; }
  .act--break { text-align: center; }
  .act--break .break-copy,
  .act--break .h-display { font-size: clamp(48px, 14vw, 72px) !important; position: relative; z-index: 5; }

  /* Figures in space — giant hero, stacked single column */
  .act--threed .threed-hero h2 {
    font-size: clamp(64px, 19vw, 112px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.025em !important;
  }
  .act--threed .threed-hero { padding: 100px 16px 56px !important; text-align: center; }
  .act--threed .threed-hero .eyebrow { opacity: 0.8; }
  .act--threed .threed-stage {
    grid-template-columns: 1fr !important;
    transform: none !important;
    margin: 0 !important;
    padding: 32px 16px !important;
    gap: 24px !important;
  }
  .act--threed .figure-cell {
    height: 360px !important;
    width: 100% !important;
    grid-column: 1 !important;
    border-radius: 2px;
  }
  .act--threed .figure-cell[style*="grid-column"] {
    grid-column: 1 !important;
    height: 400px !important;
  }
  /* advanced-threed trio — compact stages */
  .act--threed .adv-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }
  .act--threed .hero-cube-stage,
  .act--threed .oct-stage,
  .act--threed .knot-stage {
    width: 100% !important;
    height: 340px !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  .act--threed .figure-label {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    bottom: 16px !important;
    left: 18px !important;
    right: 60px !important;
    max-width: calc(100% - 80px) !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }
  .act--threed .figure-index { font-size: 42px !important; top: 16px !important; right: 18px !important; }
  .act--threed .adv-heading {
    padding: 24px 20px 36px !important;
    text-align: center;
  }
  .act--threed .adv-heading h2,
  .act--threed .adv-heading h3 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    word-break: keep-all;
  }

  /* Geometry grid (if present): large, centered */
  .act--geometry { padding: 80px 20px !important; }
  .act--geometry .grid-tiles {
    grid-template-columns: repeat(8, 1fr) !important;
    width: 92vw !important;
    height: 92vw !important;
    max-width: 460px !important;
    max-height: 460px !important;
    margin: 32px auto !important;
  }
  .act--geometry .grid-title,
  .act--geometry h2 { font-size: clamp(48px, 14vw, 72px) !important; line-height: 0.96 !important; letter-spacing: -0.02em !important; text-align: center; }
  .act--geometry .grid-copy, .act--geometry .lede {
    text-align: center;
    padding: 0 12px;
  }

  /* Seven shapes cards — let labels breathe */
  .act--geometry .shape-card { overflow: visible !important; }
  .act--geometry .shape-card .shape-label,
  .act--geometry .shape-card [class*="label"] {
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
  }

  /* Kinetic — bigger marquee, dramatic title */
  .act--kinetic { padding: 80px 0 !important; }
  .act--kinetic .kinetic-line,
  .act--kinetic h2,
  .act--kinetic h1,
  .act--kinetic .kinetic-title { font-size: clamp(56px, 18vw, 104px) !important; line-height: 0.9 !important; letter-spacing: -0.025em !important; padding: 0 20px; }
  .act--kinetic .kinetic-marquee { font-size: clamp(44px, 14vw, 72px) !important; }
  .act--kinetic .text-on-path { height: 160px !important; }

  /* Goo — center blobs at good scale */
  .act--goo .goo-stage { transform: scale(0.88); margin: 0 auto; }
  .act--goo h2, .act--goo h1 { font-size: clamp(44px, 13vw, 72px) !important; padding: 0 20px; }

  /* Calm — cinematic celestial composition */
  .act--calm { padding: 10vh 16px 8vh !important; overflow: hidden; }
  .act--calm .sw-stars-field { opacity: 0.5; }
  .sw-moon { width: 68px !important; height: 68px !important; }
  .sw-moon-glow { width: 280px !important; height: 280px !important; filter: blur(10px); }
  .sw-ring   { width: 360px !important; height: 360px !important; }
  .sw-ring-2 { width: 260px !important; height: 260px !important; }
  .sw-ring-3 { width: 160px !important; height: 160px !important; }
  .sw-ring-tilt   { width: 140px !important; height: 30px !important; }
  .sw-ring-tilt-2 { width: 110px !important; height: 24px !important; }
  .sw-reflection { width: 120px !important; }
  .calm-wrap { padding: 0 12px !important; }
  .calm-wrap .calm-title {
    font-size: clamp(40px, 12vw, 72px) !important;
  }
  .calm-wrap .calm-title-reflect {
    font-size: clamp(40px, 12vw, 72px) !important;
    margin-top: -8px !important;
  }
  .calm-rule { margin: 56px auto 24px !important; }

  /* Footer — stack columns */
  .footer { padding: 80px 20px 40px !important; }
  .footer-wordmark { font-size: clamp(48px, 14vw, 84px) !important; }
  .footer-cols {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 28px !important;
  }
  .footer-cols > div { min-width: 0; }
  .footer-sig {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* Hide scroll progress bar on tiny phones — reduces visual noise */
  .scroll-progress { height: 2px !important; }

  /* Scroll hint — small, centered, glowing */
  .scroll-hint {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    bottom: 24px !important;
    opacity: 0.6;
  }

  /* Act dividers between scenes */
  .act + .act::before {
    width: 1px !important;
    height: 32px !important;
    margin: -16px auto 0 !important;
  }

  /* Prevent kinetic marquee from creating horizontal page scroll */
  .act--kinetic { overflow: hidden; }
  .kinetic-stack { overflow: hidden; width: 100%; }
}

@media (max-width: 480px) {
  .nav { padding: 10px 12px !important; }
  .nav .brand { font-size: 16px !important; }
  .nav ul { gap: 10px !important; font-size: 9px !important; }
  section.act { padding: 80px 0 !important; }
  .h-display { font-size: clamp(52px, 15vw, 88px) !important; line-height: 0.95 !important; letter-spacing: -0.02em !important; }
  .becalmed-title { font-size: clamp(52px, 15vw, 88px) !important; line-height: 0.96 !important; }
  .calm-title, .calm-title-reflect { font-size: clamp(48px, 14vw, 72px) !important; }
  .act--threed .threed-stage { transform: none !important; margin: 0 !important; }
  .act--threed .figure-cell { height: 340px !important; }
  .act--threed .figure-cell[style*="grid-column"] { height: 380px !important; }
  .sw-moon { width: 56px !important; height: 56px !important; }
  .sw-moon-glow { width: 220px !important; height: 220px !important; }
  .sw-ring   { width: 300px !important; height: 300px !important; }
  .sw-ring-2 { width: 220px !important; height: 220px !important; }
  .sw-ring-3 { width: 140px !important; height: 140px !important; }
  .calm-wrap .calm-title { font-size: clamp(48px, 14vw, 72px) !important; }
  .calm-wrap .calm-title-reflect { font-size: clamp(48px, 14vw, 72px) !important; }
}

/* Tablet fine-tuning */
@media (min-width: 769px) and (max-width: 1024px) {
  .act--threed .threed-stage { transform: scale(0.85); }
  .nav { padding: 16px 24px; }
  section.act { padding: 100px 0; }
}