/* Scroll-scrub hero — SCOPED under .hero-scrub-root so nothing leaks into the
   site theme. No global resets, no html/body rules, no @font-face (Anton/Oswald/
   Inter are already self-hosted site-wide via @fontsource). */

.hero-scrub-root {
  /* brand tokens, scoped to the hero only */
  --hs-bg: #07060B;
  --hs-fg: #FFFFFF;
  --hs-accent: #E73744;
  --hs-accent-hover: #F1566A;
  --hs-grad: linear-gradient(135deg, #EE3B22 0%, #E73744 45%, #DE326C 100%);
  --hs-font-display: "Anton", Impact, sans-serif;
  --hs-font-heading: "Oswald", "Arial Narrow", sans-serif;
  --hs-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
  background: var(--hs-bg);
  color: var(--hs-fg);
}
.hero-scrub-root *,
.hero-scrub-root *::before,
.hero-scrub-root *::after { box-sizing: border-box; }

/* ---------- preloader ---------- */
.hero-scrub-root .loader {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: var(--hs-bg);
  transition: opacity .6s ease, visibility .6s ease;
}
.hero-scrub-root .loader.is-hidden { opacity: 0; visibility: hidden; }
.hero-scrub-root .loader__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrub-root .loader__scrim  { position: absolute; inset: 0; background: rgba(11,13,16,.45); }
.hero-scrub-root .loader__inner { position: relative; width: min(360px, 70vw); text-align: center; }
.hero-scrub-root .loader__bar { height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.12); }
.hero-scrub-root .loader__fill { display: block; height: 100%; width: 0%; background: var(--hs-accent); border-radius: 4px; transition: width .2s ease; }
.hero-scrub-root .loader__label { margin-top: 14px; font-size: 13px; opacity: .7; letter-spacing: .02em; }

/* ---------- scrub section ---------- */
/* Height holds a constant scrub speed; ~1000vh chosen for a quicker pass to content. */
/* Pinned 100vh scrub: tall section drives the scroll, the stage is JS-pinned to
   the viewport (full-bleed, no band) and plays the frame sequence as you scroll
   through, then releases to the page content. JS pin (not CSS sticky) because the
   site sets body{overflow:hidden}, which breaks position:sticky. */
.hero-scrub-root .scrub { position: relative; height: 1000vh; }
.hero-scrub-root .scrub > .sticky {
  position: absolute; top: 0; left: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
}
.hero-scrub-root .scrub > .sticky.is-fixed { position: fixed; top: 0; }
.hero-scrub-root .scrub > .sticky.is-bottom { position: absolute; top: auto; bottom: 0; }
.hero-scrub-root #cv {
  display: block; width: 100%; height: 100%;
  background: #000;
  --exp: 1;
  will-change: filter;
}
.hero-scrub-root .loopvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.hero-scrub-root .grade-overlay { position: absolute; inset: 0; pointer-events: none; background: #112027; mix-blend-mode: lighten; opacity: 0; }
.hero-scrub-root .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%); }
.hero-scrub-root .grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: overlay; opacity: 0; }

