/* ============================================================
   Wag'n Tails sitewide motion — Airstream × Apple + light Mailchimp.
   Tokens live in chrome.css (:root). This file owns transforms,
   reveal variants, coast hovers, doodle one-shots, media settle,
   FAQ/testimonial helpers, decorative drift, parallax prep.
   Opacity for .reveal stays in page CSS. Transform/opacity only.
   Brand look unchanged — timing / presence / interaction quality.
   ============================================================ */

/* ---------- Token aliases (chrome is source of truth) ---------- */
:root {
  --motion-hover: var(--motion-button, 0.2s);
  --motion-press: 0.14s;
  --motion-media: 0.9s;
  --motion-coast: var(--motion-button, 0.2s);
  --stagger-step: 90ms;
}

/* Reveals: soft fade + rise by default.
   Variants via data-reveal / .reveal--* (scale, left, right, mask).
   Horizontal only on desktop — mobile stays stacked vertical. */
@media (prefers-reduced-motion: no-preference) {
  html.js body.wagn-chrome .reveal:not(.is-inview):not(.is-in),
  html.js body.wagn-chrome [data-reveal]:not(.is-inview):not(.is-in) {
    transform: translate3d(0, var(--reveal-distance, 1.1rem), 0);
  }

  html.js body.wagn-chrome .reveal--title:not(.is-inview):not(.is-in),
  html.js body.wagn-chrome [data-reveal="title"]:not(.is-inview):not(.is-in) {
    transform: translate3d(0, calc(var(--reveal-distance, 1.1rem) * 1.15), 0);
  }

  /* Scale enter (97 → 100) — media / product imagery */
  html.js body.wagn-chrome .reveal--scale:not(.is-inview):not(.is-in),
  html.js body.wagn-chrome [data-reveal="scale"]:not(.is-inview):not(.is-in) {
    transform: scale(var(--media-enter-scale, 0.97));
  }

  /* Soft mask wipe (clip-path) */
  html.js body.wagn-chrome .reveal--mask:not(.is-inview):not(.is-in),
  html.js body.wagn-chrome [data-reveal="mask"]:not(.is-inview):not(.is-in) {
    clip-path: inset(8% 4% 8% 4% round 0.75rem);
    transform: translate3d(0, 0.65rem, 0);
  }

  html.js body.wagn-chrome .reveal--mask.is-inview,
  html.js body.wagn-chrome .reveal--mask.is-in,
  html.js body.wagn-chrome [data-reveal="mask"].is-inview,
  html.js body.wagn-chrome [data-reveal="mask"].is-in {
    clip-path: inset(0 0 0 0);
  }

  /* Horizontal: desktop only, selective */
  @media (min-width: 900px) {
    html.js body.wagn-chrome .reveal--from-left:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome [data-reveal="left"]:not(.is-inview):not(.is-in) {
      transform: translate3d(calc(var(--reveal-distance-x, 1.5rem) * -1), 0, 0);
    }

    html.js body.wagn-chrome .reveal--from-right:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome [data-reveal="right"]:not(.is-inview):not(.is-in) {
      transform: translate3d(var(--reveal-distance-x, 1.5rem), 0, 0);
    }
  }

  html.js body.wagn-chrome .reveal.is-inview,
  html.js body.wagn-chrome .reveal.is-in,
  html.js body.wagn-chrome [data-reveal].is-inview,
  html.js body.wagn-chrome [data-reveal].is-in {
    transform: none;
  }

  /*
   * Stagger: honor JS --reveal-delay only.
   * Do NOT hard-code nth-child delays on .is-inview — that overrode
   * page-script stagger and fought IntersectionObserver timing.
   */
  html.js body.wagn-chrome .reveal,
  html.js body.wagn-chrome [data-reveal] {
    transition-delay: var(--reveal-delay, 0ms);
    transition-timing-function: var(--ease-settle, var(--ease-editorial));
    transition-duration: var(--reveal-duration, var(--motion-section, 0.65s));
  }

  @media (max-width: 899px) {
    html.js body.wagn-chrome .reveal:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome [data-reveal]:not(.is-inview):not(.is-in) {
      transform: translate3d(0, 0.5rem, 0);
    }

    html.js body.wagn-chrome .reveal--title:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome [data-reveal="title"]:not(.is-inview):not(.is-in) {
      transform: translate3d(0, 0.6rem, 0);
    }

    html.js body.wagn-chrome .reveal--scale:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome [data-reveal="scale"]:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome .reveal--from-left:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome .reveal--from-right:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome [data-reveal="left"]:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome [data-reveal="right"]:not(.is-inview):not(.is-in) {
      transform: translate3d(0, 0.5rem, 0);
    }

    html.js body.wagn-chrome .reveal--mask:not(.is-inview):not(.is-in),
    html.js body.wagn-chrome [data-reveal="mask"]:not(.is-inview):not(.is-in) {
      clip-path: none;
      transform: translate3d(0, 0.45rem, 0);
    }
  }

  /* Hero: no translate — centering must be correct on first paint */
  html.js body.wagn-chrome [data-hero] .reveal:not(.is-inview):not(.is-in),
  html.js body.wagn-chrome [data-hero] [data-reveal]:not(.is-inview):not(.is-in),
  html.js body.wagn-chrome [data-hero] .reveal--title:not(.is-inview):not(.is-in),
  html.js body.wagn-chrome [data-hero] [data-reveal="title"]:not(.is-inview):not(.is-in) {
    transform: none;
    clip-path: none;
  }

  /* Apple-like hero settle: opacity only after ready (no layout shift) */
  html.js body.wagn-chrome [data-hero]:not(.is-hero-ready) .reveal,
  html.js body.wagn-chrome [data-hero]:not(.is-hero-ready) [data-reveal] {
    transition-duration: 0.01ms;
  }

  html.js body.wagn-chrome [data-hero].is-hero-ready .reveal,
  html.js body.wagn-chrome [data-hero].is-hero-ready [data-reveal] {
    transition:
      opacity calc(var(--reveal-duration, 0.65s) * 0.95) var(--ease-settle, var(--ease-editorial)),
      transform calc(var(--reveal-duration, 0.65s) * 0.95) var(--ease-settle, var(--ease-editorial));
    transition-delay: var(--reveal-delay, 0ms);
  }
}

