/* MAIA Motion System — runtime state rules + shared keyframes (Etapa 01).
   Visuals live inline in the *.dc.html templates. This file holds only what inline styles cannot
   express: @keyframes, state selectors, the reduced-motion media query and the focus ring.

   State contract (written by motion-system.js / the DC logic, read here)
     [data-motion-system]                        showcase root (token scope)
     [data-motion-pref="system|full|reduced"]    showcase-wide preference, on the showcase root
     [data-motion-scope]                         root of one animated asset
     [data-motion="running|paused|reduced"]      resolved motion state of that scope
     [data-anim]                                 any element carrying an ambient animation
     [data-reveal="inactive|entering|active|completed"]   RevealOnScroll state */

/* ---- Loop lifecycle ---- */
[data-motion="paused"] [data-anim] { animation-play-state: paused !important; }
[data-motion="reduced"] [data-anim] { animation: none !important; }
/* Pre-hydration / no-JS fallback: honour the OS preference until the logic layer resolves a state */
@media (prefers-reduced-motion: reduce) {
  [data-motion-scope]:not([data-motion]) [data-anim] { animation: none !important; }
}

/* ---- RevealOnScroll ---- */
[data-reveal] { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal="inactive"] { opacity: 0; transform: translateY(8px); }
[data-motion-pref="reduced"] [data-reveal] { transition-duration: var(--dur-fast); }
[data-motion-pref="reduced"] [data-reveal="inactive"] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-motion-pref="system"] [data-reveal] { transition-duration: var(--dur-fast); }
  [data-motion-pref="system"] [data-reveal="inactive"] { transform: none; }
}

/* ---- Showcase controls: accessible states (inline styles carry the resting look) ---- */
/* Etapa 15: !important so the ring survives inline `all: unset` (design-system FaqRow pattern) — the only !important outside state rules */
[data-motion-system] button:focus-visible,
[data-motion-system] a:focus-visible { outline: 1px solid var(--maia-cyan) !important; outline-offset: 2px !important; }
[data-motion-system] button[aria-pressed="true"] { color: var(--maia-cyan) !important; background: var(--maia-cyan-fill) !important; }
[data-motion-system] button:disabled { opacity: .4; }
/* Press rule for design-system buttons mounted inside an asset (opacity, never scale) */
[data-press] button:active, [data-press] a:active { opacity: .85; transition: opacity var(--dur-fast) linear; }

/* ---- Shared keyframes — parameterised by custom properties set inline on the animated element ---- */
/* DataPulse on a straight run: --pulse-travel = signed px distance */
@keyframes ms-pulse-travel {
  0%        { transform: translateX(0); opacity: 0; }
  6%        { opacity: .9; }
  64%       { opacity: .9; }
  72%, 100% { transform: translateX(var(--pulse-travel, 200px)); opacity: 0; }
}
/* DataPulse on an arbitrary SVG path via CSS motion path (see flow.js › pulseStyle) */
@keyframes ms-pulse-path {
  0%        { offset-distance: 0%; opacity: 0; }
  6%        { opacity: .9; }
  64%       { opacity: .9; }
  72%, 100% { offset-distance: 100%; opacity: 0; }
}
/* Ambient drift: --drift = max displacement (default 4px) */
@keyframes ms-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--drift, 4px)); }
}
/* Feed row entrance (hero interface). Two identical names so alternating them restarts the animation. */
@keyframes ms-row-in-a { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ms-row-in-b { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Slow opacity breathing for status markers: --breathe-min / --breathe-max */
@keyframes ms-breathe {
  0%, 100% { opacity: var(--breathe-min, .25); }
  50%      { opacity: var(--breathe-max, .7); }
}
/* LiveCountdown digit change: two identical names so alternating them restarts the short fade (Etapa 04) */
@keyframes ms-tick-a { from { opacity: .35; } to { opacity: 1; } }
@keyframes ms-tick-b { from { opacity: .35; } to { opacity: 1; } }
/* Processing orbit (motion-checkout-processing, Etapa 14): one short arc travelling around a hairline ring — continuous, no reset */
@keyframes ms-orbit { to { transform: rotate(360deg); } }
/* CTA ambient glow — light only: grows slowly, moderate peak, recedes, rests (motion-home-cta-glow) */
@keyframes ms-cta-glow {
  0%, 100% { box-shadow: 0 0 22px rgba(var(--maia-cyan-rgb), .16); }
  42%      { box-shadow: 0 0 40px rgba(var(--maia-cyan-rgb), .28); }
  68%      { box-shadow: 0 0 26px rgba(var(--maia-cyan-rgb), .18); }
}

/* ---- Etapa 15 — final QA normalisation ---- */
/* current area in the main navigation: the scroll-spy writes aria-current; text + wash, not colour alone */
[data-motion-system] nav a[aria-current="true"] { color: var(--maia-text-1) !important; background: var(--maia-cyan-fill); }
/* touch: a 44px hit area on every showcase control and index link without changing the 26–30px visual rhythm */
@media (pointer: coarse) {
  [data-motion-system] button, [data-motion-system] a[href^="#"] { position: relative; }
  [data-motion-system] button::after, [data-motion-system] a[href^="#"]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }
}