/* ============================================================================
   PrimeDoggy v2 — motion.css
   Destination: /wp-content/themes/primedoggy-v2/assets/css/motion.css
   Source of truth: Master Brief v3.0 §4.1 + Execution Plan §3.2
   Load order: second stylesheet (enqueue handle: pd-motion, dep: pd-tokens).

   Single easing curve site-wide (Brief §4.1): cubic-bezier(0.16, 1, 0.3, 1).
   Duration scale: 150ms micro / 300ms standard / 600ms signature.
   The reduced-motion kill switch MUST remain the last block in this file.
   ========================================================================== */

/* ---- 1. Motion variables ---- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 150ms;
  --dur-std: 300ms;
  --dur-sig: 600ms;
}

/* ---- 2. Reveal system (the "AOS staggered reveals" — no AOS library;
        the paired IntersectionObserver lives in main.js §5.5).
        Stagger = inline style="--reveal-delay: 80ms" on siblings,
        increments of 80ms, max 320ms (Plan §3.2). ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-sig) var(--ease-out-expo),
              transform var(--dur-sig) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- 3. Ambient drift keyframes (Signature Effect 1 idle nodes +
        Tier 2/3 glass cards). Max excursion 3px — inside the 2–4px
        Brief §4.1 bound. Per-node duration 8–12s and delay are set
        inline by JS (--drift-dur / --drift-delay). ---- */
@keyframes pd-drift {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(2px, -3px); }
  66%      { transform: translate(-2px, 2px); }
}
.drift {
  animation: pd-drift var(--drift-dur, 10s) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
}

/* ---- 4. Checkmark micro-feedback (Tier 3 — quiz inputs + email capture
        field validation). Markup contract: the field wrapper receives
        .is-valid (set by JS); it contains an inline SVG check with
        class "pd-check" whose <path> draws on. ---- */
.pd-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  fill: none;
}
.is-valid .pd-check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-std) var(--ease-out-expo);
}

/* ---- 5. Reduced motion — global kill switch. ALWAYS LAST IN THIS FILE.
        JS still applies resolved end-states (drawn lines, visible labels)
        per each effect's spec; the signature effects' own reduced-motion
        end-states live with their CSS contracts in main.css. ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}