/* =====================================================
   THE PIT WALL - DESIGN SYSTEM
   Tokens, glass utilities, reveals, cinematic components
   ===================================================== */
:root {
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
  --sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px;
  --t-fast:120ms;--t-base:250ms;--t-slow:450ms;--t-cinema:800ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-cinema:cubic-bezier(.22,.8,.24,1);
  --glass-blur:blur(22px) saturate(160%);
  --glass-blur-sm:blur(12px) saturate(140%);
  --shadow-sm:0 4px 16px rgba(0,0,0,.32);
  --shadow-md:0 12px 38px rgba(0,0,0,.42);
  --shadow-lg:0 24px 72px rgba(0,0,0,.54);
  --shadow-xl:0 40px 120px rgba(0,0,0,.64);
}
@keyframes revealUp{from{opacity:0;transform:translateY(32px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes revealLeft{from{opacity:0;transform:translateX(-32px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes revealRight{from{opacity:0;transform:translateX(32px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes revealScale{from{opacity:0;transform:scale(.92);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes dotPing{0%{transform:scale(1);opacity:1}80%{transform:scale(2.8);opacity:0}100%{opacity:0}}
@keyframes aurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes borderPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,0,45,.4)}50%{box-shadow:0 0 0 6px rgba(232,0,45,0)}}
@keyframes dashDraw{from{stroke-dashoffset:var(--dash-len,1000)}to{stroke-dashoffset:0}}

/* SCROLL REVEAL */
[data-reveal]{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity var(--t-cinema) var(--ease-out),transform var(--t-cinema) var(--ease-out),filter var(--t-cinema) var(--ease-out);
  transition-delay:calc(var(--ri,0) * 65ms)}
[data-reveal=left]{transform:translateX(-28px)}
[data-reveal=right]{transform:translateX(28px)}
[data-reveal=scale]{transform:scale(.92);filter:blur(10px)}
[data-reveal].is-revealed{opacity:1;transform:none;filter:blur(0)}

/* PAGE TRANSITION */
#page-transition{position:fixed;inset:0;background:#03050d;z-index:9999;pointer-events:none;clip-path:inset(100% 0 0 0);transition:clip-path .38s cubic-bezier(.76,0,.24,1)}
#page-transition.pw-exit{clip-path:inset(0 0 0 0);pointer-events:all}
#page-progress{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#e8002d,#ffd400,#1e41ff);background-size:200% 100%;animation:gradientShift 2s linear infinite;z-index:9998;transform-origin:left;transform:scaleX(0);opacity:0;transition:transform .3s ease,opacity .2s ease}
#page-progress.loading{opacity:1}

/* CURSOR */
.pw-cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:#fff;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .15s,height .15s}
.pw-cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1.5px solid rgba(255,255,255,.65);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:width .2s var(--ease-spring),height .2s var(--ease-spring),border-color .2s ease,opacity .2s ease}
.pw-cursor-ring.on-link{width:56px;height:56px;border-color:rgba(232,0,45,.8)}
.pw-cursor-ring.on-card{width:64px;height:64px;border-color:rgba(255,212,0,.7)}
.pw-cursor-ring.clicking{width:24px;height:24px;border-color:#e8002d}
@media(hover:none),(pointer:coarse){.pw-cursor-dot,.pw-cursor-ring{display:none!important}}

/* AURORA */
.aurora-bg{position:fixed;inset:0;pointer-events:none;z-index:-4;background:radial-gradient(ellipse 80% 50% at 20% -10%,rgba(30,65,255,.22),transparent),radial-gradient(ellipse 60% 40% at 80% -5%,rgba(232,0,45,.18),transparent),radial-gradient(ellipse 40% 30% at 50% 100%,rgba(255,212,0,.08),transparent);filter:blur(60px);animation:aurora 18s ease-in-out infinite alternate;background-size:200% 200%}
#pw-particles{position:fixed;inset:0;pointer-events:none;z-index:-3;opacity:.6}

/* TILT */
.tilt-card{transform-style:preserve-3d}
.tilt-shine{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.14),transparent 60%);pointer-events:none;z-index:10;opacity:0;transition:opacity .3s ease}
.tilt-card:hover .tilt-shine{opacity:1}
.magnetic{display:inline-block;transition:transform .3s var(--ease-spring)}

/* GLASS */
.glass-panel{background:linear-gradient(145deg,rgba(255,255,255,.05),transparent 40%),rgba(9,14,25,.9);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.1);position:relative;overflow:hidden}
.glass-panel::before{content:\'\';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 8px),repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 8px);pointer-events:none;z-index:0}
.glass-panel>*{position:relative;z-index:1}

/* SHIMMER */
.shimmer-host{position:relative;overflow:hidden}
.shimmer-host::after{content:\'\';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.1) 50%,transparent 75%);transform:translateX(-120%) skewX(-20deg);transition:none;pointer-events:none;z-index:10}
.shimmer-host:hover::after{transform:translateX(120%) skewX(-20deg);transition:transform .65s var(--ease-out)}

/* LIVE DOT */
.live-dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:#e8002d;box-shadow:0 0 10px rgba(232,0,45,.7)}
.live-dot::after{content:\'\';position:absolute;inset:-4px;border-radius:50%;background:rgba(232,0,45,.4);animation:dotPing 1.8s ease-out infinite}

/* DATA CHIP */
.data-chip{display:inline-flex;flex-direction:column;gap:6px;padding:12px 16px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);background:rgba(255,255,255,.04);backdrop-filter:blur(12px);transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--ease-spring)}
.data-chip:hover{border-color:rgba(255,212,0,.4);box-shadow:0 8px 28px rgba(0,0,0,.3),0 0 20px rgba(255,212,0,.12);transform:translateY(-2px)}
.data-chip-label{font:900 9px/1 \'JetBrains Mono\',monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(184,193,212,.6)}
.data-chip-value{font:900 22px/1 \'JetBrains Mono\',monospace;letter-spacing:-.02em;color:#fff}

/* SECTION RULE + ACCENT */
.section-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(232,0,45,.5) 30%,rgba(255,212,0,.4) 60%,transparent);margin:48px 0;transform-origin:left;animation:lineGrow .8s var(--ease-out) both}
.accent-line{width:48px;height:2px;background:linear-gradient(90deg,#e8002d,#ffd400);border-radius:1px;margin-bottom:16px}

/* SKELETON */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:gradientShift 1.5s ease infinite;border-radius:var(--r-sm)}

/* HOLO BORDER */
.holo-border{position:relative}
.holo-border::before{content:\'\';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,#e8002d,#ffd400,#1e41ff,#e8002d);background-size:300% 300%;animation:gradientShift 4s linear infinite;z-index:-1;opacity:0;transition:opacity .3s ease}
.holo-border:hover::before{opacity:1}

/* PANELS */
.panel,.stat,.data-panel,.summary-card,.season-stats,.profile{border-radius:var(--r-lg)!important;background:linear-gradient(145deg,rgba(255,255,255,.05),transparent 40%),rgba(9,14,25,.9)!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.08)!important;transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--ease-out)!important}
.panel:hover,.stat:hover{border-color:rgba(255,255,255,.2)!important;box-shadow:var(--shadow-xl),inset 0 1px 0 rgba(255,255,255,.1)!important}

/* HERO CHIPS */
.hero-chip{border-radius:var(--r-md)!important;background:rgba(0,0,0,.48)!important;border:1px solid rgba(255,255,255,.18)!important;backdrop-filter:blur(14px)!important;transition:transform .2s var(--ease-spring),border-color .2s ease,box-shadow .2s ease!important}
.hero-chip:hover{transform:translateY(-3px)!important;border-color:rgba(255,212,0,.4)!important;box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 20px rgba(255,212,0,.14)!important}
.hero-chip.number-chip{border-color:color-mix(in srgb,var(--team-color,#e8002d) 60%,#fff)!important;box-shadow:0 0 28px color-mix(in srgb,var(--team-color,#e8002d) 35%,transparent)!important}

/* PANEL METRIC */
.panel-metric{border-radius:var(--r-md)!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;transition:border-color .2s ease,background .2s ease!important}
.panel-metric:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(255,212,0,.3)!important}

/* PANEL BTN */
.panel-btn{border-radius:var(--r-md)!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.06)!important;transition:transform .2s var(--ease-spring),background .2s ease,border-color .2s ease,box-shadow .2s ease!important;position:relative;overflow:hidden}
.panel-btn::after{content:\'\';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.16) 50%,transparent 75%);transform:translateX(-120%) skewX(-18deg);transition:none;pointer-events:none}
.panel-btn:hover{transform:translateY(-2px)!important;background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.4)!important;box-shadow:0 8px 28px rgba(0,0,0,.3)!important}
.panel-btn:hover::after{transform:translateX(120%) skewX(-18deg);transition:transform .55s var(--ease-out)}

/* SECTION TITLE ACCENT */
.section-title{position:relative;display:inline-block}
.section-title::after{content:\'\';position:absolute;bottom:-6px;left:0;width:40px;height:2px;background:linear-gradient(90deg,#e8002d,#ffd400);border-radius:1px}

/* RACE CARDS */
.race-card{border-radius:var(--r-lg)!important;border:1px solid rgba(255,255,255,.1)!important;background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 42%),rgba(9,14,25,.94)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;box-shadow:var(--shadow-md)!important;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .25s ease!important;overflow:hidden!important}
.race-card:hover{transform:translateY(-8px) scale(1.02)!important;border-color:rgba(255,255,255,.2)!important;box-shadow:var(--shadow-xl),0 0 32px rgba(30,65,255,.2)!important}
.race-card.next{border-color:rgba(232,0,45,.45)!important;background:linear-gradient(145deg,rgba(232,0,45,.14),rgba(232,0,45,.05) 40%),rgba(12,4,9,.96)!important;box-shadow:var(--shadow-lg),0 0 44px rgba(232,0,45,.2)!important}
.race-card.next:hover{border-color:rgba(232,0,45,.78)!important;box-shadow:var(--shadow-xl),0 0 72px rgba(232,0,45,.36)!important}

/* DATE + NEXT PILL */
.date-pill{border-radius:var(--r-sm)!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.06)!important;backdrop-filter:blur(8px)!important}
.next-pill{border-radius:var(--r-sm)!important;border:1px solid rgba(232,0,45,.6)!important;background:rgba(232,0,45,.15)!important;color:#fff!important;animation:borderPulse 2s ease-in-out infinite}

/* TRACK IMAGE */
.track-img,.race-track{filter:brightness(1.12) saturate(1.1);transition:filter .3s ease,transform .4s var(--ease-out)}
.race-card:hover .track-img,.race-card:hover .race-track{filter:brightness(1.28) saturate(1.2) drop-shadow(0 0 12px rgba(30,65,255,.4));transform:scale(1.06)}

/* FLAG */
.flag{transition:transform .3s var(--ease-spring),box-shadow .3s ease}
.race-card:hover .flag,.driver-card:hover .flag,.mini-card:hover .flag{transform:rotate(-4deg) translateY(-3px) scale(1.08)}

/* BACK BTN */
.back{border-radius:var(--r-md)!important;border:1px solid rgba(255,255,255,.2)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;font-family:\'JetBrains Mono\',monospace!important;font-size:11px!important;letter-spacing:.16em!important;padding:12px 18px!important;display:inline-flex!important;align-items:center!important;gap:8px!important;transition:transform .22s var(--ease-spring),border-color .22s ease,background .22s ease,box-shadow .22s ease!important;text-decoration:none!important}
.back::before{content:\'\u2190\';font-size:13px;transition:transform .2s ease}
.back:hover{transform:translateY(-2px)!important;border-color:rgba(255,255,255,.36)!important;background:rgba(255,255,255,.1)!important;box-shadow:0 8px 24px rgba(0,0,0,.3)!important}
.back:hover::before{transform:translateX(-4px)}

/* RACE CHIP */
.race-chip{border-radius:var(--r-md)!important;transition:transform .2s var(--ease-spring),border-color .2s ease,background .2s ease,box-shadow .2s ease!important}
.race-chip:hover{transform:translateY(-2px)!important;border-color:rgba(255,212,0,.55)!important;box-shadow:0 6px 20px rgba(0,0,0,.3)!important}
.race-chip.is-active{border-color:rgba(255,212,0,.72)!important;background:rgba(232,0,45,.22)!important;box-shadow:0 0 20px rgba(255,212,0,.18)!important}

/* BTN PRIMARY */
.btn.primary{border-radius:var(--r-md)!important;background:linear-gradient(135deg,rgba(232,0,45,.3),rgba(255,212,0,.1))!important;border-color:rgba(255,212,0,.5)!important;transition:transform .2s var(--ease-spring),box-shadow .2s ease,border-color .2s ease!important;position:relative;overflow:hidden}
.btn.primary::after{content:\'\';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.14) 50%,transparent 75%);transform:translateX(-120%) skewX(-18deg);transition:none;pointer-events:none}
.btn.primary:hover{transform:translateY(-2px)!important;box-shadow:0 10px 30px rgba(232,0,45,.3),0 0 20px rgba(255,212,0,.16)!important;border-color:rgba(255,212,0,.8)!important}
.btn.primary:hover::after{transform:translateX(120%) skewX(-18deg);transition:transform .55s var(--ease-out)}

/* TABS */
.tabs a{position:relative;transition:color .2s ease,border-color .2s ease!important}
.tabs a::after{content:\'\';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#e8002d,#ffd400);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out);border-radius:1px}
.tabs a:hover::after,.tabs .active::after{transform:scaleX(1)}

/* TAB BTN */
.tab-btn{border-radius:var(--r-md)!important;transition:transform .2s var(--ease-spring),background .2s ease,border-color .2s ease,box-shadow .2s ease!important;position:relative;overflow:hidden}
.tab-btn:hover{transform:translateY(-2px)!important}
.tab-btn.active{background:linear-gradient(135deg,#ffd400,#fff 44%,#ff4c67)!important;color:#03050d!important;border-color:transparent!important;box-shadow:0 6px 24px rgba(232,0,45,.24),0 0 20px rgba(255,212,0,.18)!important}

/* HERO PROFILE */
.hero{border-radius:var(--r-xl)!important;border:1px solid rgba(255,255,255,.2)!important;box-shadow:var(--shadow-xl),inset 0 1px 0 rgba(255,255,255,.12)!important}
.control-banner{border-radius:var(--r-lg)!important;border:1px solid rgba(255,255,255,.1)!important;background:rgba(4,12,16,.88)!important;backdrop-filter:blur(16px)!important}

/* CAR FLOAT */
.car,.hero-portrait{animation:floatY 5s ease-in-out infinite}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:rgba(3,5,13,.8)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#e8002d,#1e41ff);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff4c67,#4466ff)}
::selection{background:rgba(232,0,45,.28);color:#fff}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.aurora-bg,#pw-particles{display:none}.shimmer-host::after{display:none}.tilt-card{transform:none!important}.live-dot::after,.car,.hero-portrait{animation:none!important}.skeleton{animation:none}.next-pill{animation:none}}
@media(max-width:768px){[data-reveal]{transition-duration:500ms}.glass-panel::before{display:none}.aurora-bg{filter:blur(40px)}}

/* ── GLOBAL FORM & INPUT POLISH ─────────────────────────── */
select,input,textarea{
  appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-md);
  color:#fff;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;
  padding:12px 16px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
select:focus,input:focus,textarea:focus{
  border-color:rgba(255,212,0,.55);
  box-shadow:0 0 0 3px rgba(255,212,0,.12);
  background:rgba(255,255,255,.09);
}
select option{background:#03050d;color:#fff}

/* ── LOADING STATE ──────────────────────────────────────── */
.loading,.api-loading{
  display:flex;align-items:center;justify-content:center;
  min-height:120px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:900;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(184,193,212,.4);
  gap:12px;
}
.loading::before,.api-loading::before{
  content:'';width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
  border-top-color:#e8002d;
  animation:spin .8s linear infinite;
  flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── FEED ITEMS (race-control / insights feeds) ─────────── */
.feed-item{
  border-left:3px solid rgba(255,212,0,.5)!important;
  animation:revealUp .4s var(--ease-out) both;
}
.feed-item:nth-child(1){animation-delay:.04s}
.feed-item:nth-child(2){animation-delay:.08s}
.feed-item:nth-child(3){animation-delay:.12s}
.feed-item:nth-child(4){animation-delay:.16s}
.feed-item:nth-child(5){animation-delay:.20s}

/* ── STATUS LINE ────────────────────────────────────────── */
.status-line,.section-status{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(184,193,212,.55);
  display:flex;align-items:center;gap:8px;
}

/* ── COMPOUND TYRE BADGES ───────────────────────────────── */
.compound-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:900;letter-spacing:0;
}
.compound-badge.S,.compound.S{background:#e10600;color:#fff}
.compound-badge.M,.compound.M{background:#ffd400;color:#000}
.compound-badge.H,.compound.H{background:#e8e8e8;color:#000}
.compound-badge.I{background:#39b5e0;color:#000}
.compound-badge.W{background:#0067ff;color:#fff}

/* ── TIMING TOWER ROWS ──────────────────────────────────── */
.timing-row[style*="--team"]{
  border-left:3px solid var(--team,transparent);
}
.timing-row.selected{
  background:rgba(255,212,0,.08)!important;
  border-left-color:var(--gold)!important;
}

/* ── PANEL HOVER LIFT (applied to any .panel) ───────────── */
.panel:hover{
  transform:translateY(-2px);
  transition:transform .25s var(--ease-out),border-color .25s ease,box-shadow .25s ease;
}

/* ── RESPONSIVE TYPOGRAPHY SCALE ────────────────────────── */
@media(max-width:768px){
  h1{font-size:clamp(38px,10vw,72px)!important}
  h2{font-size:clamp(24px,6vw,44px)!important}
}
@media(max-width:480px){
  h1{font-size:clamp(32px,12vw,56px)!important}
  .page{padding-top:44px!important}
}

/* ── GLOBAL LINK RESET ──────────────────────────────────── */
a.race-card,a.driver-card,a.team-card,a.mini-card{
  text-decoration:none!important;
  color:inherit!important;
}

/* ── FOCUS VISIBLE (Accessibility) ──────────────────────── */
:focus-visible{
  outline:2px solid #ffd400;
  outline-offset:3px;
  border-radius:4px;
}