/* DM-Motors — motion upgrades.
 * Load after styles.css so these rules win in the cascade.
 */

/* Reduce motion: disable all extra animations and reset state. */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .custom-cursor,
  .hero-section::after,
  .dot::after {
    display: none;
  }

  .hero-word,
  .reveal,
  .reveal.is-visible,
  .model-showcase-card,
  .model-showcase-card *,
  .model-visual img,
  .location-icon,
  .map-embed-card iframe,
  .magnetic,
  .outline-button,
  .model-cta,
  .nav-link,
  .finance-summary-value::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .hero-word,
  .reveal {
    opacity: 1 !important;
    clip-path: none !important;
  }
}

/* -------- Scroll progress bar -------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  z-index: 100;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 14px rgba(118, 213, 50, 0.35);
  pointer-events: none;
  will-change: width;
}

/* -------- Custom cursor (fine pointers only) -------- */
html.has-custom-cursor,
html.has-custom-cursor body {
  cursor: none;
}

html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor [role="button"],
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor .model-showcase-card,
html.has-custom-cursor .finance-chip,
html.has-custom-cursor .finance-mode-button,
html.has-custom-cursor .finance-offer-card,
html.has-custom-cursor .dot {
  cursor: none;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: rgba(118, 213, 50, 0.12);
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0) scale(var(--cursor-scale, 1));
  transition: width 180ms ease, height 180ms ease, margin 180ms ease, border-color 180ms ease, background 180ms ease;
  mix-blend-mode: screen;
  will-change: transform;
}

.custom-cursor.hovering {
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  background: rgba(118, 213, 50, 0.22);
  border-color: rgba(255, 255, 255, 0.8);
}

/* -------- Hero split text -------- */
.js .hero-copy {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .hero-copy.is-animated {
  opacity: 1;
  transform: translateY(0);
}

.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(70%);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 680ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(240ms + var(--word-index, 0) * 42ms);
  will-change: transform, clip-path;
}

.js .hero-copy.is-animated .hero-word {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0);
}

/* -------- Hero overlay sweep -------- */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 42%,
    rgba(118, 213, 50, 0.04) 48%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 52%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: hero-shimmer 9s ease-in-out infinite;
  mix-blend-mode: overlay;
}

@keyframes hero-shimmer {
  0% {
    background-position: 180% 0;
  }
  60% {
    background-position: -80% 0;
  }
  100% {
    background-position: -80% 0;
  }
}

/* -------- Hero slider Ken Burns boost -------- */
.hero-slide {
  transform: scale(1.12);
}

.hero-slide.is-active {
  transform: scale(1.02);
}

/* -------- Dot timeline progress -------- */
.dot {
  position: relative;
  overflow: hidden;
}

.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.dot.active {
  background: rgba(255, 255, 255, 0.8);
}

.dot.active::after {
  animation: dot-progress 5200ms linear forwards;
}

@keyframes dot-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* -------- Staggered scroll reveals -------- */
.reveal {
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

/* -------- 3D tilt model cards -------- */
.model-showcase-card {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg));
  transition: transform 220ms ease-out;
  will-change: transform;
}

.model-showcase-card:hover,
.model-showcase-card:focus-within {
  transform: perspective(1000px) rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg)) translateY(-4px);
}

.card-glare {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 255, 255, 0.16),
    transparent 30%
  );
  opacity: 0;
  transition: opacity 220ms ease;
  mix-blend-mode: overlay;
}

.model-showcase-card:hover .card-glare,
.model-showcase-card:focus-within .card-glare {
  opacity: 1;
}

/* -------- Model image pan -------- */
.model-visual img,
.model-visual picture img {
  transform: scale(1.04) translate3d(var(--img-x, 0px), var(--img-y, 0px), 0);
  transition: transform 360ms ease-out;
  will-change: transform;
}

/* -------- Counters in specs -------- */
.counter-number {
  color: #ffffff;
}

/* -------- Magnetic buttons -------- */
.outline-button.magnetic,
.model-cta.magnetic,
.nav-link.magnetic {
  transform: translate3d(var(--magnetic-x, 0px), var(--magnetic-y, 0px), 0px);
}

.outline-button.magnetic {
  transition:
    transform 140ms ease-out,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.model-cta.magnetic {
  transition:
    transform 140ms ease-out,
    background 180ms ease,
    border-color 180ms ease;
}

.nav-link.magnetic {
  transition:
    color 180ms ease,
    transform 140ms ease-out;
}

.nav-link.magnetic::after {
  transition: background 180ms ease;
}

/* -------- Map / location reveals -------- */
@keyframes pin-drop {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.6);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.location-icon {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.map-section.is-revealed .location-icon {
  animation: pin-drop 520ms cubic-bezier(0.22, 1.6, 0.36, 1) both;
  animation-delay: calc(var(--location-index, 0) * 100ms);
}

@keyframes map-in {
  0% {
    opacity: 0.4;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.map-embed-card iframe {
  opacity: 1;
  transform: scale(1);
}

.map-embed-card.is-visible iframe {
  animation: map-in 620ms ease both;
}

/* -------- Finance summary shimmer -------- */
.finance-summary-value {
  position: relative;
  overflow: hidden;
}

.js .finance-summary-value::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(118, 213, 50, 0.10),
    transparent
  );
  transform: translateX(-120%);
  animation: value-shimmer 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes value-shimmer {
  0% {
    transform: translateX(-120%);
  }
  40% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(120%);
  }
}

/* Touch / small screens: keep things sane. */
@media (pointer: coarse) {
  .custom-cursor {
    display: none;
  }
}

@media (max-width: 720px) {
  .hero-word {
    transition-delay: calc(160ms + var(--word-index, 0) * 30ms);
  }

  .model-showcase-card {
    transform: none !important;
  }

  .card-glare {
    display: none;
  }

  .magnetic {
    transform: none !important;
  }
}