/* Home: the scroll-scrubbed hero film */

.hero{--gx:max(var(--gut),calc((100vw - 1320px) / 2 + var(--gut)));position:relative;height:520vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas-deep)}
.poster{position:absolute;inset:0;background-color:var(--canvas-deep);background-image:var(--poster,none),url("data:image/webp;base64,UklGRvgAAABXRUJQVlA4IOwAAACwBgCdASowABwAPsFOo0unpCMhsBqoAPAYCWMAt+vWBYHNN8G7fnwK64ePJ218fhtftEOkQsoZsY9LaPI4AAD+70veWTvtklOf2dVhelEVk43+vAsRDhKx7Hx0EHTF96rBbA1i7qkT0FCup9lZzk9ZdueqHwIcrNhyv956qWzTkFbaB1HL4pxFlO8a7aqS7C+E3emT46JKJq853ho3T2CYKqIgsKS+5bFf3kUJ16ko825FR2PgYPYRI/DtN0PtJWMqZ+o1Bc4sWkkiZtHkDdD1Cc4VYZ4MgbBMQ1yB/NDDZjzqT0e2GjZoiAAAAA==");background-position:66% center;background-size:cover;background-repeat:no-repeat}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% center;opacity:0;transform:translateZ(0);will-change:transform;transition:opacity 1.2s var(--ease)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 62% 45%,rgba(8,12,20,0) 38%,rgba(8,12,20,.62) 100%),linear-gradient(180deg,rgba(8,12,20,.6) 0,rgba(8,12,20,0) 170px)}

.bands{position:absolute;inset:0;z-index:2}
.band{position:absolute;inset:0;display:flex;align-items:center;padding-bottom:6vh;opacity:0;visibility:hidden;text-shadow:var(--tshadow)}
.band.vis{visibility:visible}
.band .col{position:relative;isolation:isolate;margin-left:var(--gx);width:min(660px,48vw)}
.band .col::before{content:"";position:absolute;inset:-96px -120px -96px -160px;z-index:-1;pointer-events:none;border-radius:60px;background:rgba(5,8,14,var(--sa,.66));filter:blur(48px);opacity:calc(.25 + .75 * var(--k,1))}
.b1{--sa:.84}
.b2{--sa:.8}
.b3{--sa:.62;align-items:flex-end;padding-bottom:calc(39vh + 26px)}
.band .btn{text-shadow:none}
.b3{visibility:visible}
.b3 .btn{pointer-events:none}
.b3.act .btn{pointer-events:auto}
.poster-end{position:absolute;inset:0;opacity:0;background-position:66% center;background-size:cover;background-repeat:no-repeat}
.stage.video-failed .poster-end{background-image:url("../hero-ending.webp"),url("data:image/webp;base64,UklGRrIAAABXRUJQVlA4IKYAAAAwBQCdASowABwAPsFYo00npSMiKrgKAPAYCWUAv1k2A25mxaUEZg+bQPOkwBCZlNXdgAD+8v4Un3lAHHTse3+N4+NVUURhRJi5dIA/wEb4KC6aZdymQFo/7j/BbrfacR+cWNScVuEXUN+eB4GM4p/nQ5d9eu4D+jDmy8NbWSvnGXhzpN0kM8gYpX2H8M0DuirtNXBdi9VBwTA8WJ1qz4gKwE30AAAA");opacity:var(--pe,0)}

.kick-chip{display:inline-flex;align-items:center;gap:12px;min-height:36px;padding:0 16px;margin:0 0 26px;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:rgba(8,10,18,.55);box-shadow:inset 0 0 0 1px rgba(150,160,190,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85)}
.kick-chip::before{content:"";width:18px;height:1px;background:var(--accent)}
.b1 h1{font-size:clamp(40px,4.7vw,76px);line-height:1.05;letter-spacing:-.012em;max-width:15ch}
.b2 .punch{margin:0;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(42px,5.2vw,82px);line-height:1.04;letter-spacing:-.01em;color:var(--accent-hover);max-width:11ch}
.b3 .hsub{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.3vw,35px);line-height:1.28;letter-spacing:0;max-width:24ch;color:var(--text)}
.b3 .btn-row{margin-top:30px}

