/* Ported from components/ScrollHero/index.tsx — both the injected
   panelStyles string (desktop chapter panels) and the Tailwind
   utility classes used inline in the JSX (wrapper/canvas/vignette/
   progress bar/skip button), hand-written here since this theme has
   no Tailwind build step. Two full render variants (desktop vs
   mobile) are both present in the DOM — see hero.php — and this file
   shows/hides each with the same 640px breakpoint the original JS
   used for its isMobile check, so no JS branching is needed just to
   pick which markup renders. */

/* Height was previously a fixed inline 750vh on the wrapper element,
   regardless of viewport — correct for desktop (matches HomePage.tsx's
   scrollHeight={750} prop) but far too long for the mobile path, which
   scrubs a fixed 160-frame sequence rather than a timed video: at 750vh
   the same 160 frames were spread across roughly twice the scroll
   distance the current Next.js source actually uses for phones (360vh),
   making the mobile hero feel sluggish/empty for long stretches.
   scroll-hero.js's mobile progress calc reads the wrapper's *rendered*
   height (root.clientHeight), so fixing it here is enough — no JS change
   needed. */
#scroll-hero { position: relative; height: 750vh; }
@media (max-width: 640px) { #scroll-hero { height: 360vh; } }
.sh-sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; background: #000; }
.sh-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sh-vignette { position: absolute; inset: 0; pointer-events: none; }

.sh-desktop-only, .sh-mobile-only { display: none; }
@media (min-width: 641px) { .sh-desktop-only { display: block; } }
@media (max-width: 640px) { .sh-mobile-only { display: block; } .sh-sticky { height: 100svh; } }

/* ── HUD grid (desktop) ─────────────────────────────────────── */
.sh-grid{position:absolute;inset:0;z-index:15;pointer-events:none;
  display:flex;justify-content:space-between;
  padding:0 clamp(32px,5vw,88px);}
.sh-grid span{width:1px;height:100%;background:rgba(255,255,255,.06);}

/* ── Desktop chapter panels ────────────────────────────────────
   Stacked in one grid cell (`grid-area:1/1`), streamed past each
   other by scroll-hero.js's streamMsgs port — see that file. */
.sh-panels{position:absolute;inset:0;z-index:20;display:grid;pointer-events:none;}
.sh-panel{grid-area:1/1;display:flex;align-items:flex-end;height:100%;
  padding:0 clamp(32px,5vw,88px) clamp(76px,9vh,116px);
  will-change:transform,opacity;}
.sh-panel-text{display:flex;flex-direction:column;align-items:flex-start;
  max-width:min(58vw,720px);}

.sh-panel-kicker{font-family:var(--font-body);font-size:.66rem;font-weight:800;
  letter-spacing:.26em;text-transform:uppercase;color:#fff;margin-bottom:18px;
  text-shadow:0 1px 10px rgba(0,0,0,.9),0 0 26px rgba(0,0,0,.65);}

.sh-panel-title{font-family:var(--font-display);
  font-size:clamp(38px,4.9vw,74px);font-weight:800;letter-spacing:-.035em;
  text-wrap:balance;
  line-height:.96;color:#fff;margin-bottom:22px;
  text-shadow:0 2px 24px rgba(0,0,0,.55);}
.sh-panel-sub{font-size:clamp(15px,1.2vw,18px);line-height:1.6;
  color:rgba(255,255,255,.74);max-width:440px;margin-bottom:30px;font-weight:400;
  text-shadow:0 1px 12px rgba(0,0,0,.8);}

.sh-specs{display:flex;gap:clamp(28px,3.4vw,52px);margin-bottom:34px;}
.sh-spec{display:flex;flex-direction:column;gap:4px;}
.sh-spec-l{font-size:.58rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  text-shadow:0 1px 8px rgba(0,0,0,.8);}
.sh-spec-v{font-family:var(--font-display);font-size:clamp(16px,1.5vw,21px);
  font-weight:700;color:#fff;letter-spacing:-.015em;line-height:1.1;
  text-shadow:0 1px 12px rgba(0,0,0,.75);}

.sh-panel-cta{display:inline-flex;align-items:center;gap:10px;font-size:.84rem;
  font-weight:700;color:#fff;text-decoration:none;padding:14px 30px;
  border-radius:100px;background:#45454a;pointer-events:auto;
  transition:box-shadow .25s,transform .25s;}
.sh-panel-cta:hover{box-shadow:0 0 36px rgba(255,255,255,.15);transform:translateY(-2px);}
.sh-panel-cta svg{transition:transform .25s;}
.sh-panel-cta:hover svg{transform:translateX(3px);}

@media(max-width:1100px){ .sh-panel-text{max-width:none;} }
@media(max-width:700px){ .sh-specs{gap:26px;margin-bottom:26px;} }

/* ── Mobile chapter panels ─────────────────────────────────────
   Simpler bottom-anchored single-screen layout, no HUD/specs. */
.sh-m-panels{position:absolute;bottom:96px;left:24px;right:24px;z-index:20;display:grid;}
.sh-m-panel{grid-area:1/1;}
.sh-m-tag{display:inline-flex;align-items:center;font-size:.58rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;padding:6px 10px;border-radius:999px;margin-bottom:12px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);}
.sh-m-title{font-size:2.6rem;line-height:.9;font-weight:900;letter-spacing:-.04em;color:#fff;margin-bottom:12px;}
.sh-m-sub{font-size:.875rem;color:rgba(255,255,255,.55);max-width:26rem;line-height:1.6;margin-bottom:16px;}
.sh-m-cta{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;color:#fff;
  padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  text-decoration:none;transition:background-color .2s,border-color .2s;}
.sh-m-cta:hover{background:#45454a;border-color:#45454a;}

/* ── Progress bar (shared) ──────────────────────────────────── */
.sh-progress-wrap{position:absolute;left:32px;right:32px;bottom:28px;z-index:20;}
@media(min-width:768px){ .sh-progress-wrap{left:56px;right:56px;} }
.sh-mobile-only.sh-progress-wrap{left:24px;right:24px;bottom:28px;}
.sh-progress-track{height:1px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;border-radius:2px;}
.sh-progress-bar{position:absolute;inset-block:0;left:0;width:0;border-radius:2px;transition:background .6s;}

/* ── Skip intro (shared) ────────────────────────────────────── */
.sh-skip{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:30;
  display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);backdrop-filter:blur(10px);
  padding:8px 16px;font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(255,255,255,.6);cursor:pointer;transition:color .3s,border-color .3s;}
.sh-skip:hover{color:#fff;border-color:rgba(255,255,255,.45);}
.sh-mobile-only.sh-skip{bottom:56px;padding:6px 12px;font-size:.58rem;}