:root {
  --bg-primary: #0a0a0f;
  --bg: var(--bg-primary);
  --team: #3671c6;
  --text-white: #e0e0e0;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--text-white); background: var(--bg); font-family: Inter, sans-serif; overflow: hidden; height: 100vh; }

/* subtle dark overlay to deepen background under the nebula */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -4; background: radial-gradient(800px 400px at 10% 10%, rgba(255,60,60,0.03), transparent 8%), radial-gradient(1000px 500px at 85% 20%, rgba(40,20,20,0.06), transparent 12%), linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.6)); mix-blend-mode: normal; }
@keyframes bg-shift { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }

/* Nebula canvas container sits behind content but above subtle gradients */
#nebula-canvas-container { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
#nebula-canvas-container canvas { width: 100%; height: 100%; display: block; position: absolute; inset: 0; z-index: -2; }
#particles-js { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: transparent; }

@keyframes nebula-breath {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(-4px, -2px, 0) scale(1.01); }
  50% { transform: translate3d(-8px, -4px, 0) scale(1.02); }
  75% { transform: translate3d(-4px, -2px, 0) scale(1.01); }
}
@keyframes nebula-heartbeat {
  0%, 100% { opacity: 0.42; transform: scale(1); }
  45% { opacity: 0.54; transform: scale(1.01); }
  50% { opacity: 0.66; transform: scale(1.02); }
  55% { opacity: 0.54; transform: scale(1.01); }
}

