/* ============================================================
   MAT LAB — cinematic scroll engine, "Midlife × mylayoga" theme
   Structure = the generic cinematic-scroll engine (loader → HUD →
   sticky scrubbed stage → resolve). Skin = midlife.engineering's
   light-gray instrument aesthetic (grayscale ladder, terminal mono,
   giant wordmark, marquee tickers, dot ratings) with the single hot
   accent swapped for mylayoga's SIGNAL turquoise and the logo
   lockup from mylayoga.com. Retheme via :root only.
   ============================================================ */

:root {
  /* ---- Midlife skeleton ---- */
  --bg: #EBEBEB;          /* page ground (midlife.engineering body) */
  --ink: #262626;         /* ink (midlife) */
  --ink-2: #6E6E6E;       /* muted labels — lifted from midlife's 50% gray for AA */
  --ink-3: #C4C4C4;       /* unlit words in the reveal paragraph */
  --device: #141416;      /* the instrument black */
  --device-2: #1F1F22;
  --device-3: #2A2A2E;
  --line: rgba(38, 38, 38, .12);
  /* the 9-step grayscale ladder from the boot screen */
  --g1: #141416; --g2: #36383D; --g3: #4F4B53; --g4: #626269; --g5: #807F84;
  --g6: #9B9CA0; --g7: #B3B3B5; --g8: #C9C8CF; --g9: #DADADA;
  /* ---- mylayoga SIGNAL (replaces midlife orange #FF611A) ---- */
  --signal: #15B8A4;
  --signal-deep: #0E8576;
  --signal-700: #0B6A60;  /* small text on the light ground */
  --signal-glow: 0 12px 30px rgba(27, 181, 166, .28);
  --paper-90: rgba(235, 235, 235, .86);

  --sans: "Manrope", "PP Neue Montreal", system-ui, -apple-system, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --doto: "Doto", var(--mono);
  --ease: cubic-bezier(.22, .7, .3, 1);   /* mylayoga house easing */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.mono { font-family: var(--mono); }
a { color: var(--signal-700); }
img { max-width: 100%; display: block; }

/* ---------- Loader: boot screen ---------- */
#loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); transition: opacity 1.2s var(--ease), visibility 1.2s; }
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.stripes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); }
.stripes i { position: relative; display: block; }
.stripes i:nth-child(1) { background: var(--g1); } .stripes i:nth-child(2) { background: var(--g2); }
.stripes i:nth-child(3) { background: var(--g3); } .stripes i:nth-child(4) { background: var(--g4); }
.stripes i:nth-child(5) { background: var(--g5); } .stripes i:nth-child(6) { background: var(--g6); }
.stripes i:nth-child(7) { background: var(--g7); } .stripes i:nth-child(8) { background: var(--g8); }
.stripes i:nth-child(9) { background: var(--g9); }
/* the accent bars that punctuate the ladder */
.stripes i::after { content: ""; position: absolute; left: 0; right: 0; height: 26px; background: var(--signal); opacity: 0; }
.stripes i:nth-child(3)::after { top: 36%; opacity: 1; height: 8px; }
.stripes i:nth-child(5)::after { top: 58%; opacity: 1; height: 34px; }
.stripes i:nth-child(6)::after { top: 12%; opacity: 1; height: 18px; }
.stripes i:nth-child(8)::after { top: 22%; opacity: 1; height: 22px; }
.stripes i:nth-child(9)::after { top: 8%; opacity: 1; height: 4px; }
.stripes i:nth-child(1)::before, .stripes i:nth-child(4)::before, .stripes i:nth-child(7)::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: var(--bg); }
.boot { position: absolute; top: 0; left: 0; width: max(22vw, 300px); min-height: 42vh; background: var(--device); color: var(--g9); padding: 22px 22px 26px; font-family: var(--mono); font-size: 12px; line-height: 1.75; letter-spacing: .02em; }
.boot-lines { font-family: var(--mono); white-space: pre-wrap; min-height: 9.5em; color: var(--g8); }
.boot-lines::first-line { color: #fff; }
.loader-bar { height: 1px; background: rgba(218,218,218,.25); position: relative; overflow: hidden; margin-top: 18px; }
.loader-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--signal); transition: transform .3s var(--ease); }
.loader-pct { margin-top: 10px; font-size: 11px; letter-spacing: .18em; color: var(--g7); }

/* ---------- Progress hairline ---------- */
#progressHairline { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--signal); transform-origin: left; transform: scaleX(0); }

