/* =========================================================================
   SpeedySpares ELEVATE layer — additive craft over v1. Dark + day aware.
   Loaded AFTER tokens/site/live. Nothing in the base files is modified.
   DNA preserved: dark cinematic, Barlow Condensed, accent #ce252b, day toggle.
   ========================================================================= */

/* ---- 1. Hero: lift the photo out of the mud + cinematic depth ---------- */
.hero-photo img {
  object-position: 62% 48%;
  /* crisper, less muddy; still moody */
  filter: saturate(1.06) contrast(1.12) brightness(.86);
  will-change: transform;
}

/* red directional rim-glow + grounding vignette, above photo, below copy */
.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 128%, rgb(0 0 0 / 60%), transparent 62%);
}
/* fine film grain for premium texture */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}
.hero-layout { position: relative; z-index: 2; }

/* a hairline luminous red rule above the eyebrow */
.hero-copy .section-label { position: relative; }

/* depth on the headline so it reads off the photo */
.hero-copy h1 { text-shadow: 0 .08em 2rem rgb(0 0 0 / 38%); }
.hero-line:last-child > span {
  /* subtle crimson luminance on FIRST TIME. */
  text-shadow: none;
}

/* ---- 2. Primary button: depth + brand glow on hover ------------------- */
.primary-link {
  box-shadow: 0 .75rem 1.75rem rgb(0 0 0 / 28%);
  transition: transform var(--motion-press) var(--ease-out),
              box-shadow var(--motion-state) var(--ease-out),
              background var(--motion-state) var(--ease-out);
}
.primary-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 1rem 2.4rem rgb(206 37 43 / 42%);
}
.primary-link:active { transform: translateY(0); }

/* WhatsApp text-link: underline draws in on hover */
.text-link { position: relative; }
.text-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.15rem;
  height: .09rem;
  background: var(--accent-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-state) var(--ease-out);
}
.text-link:hover::after { transform: scaleX(1); }

/* ---- 3. Hero trust row — credibility right under the CTAs -------------- */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
  font-family: var(--display-font);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: var(--text);
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.hero-trust li + li::before {
  content: "";
  width: .3rem; height: .3rem;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--accent-light);
}
.hero-trust b {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--accent-light);
  letter-spacing: 0;
}
@media (max-width: 40rem) {
  .hero-trust { gap: var(--space-2) var(--space-4); font-size: var(--text-xs); }
}

/* ---- 4. Finder: floating glass console with a live red seam ----------- */
.finder-shell {
  position: relative;
  z-index: 5;
  border-top: .125rem solid var(--accent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    0 -.0625rem 0 rgb(255 255 255 / 5%) inset,
    0 1.5rem 3.75rem rgb(0 0 0 / 42%);
}
.finder-shell::before {
  content: "";
  position: absolute;
  top: -.125rem; left: 0; right: 0;
  height: .125rem;
  background: linear-gradient(90deg, transparent, var(--accent-light) 18%, var(--accent) 50%, var(--accent-light) 82%, transparent);
  opacity: .9;
  filter: blur(.02rem);
}
.finder-fields input, .finder-fields select {
  transition: border-color var(--motion-state) var(--ease-out),
              box-shadow var(--motion-state) var(--ease-out);
}
.finder-fields input:focus, .finder-fields select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .1875rem rgb(206 37 43 / 22%);
}
.search-submit { transition: transform var(--motion-press) var(--ease-out), box-shadow var(--motion-state) var(--ease-out); }
.search-submit:hover { transform: translateY(-1px); box-shadow: 0 .6rem 1.6rem rgb(206 37 43 / 38%); }

/* ---- 5. Market strip: crafted hover-lift + red code tick -------------- */
.market-list li {
  position: relative;
  transition: transform var(--motion-state) var(--ease-out),
              background var(--motion-state) var(--ease-out),
              box-shadow var(--motion-state) var(--ease-out);
}
.market-list li:hover {
  box-shadow: 0 1rem 2rem rgb(0 0 0 / 28%);
  z-index: 1;
}
.market-list b { position: relative; display: inline-block; padding-bottom: .35rem; }
.market-list b::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 1.6rem; height: .125rem;
  background: var(--accent);
}