/* ---------- Doodle / icon one-shot (never loop icons) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.wagn-chrome .doodles .doodle--icon {
    transition: translate var(--motion-doodle, 0.7s) var(--ease-soft, var(--ease));
  }

  body.wagn-chrome .doodles .doodle--icon.is-doodle-enter {
    animation: wagn-doodle-float-in var(--motion-doodle, 0.7s) var(--ease-settle, var(--ease-editorial)) both;
  }
}

@keyframes wagn-doodle-float-in {
  from {
    translate: 0 8px;
  }
  to {
    translate: 0 0;
  }
}

/* Illustrated / decorative van icons only — idle drift 2–4px (never real photos) */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (pointer: fine) {
  body.wagn-chrome .doodles .doodle--icon-vehicle.is-doodle-settled,
  body.wagn-chrome .grooming-van-ico.is-doodle-settled,
  body.wagn-chrome .tile-icon--vehicle.is-doodle-settled {
    animation: wagn-van-idle 9s var(--ease-soft, ease-in-out) infinite;
  }
}

@keyframes wagn-van-idle {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -3px;
  }
}

/* ---------- Soft background drift (decorative layers only) ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (pointer: fine) {
  body.wagn-chrome .hero__glow,
  body.wagn-chrome [class$="-hero__glow"],
  body.wagn-chrome .vp-hero__glow,
  body.wagn-chrome .au-hero__glow,
  body.wagn-chrome .br-hero__glow {
    animation: wagn-bg-drift var(--motion-bg-drift, 18s) var(--ease-soft, ease-in-out) infinite alternate;
    will-change: transform;
  }
}

@keyframes wagn-bg-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(0, -10px, 0) scale(1.03);
  }
}

/* Desktop-only media settle (one-shot enter — scale 97 → 100) */
@media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.wagn-chrome .feature__media img,
  body.wagn-chrome .vehicle__media img,
  body.wagn-chrome .vp-feature__media img,
  body.wagn-chrome .vp-hero__art img,
  body.wagn-chrome [data-scroll-media] img,
  body.wagn-chrome .ll-split__media img,
  body.wagn-chrome .ss-story__facade img,
  body.wagn-chrome .br-card__media img {
    transition:
      transform var(--motion-media, 0.9s) var(--ease-settle, var(--ease-editorial)),
      opacity var(--motion-media, 0.9s) var(--ease-settle, var(--ease-editorial));
  }

  /* Enter only — removing this class settles to default so hover scales still work */
  body.wagn-chrome .feature__media img.is-media-enter,
  body.wagn-chrome .vehicle__media img.is-media-enter,
  body.wagn-chrome .vp-feature__media img.is-media-enter,
  body.wagn-chrome .vp-hero__art img.is-media-enter,
  body.wagn-chrome [data-scroll-media] img.is-media-enter,
  body.wagn-chrome .ll-split__media img.is-media-enter,
  body.wagn-chrome .ss-story__facade img.is-media-enter,
  body.wagn-chrome .br-card__media img.is-media-enter {
    transform: scale(var(--media-enter-scale, 0.97));
    opacity: 0.92;
  }
}

