/* =====================================================================
   Liquid Glass · tokens, type, surfaces, components, fallbacks
   Source system: _source/design.md (designmd.app "Liquid Glass")
   ===================================================================== */
:root{
  --primary:#1A1A1A;                /* design.md palette: primary #1A1A1A · secondary #4A4A4A · neutral #FFFFFF */
  --accent:#EEC078;                 /* champagne gold (HSL 36° 78% 70%, under the 80% saturation cap). The film is cool blue-grey, so the
                                       system's #0066FF tertiary vanished on it; the warm complementary reads on every frame and on glass */
  --accent-ink:#141416;             /* dark ink on gold fills */
  --ok:#2BB673; --warn:#EE8E70;     /* warn is coral so a pending chip never reads as the accent */
  --bg:#141416;                     /* off-black, never #000 */
  --text:rgba(255,255,255,.92); --text-2:rgba(255,255,255,.68); --text-3:rgba(255,255,255,.48);
  --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.10); --surface-strong:rgba(26,26,26,.58);
  --border:rgba(255,255,255,.14); --border-2:rgba(255,255,255,.24);
  --shadow:0 2px 12px rgba(0,0,0,.06); --shadow-lift:0 14px 40px rgba(0,0,0,.35);
  --blur:16px; --radius:12px; --radius-btn:.75rem;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --iri:conic-gradient(from var(--angle,0deg),#EEC078,#30C9D6,#8B5CF6,#EC6AA0,#EEC078);
  --spring:linear(0, 0.0318, 0.1078, 0.2063, 0.3126, 0.4173, 0.5151, 0.6028, 0.6793, 0.7445, 0.799, 0.8439, 0.8803, 0.9094, 0.9323, 0.9502, 0.964, 0.9744, 0.9823, 0.9881, 0.9923, 0.9953, 0.9974, 0.9988, 0.9998);
  --fast:200ms; --base:480ms; --slow:600ms;
  --gap-section:clamp(4rem,8vw,8rem);
}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body{line-height:1.6;font-size:1rem}
a{color:inherit}
img,svg,video{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ===== type scale ===== */
.hero-h{font-size:clamp(2.25rem,4.2vw,3.5rem);line-height:1.04;letter-spacing:-.025em;font-weight:700;max-width:14ch}
h2{font-size:2.25rem;line-height:1.12;letter-spacing:-.02em;font-weight:700;margin-bottom:1rem;max-width:18ch}
h3{font-size:1.5rem;line-height:1.25;letter-spacing:-.01em;font-weight:600}
p{color:var(--text-2);max-width:72ch}
.lede{font-size:1.125rem;line-height:1.6;max-width:48ch;margin-top:1rem}
.lede-s{font-size:1rem;line-height:1.6;max-width:60ch}
.label{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.ident{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:1.25rem}
.ident span{color:var(--accent);margin:0 .4em}
.small{font-size:.875rem}

/* ===== chromatic aberration on display type (two offset copies, screen-blended) ===== */
.chroma{position:relative;display:inline-block}
.chroma::before,.chroma::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.32}
.chroma::before{color:#36D1E0;transform:translateX(-1.5px)}
.chroma::after{color:#F05C9C;transform:translateX(1.5px)}

/* ===== glass surfaces ===== */
.glass{position:relative;background:var(--surface);backdrop-filter:blur(var(--blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--iri);opacity:.35;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:spin 14s linear infinite}
.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,0) 40%)}
@keyframes spin{to{--angle:360deg}}

/* ===== buttons and chips ===== */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:var(--radius-btn);font-weight:600;font-size:.9375rem;line-height:1;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform var(--fast) var(--spring),box-shadow var(--fast) ease,filter var(--fast) ease,background var(--fast) ease}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(.94);box-shadow:0 8px 20px rgba(238,192,120,.3);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px);box-shadow:none}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-2)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-ghost:active{transform:translateY(1px)}
.btn[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none;border-style:dashed}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-style:normal;font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;border:1px solid var(--border);color:var(--text-2);background:var(--surface)}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.chip-ok{color:var(--ok);border-color:rgba(43,182,115,.45)} .chip-warn{color:var(--warn);border-color:rgba(238,142,112,.45)} .chip-muted{color:var(--text-3)}

/* ===== skip link / no-JS ===== */
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:var(--radius-btn);font-weight:600;text-decoration:none;transition:top var(--fast)}
.skip:focus{top:16px}
.noscript{position:relative;z-index:3;padding:1.5rem;background:var(--surface-strong);border-bottom:1px solid var(--border);font-size:.9375rem}
.noscript p+p{margin-top:.375rem}