.stage { min-height: 100svh; display: grid; grid-template-columns: minmax(260px, 430px) minmax(340px, 1fr); align-items: center; gap: clamp(40px, 9vw, 150px); max-width: 1200px; padding: 48px 32px; margin: auto; }
.eyebrow { margin: 0 0 17px; color: #8d9cc4; font: 700 12px/1 Inter; letter-spacing: .18em; }
.intro-header { position: absolute; left: 0; right: 0; top: 18px; display: flex; justify-content: space-between; align-items: center; padding: 0 32px; pointer-events: none; z-index: 60; }
.intro-logo { width: 86px; height: auto; }
.intro-sponsor { width: 86px; height: auto; }
.intro-main { max-width: 500px; margin: 0; font: 900 clamp(28px, 4vw, 48px)/.9 "Barlow Condensed", sans-serif; letter-spacing: -.02em; text-transform: uppercase; text-align: center; }
.intro h1 em { font-style: italic; color: #779be4; }
.description { max-width: 390px; margin: 28px 0; color: #a5a7ad; font-size: 14px; line-height: 1.65; }
code { color: #e1e4eb; font-size: .88em; }

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.full-width, .downloads { grid-column: span 2; }
.controls label { display: grid; gap: 7px; color: #a5a7ad; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.controls input, .controls select { width: 100%; border: 1px solid #292b31; border-radius: 5px; outline: 0; padding: 10px 11px; color: #f4f5f7; background: #121216; font: 600 13px Inter; transition: border-color .2s, background .2s; }
.controls input:focus, .controls select:focus { border-color: #6a85c6; background: #17171d; }
.photo-upload { grid-column: span 2; position: relative; }
.photo-upload input { position: absolute; inset: 0; z-index: 1; opacity: 0; cursor: pointer; }
.photo-upload span { padding: 11px; border: 1px dashed #3d4048; border-radius: 5px; color: #d4d6db; text-align: center; transition: .2s; }
.photo-upload:hover span { border-color: #809de4; background: #151722; }
.downloads { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: 4px; }
.downloads button { border: 1px solid #496cb6; border-radius: 5px; padding: 11px 8px; color: #fff; background: #1c376d; font: 700 10px Inter; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .2s, background .2s; }
.downloads button:last-child { background: #151722; border-color: #3d4048; }
.downloads button:hover { background: #28519a; transform: translateY(-1px); }
.downloads button:last-child:hover { background: #242634; }
.downloads button:disabled { opacity: .6; cursor: progress; transform: none; }

.card-wrap { display: grid; place-items: center; perspective: 1100px; }
.driver-card { --team: #3671c6; width: min(340px, calc(100vw - 48px)); height: 560px; isolation: isolate; position: relative; overflow: hidden; clip-path: inset(0 round 28px); border: 1px solid rgba(255,255,255,.24); border-radius: 28px; background: var(--bg); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 1px rgba(var(--team-rgb), .08) inset; transform-style: flat; transition: transform .25s ease-out, box-shadow .25s; }
.driver-card::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background:
    radial-gradient(circle at 30% 20%, rgba(255,160,80,0.18), transparent 16%),
    radial-gradient(circle at 80% 25%, rgba(255,105,120,0.12), transparent 14%),
    radial-gradient(circle at 45% 65%, rgba(90,120,255,0.14), transparent 20%),
    radial-gradient(circle at 55% 35%, rgba(255,210,100,0.1), transparent 14%),
    linear-gradient(180deg, rgba(20,24,46,0.9), rgba(5,8,18,0.98));
  opacity: 0.94;
  overflow: hidden;
  animation: nebula-breath 40s ease-in-out infinite;
}
.driver-card::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255,220,180,0.08), transparent 38%);
  opacity: 0.45;
  animation: nebula-heartbeat 40s ease-in-out infinite;
  mix-blend-mode: screen;
}
.glow { position: absolute; z-index: 1; width: 450px; height: 450px; left: 50%; top: 35%; border-radius: 50%; opacity: .55; background: var(--team); filter: blur(130px); transform: translate(-50%, -50%); animation: f1-pulse 3.5s ease-in-out infinite; }
.background-brand { position: absolute; z-index: 1; display: grid; justify-items: center; gap: 4px; width: 86px; pointer-events: none; opacity: .18; filter: blur(.35px); mix-blend-mode: screen; will-change: transform; }
.background-brand img { width: 100%; height: auto; filter: drop-shadow(0 0 14px rgba(255,255,255,.18)); }
.background-brand span { color: #fff; font: 800 10px/1 Inter, sans-serif; letter-spacing: .18em; white-space: nowrap; }
.background-brand-one { top: 23%; left: -28%; transform: rotate(-18deg); animation: background-logo-one 11s ease-in-out infinite alternate; }
.background-brand-two { right: -31%; bottom: 23%; width: 78px; transform: rotate(16deg); opacity: .14; animation: background-logo-two 14s ease-in-out infinite alternate; }

.bg-number { position: absolute; z-index: 2; top: 57px; left: 85%; color: white; opacity: .09; font: 900 200px/.8 "Barlow Condensed", sans-serif; letter-spacing: -.1em; pointer-events: none; transform: translateX(-50%); }

.driver { position: absolute; z-index: 5; bottom: 70px; left: 50%; width: 100%; height: 96%; object-fit: contain; object-position: bottom center; transform: translateX(-50%); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.driver-card:hover .driver { transform: translateX(-50%) scale(1.045); }
.light-streak { position: absolute; z-index: 4; top: -20%; left: -35%; width: 28%; height: 130%; opacity: 0; pointer-events: none; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); filter: blur(8px); transition: left .8s ease, opacity .35s; }
.sparks { display: none; }
.car-layer { position: absolute; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; }
.car { position: absolute; width: 110px; opacity: 0.95; filter: drop-shadow(0 0 24px rgba(0,0,0,0.35)); transition: opacity .4s ease; }
.car-left { left: 8%; top: 110%; transform: scale(0.92); animation: car-rise-left 24s linear infinite; }
.car-right { right: 8%; top: 120%; transform: scale(0.8); animation: car-rise-right 24s linear infinite; }
@keyframes car-rise-left {
  0%, 18% { top: 110%; opacity: 0; }
  20% { top: 110%; opacity: 0.9; }
  42% { top: -120%; opacity: 1; }
  43% { top: -120%; opacity: 0; }
  44%, 100% { top: 110%; opacity: 0; }
}
@keyframes car-rise-right {
  0%, 18% { top: 120%; opacity: 0; }
  20% { top: 120%; opacity: 0.8; }
  42% { top: -130%; opacity: 0.95; }
  43% { top: -130%; opacity: 0; }
  44%, 100% { top: 120%; opacity: 0; }
}

.driver-card:hover .light-streak { left: 115%; opacity: 1; }
.card-topline { position: absolute; z-index: 9; top: 18px; left: 19px; right: 19px; height: 35px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.top-brand { display: flex; align-items: center; height: 32px; width: 82px; }
.top-brand img { max-width: 100%; max-height: 23px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(0,0,0,.58)) drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.top-brand-right { justify-self: end; justify-content: end; width: 72px; }
.top-brand-right img { max-height: 25px; filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0,0,0,.62)) drop-shadow(0 1px 2px rgba(0,0,0,.48)); }
.team-logo { width: 31px; height: 31px; object-fit: contain; filter: drop-shadow(0 1px 5px rgba(0,0,0,.65)); }
.team-logo.is-missing { visibility: hidden; }
.info { position: absolute; z-index: 10; bottom: 0; left: 0; display: flex; align-items: flex-end; width: 100%; min-height: 300px; padding: 0 27px 26px; max-width: none; text-transform: uppercase; text-shadow: 0 3px 18px rgba(0,0,0,.75); background: linear-gradient(to top, rgba(5,5,7,.99) 0%, rgba(5,5,7,.9) 22%, rgba(5,5,7,.52) 49%, rgba(5,5,7,.14) 76%, transparent 100%); }
.info h2 { margin: 0; width: 100%; color: white; font: 900 58px/.78 "Barlow Condensed", sans-serif; letter-spacing: -.035em; text-align: center; white-space: nowrap; }
.card-frame { position: absolute; z-index: 20; inset: 1px; border: 1px solid rgba(255,255,255,.3); border-radius: 27px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); pointer-events: none; }
.card-corner { position: absolute; z-index: 9; right: 18px; bottom: 26px; color: rgba(255,255,255,.57); font: 700 6px/1.45 Inter; letter-spacing: .15em; text-align: right; }
@keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.12); } }
@keyframes f1-pulse { 
  0% { transform: translate(-50%, -50%) scale(1); opacity: .4; } 
  25% { transform: translate(-48%, -48%) scale(1.15); opacity: .65; } 
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: .5; } 
  75% { transform: translate(-52%, -52%) scale(1.12); opacity: .6; } 
  100% { transform: translate(-50%, -50%) scale(1); opacity: .4; } 
}
@keyframes f1-track-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 70px 70px; }
}
@keyframes f1-racing-lines { 
  0% { background-position: 0 0, 0 0, 0 0; } 
  100% { background-position: 40px 0, 0 160px, 0 0; } 
}
@keyframes f1-diagonal-sweep { 
  0% { opacity: .5; } 
  50% { opacity: .8; } 
  100% { opacity: .5; } 
}
@keyframes nebula-particles {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-24px, -14px, 0); }
}

