/* Cinematic Scroll Package — scroll stage, canvas, overlays.
   Mechanic: a tall .scroll container; .stage sticks at the top while the
   canvas frame-sequence scrubs and overlay sections fly in/out. */

/* ---- top brand bar ---- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,4vw,44px);
  background:linear-gradient(var(--bg), transparent);
  pointer-events:none;
}
.topbar a{ pointer-events:auto; }
.topbar__brand{ display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:900; letter-spacing:.04em; text-transform:uppercase; font-size:18px; }
.topbar__logo{ height:26px; width:auto; }
.topbar__cta{ font-size:13px; padding:.6em 1.1em; }

/* ---- scroll stage ---- */
.scroll{ position:relative; height:var(--scroll-vh,400vh); }
.stage{
  position:sticky; top:0; height:100svh; width:100%;
  overflow:hidden; background:var(--bg);
}
#seq{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:opacity .6s var(--ease);
}
html.seq-ready .poster{ opacity:0; }
/* legibility scrim over the footage */
.scrim{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 60%, transparent 45%, rgba(0,0,0,.45) 100%);
}
/* cinematic lower-third — opacity driven by JS to the current text visibility */
.textscrim{
  position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0;
  background:
    linear-gradient(74deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 15%, rgba(0,0,0,0) 36%),
    linear-gradient(to top, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 22%);
}

/* ---- overlays ---- */
.overlays{ position:absolute; inset:0; z-index:10; }
.ov{
  position:absolute; left:0; right:0;
  padding:0 clamp(20px,6vw,90px);
  max-width:var(--maxw); margin:0 auto;
  will-change:transform,opacity; opacity:0;
  text-shadow:0 2px 30px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4);
}
/* soft localized scrim so copy stays legible over bright footage, no hard box */
.ov::before{
  content:""; position:absolute; z-index:-1; inset:-12% -4%;
  background:radial-gradient(58% 64% at var(--scrim-x,50%) 50%, rgba(0,0,0,.5), transparent 70%);
  pointer-events:none;
}
.ov[data-align="left"]::before{ --scrim-x:28%; }
.ov[data-align="bottom"]::before{ inset:-30% -4% -12%; }
.ov[data-align="center"]{ top:50%; transform:translateY(-50%); text-align:center; }
.ov[data-align="left"]   { top:50%; left:0; text-align:left; }
.ov[data-align="bottom"] { bottom:9vh; }

/* editorial: one fixed, calm text zone (lower-left), short statements, clean cut */
.ov[data-align="editorial"]{
  top:auto; bottom:14vh; left:0; right:auto; text-align:left;
  max-width:min(52ch,50vw);
}
.ov[data-align="editorial"] .ov__eyebrow{ display:inline-flex; align-items:center; gap:11px; margin-bottom:18px; }
.ov[data-align="editorial"] .ov__eyebrow::before{ content:""; width:28px; height:2px; background:var(--accent); }
/* Oswald 500: condensed but lighter strokes — clean impact.
   line-height kept generous enough that German umlaut dots (Ü/Ö/Ä) clear the line above. */
.ov[data-align="editorial"] .ov__title{ font-weight:500; font-size:clamp(40px,6.4vw,90px); line-height:1.06; letter-spacing:0; }
.ov[data-align="editorial"] .ov__body{ font-size:16.5px; color:var(--text); max-width:40ch; margin-top:16px; }
.ov[data-align="editorial"] .ov__pills{ margin-top:20px; }
/* per-overlay scrim no longer needed — the global .textscrim lower-third handles legibility */
.ov[data-align="editorial"]::before{ background:none; }
.ov__eyebrow{ margin-bottom:14px; }
.ov__title{ font-size:clamp(40px,8vw,112px); }
.ov__title .accent{ color:var(--accent); }
.ov__body{ margin-top:18px; max-width:42ch; }
.ov[data-align="center"] .ov__body{ margin-left:auto; margin-right:auto; }
.ov__pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.ov[data-align="center"] .ov__pills{ justify-content:center; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--hair); border-radius:999px;
  padding:8px 14px; font-size:13px; color:var(--text-dim);
  background:rgba(0,0,0,.25); backdrop-filter:blur(6px);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.ov__cta{ margin-top:26px; }

/* soft fade-to-black chapter transition overlay (opacity driven by JS, eased) */
.fadeblack{
  position:absolute; inset:0; z-index:20;
  background:var(--bg); opacity:0; pointer-events:none;
}

/* scroll hint */
.hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:15; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hint::after{ content:""; width:1px; height:26px;
  background:linear-gradient(var(--accent), transparent); animation:hintpulse 1.8s infinite; }
@keyframes hintpulse{ 0%,100%{opacity:.3; transform:scaleY(.6)} 50%{opacity:1; transform:scaleY(1)} }

/* SR-only outline list (always in DOM for a11y) */
.outline{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ============================================================
   Reduced-motion / no-JS: no scrubbing. Static poster hero +
   the sections stacked as normal, readable blocks.
   ============================================================ */
html.reduced .scroll, html.no-js .scroll{ height:auto; }
html.reduced .stage, html.no-js .stage{ position:relative; height:auto; }
html.reduced #seq{ display:none; }
html.reduced .poster, html.no-js .poster{
  position:relative; height:70svh; opacity:1 !important;
}
html.reduced .overlays, html.no-js .overlays{ position:static; }
html.reduced .ov, html.no-js .ov{
  position:relative; top:auto; bottom:auto; transform:none !important;
  opacity:1 !important; padding:clamp(48px,9vw,120px) clamp(20px,6vw,90px);
  margin:0 auto; border-top:1px solid var(--hair);
}
html.reduced .hint, html.no-js .hint{ display:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}
@media (max-width:640px){
  .ov{ padding:0 22px; }
  .ov[data-align="editorial"]{ max-width:92vw; bottom:11vh; }
  .ov[data-align="editorial"] .ov__title{ font-size:clamp(33px,9.4vw,54px); line-height:1.08; }
  .ov[data-align="editorial"] .ov__body{ font-size:15px; max-width:90vw; }
  .ov[data-align="editorial"] .ov__eyebrow{ margin-bottom:12px; }
  .topbar{ padding:14px 18px; }
  .topbar__logo{ height:18px; }
  .topbar__cta{ display:none; }
  /* stronger lower-third on small screens for guaranteed legibility */
  .textscrim{ background:
    linear-gradient(74deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.36) 20%, rgba(0,0,0,0) 46%),
    linear-gradient(to top, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 30%); }
}