/* =========================================================
   FX LAYER — motion, light, F1 & cricket effects
   ========================================================= */
:root{--d0:1.75s}
.skip-intro{--d0:.15s}
.skip-intro #intro{display:none}

/* ---------- INTRO: lens iris ---------- */
#intro{position:fixed;inset:0;z-index:10001;pointer-events:none;animation:introHide 0s 2.5s forwards}
@keyframes introHide{to{visibility:hidden}}
#intro .iris{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 150vmax #050507,inset 0 0 60px 12px rgba(255,61,0,.55);animation:irisOpen 1s 1.35s cubic-bezier(.77,0,.18,1) forwards}
@keyframes irisOpen{to{width:300vmax;height:300vmax}}
#intro .intro-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--white);animation:introOut .35s 1.15s forwards}
@keyframes introOut{to{opacity:0;transform:scale(1.2)}}
.intro-ap{width:120px;height:120px;color:var(--accent);filter:drop-shadow(0 0 18px rgba(255,61,0,.6));animation:apSpin 1.3s cubic-bezier(.5,0,.2,1) both}
@keyframes apSpin{from{transform:rotate(-220deg) scale(.5);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
.intro-logo{font-family:'Bebas Neue',sans-serif;font-size:56px;letter-spacing:12px;line-height:1;padding-left:12px}
.intro-logo span{color:var(--accent)}
.intro-meta{font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:3px;color:rgba(240,237,230,.55);display:flex;gap:18px}
.intro-meta b{color:var(--accent);font-weight:600}
.intro-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:introFlash .6s 1.3s ease-out}
@keyframes introFlash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}

/* ---------- PROGRESS: mini F1 car ---------- */
#prog{height:3px;background:linear-gradient(90deg,var(--accent),#ff8a4c,var(--gold))}
.prog-car{position:absolute;right:-32px;top:-4px;width:36px;height:11px;filter:drop-shadow(0 0 6px rgba(255,61,0,.8))}