/* ---- 6. Condition cards: lift + accent edge --------------------------- */
.condition-card {
  transition: transform var(--motion-state) var(--ease-out),
              box-shadow var(--motion-state) var(--ease-out),
              border-color var(--motion-state) var(--ease-out);
}
.condition-card:hover {
  border-color: var(--accent);
  box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 34%);
}

/* ---- 7. Category cards: cinematic zoom shadow ------------------------- */
.category-card { transition: transform var(--motion-state) var(--ease-out), box-shadow var(--motion-state) var(--ease-out); }
.category-card:hover { box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 40%); }

/* ---- 8. Header quote button: subtle glow ------------------------------ */
.header-quote { transition: background var(--motion-state) var(--ease-out), box-shadow var(--motion-state) var(--ease-out); }
.header-quote:hover { box-shadow: none; }

/* ---- DAY MODE: soften the cinematic layer for light ------------------- */
:root[data-theme='light'] .hero-band::before {
  background:
    radial-gradient(120% 90% at 50% 130%, rgb(24 32 36 / 14%), transparent 64%);
}
:root[data-theme='light'] .hero-grain { opacity: .28; mix-blend-mode: multiply; }
:root[data-theme='light'] .hero-copy h1 { text-shadow: none; }
:root[data-theme='light'] .finder-shell {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 -.0625rem 0 rgb(255 255 255 / 60%) inset, 0 1.5rem 3.75rem rgb(24 32 36 / 14%);
}
:root[data-theme='light'] .market-list li:hover { box-shadow: 0 1rem 2rem rgb(24 32 36 / 14%); }
:root[data-theme='light'] .condition-card:hover { box-shadow: 0 1.4rem 3rem rgb(24 32 36 / 16%); }

/* ---- Motion safety ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-photo img { will-change: auto; }
  .primary-link, .text-link::after, .market-list li, .condition-card, .category-card, .search-submit { transition: none; }
}

/* =========================================================================
   ELEVATE v2: 3D + MOTION
   ========================================================================= */

/* ---- Hero 3D stage (three.js car) ------------------------------------ */
.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.hero-stage canvas { display: block; width: 100%; height: 100%; }
.hero-band.has-3d .hero-photo img {
  filter: blur(9px) saturate(.55) brightness(.42) contrast(1.1);
  transition: filter 1.6s var(--ease-out);
}
:root[data-theme='light'] .hero-band.has-3d .hero-photo img {
  filter: blur(16px) grayscale(1) brightness(1.25);
  opacity: .16;
}

/* ---- Scroll progress line -------------------------------------------- */
.ev-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: .125rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  box-shadow: 0 0 .75rem rgb(206 37 43 / 70%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---- Manufacturer marquee -------------------------------------------- */
.ev-marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-block: var(--rule) solid var(--line);
  background: var(--ink-deep);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ev-marquee-track {
  display: flex;
  width: max-content;
  animation: ev-marquee 36s linear infinite;
}
.ev-marquee:hover .ev-marquee-track { animation-play-state: paused; }
.ev-marquee-run { display: flex; align-items: center; gap: clamp(1.8rem, 4vw, 3.4rem); padding-right: clamp(1.8rem, 4vw, 3.4rem); }
.ev-make {
  font-family: var(--display-font);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: .0625rem color-mix(in srgb, var(--text) 48%, transparent);
  transition: color var(--motion-state) var(--ease-out), -webkit-text-stroke-color var(--motion-state) var(--ease-out);
}
.ev-make:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.ev-marquee i {
  flex: none;
  width: .55rem; height: .55rem;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 .9rem rgb(206 37 43 / 70%);
}
@keyframes ev-marquee { to { transform: translateX(-50%); } }

/* ---- Staggered blur reveals (uses translate/scale, never transform) --- */
html.ev-js .ev-reveal {
  opacity: 0;
  translate: 2.8rem 0;
  scale: .97;
  filter: blur(8px);
  transition:
    opacity .9s var(--ease-out) var(--ev-delay, 0ms),
    translate .9s var(--ease-out) var(--ev-delay, 0ms),
    scale .9s var(--ease-out) var(--ev-delay, 0ms),
    filter .9s var(--ease-out) var(--ev-delay, 0ms),
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out),
    border-color .25s var(--ease-out),
    background .25s var(--ease-out);
}
html.ev-js .ev-reveal.ev-in { opacity: 1; translate: 0 0; scale: 1; filter: none; }

