/* ============================================================
   BIRO 404 — R09 Video Hero (scroll-scrub, isolated)
   Sticky track drives video.currentTime from scroll progress.
   Reuses the graphite+amber token system. Does NOT touch the
   locked 5-frame image hero (that engine stays available as
   rollback). Reduced-motion + no-JS collapse to a static poster.
   ============================================================ */

.vhero{position:relative;background:var(--bg)}
.vhero-track{height:280vh;position:relative}
.vhero-sticky{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;background:var(--bg)}

/* media layer */
.vhero-media{position:absolute;inset:0;z-index:0}
.vhero-video,.vhero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;display:block}
.vhero-poster{z-index:0}
.vhero-video{z-index:1;opacity:0;transition:opacity .5s var(--ease)}
.vhero-ready .vhero-video{opacity:1}
/* reduced-motion / no-js: hide video, keep poster */
.vhero-static .vhero-video,html.no-js .vhero-video{display:none!important}

/* scrim — left gradient for text legibility + top/bottom depth */
.vhero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(16,19,24,.94) 0%, rgba(16,19,24,.72) 34%, rgba(16,19,24,.12) 62%, rgba(16,19,24,.42) 100%),
    linear-gradient(180deg, rgba(16,19,24,.5) 0%, rgba(16,19,24,0) 20%, rgba(16,19,24,0) 52%, rgba(16,19,24,.62) 100%)}

/* copy */
.vhero-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center}
.vhero-copy{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.vh-inner{max-width:40rem}
.vh-status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem}
.vh-status .pd{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 1px rgba(247,168,27,.7)}
.vh-title{font-family:var(--font-display);text-transform:uppercase;font-weight:400;line-height:.96;
  font-size:clamp(2.7rem,7.2vw,5.6rem);letter-spacing:.01em;color:var(--text);text-shadow:0 2px 40px rgba(0,0,0,.5)}
.vh-sub{color:var(--silver);font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.6;margin-top:1.2rem;max-width:33rem;text-shadow:0 1px 20px rgba(0,0,0,.5)}
.vh-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}

/* AI assistant button — sits over the (removed) Veo-logo corner, bottom-right */
.vhero-ai{position:absolute;z-index:6;right:clamp(1rem,5vw,3.2rem);bottom:clamp(2.2rem,11vh,6.5rem);
  display:inline-flex;align-items:center;gap:.6rem;padding:.7rem .95rem .7rem .8rem;border-radius:99px;
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.03em;color:var(--text);
  background:rgba(16,19,24,.62);border:1px solid rgba(247,168,27,.4);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.7);transition:transform .25s var(--ease-out),border-color .25s,background .25s}
.vhero-ai:hover{transform:translateY(-2px);border-color:var(--accent);background:rgba(20,24,30,.8)}
.vhero-ai .vhero-ai-ic{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:var(--accent-deep);background:var(--accent)}
.vhero-ai .vhero-ai-ic svg{width:16px;height:16px}
.vhero-ai .vhero-ai-tag{font-size:.58rem;color:var(--accent);letter-spacing:.09em}
.vhero-ai b{color:var(--text);font-weight:700}

/* scroll cue (separate from AI button) */
.vhero-cue{position:absolute;left:clamp(1.15rem,4vw,2.4rem);bottom:1.6rem;z-index:4;display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);pointer-events:none}
.vhero-cue .vhero-mouse{width:20px;height:32px;border:1.6px solid var(--line-2);border-radius:11px;position:relative;flex:none}
.vhero-cue .vhero-mouse::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;background:var(--accent);transform:translateX(-50%);animation:vhWheel 1.8s var(--ease) infinite}
@keyframes vhWheel{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}70%{opacity:0;transform:translate(-50%,9px)}100%{opacity:0}}

/* progress bar along bottom */
.vhero-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;background:rgba(233,238,247,.08)}
.vhero-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hi));box-shadow:0 0 12px rgba(247,168,27,.6)}

/* ============================================================
   MOBILE-ONLY SPLIT HERO (≤767px) — R09 mobile patch
   Top: clean near-black text block (NO video behind it).
   Bottom: separate scroll-scrubbed video panel (no copy/CTA/AI over it).
   Desktop (≥768px) keeps the base overlay hero unchanged.
   ============================================================ */
@media (max-width:767px){
  .vhero-sticky{
    height:100svh;min-height:0;display:flex;flex-direction:column;
    padding-bottom:calc(58px + env(safe-area-inset-bottom,0px)); /* reserve fixed contact bar */
  }
  /* TOP — copy block (opaque, no video behind) */
  .vhero-overlay{position:relative;inset:auto;order:1;flex:1 1 53%;min-height:0;
    display:flex;align-items:center;background:var(--bg);padding-top:calc(var(--nav-h) + 1.4vh)}
  .vhero-copy{padding-inline:var(--pad)}
  .vh-inner{max-width:100%}
  .vh-status{margin-bottom:.9rem}
  .vh-title{font-size:clamp(2.2rem,10vw,3.3rem);line-height:.98}
  .vh-sub{max-width:100%;font-size:1rem;line-height:1.55;margin-top:.85rem}
  .vh-cta{margin-top:1.4rem;gap:.75rem;flex-direction:column;align-items:flex-start}
  .vh-cta .vh-cta-primary{width:100%;justify-content:center;font-size:.82rem;padding:.98rem 1rem;letter-spacing:.03em}
  .vh-cta .vh-cta-secondary{font-size:.82rem;padding:.5rem .2rem;border:none;background:transparent;color:var(--accent);
    text-transform:uppercase;letter-spacing:.05em;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(247,168,27,.5)}
  .vh-cta .vh-cta-secondary:hover{color:var(--accent-hi);text-decoration-color:var(--accent)}
  .nowrap{white-space:nowrap}
  /* BOTTOM — video panel (clear, scroll-scrubbed) */
  .vhero-media{position:relative;inset:auto;order:2;flex:0 0 47%;min-height:0;width:100%;overflow:hidden}
  .vhero-video,.vhero-poster{object-position:68% center}
  .vhero-scrim{display:none}
  .vhero-media::before{content:"";position:absolute;left:0;right:0;top:0;height:34%;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,var(--bg) 0%,rgba(16,19,24,0) 100%)}
  .vhero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:2;pointer-events:none;
    background:linear-gradient(0deg,rgba(16,19,24,.45) 0%,rgba(16,19,24,0) 100%)}
  /* remove AI button + cue from the hero on mobile (pilot appears after the hero) */
  .vhero-ai{display:none}
  .vhero-cue{display:none}
  .vhero-progress{z-index:6}
}
@media (max-width:400px){
  .vhero-overlay{flex-basis:55%}
  .vhero-media{flex-basis:45%}
  .vh-title{font-size:clamp(2rem,9.4vw,2.9rem)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .vhero-video{display:none!important}
  .vhero-cue{display:none}
  .vhero-progress{display:none}
  .vhero-ai{transition:none}
  .vhero-cue .vhero-mouse::after{animation:none}
}