/* Micro coast — lift 2–4px, soft shadow, press; no dramatic scale / no CTA pulse */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.wagn-chrome a.btn--primary,
  body.wagn-chrome .btn--primary,
  body.wagn-chrome a.btn--outline,
  body.wagn-chrome .btn--outline,
  body.wagn-chrome a.btn--soft,
  body.wagn-chrome .btn--soft,
  body.wagn-chrome a.btn--secondary,
  body.wagn-chrome .btn--secondary,
  body.wagn-chrome a.mk-card,
  body.wagn-chrome a.br-launch,
  body.wagn-chrome a.br-launch-tile__link,
  body.wagn-chrome a.br-card,
  body.wagn-chrome a.br-card__link,
  body.wagn-chrome a.pc-tile,
  body.wagn-chrome a.spotlight-tile,
  body.wagn-chrome a.action__app,
  body.wagn-chrome a.vehicle-card,
  body.wagn-chrome a.av-card,
  body.wagn-chrome a.vv-card {
    transition:
      transform var(--motion-coast, 0.2s) var(--ease-spring, var(--ease)),
      box-shadow var(--motion-hover, 0.2s) var(--ease-settle, var(--ease)),
      border-color var(--motion-hover, 0.2s) var(--ease-settle, var(--ease)),
      background var(--motion-hover, 0.2s) var(--ease-settle, var(--ease)),
      color var(--motion-hover, 0.2s) var(--ease-settle, var(--ease));
  }

  body.wagn-chrome a.btn--primary:hover,
  body.wagn-chrome .btn--primary:hover,
  body.wagn-chrome a.btn--primary:focus-visible,
  body.wagn-chrome .btn--primary:focus-visible {
    transform: translate3d(0, calc(var(--hover-lift, 3px) * -1), 0);
  }

  body.wagn-chrome a.btn--outline:hover,
  body.wagn-chrome .btn--outline:hover,
  body.wagn-chrome a.btn--outline:focus-visible,
  body.wagn-chrome .btn--outline:focus-visible,
  body.wagn-chrome a.btn--soft:hover,
  body.wagn-chrome .btn--soft:hover,
  body.wagn-chrome a.btn--soft:focus-visible,
  body.wagn-chrome .btn--soft:focus-visible,
  body.wagn-chrome a.btn--secondary:hover,
  body.wagn-chrome .btn--secondary:hover,
  body.wagn-chrome a.btn--secondary:focus-visible,
  body.wagn-chrome .btn--secondary:focus-visible {
    transform: translate3d(0, calc(var(--hover-lift-sm, 2px) * -1), 0);
  }

  body.wagn-chrome a.btn--primary:active,
  body.wagn-chrome .btn--primary:active,
  body.wagn-chrome a.btn--outline:active,
  body.wagn-chrome .btn--outline:active,
  body.wagn-chrome a.btn--soft:active,
  body.wagn-chrome .btn--soft:active,
  body.wagn-chrome a.btn--secondary:active,
  body.wagn-chrome .btn--secondary:active {
    transform: translate3d(0, 1px, 0) scale(0.985);
    transition-duration: var(--motion-press, 0.14s);
  }

  body.wagn-chrome a.mk-card:hover,
  body.wagn-chrome a.br-launch:hover,
  body.wagn-chrome a.br-launch-tile__link:hover,
  body.wagn-chrome a.br-card:hover,
  body.wagn-chrome a.br-card__link:hover,
  body.wagn-chrome a.pc-tile:hover,
  body.wagn-chrome a.spotlight-tile:hover,
  body.wagn-chrome a.action__app:hover,
  body.wagn-chrome a.vehicle-card:hover,
  body.wagn-chrome a.av-card:hover,
  body.wagn-chrome a.vv-card:hover {
    transform: translate3d(0, calc(var(--hover-lift-card, 4px) * -1), 0);
  }

  body.wagn-chrome a.mk-card:active,
  body.wagn-chrome a.br-launch:active,
  body.wagn-chrome a.br-launch-tile__link:active,
  body.wagn-chrome a.br-card:active,
  body.wagn-chrome a.br-card__link:active,
  body.wagn-chrome a.pc-tile:active,
  body.wagn-chrome a.spotlight-tile:active,
  body.wagn-chrome a.action__app:active,
  body.wagn-chrome a.vehicle-card:active,
  body.wagn-chrome a.av-card:active,
  body.wagn-chrome a.vv-card:active {
    transform: translate3d(0, 1px, 0) scale(0.99);
    transition-duration: var(--motion-press, 0.14s);
  }

  /* Card tilt 1–2° — fine pointer only; JS sets --tilt-x / --tilt-y */
  body.wagn-chrome [data-tilt].is-tilting {
    transform:
      translate3d(0, calc(var(--hover-lift-card, 4px) * -1), 0)
      rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
  }
}