/* ---------- scroll-timed captions (opacity driven by JS) ---------- */
.hero-scrub-root .caption { position: absolute; left: 6vw; max-width: min(60%, 720px); text-align: left; color: #fff; pointer-events: none; z-index: 3; }
.hero-scrub-root .caption__inner { opacity: 0; will-change: opacity, transform; }
.hero-scrub-root .caption--top    { top: 12vh; }
.hero-scrub-root .caption--center { top: 50%; transform: translateY(-50%); }
.hero-scrub-root .caption--bottom { bottom: 12vh; }
.hero-scrub-root .caption__kicker { margin-bottom: .7em; font-family: var(--hs-font-heading); font-weight: 600; font-size: clamp(12px, 1.15vw, 15px); letter-spacing: .18em; text-transform: uppercase; color: var(--hs-accent-hover); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.hero-scrub-root .caption__title { font-family: var(--hs-font-display); font-weight: 400; font-size: clamp(34px, 6vw, 86px); line-height: 0.96; letter-spacing: .005em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.hero-scrub-root .caption__sub { margin-top: .55em; font-family: var(--hs-font-body); font-weight: 400; font-size: clamp(15px, 1.8vw, 24px); line-height: 1.4; opacity: .9; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero-scrub-root .caption__cta { display: inline-block; margin-top: 1.3em; padding: .8em 1.8em; border-radius: 999px; background: var(--hs-grad); color: #fff; font-family: var(--hs-font-body); font-weight: 600; font-size: clamp(14px, 1.6vw, 19px); letter-spacing: .02em; text-decoration: none; box-shadow: 0 8px 30px rgba(231,55,68,.35); pointer-events: none; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.hero-scrub-root .caption__cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 36px rgba(231,55,68,.45); }

/* ---------- SEO + load-state overlay (real DOM <h1>, indexable) ---------- */
/* Visible on load (frame 0); fades out once the user starts scrolling. */
.hero-scrub-root .hero-seo { position: absolute; left: 6vw; bottom: 14vh; max-width: min(64%, 760px); z-index: 4; color: #fff; transition: opacity .5s ease, transform .5s ease; }
.hero-scrub-root.is-scrolled .hero-seo { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.hero-scrub-root .hero-seo__kicker { margin-bottom: .7em; font-family: var(--hs-font-heading); font-weight: 600; font-size: clamp(12px, 1.15vw, 15px); letter-spacing: .18em; text-transform: uppercase; color: var(--hs-accent-hover); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.hero-scrub-root .hero-seo__title { font-family: var(--hs-font-display); font-weight: 400; font-size: clamp(32px, 5.4vw, 76px); line-height: 1.0; letter-spacing: .005em; text-transform: uppercase; margin: 0; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.hero-scrub-root .hero-seo__sub { margin-top: .6em; font-family: var(--hs-font-body); font-weight: 400; font-size: clamp(15px, 1.7vw, 22px); line-height: 1.45; opacity: .92; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero-scrub-root .hero-seo__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.4em; }
.hero-scrub-root .hero-seo__btn { display: inline-block; padding: .8em 1.8em; border-radius: 999px; font-family: var(--hs-font-body); font-weight: 600; font-size: clamp(14px, 1.5vw, 18px); letter-spacing: .02em; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.hero-scrub-root .hero-seo__btn--primary { background: var(--hs-grad); color: #fff; box-shadow: 0 8px 30px rgba(231,55,68,.35); }
.hero-scrub-root .hero-seo__btn--ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.hero-scrub-root .hero-seo__btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ---------- scroll hint ---------- */
.hero-scrub-root .scrollhint { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; transition: opacity .5s ease; z-index: 3; }
.hero-scrub-root .scrollhint.is-hidden { opacity: 0; }
.hero-scrub-root .scrollhint__label { font-family: var(--hs-font-heading); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #fff; opacity: .85; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.hero-scrub-root .scrollhint__chev { width: 18px; height: 18px; border-right: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85); transform: rotate(45deg); animation: hs-scrollbob 1.6s ease-in-out infinite; }
@keyframes hs-scrollbob { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .35; } 50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; } }

/* ---------- lite mode (mobile / reduced-motion): no scrub, one loop video ---------- */
.hero-scrub-root[data-mode="lite"] .scrub { height: 100vh; }
.hero-scrub-root[data-mode="lite"] #cv,
.hero-scrub-root[data-mode="lite"] .loader,
.hero-scrub-root[data-mode="lite"] .scrollhint,
.hero-scrub-root[data-mode="lite"] .caption { display: none; }
.hero-scrub-root .hero-lite-video { display: none; }
.hero-scrub-root[data-mode="lite"] .hero-lite-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-scrub-root[data-mode="lite"] .hero-lite-scrim { display: block; position: absolute; inset: 0; background: rgba(7,6,11,.45); z-index: 2; }
.hero-scrub-root .hero-lite-scrim { display: none; }
.hero-scrub-root[data-mode="lite"] .hero-seo { z-index: 4; }