/* Footer */
.site-footer { position: fixed; left: 0; right: 0; bottom: 0; height: auto; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; color: rgba(255,255,255,0.92); font-size: 13px; background: transparent; backdrop-filter: none; z-index: 50; }
.site-footer a { color: #fff; text-decoration: none; opacity: 0.95; }
.footer-left, .footer-right { flex: none; }
.footer-center { flex: none; display: flex; gap: 10px; align-items: center; }
.social { color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 2px; gap: 6px; text-decoration: none; }
.social img { display: block; width: 18px; height: 18px; object-fit: contain; }
/* Ensure remote SVG/PNG icons render white */
.social img { filter: invert(1) brightness(2) sepia(0); }


@media (max-width: 760px) { .site-footer { flex-direction: column; text-align: center; height: auto; position: fixed; left:0; right:0; bottom:0; padding: 10px 12px; gap: 8px; } .intro-header { left: 18px; top: 18px; } }

/* ensure main content fits without scrolling */
.stage { min-height: calc(100vh - 64px); max-height: calc(100vh - 64px); overflow: hidden; }
.card-wrap { display: grid; place-items: center; perspective: 1100px; max-height: calc(100vh - 64px); }
@keyframes f1-sparks-flow {
  0% { background-position: 0 0, 40px 60px, 30px 20px; }
  100% { background-position: 0 -500px, 40px -460px, 30px -490px; }
}
@keyframes f1-rotate-lines {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes background-logo-one { 0% { transform: translate(0, 0) rotate(-18deg) scale(.92); } 48% { transform: translate(220px, 74px) rotate(8deg) scale(1.05); } 100% { transform: translate(115px, 285px) rotate(-9deg) scale(.88); } }
@keyframes background-logo-two { 0% { transform: translate(0, 0) rotate(16deg) scale(.86); } 52% { transform: translate(-235px, -115px) rotate(-12deg) scale(1.06); } 100% { transform: translate(-122px, -318px) rotate(10deg) scale(.9); } }
@media (max-width: 760px) { .stage { grid-template-columns: 1fr; padding: 38px 24px 54px; } .intro { max-width: 430px; margin: auto; } .card-wrap { margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }