/* ═══════════════════════════════════════════════════════
   ZAKTOO MOTION SYSTEM — motion.css
   Tokens + reveal states + header / button / modal polish
═══════════════════════════════════════════════════════ */

/* ── Timing & easing tokens ─────────────────────────── */
:root {
  --motion-fast:   220ms;
  --motion-mid:    460ms;
  --motion-slow:   680ms;
  --ease-out:      cubic-bezier(0.25, 0, 0.15, 1);
  --ease-soft:     cubic-bezier(0.40, 0, 0.20, 1);
  --ease-spring:   cubic-bezier(0.34, 1.30, 0.64, 1);
}

/* ── Base transition (text / layout elements) ────────── */
[data-reveal] {
  transition-property: opacity, transform;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--motion-mid);
}

/* ── Character elements: individual transform properties ─
   CSS `translate`, `scale`, `rotate` compose multiplicatively
   WITH the element's existing `transform: translateX(-50%)`
   centering, so positioned characters are never displaced.  */
[data-reveal="char"],
[data-reveal="char-left"],
[data-reveal="char-right"] {
  transition-property: opacity, translate, scale;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--motion-slow);
}

[data-reveal="dl-char"] {
  transition-property: opacity, translate, scale, rotate;
  transition-timing-function: var(--ease-spring);
  transition-duration: var(--motion-slow);
}

/* ── Modifier: speed ────────────────────────────────── */
[data-motion="fast"] { transition-duration: var(--motion-fast); }
[data-motion="slow"] { transition-duration: var(--motion-slow); }

/* ── Modifier: easing ───────────────────────────────── */
[data-ease="spring"] { transition-timing-function: var(--ease-spring); }
[data-ease="soft"]   { transition-timing-function: var(--ease-soft); }

/* ═══ HIDDEN STATES (.reveal-init set by motion.js) ═══

   Progressive-enhancement note:
   `reveal-init` is only added by motion.js, so if JS never
   runs, no element is ever hidden. A 2-second safety net in
   motion.js also reveals any elements that get stuck due to
   a partial failure.                                        */

.reveal-init { opacity: 0; }

/* Text / layout: use transform offset */
[data-reveal="up"].reveal-init      { transform: translateY(28px); }
[data-reveal="up-sm"].reveal-init   { transform: translateY(13px); }
[data-reveal="left"].reveal-init    { transform: translateX(-36px); }
[data-reveal="right"].reveal-init   { transform: translateX(36px); }
[data-reveal="scale"].reveal-init   { transform: scale(0.88); }
[data-reveal="fade"].reveal-init    { /* opacity only */ }

/* Characters: individual properties (won't touch base transform) */
[data-reveal="char"].reveal-init       { translate: 0 22px;    scale: 0.92; }
[data-reveal="char-left"].reveal-init  { translate: -44px 16px; scale: 0.94; }
[data-reveal="char-right"].reveal-init { translate: 44px 16px;  scale: 0.94; }
[data-reveal="dl-char"].reveal-init    { translate: 32px 28px;  scale: 0.93; rotate: 1deg; }

/* ═══ VISIBLE STATES (.is-visible set by IntersectionObserver) ═══ */

[data-reveal].is-visible { opacity: 1; }

/* Text / layout: clear transform offset */
[data-reveal="up"].is-visible,
[data-reveal="up-sm"].is-visible,
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible,
[data-reveal="fade"].is-visible { transform: none; }

/* Characters: clear individual offset properties (leaves base transform intact) */
[data-reveal="char"].is-visible,
[data-reveal="char-left"].is-visible,
[data-reveal="char-right"].is-visible { translate: 0 0; scale: 1; }

[data-reveal="dl-char"].is-visible { translate: 0 0; scale: 1; rotate: 0deg; }

/* ── Mobile: soften translate distances ─────────────── */
@media (max-width: 768px) {
  [data-reveal="up"].reveal-init      { transform: translateY(16px); }
  [data-reveal="left"].reveal-init    { transform: translateX(-20px); }
  [data-reveal="right"].reveal-init   { transform: translateX(20px); }
  [data-reveal="char-left"].reveal-init  { translate: -22px 12px; }
  [data-reveal="char-right"].reveal-init { translate: 22px 12px; }
  [data-reveal="dl-char"].reveal-init    { translate: 20px 20px; scale: 0.94; rotate: 0.8deg; }
}

/* ═══════════════════════════════════════════════════
   HEADER — smooth compact state transitions
═══════════════════════════════════════════════════ */
.site-header {
  transition:
    background-color 260ms var(--ease-soft),
    backdrop-filter  260ms var(--ease-soft),
    box-shadow       260ms var(--ease-soft),
    padding-top      260ms var(--ease-soft),
    padding-bottom   260ms var(--ease-soft);
}

.nav-link {
  transition: color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

.logo-img {
  transition: opacity 200ms var(--ease-out), filter 200ms var(--ease-out);
}

/* ═══════════════════════════════════════════════════
   BUTTONS — subtle lift + press micro-interaction
═══════════════════════════════════════════════════ */
.hero-cta-btn,
.riders-cta,
.merchant-cta,
.partner-cta,
.download-badge {
  transition:
    transform  160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    opacity    160ms var(--ease-out);
}

.hero-cta-btn:hover,
.riders-cta:hover,
.merchant-cta:hover,
.partner-cta:hover,
.download-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.hero-cta-btn:active,
.riders-cta:active,
.merchant-cta:active,
.partner-cta:active,
.download-badge:active {
  transform: translateY(0);
  box-shadow: none;
  opacity: 0.84;
}

/* ═══════════════════════════════════════════════════
   MODALS — backdrop fade + panel slide-up

   Note: modals use `display: none` → `display: flex`
   via [aria-hidden] toggling. CSS `animation` fires on
   rule application, so it works immediately after
   `display` is restored — no JS changes needed.
═══════════════════════════════════════════════════ */

/* Backdrop opacity fade */
.rider-modal-wrap[aria-hidden="false"],
.merchant-modal-wrap[aria-hidden="false"],
.partner-modal-wrap[aria-hidden="false"],
.contact-modal-wrap[aria-hidden="false"] {
  animation: backdrop-in 220ms var(--ease-soft) both;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal panel slides up from below */
.rider-modal-wrap[aria-hidden="false"]    .rider-modal,
.merchant-modal-wrap[aria-hidden="false"] .merchant-modal,
.partner-modal-wrap[aria-hidden="false"]  .partner-modal,
.contact-modal-wrap[aria-hidden="false"]  .contact-modal {
  animation: modal-enter 320ms var(--ease-out) both;
}

@keyframes modal-enter {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════
   FAQ — subtle question hover
═══════════════════════════════════════════════════ */
.faq-question {
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION

   Collapses all entrance animations to a simple fade.
   Critically: does NOT apply `transform: none` to char
   elements, so base `translateX(-50%)` centering is
   preserved even in reduced-motion mode.
═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  /* Fade-only transition, no delay */
  [data-reveal] {
    transition-property: opacity !important;
    transition-duration: 120ms !important;
    transition-timing-function: linear !important;
    transition-delay: 0ms !important;
  }

  /* Clear individual char offsets (safe — preserves transform) */
  [data-reveal].reveal-init {
    translate: none !important;
    scale:     none !important;
    rotate:    none !important;
  }

  /* Clear text/layout transform offsets */
  [data-reveal="up"].reveal-init,
  [data-reveal="up-sm"].reveal-init,
  [data-reveal="left"].reveal-init,
  [data-reveal="right"].reveal-init,
  [data-reveal="scale"].reveal-init {
    transform: none !important;
  }

  /* No header/nav animations */
  .site-header,
  .nav-link,
  .logo-img { transition: none !important; }

  /* No button lift */
  .hero-cta-btn,
  .riders-cta,
  .merchant-cta,
  .partner-cta,
  .download-badge {
    transition: none !important;
  }
  .hero-cta-btn:hover,
  .riders-cta:hover,
  .merchant-cta:hover,
  .partner-cta:hover,
  .download-badge:hover {
    transform: none;
    box-shadow: none;
  }

  /* No modal animations */
  .rider-modal-wrap[aria-hidden="false"],
  .merchant-modal-wrap[aria-hidden="false"],
  .partner-modal-wrap[aria-hidden="false"],
  .contact-modal-wrap[aria-hidden="false"],
  .rider-modal-wrap[aria-hidden="false"]    .rider-modal,
  .merchant-modal-wrap[aria-hidden="false"] .merchant-modal,
  .partner-modal-wrap[aria-hidden="false"]  .partner-modal,
  .contact-modal-wrap[aria-hidden="false"]  .contact-modal {
    animation: none !important;
  }

  /* No FAQ hover */
  .faq-question { transition: none !important; }
}