/* ============================================================
   DMC Cinematic Hero — igniting headlights, approaching car,
   self-drawing luminous line-signature with a travelling glint.
   Self-contained, compositor-friendly, reduced-motion safe.
   Loaded LAST so it layers over fix-media.
   ============================================================ */

.home-hero .hero__inner { position: relative; z-index: 3; }

.home-hero .hero-media--cine { position: absolute; inset: 0; overflow: hidden; z-index: 0; }

/* --- the real car photo: emerges from the dark and drifts toward you --- */
.home-hero .hero-media--cine > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 44%;
  transform: scale(1.14);
  filter: brightness(.9) saturate(.95) contrast(1.05);
  will-change: transform, filter;
  animation: heroApproach 2.4s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes heroApproach {
  0%   { transform: scale(1.14); filter: brightness(.30) saturate(.82) contrast(1.08); }
  55%  { filter: brightness(.62) saturate(.9) contrast(1.06); }
  100% { transform: scale(1.0);  filter: brightness(.92) saturate(.95) contrast(1.04); }
}
/* the whole stage keeps pushing in very slowly = still approaching */
.home-hero .hero-media--cine {
  animation: heroDrift 15s ease-in-out 2.6s infinite alternate;
  transform-origin: 50% 46%;
}
@keyframes heroDrift { from { transform: scale(1.0); } to { transform: scale(1.045); } }

/* --- headlights: ignite (with a flicker), then breathe --- */
.home-hero .hero-lamp {
  position: absolute; top: 40%; width: 30%; aspect-ratio: 1 / 1; border-radius: 50%;
  transform: translateY(-50%) scale(.6);
  background: radial-gradient(closest-side,
    oklch(94% .06 236 / .85), oklch(70% .18 258 / .34) 42%, transparent 72%);
  filter: blur(4px); mix-blend-mode: screen; opacity: 0; pointer-events: none;
  will-change: opacity, transform;
  animation: lampIgnite 1.15s ease-out 1.25s both;
}
.home-hero .hero-lamp--l { left: 4%; }
.home-hero .hero-lamp--r { right: 4%; }
.home-hero .hero-lamp::after {
  content: ""; position: absolute; inset: 27%; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(98% .03 228 / .92), transparent 68%);
  animation: lampBreathe 3.8s ease-in-out 2.6s infinite;
}
@keyframes lampIgnite {
  0%   { opacity: 0;   transform: translateY(-50%) scale(.6); }
  9%   { opacity: .55; }
  17%  { opacity: .12; }
  27%  { opacity: .95; }
  41%  { opacity: .45; }
  100% { opacity: 1;   transform: translateY(-50%) scale(1); }
}
@keyframes lampBreathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* --- the luminous line-signature of the car front --- */
.home-hero .hero-signature {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
  width: min(1140px, 82%); height: auto; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 12px oklch(66% .16 258 / .45));
}
.home-hero .hero-signature .ln {
  fill: none; stroke: oklch(82% .11 248 / .8);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: heroDraw 1.5s cubic-bezier(.16, 1, .3, 1) .35s both;
}
.home-hero .hero-signature .ln--grille { stroke: oklch(86% .03 232 / .55); stroke-width: 1.6; }
.home-hero .hero-signature .ln--slat  { stroke: oklch(88% .025 230 / .5); stroke-width: 1.3; animation-delay: .7s; }
.home-hero .hero-signature .ln--bumper,
.home-hero .hero-signature .ln--splitter { stroke: oklch(78% .1 250 / .6); animation-delay: .55s; }
.home-hero .hero-signature .ln--blade {
  stroke: oklch(92% .09 244 / .95); stroke-width: 3.4;
  filter: drop-shadow(0 0 7px oklch(74% .17 255 / .85));
  animation-delay: .15s;
}
.home-hero .hero-signature .emblem {
  fill: none; stroke: oklch(90% .07 244 / .9); stroke-width: 2.4;
  opacity: 0; transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 8px oklch(78% .16 256 / .8));
  animation: emblemOn 1s ease-out 1.5s both;
}
@keyframes heroDraw  { to { stroke-dashoffset: 0; } }
@keyframes emblemOn  { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; } 100% { opacity: .95; transform: scale(1); } }

/* --- glint: a bright pulse that runs along the brow line --- */
.home-hero .hero-signature .glint {
  fill: none; stroke: oklch(98% .02 228); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: .08 .92; stroke-dashoffset: 1; opacity: 0;
  filter: drop-shadow(0 0 7px oklch(92% .09 240));
  animation: heroGlint 5s ease-in-out 2.7s infinite;
}
@keyframes heroGlint {
  0%   { opacity: 0;   stroke-dashoffset: 1; }
  10%  { opacity: .95; }
  55%  { stroke-dashoffset: 0; opacity: .95; }
  70%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

/* --- one-shot energising scan on open --- */
.home-hero .hero-scan {
  position: absolute; left: 0; right: 0; top: 12%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(86% .11 248 / .85), transparent);
  filter: blur(1px); mix-blend-mode: screen; opacity: 0;
  animation: heroScan 1.9s ease-in-out .35s 1 both;
}
@keyframes heroScan {
  0%   { opacity: 0; top: 10%; }
  14%  { opacity: .9; }
  86%  { opacity: .8; }
  100% { opacity: 0; top: 84%; }
}

/* --- accessibility: no motion, but keep the finished, lit state --- */
@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-media--cine,
  .home-hero .hero-media--cine > img { animation: none; transform: none; }
  .home-hero .hero-media--cine > img { filter: brightness(.92) saturate(.95) contrast(1.04); }
  .home-hero .hero-lamp { animation: none; opacity: 1; transform: translateY(-50%) scale(1); }
  .home-hero .hero-lamp::after { animation: none; opacity: .8; }
  .home-hero .hero-signature .ln { animation: none; stroke-dashoffset: 0; }
  .home-hero .hero-signature .emblem { animation: none; opacity: .95; transform: none; }
  .home-hero .hero-signature .glint,
  .home-hero .hero-scan { display: none; }
}

/* ============================================================
   Home: breathing room between the closing CTA band and footer
   ============================================================ */
.cta-band--wide { margin-block-end: clamp(3.5rem, 6vw, 6.5rem); }