/* ---------- CURSOR: viewfinder ---------- */
html.has-cur,html.has-cur *{cursor:none!important}
.cur{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;z-index:10000;transition:width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1),margin .3s cubic-bezier(.16,1,.3,1);mix-blend-mode:difference}
.cur i{position:absolute;width:11px;height:11px;border:2px solid #fff;transition:transform .2s}
.cur i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.cur i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.cur i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.cur i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.cur.big{width:86px;height:86px;margin:-43px 0 0 -43px}
.cur.snap i{transform:scale(.7)}
.cur-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 10px/1 Inter,sans-serif;letter-spacing:2px;color:#fff;opacity:0;transition:opacity .2s}
.cur.big .cur-lbl{opacity:1}
.cur-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:10000;box-shadow:0 0 10px var(--accent)}
.click-flash{position:fixed;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid #fff;pointer-events:none;z-index:10000;animation:clickF .55s ease-out forwards}
@keyframes clickF{from{transform:scale(.4);opacity:1;box-shadow:0 0 30px 10px rgba(255,255,255,.7)}to{transform:scale(7);opacity:0;box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ---------- SHUTTER (lightbox open) ---------- */
#shutter{position:fixed;inset:0;z-index:10002;pointer-events:none;visibility:hidden}
#shutter::before,#shutter::after{content:'';position:absolute;left:0;right:0;height:50.5%;background:#000}
#shutter::before{top:0;transform:translateY(-100%)}
#shutter::after{bottom:0;transform:translateY(100%)}
#shutter i{position:absolute;inset:0;background:#fff;opacity:0}
#shutter.snap{visibility:visible}
#shutter.snap::before{animation:shTop .45s cubic-bezier(.7,0,.3,1)}
#shutter.snap::after{animation:shBot .45s cubic-bezier(.7,0,.3,1)}
#shutter.snap i{animation:shFlash .6s ease-out}
@keyframes shTop{0%,100%{transform:translateY(-100%)}45%,55%{transform:translateY(0)}}
@keyframes shBot{0%,100%{transform:translateY(100%)}45%,55%{transform:translateY(0)}}
@keyframes shFlash{0%,50%{opacity:0}60%{opacity:.55}100%{opacity:0}}

/* ---------- HERO: lights, bokeh, flashes ---------- */
#hero{padding-bottom:120px}
.flood{position:absolute;top:-10%;width:60vw;height:130%;pointer-events:none;mix-blend-mode:screen;opacity:.6}
.flood-l{left:-6vw;transform-origin:0 0;background:conic-gradient(from 118deg at 0 0,transparent 0deg,rgba(255,226,190,.17) 11deg,rgba(255,200,150,.05) 20deg,transparent 28deg,transparent 360deg);animation:sweepL 9s ease-in-out infinite alternate}
.flood-r{right:-6vw;transform-origin:100% 0;background:conic-gradient(from 214deg at 100% 0,transparent 0deg,rgba(255,200,160,.05) 8deg,rgba(255,226,190,.17) 17deg,transparent 28deg,transparent 360deg);animation:sweepR 11s ease-in-out infinite alternate}
@keyframes sweepL{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
@keyframes sweepR{from{transform:rotate(10deg)}to{transform:rotate(-12deg)}}
.rig{position:absolute;top:78px;display:grid;grid-template-columns:repeat(4,9px);gap:5px;pointer-events:none;z-index:1}
.rig-l{left:3vw}.rig-r{right:3vw}
.rig i{width:9px;height:9px;border-radius:2px;background:#fff7e6;box-shadow:0 0 10px 3px rgba(255,230,190,.7),0 0 40px 8px rgba(255,200,140,.22);animation:lamp 3.4s infinite}
.rig i:nth-child(3n){animation-delay:.7s}.rig i:nth-child(4n+1){animation-delay:1.9s}
@keyframes lamp{0%,47%,53%,100%{opacity:1}50%{opacity:.45}}
#bokeh{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.flash-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.flash{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 30px 12px rgba(255,255,255,.85),0 0 90px 40px rgba(255,220,200,.3);transform:scale(var(--s));animation:flash .6s ease-out forwards}
.flash::before,.flash::after{content:'';position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,#fff,transparent)}
.flash::before{width:120px;height:1px;margin:0 0 0 -60px}
.flash::after{width:1px;height:120px;margin:-60px 0 0 0;background:linear-gradient(180deg,transparent,#fff,transparent)}
@keyframes flash{0%{opacity:0}8%{opacity:1}100%{opacity:0;transform:scale(calc(var(--s) * 1.6))}}

/* ---------- HERO: headline reveal ---------- */
.hero-h1{animation:none}
.hero-h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-h1 .ln>span{display:inline-block;animation:lineUp 1.1s cubic-bezier(.16,1,.3,1) backwards}
.hero-h1 .ln:nth-child(1)>span{animation-delay:var(--d0)}
.hero-h1 .ln:nth-child(2)>span{animation-delay:calc(var(--d0) + .12s)}
.hero-h1 .ln>span.line-accent{background:linear-gradient(110deg,#ff3d00 20%,#ff8a4c 40%,#ffe2c6 50%,#ff8a4c 60%,#ff3d00 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lineUp 1.1s cubic-bezier(.16,1,.3,1) backwards,shimmer 4.5s linear infinite;animation-delay:calc(var(--d0) + .24s),calc(var(--d0) + 1.3s)}
@keyframes lineUp{from{transform:translateY(110%) skewY(7deg)}to{transform:none}}
@keyframes shimmer{from{background-position:130% 0}to{background-position:-130% 0}}
.hero-eyebrow,.hero-para,.hero-btns,.hero-stats{animation-delay:calc(var(--d0) + .3s)!important}
.hero-para{animation-delay:calc(var(--d0) + .45s)!important}
.hero-btns{animation-delay:calc(var(--d0) + .6s)!important}
.hero-stats{animation-delay:calc(var(--d0) + .75s)!important}
.hero-eyebrow{animation-delay:calc(var(--d0) - .1s)!important}

/* ---------- HERO: collage + viewfinder ---------- */
.hero-collage{transition:transform .5s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}
.hero-collage .hc-1{--r:2deg}.hero-collage .hc-2{--r:-4deg}.hero-collage .hc-3{--r:3deg}
.hero-collage img{transform:rotate(var(--r));animation:dropIn 1.2s cubic-bezier(.16,1,.3,1) backwards;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.hero-collage .hc-1{animation-delay:calc(var(--d0) + .2s)}
.hero-collage .hc-2{animation-delay:calc(var(--d0) + .38s)}
.hero-collage .hc-3{animation-delay:calc(var(--d0) + .56s)}
.hero-collage img:hover{transform:rotate(0) scale(1.04);z-index:3;box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 0 2px rgba(255,61,0,.5)}
@keyframes dropIn{from{opacity:0;transform:translateY(-70px) rotate(calc(var(--r) * -5)) scale(1.18);filter:brightness(3) blur(8px)}to{opacity:1;transform:rotate(var(--r));filter:none}}
.hc-badge{animation:fadeUp .7s calc(var(--d0) + 1s) backwards}
.vf{position:absolute;inset:-18px;pointer-events:none;z-index:4;animation:fadeIn .6s calc(var(--d0) + 1.1s) backwards}
.vf-c{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,.8)}
.vf-c.tl{top:0;left:0;border-right:0;border-bottom:0}
.vf-c.tr{top:0;right:0;border-left:0;border-bottom:0}
.vf-c.bl{bottom:0;left:0;border-right:0;border-top:0}
.vf-c.br{bottom:0;right:0;border-left:0;border-top:0}
.vf-rec{position:absolute;top:8px;left:36px;font:700 11px/1 Inter,sans-serif;letter-spacing:2px;display:flex;align-items:center;gap:6px;color:#fff;text-shadow:0 1px 6px #000}
.vf-rec b,.rec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff2a2a;box-shadow:0 0 10px #ff2a2a;animation:blink 1s steps(1) infinite}
.vf-tc{position:absolute;top:8px;right:36px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;text-shadow:0 1px 6px #000}
.vf-meta{position:absolute;bottom:8px;left:36px;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;color:rgba(255,255,255,.85);text-shadow:0 1px 6px #000}
.vf-focus{position:absolute;width:66px;height:66px;left:calc(72% - 33px);top:13%;border:1.5px solid #fff;animation:focus 3.4s ease-in-out infinite}
.vf-focus::before,.vf-focus::after{content:'';position:absolute;left:50%;top:50%;background:currentColor}
.vf-focus::before{width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#fff}
.vf-focus::after{width:1.5px;height:10px;margin:-5px 0 0 -.75px;background:#fff}
@keyframes focus{0%{transform:scale(1.6);opacity:0;border-color:#fff}18%{transform:scale(1);opacity:1}30%{transform:scale(1.1)}40%,82%{transform:scale(1);border-color:#22c55e;opacity:1}100%{opacity:0;transform:scale(1)}}

/* ---------- HERO: F1 track ---------- */
.hero-track{position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;z-index:1;overflow:hidden}
.ht-road{position:absolute;left:0;right:0;bottom:22px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 40px,transparent 40px 80px);animation:roadMove .6s linear infinite}
.ht-kerb{position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,rgba(255,61,0,.55) 0 30px,rgba(240,237,230,.45) 30px 60px);animation:kerbMove 1.2s linear infinite;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
@keyframes roadMove{to{background-position:-80px 0}}
@keyframes kerbMove{to{background-position:-60px 0}}
.ht-car{position:absolute;bottom:12px;left:0;width:280px;animation:carRun 7.5s cubic-bezier(.55,0,.35,1) calc(var(--d0) + .9s) infinite backwards}
.ht-car svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.ht-trail{position:absolute;right:88%;bottom:14px;width:460px;height:48px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55)) 0 4px/100% 2px no-repeat,linear-gradient(90deg,transparent,rgba(255,255,255,.3)) 60px 18px/88% 1px no-repeat,linear-gradient(90deg,transparent,rgba(255,61,0,.75)) 20px 32px/96% 3px no-repeat,linear-gradient(90deg,transparent,rgba(232,184,75,.45)) 120px 42px/75% 2px no-repeat}
.ht-trail::after{content:'';position:absolute;right:-20px;top:10px;width:220px;height:34px;border-radius:50%;background:radial-gradient(ellipse at right,rgba(255,61,0,.45),transparent 70%);filter:blur(8px)}
@keyframes carRun{0%{transform:translateX(-360px)}22%{transform:translateX(calc(100vw + 80px))}100%{transform:translateX(calc(100vw + 80px))}}

/* ---------- FILM REEL ---------- */
.reel{padding:40px 0 48px;overflow:hidden;border-bottom:1px solid var(--border);background:#050507;position:relative}
.reel-label{display:flex;align-items:center;gap:10px;font:600 10px/1 Inter,sans-serif;letter-spacing:3px;text-transform:uppercase;color:rgba(240,237,230,.6);margin-bottom:22px}
.reel-band{margin:0 -6vw;transform:rotate(-2deg)}
.reel-band+.reel-band{transform:rotate(1.4deg);margin-top:18px}
.reel-row{display:flex;width:max-content;padding:22px 0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.16) 9px 21px,transparent 21px 30px) 0 7px/auto 8px repeat-x,repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.16) 9px 21px,transparent 21px 30px) 0 calc(100% - 7px)/auto 8px repeat-x,#0c0c0f;animation:reel 60s linear infinite}
.reel-band+.reel-band .reel-row{animation-name:reelRev;animation-duration:70s}
.reel:hover .reel-row{animation-play-state:paused}
@keyframes reel{to{transform:translateX(-50%)}}
@keyframes reelRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.reel-f{width:230px;height:150px;margin:0 5px;position:relative;flex-shrink:0;overflow:hidden;border-radius:3px;background:#111}
.reel-f img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05);transition:transform .6s cubic-bezier(.16,1,.3,1),filter .6s}
.reel-f:hover img{transform:scale(1.1);filter:saturate(1.3) contrast(1.1)}
.reel-f span{position:absolute;left:8px;top:7px;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;color:#ffb27a;text-shadow:0 1px 4px #000}

/* ---------- PHOTO GRID: shutter reveal + glare ---------- */
.ph-grid .ph.rv{opacity:1;transform:none;transition:transform .45s cubic-bezier(.25,.8,.25,1),box-shadow .45s}
.ph-grid .ph.rv::before{content:'';position:absolute;inset:-1px;z-index:4;pointer-events:none;background:linear-gradient(180deg,#0c0c10,#07070a);transform-origin:50% 0;transition:transform 1.15s cubic-bezier(.77,0,.18,1) var(--rd,0s)}
.ph-grid .ph.rv.on::before{transform:scaleY(0)}
.ph-grid .ph.rv img{transform:scale(1.3);transition:transform 1.5s cubic-bezier(.16,1,.3,1) var(--rd,0s)}
.ph-grid .ph.rv.on img{transform:scale(1)}
.ph-grid .ph.rv.on:hover img{transform:scale(1.07);transition-delay:0s}
.ph-grid .ph::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .3s;z-index:3;pointer-events:none;mix-blend-mode:overlay}
.ph-grid .ph:hover::after{opacity:1}
.ph-grid .ph:hover{box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 0 1px rgba(255,61,0,.35),0 0 50px rgba(255,61,0,.15)}

/* ---------- SECTION TITLES ---------- */
.sec-header.rv .sec-title{filter:blur(12px);transform:translateY(18px) skewX(-8deg);transition:filter 1s cubic-bezier(.16,1,.3,1) .1s,transform 1s cubic-bezier(.16,1,.3,1) .1s}
.sec-header.rv.on .sec-title{filter:none;transform:none}

/* ---------- MARQUEE ---------- */
.mq{overflow:hidden;padding:34px 0;border-bottom:1px solid var(--border);background:#07070a}
.mq-track{display:flex;width:max-content;white-space:nowrap;font-family:'Bebas Neue',sans-serif;font-size:clamp(60px,10vw,150px);line-height:1;will-change:transform}
.mq-track+.mq-track{margin-top:6px}
.mq-track span{padding:0 .28em;color:transparent;-webkit-text-stroke:1.5px rgba(240,237,230,.32)}
.mq-track span.f{color:var(--accent);-webkit-text-stroke:0;text-shadow:0 0 40px rgba(255,61,0,.45)}
.mq-track span.g{color:var(--gold);-webkit-text-stroke:0;text-shadow:0 0 40px rgba(232,184,75,.35)}
.mq-track span.x{color:rgba(240,237,230,.25);-webkit-text-stroke:0;padding:0}

/* ---------- SPORTS: speed lines ---------- */
.sports-bg{position:relative;overflow:hidden}
.sports-bg>.wrap{position:relative;z-index:1}
.sports-bg::before{content:'';position:absolute;inset:-100px;background:repeating-linear-gradient(-60deg,transparent 0 60px,rgba(255,61,0,.04) 60px 62px);animation:speedBg 2.4s linear infinite;pointer-events:none}
@keyframes speedBg{to{transform:translateX(71.6px)}}
.pit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.pit-panel{position:relative;background:linear-gradient(145deg,#111118,#0a0a10);border:1px solid var(--border);border-radius:24px;padding:28px 28px 90px;overflow:hidden;min-height:320px}
.pit-k{font:600 10px/1 Inter,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:24px;display:flex;align-items:center;gap:8px}

/* F1 start lights */
.gantry{display:flex;gap:12px;justify-content:center;padding:16px 18px;background:#050507;border-radius:14px;border:1px solid #1d1d25;width:max-content;max-width:100%;margin:0 auto;box-shadow:inset 0 2px 0 #1a1a22,0 20px 40px rgba(0,0,0,.4)}
.g-col{display:flex;flex-direction:column;gap:8px;padding:8px;background:#0e0e13;border-radius:10px;border:1px solid #1b1b22}
.g-col i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a1010,#170606);box-shadow:inset 0 0 6px #000;transition:background .06s,box-shadow .06s}
.g-col.on i{background:radial-gradient(circle at 35% 30%,#ffb0b0,#ff1e1e 45%,#a00000);box-shadow:0 0 18px 4px rgba(255,30,30,.7),0 0 50px 10px rgba(255,30,30,.22)}
.lights-msg{text-align:center;margin-top:22px;font-family:'Bebas Neue',sans-serif;font-size:clamp(26px,3vw,40px);letter-spacing:1px;line-height:1;color:rgba(240,237,230,.14);transition:all .25s}
.lights-panel.out .lights-msg{color:#fff;text-shadow:0 0 30px rgba(255,61,0,.8);transform:scale(1.05)}
.lights-track{position:absolute;left:0;right:0;bottom:20px;height:56px;overflow:hidden}
.lights-track::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 30px,transparent 30px 60px)}
.lt-car{position:absolute;bottom:6px;left:-180px;width:160px;height:48px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.lights-panel.out .lt-car{animation:ltRun 1.4s cubic-bezier(.6,0,.3,1) forwards}
@keyframes ltRun{from{left:-180px}to{left:110%}}

/* Cricket */
.cr-scene{position:absolute;left:0;right:0;bottom:0;top:70px}
.cr-ground{position:absolute;left:0;right:0;bottom:22px;height:30px;background:linear-gradient(90deg,transparent,rgba(196,170,110,.16) 15%,rgba(196,170,110,.16) 85%,transparent);border-top:1px solid rgba(240,237,230,.12)}
.cr-crease{position:absolute;right:calc(12% + 56px);bottom:22px;width:2px;height:30px;background:rgba(255,255,255,.4)}
.stumps{position:absolute;right:12%;bottom:40px;width:34px;height:100px}
.stump{position:absolute;bottom:0;width:6px;height:92px;border-radius:3px;background:linear-gradient(90deg,#f6ead0,#c4ad80);transform-origin:50% 100%}
.stump.a{left:0}.stump.m{left:14px}.stump.c{left:28px}
.bail{position:absolute;top:0;width:17px;height:5px;border-radius:3px;background:#f6ead0;box-shadow:0 0 6px rgba(255,255,255,.3)}
.bail.a{left:0}.bail.b{left:17px}
.cr-x{position:absolute;left:-8%;bottom:40px;width:34px;height:34px;opacity:0}
.cr-y{position:relative;width:100%;height:100%}
.cr-y svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 10px rgba(255,40,40,.55))}
.cr-trail{position:absolute;right:60%;top:40%;width:120px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(255,80,80,.6))}
.cr-impact{position:absolute;right:calc(12% - 30px);bottom:110px;width:94px;height:94px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,61,0,.4) 40%,transparent 70%);opacity:0;transform:scale(.2)}
.howzat{position:absolute;right:6%;top:-6px;font-family:'Bebas Neue',sans-serif;font-size:clamp(40px,5vw,62px);line-height:1;color:var(--accent);text-shadow:0 0 30px rgba(255,61,0,.6);opacity:0}
.cr-speed{position:absolute;left:28px;top:-10px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;color:rgba(240,237,230,.6);opacity:0}
.cr-speed b{font-family:'Bebas Neue',sans-serif;font-size:34px;color:#fff;letter-spacing:1px;margin-right:4px;font-weight:400}
.cr-scene .cr-x,.cr-scene .cr-y,.cr-scene .bail,.cr-scene .stump,.cr-scene .howzat,.cr-scene .cr-impact,.cr-scene .cr-speed{animation-duration:4.6s;animation-iteration-count:infinite;animation-play-state:paused}
.cr-scene.play .cr-x,.cr-scene.play .cr-y,.cr-scene.play .bail,.cr-scene.play .stump,.cr-scene.play .howzat,.cr-scene.play .cr-impact,.cr-scene.play .cr-speed{animation-play-state:running}
.cr-x{animation-name:crX;animation-timing-function:linear}
.cr-y{animation-name:crY}
.bail.a{animation-name:bailA}.bail.b{animation-name:bailB}
.stump.m{animation-name:stumpM}.stump.c{animation-name:stumpC}.stump.a{animation-name:stumpA}
.howzat{animation-name:howzat}
.cr-impact{animation-name:impact}
.cr-speed{animation-name:speedIn}
@keyframes crX{0%{left:-8%;opacity:0}3%{opacity:1}46%{left:calc(88% - 62px);opacity:1}58%{left:calc(88% - 30px);opacity:0}100%{left:calc(88% - 30px);opacity:0}}
@keyframes crY{0%{transform:translateY(-130px);animation-timing-function:cubic-bezier(.5,0,1,1)}30%{transform:translateY(12px);animation-timing-function:cubic-bezier(0,0,.5,1)}46%{transform:translateY(-34px)}58%{transform:translateY(-20px)}100%{transform:translateY(-20px)}}
@keyframes bailA{0%,46%{transform:none;opacity:1}60%{transform:translate(-40px,-90px) rotate(-280deg)}76%{transform:translate(-64px,58px) rotate(-430deg);opacity:1}88%,100%{transform:translate(-64px,58px) rotate(-430deg);opacity:0}}
@keyframes bailB{0%,46%{transform:none;opacity:1}62%{transform:translate(40px,-105px) rotate(300deg)}78%{transform:translate(70px,58px) rotate(470deg);opacity:1}88%,100%{transform:translate(70px,58px) rotate(470deg);opacity:0}}
@keyframes stumpM{0%,46%{transform:none}52%,86%{transform:rotate(18deg)}96%,100%{transform:none}}
@keyframes stumpC{0%,46%{transform:none}53%,86%{transform:rotate(9deg)}96%,100%{transform:none}}
@keyframes stumpA{0%,46%{transform:none}54%,86%{transform:rotate(4deg)}96%,100%{transform:none}}
@keyframes howzat{0%,47%{opacity:0;transform:scale(.4) rotate(-8deg)}53%{opacity:1;transform:scale(1.15) rotate(-4deg)}60%,84%{opacity:1;transform:scale(1) rotate(-4deg)}92%,100%{opacity:0;transform:scale(1) rotate(-4deg)}}
@keyframes impact{0%,45%{opacity:0;transform:scale(.2)}48%{opacity:1;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.6)}}
@keyframes speedIn{0%,8%{opacity:0;transform:translateY(6px)}16%,86%{opacity:1;transform:none}94%,100%{opacity:0}}

/* ---------- CHEQUERED FLAG ---------- */
.checker{height:28px;background:conic-gradient(#f0ede6 25%,#07070a 0 50%,#f0ede6 0 75%,#07070a 0) 0 0/28px 28px;animation:checker 1.4s linear infinite;opacity:.85;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
@keyframes checker{to{background-position:56px 0}}

/* ---------- CONTACT ---------- */
.cta-ap{position:absolute;left:50%;top:50%;width:640px;height:640px;margin:-320px 0 0 -320px;color:var(--accent);opacity:.08;animation:apRot 40s linear infinite;pointer-events:none}
@keyframes apRot{to{transform:rotate(360deg)}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1023px){
  .pit{grid-template-columns:1fr}
}
@media(max-width:767px){
  #hero{padding-bottom:90px}
  .hero-track{height:80px}
  .ht-car{width:170px}
  .ht-trail{width:280px;transform:scale(.7);transform-origin:right bottom}
  .flood{opacity:.38}
  .rig{display:none}
  .vf-meta{display:none}
  .vf{inset:-10px}
  .reel-f{width:150px;height:100px}
  .g-col i{width:20px;height:20px}
  .gantry{gap:7px;padding:12px}
  .g-col{padding:6px;gap:6px}
  .stumps{right:8%}
  .cr-crease{right:calc(8% + 56px)}
  .cr-impact{right:calc(8% - 30px)}
  .cta-ap{width:420px;height:420px;margin:-210px 0 0 -210px}
}


/* ---------- CONTACT BLAST: F1 lights + studio strobes + 3D quake ---------- */
@supports (overflow:clip){html,body{overflow-x:clip}}
.fx-blast{position:fixed;inset:0;z-index:10005;pointer-events:none;overflow:hidden;perspective:900px;contain:strict}
.bl-dim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(7,7,10,.55),rgba(7,7,10,.92));opacity:0;animation:blDim 1.5s ease forwards}
@keyframes blDim{0%{opacity:0}12%{opacity:1}55%{opacity:1}100%{opacity:0}}
.bl-gantry{position:absolute;left:50%;top:22%;display:flex;gap:clamp(6px,2vw,14px);padding:clamp(8px,2vw,14px);background:#0b0b0e;border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.7);transform:translate3d(-50%,-30px,0) rotateX(25deg);opacity:0;animation:blGantry 1.5s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes blGantry{0%{opacity:0;transform:translate3d(-50%,-40px,-200px) rotateX(40deg)}14%{opacity:1;transform:translate3d(-50%,0,0) rotateX(12deg)}52%{opacity:1;transform:translate3d(-50%,0,0) rotateX(12deg) scale(1)}70%{opacity:0;transform:translate3d(-50%,-20px,300px) rotateX(0) scale(1.4)}100%{opacity:0}}
.bl-col{display:flex;flex-direction:column;gap:clamp(5px,1.4vw,9px);padding:clamp(5px,1.4vw,8px);background:#141418;border-radius:8px}
.bl-col i{display:block;width:clamp(22px,7vw,40px);height:clamp(22px,7vw,40px);border-radius:50%;background:#2a0a0a;box-shadow:inset 0 2px 6px rgba(0,0,0,.8);transition:background .05s,box-shadow .05s}
.bl-col.on i{background:radial-gradient(circle at 40% 35%,#ffd0c4,#ff2a1a 40%,#b30000 75%);box-shadow:0 0 18px 4px rgba(255,30,10,.75),0 0 60px 10px rgba(255,30,10,.35)}
.bl-core{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 40px 20px #fff,0 0 110px 60px rgba(255,170,90,.8)}
.bl-rays{position:absolute;inset:0;opacity:0;transform-origin:var(--x) var(--y);background:repeating-conic-gradient(from 0deg at var(--x) var(--y),rgba(255,255,255,.55) 0deg 2deg,transparent 2deg 9deg,rgba(255,140,60,.35) 9deg 10.5deg,transparent 10.5deg 18deg);-webkit-mask:radial-gradient(circle at var(--x) var(--y),#000 0,rgba(0,0,0,.6) 20vmax,transparent 75vmax);mask:radial-gradient(circle at var(--x) var(--y),#000 0,rgba(0,0,0,.6) 20vmax,transparent 75vmax)}
.bl-ring{position:absolute;width:24vmax;height:24vmax;margin:-12vmax 0 0 -12vmax;border-radius:50%;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 40px rgba(255,120,40,.9),inset 0 0 40px rgba(255,120,40,.6);opacity:0}
.bl-ring.r2{border-color:rgba(255,61,0,.9)}
.bl-beam{position:absolute;top:-5%;width:55vw;height:115%;opacity:0;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,236,210,.35) 35%,transparent 75%);-webkit-mask:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mix-blend-mode:screen}
.bl-beam.l{left:-12vw;transform-origin:50% 0;transform:rotate(-32deg)}
.bl-beam.r{right:-12vw;transform-origin:50% 0;transform:rotate(32deg)}
.bl-spark{position:absolute;width:clamp(60px,18vmin,160px);height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(90deg,transparent,#fff 60%,#ffb36b);transform-origin:0 50%;opacity:0}
.bl-white{position:absolute;inset:0;background:#fff;opacity:0}
.bl-txt{position:absolute;left:0;right:0;top:50%;text-align:center;font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,13vw,150px);letter-spacing:.04em;line-height:.9;color:#fff;text-shadow:0 0 30px rgba(255,61,0,.9),0 0 80px rgba(255,61,0,.6);opacity:0;transform:translate3d(0,-50%,-600px)}
.bl-txt small{display:block;font-family:'Inter',sans-serif;font-size:clamp(10px,2.6vw,14px);font-weight:600;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:none;margin-top:14px}
.fx-blast.go .bl-core{animation:blCore .7s cubic-bezier(.1,.8,.3,1) forwards}
.fx-blast.go .bl-rays{animation:blRays 1s cubic-bezier(.1,.8,.3,1) forwards}
.fx-blast.go .bl-ring{animation:blRing .8s cubic-bezier(.1,.8,.3,1) forwards}
.fx-blast.go .bl-ring.r2{animation-delay:.09s}
.fx-blast.go .bl-beam{animation:blBeam .85s ease-out forwards}
.fx-blast.go .bl-beam.r{animation-delay:.06s}
.fx-blast.go .bl-spark{animation:blSpark .7s cubic-bezier(.1,.8,.3,1) forwards}
.fx-blast.go .bl-white{animation:blWhite .45s ease-out forwards}
.fx-blast.go .bl-txt{animation:blTxt .95s cubic-bezier(.16,1,.3,1) forwards}
@keyframes blCore{0%{opacity:1;transform:scale(.3)}30%{opacity:1;transform:scale(2.4)}100%{opacity:0;transform:scale(4)}}
@keyframes blRays{0%{opacity:0;transform:scale(.4)}15%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes blRing{0%{opacity:1;transform:rotateX(60deg) scale(.1)}100%{opacity:0;transform:rotateX(60deg) scale(4)}}
@keyframes blBeam{0%{opacity:0}12%{opacity:.95}30%{opacity:.25}42%{opacity:.85}100%{opacity:0}}
@keyframes blSpark{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scaleX(.3)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scaleX(1)}}
@keyframes blWhite{0%{opacity:.85}100%{opacity:0}}
@keyframes blTxt{0%{opacity:0;transform:translate3d(0,-50%,-600px) rotateX(35deg)}35%{opacity:1;transform:translate3d(0,-50%,0) rotateX(0)}70%{opacity:1;transform:translate3d(0,-50%,40px)}100%{opacity:0;transform:translate3d(0,-50%,320px)}}
.quake{animation:blQuake .55s cubic-bezier(.36,.07,.19,.97) both;backface-visibility:hidden}
@keyframes blQuake{0%{transform:none}10%{transform:perspective(1200px) translate3d(-7px,4px,-30px) rotateX(1.4deg) rotateY(-1.6deg)}22%{transform:perspective(1200px) translate3d(8px,-5px,-20px) rotateX(-1.2deg) rotateY(1.4deg)}36%{transform:perspective(1200px) translate3d(-6px,3px,-12px) rotateY(-1deg)}50%{transform:perspective(1200px) translate3d(5px,-2px,-6px) rotateY(.7deg)}66%{transform:translate3d(-3px,1px,0)}82%{transform:translate3d(2px,0,0)}100%{transform:none}}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  #intro,.hero-track,.flood,#bokeh,.flash-layer,.cr-x,.lt-car,.vf-focus,.fx-blast{display:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
}