/* ---------- FAQ height + opacity helpers ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.wagn-chrome .mk-faq__a {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transform: translate3d(0, -4px, 0);
    transition:
      max-height var(--motion-faq, 0.36s) var(--ease-settle, var(--ease)),
      opacity var(--motion-faq, 0.36s) var(--ease-settle, var(--ease)),
      transform var(--motion-faq, 0.36s) var(--ease-settle, var(--ease)),
      padding var(--motion-faq, 0.36s) var(--ease-settle, var(--ease)),
      visibility 0s linear var(--motion-faq, 0.36s);
  }

  body.wagn-chrome .mk-faq__item.is-open .mk-faq__a {
    max-height: 40rem;
    opacity: 1;
    visibility: visible;
    padding-bottom: 1.1rem;
    transform: none;
    transition-delay: 0s;
  }
}

/* ---------- Testimonials crossfade helpers ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.wagn-chrome .quotes__stage {
    position: relative;
  }

  body.wagn-chrome .quotes__stage .quote[data-quote] {
    transition:
      opacity var(--motion-testimonial, 0.55s) var(--ease-settle, var(--ease)),
      transform var(--motion-testimonial, 0.55s) var(--ease-settle, var(--ease));
  }

  body.wagn-chrome .quotes__stage.is-crossfade .quote[data-quote] {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    pointer-events: none;
    visibility: hidden;
  }

  body.wagn-chrome .quotes__stage.is-crossfade .quote[data-quote].is-active {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
    z-index: 1;
  }
}

/* Sticky storytelling — homepage features stage (desktop only) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body.wagn-home .features__stage {
    position: sticky;
    top: calc(var(--header-h, 4.5rem) + 1rem);
    transition: transform var(--motion-sticky, 0.7s) var(--ease-settle, var(--ease));
  }
}

@media (max-width: 899px), (pointer: coarse) {
  body.wagn-home .features__stage {
    position: relative;
    top: auto;
  }
}

/* Parallax targets prepared by wagn-motion.js */
body.wagn-chrome [data-parallax] {
  backface-visibility: hidden;
}

body.wagn-chrome .doodles[data-parallax] {
  will-change: translate;
}

@media (max-width: 899px), (pointer: coarse) {
  body.wagn-chrome .doodles[data-parallax],
  body.wagn-chrome .feature__media img,
  body.wagn-chrome .vehicle__media img,
  body.wagn-chrome .vp-feature__media img,
  body.wagn-chrome .vp-hero__art img,
  body.wagn-chrome [data-scroll-media] img {
    will-change: auto;
    filter: none;
  }

  body.wagn-chrome .feature__media img,
  body.wagn-chrome .vehicle__media img,
  body.wagn-chrome .vp-feature__media img,
  body.wagn-chrome .vp-hero__art img,
  body.wagn-chrome [data-scroll-media] img {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  body.wagn-chrome .hero__glow,
  body.wagn-chrome [class$="-hero__glow"],
  body.wagn-chrome .vp-hero__glow,
  body.wagn-chrome .doodles .doodle--icon-vehicle,
  body.wagn-chrome .grooming-van-ico,
  body.wagn-chrome .tile-icon--vehicle {
    animation: none !important;
  }
}

/* Reduced motion: disable drive / coast / parallax / doodle / media settle / tilt */
@media (prefers-reduced-motion: reduce) {
  html.js body.wagn-chrome .reveal,
  html.js body.wagn-chrome [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.wagn-chrome [data-parallax] {
    translate: none !important;
    transform: none !important;
    will-change: auto;
  }

  body.wagn-chrome .doodles .doodle--icon,
  body.wagn-chrome .grooming-van-ico,
  body.wagn-chrome .tile-icon--vehicle,
  body.wagn-chrome .hero__glow,
  body.wagn-chrome [class$="-hero__glow"],
  body.wagn-chrome .vp-hero__glow {
    animation: none !important;
    translate: none !important;
  }

  body.wagn-chrome a.btn--primary:hover,
  body.wagn-chrome .btn--primary:hover,
  body.wagn-chrome a.btn--outline:hover,
  body.wagn-chrome .btn--outline:hover,
  body.wagn-chrome a.btn--soft:hover,
  body.wagn-chrome .btn--soft:hover,
  body.wagn-chrome a.btn--secondary:hover,
  body.wagn-chrome .btn--secondary:hover,
  body.wagn-chrome a.mk-card:hover,
  body.wagn-chrome a.br-launch:hover,
  body.wagn-chrome a.br-launch-tile__link:hover,
  body.wagn-chrome a.br-card:hover,
  body.wagn-chrome a.br-card__link:hover,
  body.wagn-chrome a.pc-tile:hover,
  body.wagn-chrome a.spotlight-tile:hover,
  body.wagn-chrome a.action__app:hover,
  body.wagn-chrome a.vehicle-card:hover,
  body.wagn-chrome a.av-card:hover,
  body.wagn-chrome a.vv-card:hover,
  body.wagn-chrome [data-tilt].is-tilting {
    transform: none;
  }

  body.wagn-chrome .feature__media img,
  body.wagn-chrome .vehicle__media img,
  body.wagn-chrome .vp-feature__media img,
  body.wagn-chrome .vp-hero__art img,
  body.wagn-chrome [data-scroll-media] img,
  body.wagn-chrome .ll-split__media img,
  body.wagn-chrome .ss-story__facade img,
  body.wagn-chrome .br-card__media img {
    transition: none !important;
  }

  body.wagn-chrome .feature__media img.is-media-enter,
  body.wagn-chrome .vehicle__media img.is-media-enter,
  body.wagn-chrome .vp-feature__media img.is-media-enter,
  body.wagn-chrome .vp-hero__art img.is-media-enter,
  body.wagn-chrome [data-scroll-media] img.is-media-enter,
  body.wagn-chrome .ll-split__media img.is-media-enter,
  body.wagn-chrome .ss-story__facade img.is-media-enter,
  body.wagn-chrome .br-card__media img.is-media-enter {
    transform: none !important;
    opacity: 1 !important;
  }

  body.wagn-chrome .mk-faq__a {
    max-height: none;
    opacity: 1;
    transform: none;
  }

  body.wagn-chrome .mk-faq__item:not(.is-open) .mk-faq__a {
    display: none;
  }

  body.wagn-home .features__stage {
    position: relative;
    top: auto;
  }
}