/* BotBeats v2 — fullscreen video background + eye-dive (2026-08-08 rev2, boss: whole-bg, no badge). */
#dive-layer{position:fixed;inset:0;z-index:0;background:#000}
#dive-layer video{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s ease}
/* everything rides above the video layer; nav(50)+transport(100) already do */
.ticker,.deck,.charts,.submit,.about{position:relative;z-index:1}
/* boss 2026-08-08: orange line under the nav (replaces ink rule) */
body.v2-videobg .nav{border-bottom:3px solid var(--orange,#FF4D00)}
/* boss 2026-08-08 rev2: landing = full viewport; ticker pinned at its bottom, orange line under it.
   100vh minus sticky nav (64px) and fixed transport (~66px) so the strip sits just above the player. */
body.v2-videobg .hero{display:flex;flex-direction:column;min-height:calc(100vh - 138px);padding-bottom:0;max-width:none}
body.v2-videobg .hero .hero-grid{flex:1;display:grid;align-content:center;width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
body.v2-videobg .hero .ticker{margin:24px calc(50% - 50vw) 0;border-top:3px solid var(--orange,#FF4D00)}
@media (max-width:640px){body.v2-videobg .hero{min-height:calc(100vh - 118px)}}
/* boss laptop fix 2026-08-08 ("zoom out to 80% for the perfect screen"): on short
   viewports compact the hero stack so the landing fits at 100% zoom */
@media (max-height:990px){
  body.v2-videobg .hero-title{font-size:clamp(2.2rem,5vw,3.6rem)}
  body.v2-videobg .hero-kicker{margin-bottom:10px}
  body.v2-videobg .hero-sub{margin:14px 0 18px;font-size:1rem}
  body.v2-videobg .hero-stats{margin-top:20px;gap:22px}
  body.v2-videobg .hero-stats .stat-num{font-size:1.25rem}
  body.v2-videobg .hero .ticker{margin-top:14px}
}
@media (max-height:780px){
  body.v2-videobg .hero-title{font-size:clamp(1.9rem,4.2vw,3rem)}
  body.v2-videobg .hero-sub{margin:10px 0 14px;font-size:.92rem}
  body.v2-videobg .hero-stats{margin-top:14px}
  body.v2-videobg .btn{padding:11px 18px;font-size:.78rem}
}
/* boss mobile fixes 2026-08-08: hamburger nav + video crop shifted so she's in frame */
.nav-burger{display:none;background:none;border:2px solid var(--ink,#141414);padding:9px 10px;cursor:pointer}
.nav-burger span{display:block;width:20px;height:3px;background:var(--ink,#141414);margin:3px 0}
@media (max-width:760px){
  .nav-burger{display:block;margin-left:auto}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--cream,#f3ecdd);border-bottom:3px solid var(--orange,#FF4D00);z-index:60}
  .nav{position:sticky;flex-wrap:nowrap}
  header.nav{overflow:visible}
  .nav.nav-open .nav-links{display:flex}
  .nav-links a{padding:14px 18px;border-top:1px solid rgba(20,20,20,.15);font-size:.9rem}
  /* portrait crop: idle ONLY — she lives right-third so pull her into view; the dance
     reel keeps center crop (every clip composes differently — boss caught 72% breaking them) */
  body:not(.v2-riding) #dive-layer video{object-position:72% center}
}
.charts{background:var(--cream,#f3ecdd)}
/* hero becomes a window onto the video: transparent, text flips light, buttons/stats stay */
body.v2-videobg .hero{background:transparent}
body.v2-videobg .hero-grid{grid-template-columns:1fr;max-width:1200px}
body.v2-videobg .hero-title .line{color:#f3ecdd;text-shadow:3px 3px 0 rgba(0,0,0,.35)}
body.v2-videobg .hero-title .line.accent{color:#ff5b1c;text-shadow:3px 3px 0 rgba(0,0,0,.35)}
body.v2-videobg .hero-sub{color:#e8e4da;text-shadow:1px 1px 0 rgba(0,0,0,.4)}
body.v2-videobg .hero-kicker{color:#ff8c4a}
body.v2-videobg .hero-stats .stat-num{color:#ffb37a}
body.v2-videobg .hero-stats .stat-lbl{color:#d8d3c8}
/* boss 2026-08-08 final pass: gear-built MACHINES word + giant black AI backdrop */
.machines-line{display:flex;align-items:flex-end;gap:2px}
.machines-img{display:block;width:min(560px,90%);aspect-ratio:1353/449;object-fit:fill;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.35))} /* boss: squash 40%, width ok */
/* boss: cursief + letters span nav→banner. Unbounded has no italic cut → skew is the italic.
   anim.js sizes the font from live hero geometry so the caps touch top and banner. */
.hero-ai-bg{position:absolute;left:-17%;top:0;bottom:0;display:flex;align-items:flex-start;
  transform:skewX(-12deg);font-family:'Unbounded',sans-serif;font-weight:900;line-height:.76;
  color:#000;z-index:1;pointer-events:none;user-select:none;transition:opacity .5s ease}
body.v2-videobg .hero-grid{position:relative;z-index:1}
body.v2-riding .hero-ai-bg{opacity:0}
@media (max-height:990px){.machines-img{width:min(460px,90%)}}
@media (max-width:900px){.hero-ai-bg{display:none}.machines-img{width:min(380px,96%)}}

/* ============ v2 animation layer (anim.js wires the classes) ============ */
/* stamp-in entrance: fast mechanical snap w/ slight overshoot */
.v2a{opacity:0;transform:translateY(22px)}
.v2a.in{opacity:1;transform:none;transition:opacity .3s ease-out,transform .34s cubic-bezier(.2,1.4,.4,1)}
/* hero title lines: slide-stamp on load */
.v2a-line{opacity:0;animation:v2stamp .42s cubic-bezier(.2,1.35,.4,1) forwards}
@keyframes v2stamp{0%{opacity:0;transform:translateY(30px) skewX(-4deg)}70%{opacity:1;transform:translateY(-3px) skewX(1deg)}100%{opacity:1;transform:none}}
/* station cards: scan-sweep on hover (rides the existing lift) */
.deck-grid .module{position:relative;overflow:hidden}
.deck-grid .module::after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,122,56,.13),transparent);transform:skewX(-18deg)}
.deck-grid .module:hover::after{animation:v2scan .5s ease-out}
@keyframes v2scan{to{left:125%}}
/* chart rows: orange edge arms on hover */
.chart-list .chart-row{border-left:3px solid transparent;transition:border-color .15s ease,transform .15s ease}
.chart-list .chart-row:hover{border-left-color:var(--orange,#FF4D00);transform:translateX(4px)}
/* boss 2026-08-08: START TRANSMISSION pulses like a heartbeat while idle */
@keyframes v2heart{0%,30%,60%,100%{transform:scale(1)}10%{transform:scale(1.06)}40%{transform:scale(1.04)}}
body.v2-videobg:not(.v2-riding) #hero-play{animation:v2heart 1.5s ease-in-out infinite}
#hero-play:hover{animation:none}
/* boss 2026-08-08: on play the whole hero overlay gets out of the video's way */
body.v2-videobg .hero-grid{transition:opacity .5s ease}
body.v2-riding .hero-grid{opacity:0;pointer-events:none}
/* ride-mode poppers: title as music-video overlay, discord as ad bug (anim.js schedules) */
/* z 0 = part of the video background: overlays show over the video but slide BEHIND
   the z-1 sections (deck/charts/...) when scrolled — boss bug-report 2026-08-08 */
#v2-pop{position:fixed;inset:80px 0 100px;z-index:0;pointer-events:none}
.v2p-title{position:absolute;top:38%;display:flex;flex-direction:column;gap:2px;
  font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(28px,4.6vw,64px);line-height:1.02;
  color:#f3ecdd;text-shadow:3px 3px 0 rgba(0,0,0,.45);text-transform:uppercase}
.v2p-title .acc{color:#ff5b1c}
.v2p-left{left:6%}.v2p-center{left:50%;transform:translateX(-50%)}.v2p-right{right:6%;text-align:right}
.v2p-title.out{opacity:0;transition:opacity .45s ease}
.v2p-stamp{animation:v2pStamp .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes v2pStamp{from{opacity:0;transform:scale(1.6)}60%{opacity:1;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.v2p-center.v2p-stamp{animation-name:v2pStampC}
@keyframes v2pStampC{from{opacity:0;transform:translateX(-50%) scale(1.6)}60%{opacity:1;transform:translateX(-50%) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.v2p-slide{animation:v2pSlide .45s cubic-bezier(.2,1.3,.4,1) both}
@keyframes v2pSlide{from{opacity:0;transform:translateX(-60px) skewX(-8deg)}to{opacity:1;transform:none}}
.v2p-center.v2p-slide{animation-name:v2pSlideC}
@keyframes v2pSlideC{from{opacity:0;transform:translateX(calc(-50% - 60px)) skewX(-8deg)}to{opacity:1;transform:translateX(-50%)}}
.v2p-glitch{animation:v2pGlitch .5s steps(2,end) both}
@keyframes v2pGlitch{0%{opacity:0;transform:translateX(6px)}25%{opacity:1;transform:translateX(-5px)}50%{opacity:.4;transform:translateX(4px)}75%{opacity:1;transform:translateX(-2px)}100%{opacity:1;transform:none}}
.v2p-center.v2p-glitch{animation-name:v2pGlitchC}
@keyframes v2pGlitchC{0%{opacity:0;transform:translateX(calc(-50% + 6px))}25%{opacity:1;transform:translateX(calc(-50% - 5px))}50%{opacity:.4;transform:translateX(calc(-50% + 4px))}75%{opacity:1;transform:translateX(calc(-50% - 2px))}100%{opacity:1;transform:translateX(-50%)}}
.v2p-zoom{animation:v2pZoom .6s ease-out both}
@keyframes v2pZoom{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.v2p-center.v2p-zoom{animation-name:v2pZoomC}
@keyframes v2pZoomC{from{opacity:0;transform:translateX(-50%) scale(.4)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.v2p-topleft{left:6%;top:10%}
.v2p-topleft .duo{font-size:1.35em;font-weight:900}
.v2p-topleft .wht{color:#f3ecdd} /* boss: only the 24 white, the /7 stays orange */
.v2p-topleft b{font-weight:inherit}
/* boss 2026-08-08: 4K at 100% felt small (he zoomed to 125%) — scale the hero up on very wide screens */
@media (min-width:1900px) and (min-height:1150px){
  body.v2-videobg .hero .hero-grid{max-width:1500px}
  body.v2-videobg .hero-title{font-size:clamp(3.2rem,4.2vw,6rem)}
  .machines-img{width:min(700px,90%)}
  body.v2-videobg .hero-sub{font-size:1.3rem;max-width:600px}
  body.v2-videobg .hero-stats .stat-num{font-size:1.9rem}
  body.v2-videobg .btn{padding:17px 28px;font-size:1rem}
  body.v2-videobg .hero-kicker{font-size:.95rem}
}
/* boss 2026-08-08: load entrance — MACHINES drops in and lands heavy, AI rolls in from the left */
/* sequence: AI rolls in first, THEN someone hurls the machine in from off-screen right */
@keyframes v2rollin{from{opacity:0;transform:skewX(-12deg) translateX(-130vw)}to{opacity:1;transform:skewX(-12deg) translateX(0)}}
.hero-ai-bg{animation:v2rollin 1.05s ease-out .1s both}
/* natural throw: container = X + spin (decelerating), the word itself = gravity arc
   (rise to apex ease-out, fall ease-in, one bounce). Two axes = real parabola. */
/* boss final call: straight slide from the left, overshoot, spring back */
@keyframes v2slidein{
  0%{opacity:0;transform:translateX(-115vw)}
  6%{opacity:1}
  72%{transform:translateX(3vw)}
  88%{transform:translateX(-.8vw)}
  100%{transform:none}}
.machines-line{animation:v2slidein .95s cubic-bezier(.25,.6,.4,1) 1.4s both}