/* ---------- Persistent top bar (midlife: disc · tagline · menu) ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between; padding: 22px 30px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; --d: 40px; text-decoration: none; }
.logo .disc { position: relative; width: var(--d); height: var(--d); flex: none; }
.logo .disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--signal); }
.logo .disc .my { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); color: #fff; font-family: "Quicksand", var(--sans); font-weight: 600; font-size: calc(var(--d) * .5); z-index: 1; }
.logo .words { display: flex; align-items: baseline; margin-left: calc(var(--d) * -.1); }
.logo .la { font-family: "Montserrat", var(--sans); font-weight: 900; color: var(--ink); font-size: calc(var(--d) * .9); letter-spacing: -.02em; line-height: .78; }
.logo .yoga { font-family: "Quicksand", var(--sans); font-weight: 500; color: var(--ink); font-size: calc(var(--d) * .46); margin-left: calc(var(--d) * .08); }
.tagline { font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--ink); max-width: 260px; margin-left: auto; margin-right: 22px; text-shadow: 0 0 2px rgba(235,235,235,1), 0 0 16px rgba(235,235,235,.95), 0 0 32px rgba(235,235,235,.9); }
.menu-btn { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-decoration: none; color: var(--ink); background: rgba(235,235,235,.7); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; backdrop-filter: blur(8px); transition: background .25s var(--ease), color .25s var(--ease); }
.menu-btn:hover { background: var(--ink); color: var(--bg); }

/* ---------- HUD: the instrument's terminal ---------- */
#hud { position: fixed; inset: 0; z-index: 50; pointer-events: none; font-family: var(--mono); opacity: 0; transition: opacity .6s var(--ease); }
.hud-block { position: absolute; }
/* top-left, under the logo, so it never sits on the hero wordmark (bottom-left) or the zone panels (bottom) */
.term { left: 30px; top: 92px; width: 268px; background: var(--device); color: var(--g9); border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 30px 60px rgba(20,20,22,.25); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.term.hero-hide { opacity: 0; transform: translateY(-10px); }
.term-head { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .22em; color: var(--g6); margin-bottom: 12px; }
.term-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.term-zone { font-size: 10.5px; letter-spacing: .18em; color: #fff; padding-bottom: 10px; border-bottom: 1px solid rgba(218,218,218,.14); transition: opacity .45s var(--ease); }
.term-zone.fading { opacity: 0; }
.term-primary { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 8px; }
.term-k { font-size: 10.5px; letter-spacing: .12em; color: var(--g7); }
.term-primary b { font-family: var(--doto); font-weight: 700; font-size: 34px; line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums; }
.term-of { font-size: 11px; color: var(--g6); }
.term-row { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; letter-spacing: .08em; padding: 4px 0; color: #fff; font-variant-numeric: tabular-nums; }
.term-cursor { margin-top: 8px; color: var(--signal); font-size: 12px; animation: blink 1.1s steps(1) infinite; }
.hud-right { right: 30px; bottom: 30px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.breath-ring { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--signal); position: relative; animation: breathe 6s var(--ease) infinite; }
.breath-ring::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--signal); opacity: .9; animation: breatheIn 6s var(--ease) infinite; }
.hud-route { font-size: 9.5px; letter-spacing: .22em; color: var(--ink-2); }
@keyframes breathe { 0%, 100% { transform: scale(.86); } 50% { transform: scale(1); } }
@keyframes breatheIn { 0%, 100% { transform: scale(.55); opacity: .55; } 50% { transform: scale(1); opacity: .95; } }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ---------- Stage ---------- */
#ascent { position: relative; }
#stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
#film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 58%, rgba(38,38,38,.10) 100%); }
#grain { position: absolute; inset: -50%; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E"); animation: grainShift 1.4s steps(4) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,2%)} 100%{transform:translate(0,0)} }

/* ---------- Hero: the giant wordmark, bottom-left like midlife ---------- */
.overlay { position: absolute; inset: 0; pointer-events: none; }
#hero { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0 clamp(24px, 6vw, 90px) clamp(96px, 14vh, 150px); z-index: 5; }
.hero-kicker { font-size: 11px; letter-spacing: .3em; color: var(--signal-700); margin-bottom: 22px; text-shadow: 0 0 2px rgba(235,235,235,1), 0 0 14px rgba(235,235,235,1), 0 0 28px rgba(235,235,235,.95); }
#hero h1 { font-size: clamp(42px, 7.4vw, 108px); font-weight: 500; line-height: .98; letter-spacing: -.035em; color: var(--ink); max-width: 11ch; text-shadow: 0 0 2px rgba(235,235,235,1), 0 0 28px rgba(235,235,235,.95), 0 0 60px rgba(235,235,235,.9); }
.hero-sub { margin-top: 34px; font-size: 10px; letter-spacing: .4em; color: var(--ink-2); display: flex; align-items: center; gap: 14px; text-shadow: 0 0 2px rgba(235,235,235,1), 0 0 14px rgba(235,235,235,1); }
.hero-sub .breath-ring { width: 26px; height: 26px; }
.hero-sub .breath-ring::after { inset: 8px; }

/* ---------- Pinned zone panels: frosted light cards ---------- */
.panel { position: absolute; z-index: 6; left: clamp(24px, 6vw, 90px); bottom: clamp(110px, 18vh, 190px); width: min(430px, 84vw); background: var(--paper-90); color: var(--ink); padding: 26px 30px 22px; border-radius: 16px; border: 1px solid rgba(38,38,38,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transform: translateY(28px); pointer-events: none; box-shadow: 0 30px 80px rgba(38,38,38,.10); }
.panel:nth-child(even of .panel) { left: auto; right: clamp(24px, 6vw, 90px); }
.panel-meta { font-size: 10px; letter-spacing: .26em; color: var(--ink-2); margin-bottom: 14px; }
.panel h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 12px; }
.panel p { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.panel p em { font-style: normal; color: var(--signal-700); }
.panel-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 9px; letter-spacing: .2em; color: var(--ink-2); }

/* ---------- Resolve: the rest of the page ---------- */
#book { position: relative; z-index: 10; background: var(--bg); color: var(--ink); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.rise { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* the word-by-word reveal paragraph (midlife's signature) */
.manifesto { padding: clamp(120px, 22vh, 220px) 0 clamp(80px, 12vh, 140px); }
.manifesto p { font-size: clamp(26px, 3.8vw, 52px); font-weight: 500; line-height: 1.18; letter-spacing: -.02em; max-width: 24ch; }
.reveal-words .w { color: var(--ink-3); transition: color .9s var(--ease); }
.reveal-words .w.on { color: var(--ink); }
.reveal-words .w.em { color: #CDEDE7; }
.reveal-words .w.em.on { color: var(--signal-deep); }

/* marquee ticker */
.marquee { overflow: hidden; white-space: nowrap; padding: clamp(28px, 5vh, 56px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee-track { display: inline-flex; gap: .5em; will-change: transform; animation: ticker 70s linear infinite; }
.marquee span { font-size: clamp(56px, 9.5vw, 148px); font-weight: 500; letter-spacing: -.035em; line-height: 1; padding-right: .5em; }
.marquee span i { font-style: normal; color: var(--signal); padding-left: .35em; }
@keyframes ticker { to { transform: translateX(-25%); } }

/* "How it works / The spec" blocks */
.blocks { padding: clamp(60px, 10vh, 120px) 0; display: grid; gap: clamp(56px, 9vh, 110px); }
.block { display: grid; grid-template-columns: 1fr; gap: 26px; }
.block-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; color: var(--ink-2); display: flex; align-items: center; gap: 12px; }
.block-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.block-title { font-size: clamp(24px, 3vw, 36px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; max-width: 22ch; }
.block-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.block-cols h3 { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-bottom: 8px; }
.block-cols p, .block-cols li { font-size: 16px; line-height: 1.55; }
.block-cols ul { list-style: none; }
.block-cols li { padding: 6px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.block-cols li:last-child { border-bottom: 1px solid var(--line); }
.block-cols li span:last-child { font-family: var(--mono); font-size: 12.5px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.block-cols li a { color: var(--signal-700); }

/* product gallery — the official views, credited */
.gallery { padding: 0 0 clamp(60px, 10vh, 120px); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery figure { background: #EFEFEF; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery figcaption { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--ink-2); padding: 12px 14px; }
.credit { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-2); margin-top: 14px; }

/* ratings — midlife's dot ratings, turquoise */
.ratings { padding: clamp(50px, 8vh, 100px) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rating { border-top: 1px solid var(--line); padding-top: 22px; }
.dots { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); margin-right: 5px; }
.dots i.off { background: var(--g8); }
.dots b { font-weight: 500; font-size: 15px; }
.dots b small { color: var(--ink-2); font-weight: 400; }
.rating p { font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.rating .who { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--ink-2); }
.rating .who i { width: 30px; height: 30px; border-radius: 50%; background: repeating-linear-gradient(135deg, var(--signal) 0 3px, #CFEAE3 3px 7px); flex: none; }
.rating .who a { color: var(--ink-2); }

/* CTA + lead capture */
.cta { padding: clamp(70px, 12vh, 140px) 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; border-top: 1px solid var(--line); }
.cta-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; color: var(--signal-700); margin-bottom: 22px; }
.cta h2 { font-size: clamp(34px, 5vw, 64px); font-weight: 500; letter-spacing: -.03em; line-height: 1.02; margin-bottom: 26px; }
.cta .price { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--ink-2); margin-bottom: 26px; }
.cta .price b { color: var(--ink); font-weight: 400; font-size: 22px; letter-spacing: 0; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 999px; padding: 16px 26px; font-family: var(--sans); font-weight: 600; font-size: 15px; transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--signal-deep); color: #fff; }
.btn-primary:hover { background: var(--signal); box-shadow: var(--signal-glow); }
.btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.lead { background: var(--device); color: var(--g9); border-radius: 18px; padding: 28px 28px 30px; }
.lead .lead-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; color: var(--signal); margin-bottom: 12px; }
.lead h3 { font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: #fff; margin-bottom: 8px; }
.lead p { font-size: 14px; line-height: 1.55; color: var(--g7); margin-bottom: 18px; }
#ctaForm { display: grid; gap: 10px; }
#ctaForm input[type=email] { width: 100%; font-family: var(--mono); font-size: 13px; color: #fff; background: var(--device-2); border: 1px solid rgba(218,218,218,.16); border-radius: 12px; padding: 14px 16px; outline: none; transition: border-color .25s; }
#ctaForm input[type=email]:focus { border-color: var(--signal); }
#ctaForm input::placeholder { color: var(--g6); }
#ctaForm [type=submit] { cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 15px; color: #fff; background: var(--signal-deep); border: 0; border-radius: 999px; padding: 15px 20px; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
#ctaForm [type=submit]:hover { background: var(--signal); box-shadow: var(--signal-glow); }
#ctaForm [type=submit]:disabled { opacity: .7; cursor: default; }
.form-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; line-height: 1.8; color: var(--g6); margin-top: 6px; }
.form-note.confirmed { color: var(--signal); }
.gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* affiliate disclosure — mylayoga's own component, above the commercial links' resolve */
.aff-disc { border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; margin: 0 0 clamp(60px, 10vh, 120px); }
.aff-disc p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.aff-disc strong { color: var(--ink); font-weight: 600; }

/* footer: the giant "begin" wordmark + boot lines */
.foot { border-top: 1px solid var(--line); padding: clamp(60px, 10vh, 120px) 0 40px; }
.foot-word { font-size: clamp(64px, 14vw, 200px); font-weight: 500; letter-spacing: -.045em; line-height: .88; margin-bottom: 40px; }
.foot-word i { font-style: normal; color: var(--signal); }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: end; }
.foot-boot { font-family: var(--mono); font-size: 11.5px; line-height: 1.8; color: var(--ink-2); white-space: pre; }
.foot-links { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 500; }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover { color: var(--signal-deep); }
.foot-legal { text-align: right; font-size: 15px; font-weight: 500; line-height: 1.6; }
.foot-legal small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-2); margin-top: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .block-cols, .cta, .foot-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .ratings { grid-template-columns: 1fr; }
  .foot-legal { text-align: left; }
}
@media (max-width: 720px) {
  .topbar { padding: 16px 16px; }
  .tagline { display: none; }
  .term { left: 16px; right: 16px; top: 74px; width: auto; padding: 10px 14px 12px; border-radius: 12px; }
  .term-head { display: none; }
  .term-primary { margin: 8px 0 4px; }
  .term-primary b { font-size: 24px; }
  .term-row { padding: 2px 0; font-size: 10.5px; }
  .term-cursor { display: none; }
  .hud-right { display: none; }
  #hero { padding: 0 16px 120px; }
  .panel { left: 16px !important; right: 16px !important; width: auto; bottom: 150px; padding: 20px 20px 16px; }
  .boot { width: 100%; min-height: 34vh; }
  .marquee-track { animation-duration: 40s; }
}
@media (prefers-reduced-motion: reduce) {
  #grain, .breath-ring, .breath-ring::after, .term-cursor { animation: none; }
  .marquee-track { animation: none; }
  .rise { opacity: 1; transform: none; transition: none; }
  .reveal-words .w { transition: none; }
}

/* ---- live Ken Burns stage (manifest.mode === "kenburns") -------------------
   Sits exactly where the frame canvas sits. Two stacked layers so a crossfade
   is one opacity ramp; transforms are GPU-composited, so scrubbing costs no
   redraw. `will-change` is set on both because both animate every frame. */
.kb-stage { position: absolute; inset: 0; overflow: hidden; }
.kb-layer { position: absolute; inset: 0; overflow: hidden; will-change: opacity; }
/* The plate is the film's 16:9 canvas; JS sizes it to cover the viewport and
   scales it for the zoom. Compositor-only: transform + opacity, no repaint. */
.kb-plate {
  position: absolute;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  overflow: hidden;
}
.kb-still { position: absolute; max-width: none; display: block; }
/* Edge fill: a gap-wide window onto the still, with the image scaled up in X so
   only its outermost columns land inside. Left anchors at 0, right at 100%. */
.kb-edge { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.kb-edge-l { left: 0; }
.kb-edge-r { right: 0; }
.kb-edge img { position: absolute; max-width: none; display: block; }
.kb-edge-l img { left: 0; transform-origin: 0 0; }
.kb-edge-r img { right: 0; transform-origin: 100% 0; }