/* Upgrade the base reveal from a faint fade to a real horizontal slider entrance. */
.motion-ready .reveal {
  opacity: 0;
  transform: translateX(3.5rem) scale(.965);
  filter: blur(10px);
  transition:
    opacity .95s var(--ease-out) var(--stagger, 0ms),
    transform 1s var(--ease-out) var(--stagger, 0ms),
    filter .9s var(--ease-out) var(--stagger, 0ms),
    box-shadow .35s var(--ease-out),
    border-color .25s var(--ease-out);
}
.motion-ready .reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* ---- 3D tilt + following light --------------------------------------- */
.ev-tilt { position: relative; transform-style: preserve-3d; }
body .ev-tilt.ev-hot.ev-hot {
  transform: perspective(62.5rem) rotateX(var(--ev-rx, 0deg)) rotateY(var(--ev-ry, 0deg)) translateY(-.375rem);
  transition: transform .18s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s var(--ease-out);
}
.ev-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(22rem circle at var(--ev-mx, 50%) var(--ev-my, 50%), rgb(255 105 113 / 22%), transparent 60%);
  mix-blend-mode: screen;
  transition: opacity .35s var(--ease-out);
}
.ev-tilt.ev-hot .ev-shine { opacity: 0; }
:root[data-theme='light'] .ev-shine {
  background: radial-gradient(22rem circle at var(--ev-mx, 50%) var(--ev-my, 50%), rgb(206 37 43 / 12%), transparent 60%);
  mix-blend-mode: multiply;
}
.primary-link, .header-quote, .search-submit, .ordering-cta { transition-property: transform, translate, box-shadow, background; transition-duration: .2s, .25s, .25s, .25s; }

/* ---- Per-product 3D viewers (models3d.js) ----------------------------- */
.product-image { position: relative; }
.card-3d {
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 60%, #ffffff, #e9ebe8);
  --poster-color: transparent;
}
.badge-3d {
  position: absolute;
  top: .625rem; left: .625rem;
  z-index: 2;
  padding: .25rem .55rem;
  background: var(--accent);
  color: var(--white);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  pointer-events: none;
}

/* ---- Reduced motion: everything visible, nothing moves ---------------- */
@media (prefers-reduced-motion: reduce) {
  html.ev-js .ev-reveal, .motion-ready .reveal { opacity: 1; translate: none; scale: none; filter: none; transform: none; transition: none; }
  .ev-marquee-track { animation: none; }
  body .ev-tilt.ev-hot.ev-hot { transform: none; }
}

/* ---- Mobile/tablet: give the 3D car its own stage above the copy ------ */
@media (max-width: 53.125rem) {
  .hero-band:has(.hero-stage),
  .hero-band:has(.hero-stage) .hero-layout { min-height: 56rem; }
  .hero-band:has(.hero-stage) .hero-layout { align-items: end; padding-bottom: 6rem; }
}

/* Day mode with 3D: fade the whole photo layer (the img opacity is held by the base entrance animation). */
:root[data-theme='light'] .hero-band.has-3d .hero-photo { opacity: .16; transition: opacity 1.2s var(--ease-out); }

/* ---- Interactive part explorer (real 3D parts from the car) ----------- */
.part-explorer-stage { position: relative; }
.part-canvas { display: block; width: 100%; height: 100%; min-height: 24rem; cursor: grab; touch-action: pan-y; }
.part-canvas:active { cursor: grabbing; }
.part-tabs {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
  padding: .35rem;
  border: var(--rule) solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 2.5rem;
  background: color-mix(in srgb, var(--ink-deep) 72%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.part-tab {
  min-height: 2.25rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 2rem;
  background: transparent;
  color: var(--muted);
  font-family: var(--display-font);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: background var(--motion-state) var(--ease-out), color var(--motion-state) var(--ease-out);
}
.part-tab:hover { color: var(--text); }
.part-tab.is-active { background: var(--accent); color: var(--white); }
.part-explorer-stage.is-ready + * , .part-explorer-stage.is-ready ~ picture { display: none; }
@media (max-width: 40rem) { .part-tab { padding: 0 .7rem; font-size: var(--text-xs); } .part-canvas { min-height: 20rem; } }

/* flat cards: no cursor tilt */
.ev-tilt { transform: none !important; }