/* ===== loader: shimmer skeleton, times out ===== */
#loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:opacity var(--slow) ease}
#loader.hidden{opacity:0;pointer-events:none}
.ld{display:flex;flex-direction:column;align-items:center;gap:1rem}
.ld-k{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.ld-bar{width:220px;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;display:block;position:relative}
.ld-bar i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:shimmer 1.4s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ===== the fixed stage: the film, the dim, the veil, the light path, two morphing blobs ===== */
#stage{position:fixed;inset:0;z-index:0;background:var(--bg);overflow:hidden}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#film{z-index:2}
#dim{position:absolute;inset:0;z-index:3;background:var(--primary);opacity:0;pointer-events:none}
#veil{position:absolute;inset:0;z-index:5;background:var(--bg);pointer-events:none;transition:opacity 1.2s ease}
#veil.off{opacity:0}
.blob{position:absolute;z-index:4;width:46vmax;height:46vmax;border-radius:54% 46% 62% 38% / 44% 58% 42% 56%;filter:blur(64px);opacity:0;mix-blend-mode:soft-light;pointer-events:none;
  background:var(--iri);animation:morph 18s ease-in-out infinite alternate,spin 24s linear infinite;will-change:transform,border-radius}
.blob.b1{left:-14vmax;top:-10vmax}
.blob.b2{right:-16vmax;bottom:-14vmax;animation-duration:22s,30s;animation-direction:alternate-reverse,normal}
@keyframes morph{0%{border-radius:54% 46% 62% 38% / 44% 58% 42% 56%;transform:translate(0,0) scale(1)}50%{border-radius:38% 62% 44% 56% / 60% 40% 60% 40%;transform:translate(6vmax,4vmax) scale(1.08)}100%{border-radius:60% 40% 50% 50% / 50% 60% 40% 50%;transform:translate(-3vmax,7vmax) scale(.96)}}

/* ===== scene index: a dot rail. Track line, active dot stretches into an accent bar, label on hover/focus ===== */
.index{position:fixed;left:1.5rem;top:50%;transform:translateY(-50%);z-index:100;--prog:0}
.index ol{list-style:none;position:relative;display:flex;flex-direction:column;gap:.5rem;padding:.25rem 0}
.index ol::before{content:'';position:absolute;left:50%;top:.75rem;bottom:.75rem;width:1px;background:var(--border);transform:translateX(-50%)}
.index ol::after{content:'';position:absolute;left:50%;top:.75rem;width:1px;height:calc((100% - 1.5rem) * var(--prog));background:var(--accent);transform:translateX(-50%);transition:height var(--base) var(--spring)}
.index a{position:relative;display:grid;place-items:center;width:1.5rem;height:1.5rem;color:var(--text-3);text-decoration:none;border-radius:999px;z-index:1}
.index a::before{content:'';width:6px;height:6px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 6px currentColor;opacity:.6;transition:transform var(--base) var(--spring),height var(--base) var(--spring),opacity var(--fast),color var(--fast)}
.index a:hover::before,.index a:focus-visible::before{opacity:1;transform:scale(1.25)}
.index a.on{color:var(--accent)}
.index a.on::before{opacity:1;height:18px;box-shadow:inset 0 0 0 6px currentColor,0 0 10px var(--accent)}
.index .lbl{position:absolute;left:calc(100% + .6rem);top:50%;transform:translate(-6px,-50%);opacity:0;white-space:nowrap;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);padding:.35rem .65rem;border-radius:999px;background:var(--surface-strong);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--border);pointer-events:none;transition:opacity var(--fast),transform var(--fast)}
.index .lbl b{font-weight:500;color:var(--accent);margin-right:.45rem}
.index a:hover .lbl,.index a:focus-visible .lbl{opacity:1;transform:translate(0,-50%)}

/* ===== entry animation: fade + 16px rise, 480ms, 100ms stagger ===== */
.rise{opacity:0;transform:translateY(16px);transition:opacity var(--base) ease-out,transform var(--base) ease-out;transition-delay:calc(var(--i,0)*100ms)}
.rise.in{opacity:1;transform:none}

/* ===== visually hidden: read by screen readers, not shown ===== */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ===== placeholders ===== */
.f-need dd,.needed-text,.desc.f-need,h3.f-need{color:var(--text-3);font-style:italic}
.needed-text{font-size:.875rem;margin-top:.5rem}
.empty{display:grid;place-content:center;justify-items:center;gap:.6rem;text-align:center;padding:1.5rem;position:relative;overflow:hidden;border:1px dashed var(--border-2);border-radius:var(--radius);background:var(--surface)}
.empty::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 2.6s ease-in-out infinite}
.empty svg{width:28px;height:28px;stroke:var(--text-3);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.empty-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);font-weight:500}
.empty-s{font-size:.8125rem;color:var(--text-3);max-width:30ch}
.empty .btn{margin-top:.25rem;font-size:.8125rem;padding:.55rem .9rem}

/* ===== footer ===== */
.ft{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--border);padding:2rem 1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.25rem;font-size:.875rem;color:var(--text-3)}
.ft a{color:var(--text-2);text-decoration:none;margin-left:1.25rem;transition:color var(--fast)}
.ft a:hover{color:var(--accent)}

/* ===== fallbacks: reduced motion / no JS ===== */
.editorial #stage,.editorial #loader{display:none}
.editorial .scene{min-height:0!important;padding:var(--gap-section) 0}
.editorial .s01 .hero{min-height:0!important;padding-top:0!important}   /* the hero grid carries the scroll length on the live page */
.editorial .ov,.editorial .ov.side-r,.editorial .ov-wide header,.editorial .portrait,.editorial .hold{position:static!important;transform:none!important}
.editorial .track{flex-wrap:wrap;transform:none!important}
.editorial #s01{min-height:88dvh!important;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(rgba(20,20,22,.6),rgba(20,20,22,.86)),url(../film/poster.jpg) center/cover no-repeat}
.editorial .rise{opacity:1;transform:none}
.editorial .cue i{animation:none}
html:not(.js) #stage,html:not(.js) #loader,html:not(.js) .index{display:none}
html:not(.js) .scene{min-height:0;padding:var(--gap-section) 0}
html:not(.js) .s01 .hero{min-height:0!important;padding-top:0!important}
html:not(.js) .ov,html:not(.js) .portrait{position:static}
html:not(.js) .rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ld-bar i,.cue i,.blob,.glass::before,.empty::after{animation:none}.rise{transition:none}}
@media (max-width:1023px){:root{--blur:12px}}
@media (hover:none){.card:hover{transform:none;box-shadow:var(--shadow)}.btn-primary:hover{transform:none;filter:none;box-shadow:none}}   /* touch: no hover states that stick after a tap */