/* =========================================================
   Apex Motors — shared styles (animations, utilities that are
   awkward to express with Tailwind classes alone)
   ========================================================= */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { background: #0A0A0C; color: #E1E3E7; overflow-x: clip; }
[x-cloak] { display: none !important; }

/* ---------- Typography helpers ---------- */
.eyebrow { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }
.metal-text {
  background: linear-gradient(180deg, #FFFFFF 0%, #D6D9DE 45%, #8C9099 70%, #E9EBEE 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hairline { background: linear-gradient(90deg, transparent, rgba(201,204,210,.35), transparent); height: 1px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: 14px; letter-spacing: .02em; transition: all .25s ease; white-space: nowrap; }
.btn-red { background: #E11D2E; color: #fff; box-shadow: 0 10px 30px -10px rgba(225,29,46,.7); }
.btn-red:hover { background: #FF3B4B; transform: translateY(-1px); }
.btn-ghost { border: 1px solid rgba(201,204,210,.3); color: #F2F3F5; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }

/* ---------- Cards / panels ---------- */
.panel { background: linear-gradient(180deg, #15151A, #101014); border: 1px solid rgba(201,204,210,.09); border-radius: 1.25rem; }
.card-car { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
.card-car:hover { transform: translateY(-4px); border-color: rgba(201,204,210,.25); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.card-car:hover .car-art svg { transform: scale(1.04) translateX(4px); }
.car-art { background: #111115; }
.car-art img.photo { opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.car-art img.photo.loaded { opacity: 1; }
.card-car:hover .car-art img.photo { transform: scale(1.05); }
@keyframes kenburns { from { transform: scale(1.04) translate(0,0); } to { transform: scale(1.14) translate(-2%, -1%); } }
.kb { animation: kenburns 9s ease-out both; }
.car-art svg { transition: transform .6s cubic-bezier(.2,.7,.2,1); width: 100%; height: 100%; display: block; }

/* Form inputs */
.field { width: 100%; background: #0E0E12; border: 1px solid rgba(201,204,210,.15); border-radius: .8rem; padding: .7rem .9rem; color: #F2F3F5; font-size: 14px; }
.field:focus { outline: none; border-color: #E11D2E; box-shadow: 0 0 0 3px rgba(225,29,46,.18); }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A3A7AF' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.2rem; }
input[type=range] { accent-color: #E11D2E; }

/* ---------- Header ---------- */
.nav-scrolled { background: rgba(10,10,12,.82); backdrop-filter: blur(14px); border-bottom-color: rgba(201,204,210,.1) !important; }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: #E11D2E; transition: right .3s ease; }
.nav-link:hover::after, .nav-link.active::after { right: 0; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@keyframes drive-in { from { transform: translateX(-18%); opacity: 0; } to { transform: none; opacity: 1; } }
.drive-in { animation: drive-in 1.4s cubic-bezier(.16,.84,.3,1) both; }
@keyframes spin-wheel { to { transform: rotate(360deg); } }
.drive-in .wheel-spin { animation: spin-wheel .5s linear 3; transform-box: fill-box; transform-origin: center; }
@keyframes sweep { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
.light-sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.light-sweep::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); animation: sweep 5.5s ease-in-out infinite; }
@keyframes road { to { background-position: -200px 0; } }
.road-lines { background-image: linear-gradient(90deg, rgba(201,204,210,.35) 0 60px, transparent 60px 200px); background-size: 200px 2px; background-repeat: repeat-x; animation: road 1.2s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee { animation: marquee 38s linear infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(225,29,46,.55); } 80%,100% { box-shadow: 0 0 0 18px rgba(225,29,46,0); } }
.pulse-ring { animation: pulse-ring 2.4s ease-out infinite; }
.fade-enter { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Horizontal scroller without visible scrollbar */
.no-bar { scrollbar-width: none; } .no-bar::-webkit-scrollbar { display: none; }

/* Spec table "best" highlight on compare page */
.best { color: #fff; position: relative; }
.best::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #E11D2E; margin-right: .5rem; vertical-align: middle; }

/* Article body */
.prose-apex p { margin: 0 0 1.25rem; line-height: 1.85; color: #C9CCD2; font-size: 17px; }
.prose-apex h3 { font-family: 'Sora', sans-serif; color: #fff; font-size: 1.35rem; font-weight: 600; margin: 2.25rem 0 .9rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   MOTORSPORT THEME (overrides the base look above)
   ========================================================= */
body { background: #08080A; font-family: 'Barlow', system-ui, sans-serif; }

/* Condensed italic display type, uppercase like a livery */
.font-display { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .98; }
.prose-apex h3 { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.6rem; }
.font-mono, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-style: normal; }

/* Eyebrows get a slanted red flag bar */
.eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .24em; font-style: italic; }
.eyebrow::before { content: ''; display: inline-block; width: 22px; height: 4px; margin-right: 10px; vertical-align: middle; background: currentColor; transform: skewX(-30deg) translateY(-2px); }

/* Slanted buttons */
.btn { border-radius: 3px; transform: skewX(-12deg); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: .8rem 1.6rem; }
.btn > * { transform: skewX(12deg); }
.btn-red:hover { transform: skewX(-12deg) translateY(-2px); box-shadow: 0 12px 34px -10px rgba(225,29,46,.85); }
.btn-ghost { border-width: 1.5px; }

/* Squared, engineered panels with a chamfered corner */
.panel { border-radius: 4px; background: linear-gradient(180deg, #131317, #0E0E11); border-color: rgba(201,204,210,.1); }
.rounded-\[1\.25rem\], .rounded-\[1\.5rem\] { border-radius: 4px !important; }
.card-car { border-radius: 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.card-car::after { content: ''; position: absolute; top: 0; left: 0; width: 46px; height: 3px; background: #E11D2E; transform: skewX(-30deg) translateX(10px); }
.card-car { position: relative; }
.field { border-radius: 3px; }

/* Carbon-fibre weave */
.carbon {
  background-color: #111114;
  background-image:
    linear-gradient(27deg, #15151a 5px, transparent 5px),
    linear-gradient(207deg, #15151a 5px, transparent 5px),
    linear-gradient(27deg, #19191e 5px, transparent 5px),
    linear-gradient(207deg, #19191e 5px, transparent 5px),
    linear-gradient(90deg, #131317 10px, transparent 10px),
    linear-gradient(#16161a 25%, #121215 25%, #121215 50%, transparent 50%, transparent 75%, #18181c 75%, #18181c);
  background-size: 20px 20px;
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
}

/* Checkered flag strip */
.checker { height: 16px; background: repeating-conic-gradient(#F2F3F5 0 25%, #08080A 0 50%) 0 0 / 16px 16px; }
.checker-sm { height: 8px; background: repeating-conic-gradient(#F2F3F5 0 25%, #08080A 0 50%) 0 0 / 8px 8px; }

/* Livery stripes: red / gap / white / gap / red */
.livery { height: 4px; background: linear-gradient(90deg, #E11D2E 0 62%, transparent 62% 65%, #F2F3F5 65% 78%, transparent 78% 81%, #E11D2E 81%); }
.livery-v { width: 6px; background: linear-gradient(180deg, #E11D2E 0 60%, transparent 60% 66%, #F2F3F5 66% 80%, transparent 80% 86%, #E11D2E 86%); }

/* Moving speed lines (hero overlay) */
@keyframes speed { to { background-position: -600px 0; } }
.speed-lines { background-image: repeating-linear-gradient(90deg, transparent 0 140px, rgba(255,255,255,.07) 140px 141px, transparent 141px 300px, rgba(225,29,46,.18) 300px 302px, transparent 302px 600px); animation: speed 1.1s linear infinite; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }

/* Shift lights: 12 LEDs that light up in sequence */
.shift { display: flex; gap: 5px; }
.shift i { width: 10px; height: 10px; border-radius: 50%; background: #1d1d22; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); animation: led 2.6s infinite; }
.shift i:nth-child(-n+4) { --c: #22C55E; } .shift i:nth-child(n+5):nth-child(-n+8) { --c: #E11D2E; } .shift i:nth-child(n+9) { --c: #3B82F6; }
@keyframes led { 0%, 8% { background: #1d1d22; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } 45%, 80% { background: var(--c); box-shadow: 0 0 12px var(--c); } 100% { background: #1d1d22; } }
.shift i:nth-child(1){animation-delay:0s}.shift i:nth-child(2){animation-delay:.07s}.shift i:nth-child(3){animation-delay:.14s}.shift i:nth-child(4){animation-delay:.21s}.shift i:nth-child(5){animation-delay:.28s}.shift i:nth-child(6){animation-delay:.35s}.shift i:nth-child(7){animation-delay:.42s}.shift i:nth-child(8){animation-delay:.49s}.shift i:nth-child(9){animation-delay:.56s}.shift i:nth-child(10){animation-delay:.63s}.shift i:nth-child(11){animation-delay:.7s}.shift i:nth-child(12){animation-delay:.77s}

/* Race number plate */
.race-no { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; line-height: 1; padding: .2rem .55rem .15rem; background: #F2F3F5; color: #08080A; transform: skewX(-12deg); display: inline-block; letter-spacing: .02em; }

/* Timing-screen sector colours */
.sec-purple { color: #C084FC; } .sec-green { color: #4ADE80; } .sec-yellow { color: #FACC15; }

/* Section number "01 —" */
.sec-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #E11D2E; letter-spacing: .1em; }

/* Header nav in condensed caps */
.nav-link { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nav-link::after { height: 3px; bottom: -8px; transform: skewX(-30deg); }
.nav-scrolled { background: rgba(8,8,10,.9); }