/* Split text: words and characters, driven by the band's --k */
.fxt .w{display:inline-block;white-space:nowrap}
.fxt .c{display:inline-block}
[data-fx="scatter"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc)) * var(--jx,0px)),calc((1 - var(--kc)) * var(--jy,0px))) rotate(calc((1 - var(--kc)) * var(--jr,0deg)))}
[data-fx="punch"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1)) * var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12)) * var(--kc) - var(--ov,.12) * var(--ks)))}
[data-fx="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6}
[data-fx="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 26px))}
.b3 .btn-row{--kb:clamp(0,(var(--k,0) - .72) * 4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 18px))}

/* Loading ring and the scroll cue */
.loader{position:absolute;left:50%;bottom:30px;z-index:3;width:52px;height:52px;margin-left:-26px;transition:opacity .8s var(--ease)}
.loader .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.loader .ring circle{stroke:var(--accent);filter:drop-shadow(0 0 4px rgba(250,211,151,.6))}
.loader .ring .bg{stroke:rgba(169,181,199,.25);filter:none}
.loader .seal{position:absolute;left:9px;top:9px;width:34px;height:34px}
.stage.video-ready .loader,.stage.video-failed .loader{opacity:0}
.cue{position:absolute;left:50%;bottom:26px;z-index:3;width:44px;margin-left:-22px;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transition:opacity .8s var(--ease)}
.cue i{display:block;width:1px;height:40px;background:linear-gradient(var(--accent),rgba(216,180,90,0));transform-origin:top}
.cue svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stage.cue-on .cue{opacity:1}
.stage.cue-on.moved .cue{opacity:0}
.stage.cue-on .cue i{animation:cuedrop 2.6s var(--ease-io) infinite;animation-delay:-.6s}
@keyframes cuedrop{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-height:560px){.cue,.loader{display:none}}

/* ---------- Static hero: phones, portrait tablets, coarse portrait, landscape phones, reduced motion ---------- */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;top:auto;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:var(--canvas-deep)}
  .stage video,.loader,.cue{display:none}
  .poster{background-image:url("../hero-ending.webp"),url("data:image/webp;base64,UklGRrIAAABXRUJQVlA4IKYAAAAwBQCdASowABwAPsFYo00npSMiKrgKAPAYCWUAv1k2A25mxaUEZg+bQPOkwBCZlNXdgAD+8v4Un3lAHHTse3+N4+NVUURhRJi5dIA/wEb4KC6aZdymQFo/7j/BbrfacR+cWNScVuEXUN+eB4GM4p/nQ5d9eu4D+jDmy8NbWSvnGXhzpN0kM8gYpX2H8M0DuirtNXBdi9VBwTA8WJ1qz4gKwE30AAAA");background-position:66% center}
  .scrim{background:linear-gradient(90deg,rgba(8,12,20,.82) 0%,rgba(8,12,20,.55) 42%,rgba(8,12,20,0) 70%),linear-gradient(180deg,rgba(8,12,20,.6) 0,rgba(8,12,20,0) 170px)}
  .bands{position:relative;inset:auto;width:100%;padding:calc(var(--head-h) + 48px) 0 72px}
  .band{position:static;display:block;padding:0;opacity:1!important;visibility:visible!important}
  .b3 .btn{pointer-events:auto}
  .poster-end{display:none}
  .band .col{width:min(640px,54vw)}
  .band .col::before{display:none}
  .b2 .punch{margin-top:18px;font-size:clamp(30px,3.6vw,52px)}
  .b1 h1{font-size:clamp(34px,4.2vw,62px)}
  .b3 .hsub{margin-top:22px;font-size:clamp(19px,1.8vw,26px)}
  .fxt .c,.fxt .w,.b3 .btn-row{opacity:1!important;transform:none!important}
}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse){
  .stage{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .poster{bottom:auto;height:min(78svh,720px);background-image:url("../img/hero-mobile-randy-blue-suit.jpg"),url("data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAADQBACdASobACQAPr1Uo0qnJSOhsBqqqOAXiWMAuDAWbRsnlVERurI48nLtNOtZAAD+8qMU9diK+b8n+OEYq2DsixQ4sToR2TsETTrZmLuqHF9vMRlY4skFCdeD5c00x1Hv6yBC1u5Vay8tLECaE9WGU8+Dy0og1WIjL+PQsO89TnMHXoOL90YzoCu+X1TgAAA=");background-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .scrim{background:linear-gradient(180deg,rgba(8,12,20,.55) 0,rgba(8,12,20,0) 140px)}
  .bands{padding:max(52svh,340px) 0 56px}
  .band .col{width:auto;margin:0 var(--gut)}
  .kick-chip{font-size:11.5px;letter-spacing:.1em;padding:0 12px}
  .b1 h1{font-size:clamp(34px,8.6vw,54px)}
  .b2 .punch{font-size:clamp(28px,7vw,44px)}
  .b3 .hsub{font-size:clamp(19px,4.8vw,24px);max-width:none}
  .b1 h1,.b2 .punch{max-width:none}
  .kick-chip{letter-spacing:.08em}
}