/* ============================================================
   BCC — "NIGHT DRIVE" dark theme
   ------------------------------------------------------------
   Toggled by the moon button (top right) → body.theme-dark,
   remembered per browser (localStorage "bcc-dark").
   Concept: a night-time showroom. Obsidian surfaces, red neon
   accents, drifting aurora glows, a road line that draws down
   the edge of the page as you scroll, headlight shimmer across
   headings, and a soft torch glow that follows the cursor.
   All decor lives behind content and is display:none in light
   mode — zero impact until the switch is flicked.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
/* accent follows the colour choice: red by default, blue when "Try Blue" is on */
body.theme-dark{
  --accent-rgb:208,24,24; --accent-soft:#FF6B61;
  --bg:#06080D; --panel:#0C1017; --line:rgba(255,255,255,.09);
  --ink:#EEF2F8; --ink-2:#0F141D;
  --body:#9AA4B4; --body-lt:#7E8899;
  --dark:#04060A; --dark-2:#030509; --dark-box:#020407;
  --shadow:0 2px 6px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.55);
  --shadow-lg:0 8px 16px rgba(0,0,0,.55),0 28px 60px rgba(0,0,0,.7);
  background:var(--bg);
  color-scheme:dark;
}
body.theme-dark{scrollbar-color:#1B2230 var(--bg)}
body.theme-dark::-webkit-scrollbar{width:11px}
body.theme-dark::-webkit-scrollbar-track{background:var(--bg)}
body.theme-dark::-webkit-scrollbar-thumb{background:#1B2230;border-radius:6px;border:2px solid var(--bg)}
body.theme-dark::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* subtle carbon grain over everything */
body.theme-dark::after{content:"";position:fixed;inset:0;z-index:98;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 2. HEADER / NAV ---------- */
body.theme-dark .site-header{background:rgba(6,8,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.08)}
body.theme-dark .brand img,body.theme-dark .f-logo img{filter:brightness(0) invert(1)}
body.theme-dark .main-nav a{color:#C7CEDA}
body.theme-dark .main-nav a:hover,body.theme-dark .main-nav a.on{color:var(--accent-soft)}
body.theme-dark .hdr-phone{color:#E8ECF3}
body.theme-dark .mobile-nav{background:rgba(6,8,13,.97);backdrop-filter:blur(10px)}
body.theme-dark .mobile-nav a,body.theme-dark .mobile-close{color:#EEF2F8}
body.theme-dark .btn-red{box-shadow:0 6px 26px rgba(var(--accent-rgb),.38)}
body.theme-dark .btn-red:hover{box-shadow:0 10px 34px rgba(var(--accent-rgb),.5)}
body.theme-dark .btn-outline{color:#E8ECF3;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
body.theme-dark .btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--red);color:var(--accent-soft)}

/* ---------- 3. HERO — forecourt photo, left-dark scrim for legible text ---------- */
body.theme-dark .hero{position:relative;overflow:hidden;background:
  linear-gradient(100deg,rgba(4,7,13,.72) 0%,rgba(5,8,15,.4) 44%,rgba(5,8,15,.12) 74%,rgba(5,8,15,0) 100%),
  linear-gradient(0deg,rgba(4,6,12,.36),transparent 40%),
  url('../assets/hero-forecourt.webp') center 58%/cover no-repeat,#05070c}
@media(max-width:760px){body.theme-dark .hero{background:
  linear-gradient(rgba(4,7,13,.6),rgba(5,8,15,.36)),
  url('../assets/hero-forecourt-sm.webp') center 58%/cover no-repeat,#05070c}}
body.theme-dark .hero::after{background:
  radial-gradient(58% 78% at 88% 16%,rgba(var(--accent-rgb),.12),transparent 62%)}
body.theme-dark .hero .kicker{border-bottom-color:rgba(var(--accent-rgb),.55);text-shadow:0 0 18px rgba(var(--accent-rgb),.5)}
body.theme-dark .hero h1 em{text-shadow:0 0 26px rgba(var(--accent-rgb),.55)}
body.theme-dark .hero-card{background:rgba(13,16,23,.92);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);color:#E8ECF3}
body.theme-dark .hero-card .nm{color:#fff}
body.theme-dark .hero-card .mt{color:#98A2B3}
body.theme-dark .hero-card .ph{background:#0A0E15}
body.theme-dark .hero-arrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}

/* ---------- 4. CARDS — neon-edge glass ---------- */
body.theme-dark .vcard{background:linear-gradient(165deg,#10151F 0%,#0B0F16 100%);border:1px solid rgba(255,255,255,.07);box-shadow:0 4px 14px rgba(0,0,0,.5)}
body.theme-dark .vcard:hover{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3),0 14px 44px rgba(var(--accent-rgb),.16),0 26px 70px rgba(0,0,0,.6);transform:translateY(-4px)}
body.theme-dark .vcard .ph{background:#0A0E15}
body.theme-dark .vcard .badge{background:rgba(10,13,20,.85);color:#EEF2F8;border:1px solid rgba(255,255,255,.16)}

/* tiles / brands */
body.theme-dark .tile{background:#10151F;border:1px solid rgba(255,255,255,.06)}
body.theme-dark .tile:hover{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.22),0 22px 54px rgba(0,0,0,.6)}
body.theme-dark .tile .ic img{filter:invert(1) grayscale(1) brightness(1.6);opacity:.9}
body.theme-dark .brand-mark{color:#DFE5EE}

/* stats / trust / faq / forms / detail page */
body.theme-dark .stat-box{background:#0C1017;border-color:rgba(255,255,255,.08)}
body.theme-dark .rate-badge{background:rgba(15,20,30,.85);border-color:rgba(255,255,255,.12);color:#EEF2F8;box-shadow:none}
body.theme-dark .tp-card{background:#10151F;border-color:rgba(255,255,255,.07);box-shadow:none}
body.theme-dark .faq-item{background:#10151F;border-color:rgba(255,255,255,.07)}
body.theme-dark .faq-sec{background:rgba(8,11,17,.6)}
body.theme-dark .filter-panel{background:#0C1017;border:1px solid rgba(255,255,255,.07)}
body.theme-dark .f-field select,body.theme-dark .f-field input[type=text],body.theme-dark .f-field input[type=number],
body.theme-dark .fg input,body.theme-dark .fg select,body.theme-dark .fg textarea{background:#0A0E15;border-color:rgba(255,255,255,.14);color:#EEF2F8}
body.theme-dark .side-card{background:#0F141D;border-color:rgba(255,255,255,.08)}
body.theme-dark .gal-main{background:#0A0E15;border-color:rgba(255,255,255,.08)}
body.theme-dark .gal-nav{background:rgba(15,20,29,.9);border-color:rgba(255,255,255,.15);color:#EEF2F8}
body.theme-dark .status-card{background:#10151F;color:var(--body)}
body.theme-dark .status-overlay{background:rgba(2,3,6,.6)}
body.theme-dark .page-banner{border:1px solid rgba(255,255,255,.07)}

/* ---------- 6. NIGHT DECOR (JS-injected, hidden in light mode) ---------- */
.nd-aurora,.nd-road{display:none}
body.theme-dark .nd-aurora{display:block}
@media(min-width:1100px){body.theme-dark .nd-road{display:block}}

/* drifting aurora orbs — behind everything */
.nd-aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.nd-aurora i{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.nd-aurora .o1{width:44vw;height:44vw;left:-12vw;top:-14vh;background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 65%)}
.nd-aurora .o2{width:38vw;height:38vw;right:-10vw;top:30vh;background:radial-gradient(circle,rgba(var(--accent-rgb),.12),transparent 65%)}
.nd-aurora .o3{width:34vw;height:34vw;left:22vw;bottom:-18vh;background:radial-gradient(circle,rgba(var(--accent-rgb),.1),transparent 65%)}

/* the road — a lane line down the right edge that draws with scroll */
.nd-road{position:fixed;top:12vh;bottom:12vh;right:26px;width:4px;z-index:65;pointer-events:none}
.nd-road::before{content:"";position:absolute;inset:0;border-radius:4px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 14px,transparent 14px 30px)}
.nd-road-fill{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px;transform:scaleY(0);transform-origin:top;
  background:linear-gradient(180deg,var(--red),var(--accent-soft));box-shadow:0 0 12px rgba(var(--accent-rgb),.55)}
.nd-road-car{position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px #fff,0 0 22px var(--red),0 0 44px var(--red)}

/* headlight shimmer that sweeps headings as they enter */
body.theme-dark .nd-lit{position:relative;overflow:hidden}
body.theme-dark .nd-lit::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);
  transform:translateX(-120%);animation:nd-sweep 1.1s .1s var(--ease) forwards}
@keyframes nd-sweep{to{transform:translateX(120%)}}

/* section edges get a faint red horizon line */
body.theme-dark .dark-sec,body.theme-dark .cta-band{position:relative;background:linear-gradient(180deg,#04060B 0%,#03050A 100%)}
body.theme-dark .dark-sec::before,body.theme-dark .cta-band::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),transparent)}

/* reduced motion: decor stays still, no sweeps */
@media(prefers-reduced-motion:reduce){
  body.theme-dark .nd-lit::after{animation:none;display:none}
  .nd-road{display:none!important}
}

/* ============================================================
   HOMEPAGE HEADER — centred logo, nav underneath, engine-start
   animation (car + van drive off the screen edges). is-home only.
   ============================================================ */
/* centre the header into two rows: logo on top, nav + CTA below */
.is-home .site-header{overflow:hidden}   /* clip the driving vehicles at the screen edges (no page-wide scroll) */
.is-home .site-header .bar{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;
  align-items:center;column-gap:1rem;row-gap:.35rem;padding-top:1rem;padding-bottom:.7rem}
.is-home .brand{grid-column:1 / -1;grid-row:1;display:flex;justify-content:center;margin:0}
.is-home .hdr-phone{grid-column:1;grid-row:2;justify-self:start}
.is-home .main-nav{grid-column:2;grid-row:2;justify-self:center}
.is-home .hdr-awards{grid-column:3;grid-row:2;justify-self:end}
@media(min-width:1100px){.is-home .main-nav{gap:1.8rem}}

/* the animated logo: three stacked pieces sized like the header logo */
.brand-logo-anim{position:relative;display:block;height:clamp(92px,13vw,150px);aspect-ratio:600/327}
.brand-logo-anim img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.brand-logo-shake{position:absolute;inset:0;transform-origin:50% 60%}
.bl-flash{position:absolute;left:50%;top:54%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,246,214,.85),rgba(255,220,160,.15) 40%,transparent 68%);
  opacity:0;mix-blend-mode:screen;pointer-events:none}

/* run the sequence once on homepage load */
.is-home .brand-logo-anim{animation:blHomeFade 3.2s linear forwards}
.is-home .brand-logo-shake{animation:blHomeShake 3.2s cubic-bezier(.36,.07,.19,.97) forwards}
.is-home .bl-car{animation:blHomeCar 3.2s cubic-bezier(.5,0,.75,0) forwards}
.is-home .bl-van{animation:blHomeVan 3.2s cubic-bezier(.5,0,.75,0) forwards}
.is-home .bl-flash{animation:blHomeFlash 3.2s linear forwards}

@keyframes blHomeShake{
  0%{transform:translate(0,0) rotate(0)}
  2%{transform:translate(-2px,0) rotate(-.5deg)}   4%{transform:translate(1.5px,0) rotate(.4deg)}   6%{transform:translate(0,0)}
  12%{transform:translate(0,0)}
  14%{transform:translate(-2px,0) rotate(-.5deg)}  16%{transform:translate(1.5px,0) rotate(.4deg)}  18%{transform:translate(0,0)}
  24%{transform:translate(0,0)}
  26%{transform:translate(3px,-1px) rotate(1deg)}  28%{transform:translate(-2px,1px) rotate(-.8deg)} 30%{transform:translate(2px,-1px) rotate(.5deg)}
  32%{transform:translate(-1px,.6px) rotate(-.35deg)} 34%{transform:translate(1px,-.5px) rotate(.28deg)}
  35%{transform:translate(-.8px,.5px) rotate(-.2deg)} 37%{transform:translate(.5px,-.4px) rotate(.12deg)} 38%{transform:translate(0,0) rotate(0)}
  100%{transform:translate(0,0) rotate(0)}
}
@keyframes blHomeVan{
  0%,40%{transform:translateX(0) translateY(0) skewX(0) rotate(0)}
  62%{transform:translateX(100vw) translateY(-5px) skewX(-6deg) rotate(1.2deg)}
  69%{transform:translateX(100vw) translateY(-5px) skewX(-6deg) rotate(1.2deg)}
  70%,100%{transform:translateX(0)}
}
@keyframes blHomeCar{
  0%,42%{transform:translateX(0) translateY(0) skewX(0) rotate(0)}
  64%{transform:translateX(-100vw) translateY(5px) skewX(6deg) rotate(-1.2deg)}
  69%{transform:translateX(-100vw) translateY(5px) skewX(6deg) rotate(-1.2deg)}
  70%,100%{transform:translateX(0)}
}
/* wordmark fades out (vehicles already gone), then the COMPLETE logo fades back in */
@keyframes blHomeFade{
  0%,60%{opacity:1}
  70%{opacity:0}
  73%{opacity:0}
  86%{opacity:1}
  100%{opacity:1}
}
@keyframes blHomeFlash{0%,29%{opacity:0}32%{opacity:1}40%{opacity:0}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .is-home .brand-logo-anim,.is-home .brand-logo-shake,.is-home .bl-car,.is-home .bl-van,.is-home .bl-flash{animation:none}
}

/* ============================================================
   HOMEPAGE HEADER — aurora sky behind the (transparent) logo
   ============================================================ */
/* fixed header (out of flow) + constant spacer = no reflow/jump when it shrinks */
body.theme-dark .site-header{position:fixed;top:0;left:0;right:0}
.hdr-spacer{height:var(--hdr-expanded,90px);background:var(--bg);pointer-events:none}
.is-home .hdr-spacer{background:#05070c}
.is-home .site-header{position:fixed;top:0;left:0;right:0;background:#05070c;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Hyperspeed WebGL canvas fills the header, behind everything */
.hs-bg{position:absolute;inset:0;z-index:0;overflow:hidden;transition:opacity .45s var(--ease)}
.hs-bg canvas{display:block;width:100%!important;height:100%!important}
/* legibility scrim over the road, beneath the nav bar */
.is-home .site-header::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .4s var(--ease);
  background:linear-gradient(180deg,rgba(5,7,12,.10),rgba(5,7,12,.40) 60%,rgba(5,7,12,.78) 100%)}
.is-home .site-header .bar{position:relative;z-index:2}

/* ============================================================
   SHRINK-ON-SCROLL — reclaim space once the user scrolls down
   ============================================================ */
.site-header{transition:background .35s var(--ease),backdrop-filter .35s var(--ease)}
.brand-logo-anim{transition:height .35s var(--ease)}
/* homepage: collapse the tall centred header into a compact single row */
.is-home .site-header.is-shrunk::before,.is-home .site-header.is-shrunk .hs-bg{opacity:0}
.is-home .site-header.is-shrunk{background:rgba(6,8,13,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.is-home .site-header.is-shrunk .bar{grid-template-rows:auto;row-gap:0;padding-top:.5rem;padding-bottom:.5rem}
.is-home .site-header.is-shrunk .brand{grid-column:1;grid-row:1;justify-self:start}
.is-home .site-header.is-shrunk .hdr-phone{display:none}
.is-home .site-header.is-shrunk .main-nav{grid-column:2;grid-row:1}
.is-home .site-header.is-shrunk .hdr-awards{grid-column:3;grid-row:1}
.is-home .site-header.is-shrunk .brand-logo-anim{height:clamp(42px,6vw,58px)}
/* inner pages: a subtler logo nudge */
.site-header.is-shrunk .brand img{height:clamp(52px,6vw,74px)}

/* ============================================================
   HEADER — phone far-left (in line with the menu) · centred nav ·
   Sell Your Vehicle right. Reviews now live in the hero.
   ============================================================ */
.hdr-phone{display:none;align-items:center;gap:.5rem;color:#EAEFF6;font-weight:700;font-size:.95rem;white-space:nowrap}
.hdr-phone:hover{color:var(--accent-soft)}
.hdr-phone-ic{color:var(--accent-soft);flex:0 0 auto}
@media(min-width:1100px){.hdr-phone{display:inline-flex}}

/* inner pages: logo + phone grouped far-left, nav centred, sell right */
body:not(.is-home) .site-header .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:1rem}
.hdr-left{grid-column:1;justify-self:start;display:flex;align-items:center;gap:1.25rem;min-width:0}
body:not(.is-home) .main-nav{grid-column:2;justify-self:center}
body:not(.is-home) .hdr-awards{grid-column:3;justify-self:end}

@media(min-width:1100px){.site-header .main-nav{gap:1.9rem}}
/* bright-red rule that hugs the menu (only as wide as the links), just above it */
.site-header .main-nav{border-top:1px solid #ff2a2a;padding-top:.5rem;box-shadow:0 -6px 12px -6px rgba(255,42,42,.55)}

/* Sell Your Vehicle — bigger */
.hdr-awards{display:inline-flex;align-items:center;line-height:0;transition:opacity .25s;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.hdr-awards:hover{opacity:.88}
.hdr-awards img{height:clamp(42px,4.6vw,56px);width:auto;display:block}

/* hero rating badges — back in the hero, side by side, top-right */
body.theme-dark .hero-badges{flex-direction:row;gap:.6rem;align-items:flex-start;top:1.6rem}
body.theme-dark .hero-badges .rate-badge{font-size:1rem;padding:.5rem .85rem}

/* mobile: logo (centre home / left inner) + Sell; nav & phone hidden; burger top-right */
@media(max-width:1099px){
  .is-home .site-header .bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem;position:relative}
  .is-home .brand{flex:0 0 100%;justify-content:center}
  body:not(.is-home) .site-header .bar{position:relative}
  .main-nav{display:none}
  .site-header .main-nav{border-top:none;box-shadow:none;padding-top:0}
  .hdr-awards img{height:clamp(38px,9vw,50px)}
  .burger{position:absolute;top:.7rem;right:12px;display:flex}
}
@media(max-width:560px){.hdr-awards img{height:42px}}

/* ============================================================
   FLOATING RHOMBOID SCROLL-SHINE BACKGROUND (js/rhomboids.js)
   Fixed WebGL layer behind all content; shows through the
   transparent content sections as you scroll.
   ============================================================ */
#rhomboids-bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
#rhomboids-bg canvas{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){#rhomboids-bg{display:none}}

/* ============================================================
   FROSTED CONTENT BOXES — semi-opaque so the floating rhomboid
   shine glows through them (matches the reference feel).
   ============================================================ */
body.theme-dark .vcard{background:linear-gradient(165deg,rgba(16,21,31,.6),rgba(11,15,22,.58));backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
body.theme-dark .tile{background:rgba(16,21,31,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.theme-dark .stat-box{background:rgba(12,16,23,.48);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.theme-dark .faq-item{background:rgba(16,21,31,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.theme-dark .filter-panel{background:rgba(12,16,23,.46);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
body.theme-dark .side-card{background:rgba(15,20,29,.52);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
body.theme-dark .rate-badge{background:rgba(15,20,30,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.theme-dark .tp-card{background:rgba(16,21,31,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.theme-dark .page-banner{background:rgba(12,16,23,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
/* keep the vehicle photo area solid (it holds an image), only the body is glassy */
body.theme-dark .vcard .ph{background:#0A0E15}