/* ==========================================================================
   X3von Cars — Animation System
   Pure CSS keyframes + scroll-reveal states driven by IntersectionObserver.
   Every motion respects prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

/* Keyframes ---------------------------------------------------------------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes imageReveal {
  from { opacity: 0; transform: scale(1.09); clip-path: inset(0 0 0 100%); }
  to   { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); }
}

@keyframes drawerIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastOut {
  to { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.97); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* Hero entrance ------------------------------------------------------------ */

.hero__content > * {
  opacity: 0;
  animation: fadeUp 900ms var(--ease-out) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: 120ms; }
.hero__content > *:nth-child(2) { animation-delay: 240ms; }
.hero__content > *:nth-child(3) { animation-delay: 360ms; }
.hero__content > *:nth-child(4) { animation-delay: 480ms; }
.hero__content > *:nth-child(5) { animation-delay: 620ms; }

.hero__media { animation: imageReveal 1600ms var(--ease-out) both; }

/* Word-by-word stagger for headline ---------------------------------------- */

.stagger-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  animation: wordUp 820ms var(--ease-out) forwards;
  animation-delay: calc(var(--w, 0) * 70ms + 220ms);
}
@keyframes wordUp {
  to { opacity: 1; transform: none; }
}

/* Scroll reveal ------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translate3d(0, 32px, 0); }
[data-reveal="right"] { transform: translate3d(-32px, 0, 0); }
[data-reveal="left"]  { transform: translate3d(32px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.97); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 820ms var(--ease-out), transform 820ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Staggered children inside a revealed container */
[data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}
[data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: none;
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}
[data-reveal-group].is-revealed > *:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-group].is-revealed > *:nth-child(2)  { transition-delay: 80ms; }
[data-reveal-group].is-revealed > *:nth-child(3)  { transition-delay: 160ms; }
[data-reveal-group].is-revealed > *:nth-child(4)  { transition-delay: 240ms; }
[data-reveal-group].is-revealed > *:nth-child(5)  { transition-delay: 320ms; }
[data-reveal-group].is-revealed > *:nth-child(6)  { transition-delay: 400ms; }
[data-reveal-group].is-revealed > *:nth-child(7)  { transition-delay: 460ms; }
[data-reveal-group].is-revealed > *:nth-child(8)  { transition-delay: 520ms; }
[data-reveal-group].is-revealed > *:nth-child(n+9) { transition-delay: 580ms; }

/* Image reveal on scroll */
.reveal-img { overflow: hidden; }
.reveal-img img {
  transform: scale(1.08);
  opacity: 0;
  transition: transform 1400ms var(--ease-out), opacity 900ms var(--ease);
}
.reveal-img.is-revealed img { transform: scale(1); opacity: 1; }

/* Line draw */
.rule-draw {
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms var(--ease-out);
}
.rule-draw.is-revealed { transform: scaleX(1); }

/* Page entrance ------------------------------------------------------------ */

.page-fade { animation: fadeIn 420ms var(--ease) both; }

body.is-leaving .page-fade { opacity: 0; transition: opacity 200ms var(--ease); }

/* Loading spinner ---------------------------------------------------------- */

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn.is-loading { pointer-events: none; opacity: 0.8; }

/* Error shake -------------------------------------------------------------- */

.shake { animation: shake 480ms var(--ease); }

/* Counter ------------------------------------------------------------------ */

.counter { font-variant-numeric: tabular-nums; }

/* Reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-group] > *,
  .hero__content > *,
  .stagger-word {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal-img img { opacity: 1; transform: none; }
  .rule-draw { transform: scaleX(1); }
  .hero__media { transform: none !important; }
  .marquee__track { animation: none; }
  .fab-whatsapp::after { animation: none; }
}