/* =========================
   Modern Motion System
   (reveal + micro-interactions)
========================= */

:root {
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-duration-fast: 180ms;
  --motion-duration: 520ms;
  --motion-duration-slow: 820ms;
  --motion-distance: 18px;
}

/* Respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   Hero choreography (CSS-only)
========================= */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-reveal-up {
    0% {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes hero-reveal-right {
    0% {
      opacity: 0;
      transform: translate3d(14px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .hero-headline,
  .hero-subtitle,
  .hero-download-label,
  .hero-badges,
  .hero-payment {
    opacity: 0;
    animation: hero-reveal-up 900ms var(--motion-ease-out) forwards;
  }

  .hero-headline { animation-delay: 120ms; }
  .hero-subtitle { animation-delay: 220ms; }
  .hero-download-label { animation-delay: 320ms; }
  .hero-badges { animation-delay: 420ms; }
  .hero-payment { animation-delay: 520ms; }

  .phone-image {
    opacity: 0;
    animation: hero-reveal-right 900ms var(--motion-ease-out) forwards;
    animation-delay: 260ms;
  }
}

/* Ambient hero motion (no scroll-parallax) */
header .color-overlay {
  position: relative;
  overflow: hidden;
}

header .color-overlay > .container {
  position: relative;
  z-index: 1;
}

/* Keep sticky navigation fixed (avoid being overridden by the rule above) */
header .color-overlay > .sticky-navigation {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 5000;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-ambient {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    100% { transform: translate3d(2%, 1%, 0) scale(1.05); }
  }

  header .color-overlay::before,
  header .color-overlay::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
    transform: translate3d(0, 0, 0);
    animation: hero-ambient 16s var(--motion-ease) infinite alternate;
  }

  header .color-overlay::before {
    background:
      radial-gradient(circle at 18% 28%, rgba(56, 189, 248, 0.55), transparent 42%),
      radial-gradient(circle at 82% 24%, rgba(255, 183, 3, 0.55), transparent 44%);
  }

  header .color-overlay::after {
    background:
      radial-gradient(circle at 70% 78%, rgba(255, 183, 3, 0.35), transparent 48%),
      radial-gradient(circle at 32% 80%, rgba(56, 189, 248, 0.35), transparent 52%);
    animation-duration: 20s;
  }
}

/* =========================
   Scroll reveal system (JS-driven)
========================= */
.reveal {
  --reveal-delay: 0ms;
  --reveal-duration: var(--motion-duration);
  transition:
    opacity var(--reveal-duration) var(--motion-ease-out) var(--reveal-delay),
    transform var(--reveal-duration) var(--motion-ease-out) var(--reveal-delay);
  will-change: transform, opacity;
}

.reveal.is-inview {
  will-change: auto;
}

/* Base hidden state */
.reveal:not(.is-inview) {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
}

/* Variants */
.reveal[data-reveal="fade"]:not(.is-inview) {
  transform: translate3d(0, 0, 0);
}

.reveal[data-reveal="left"]:not(.is-inview) {
  transform: translate3d(calc(-1 * var(--motion-distance)), 0, 0);
}

.reveal[data-reveal="right"]:not(.is-inview) {
  transform: translate3d(var(--motion-distance), 0, 0);
}

.reveal[data-reveal="scale"]:not(.is-inview) {
  transform: translate3d(0, 0, 0) scale(0.985);
}

.reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Blur removed for better performance */

/* Timeline accent for ride types */
.reveal[data-reveal="timeline"] .ride-types-list::before {
  transform-origin: top;
  transform: scaleY(0.15);
  opacity: 0;
  transition: transform 700ms var(--motion-ease-out), opacity 700ms var(--motion-ease-out);
}

.reveal[data-reveal="timeline"].is-inview .ride-types-list::before {
  transform: scaleY(1);
  opacity: 0.85;
}

.reveal[data-reveal="timeline"] .ride-type-icon::before {
  transform: translate(-50%, -50%) scale(0.65);
  opacity: 0.75;
  transition: transform 520ms var(--motion-ease-out), opacity 520ms var(--motion-ease-out);
}

.reveal[data-reveal="timeline"].is-inview .ride-type-icon::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* FAQ content polish (open state) */
.faq-item[open] p {
  animation: faq-in 420ms var(--motion-ease-out) both;
  animation-delay: 80ms;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes faq-in {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}