/* =========================================================================
   cyber-light / animations.css — CSS-only motion (no JS libraries).
   Rule: content is fully visible & static BY DEFAULT. Motion is layered on
   ONLY when html[data-motion="auto"] AND the user has no reduced-motion
   preference. data-motion in {reduced, off} -> everything static.
   Only transform/opacity (+ box-shadow/filter for bloom). No strobe (<3/s).
   ========================================================================= */

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes holo-shift   { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes grid-drift   { 0% { background-position: -1px -1px, -1px -1px; } 100% { background-position: 43px 43px, 43px 43px; } }
@keyframes scanline-move{ 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }
@keyframes shimmer-move { 0% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
@keyframes glitch-in {
  0%   { opacity: 0; transform: translate3d(-6px,0,0); clip-path: inset(0 0 60% 0); }
  35%  { opacity: 1; transform: translate3d(4px,0,0);  clip-path: inset(40% 0 0 0); }
  60%  { transform: translate3d(-2px,0,0); clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes pop-in       { 0% { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes confetti-fall{ 0% { transform: translate3d(0,-12px,0) rotate(0); opacity: 1; } 100% { transform: translate3d(var(--cx,0), 90vh, 0) rotate(540deg); opacity: 0; } }
@keyframes float-soft   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Static baseline (always) ------------------------------------------ */
[data-reveal] { opacity: 1; transform: none; }
.reveal__cell { opacity: 1; }
.skeleton { background: linear-gradient(100deg, var(--color-surface-2) 30%, #fff 50%, var(--color-surface-2) 70%); background-size: 200% 100%; border-radius: 8px; min-height: 1em; }

/* ---- Motion layer (only auto + no reduced-motion preference) ------------ */
@media (prefers-reduced-motion: no-preference) {

  /* scroll reveal */
  html[data-motion="auto"] [data-reveal] {
    opacity: 0; transform: translateY(22px);
    transition: opacity var(--motion-slow,520ms) var(--easing), transform var(--motion-slow,520ms) var(--easing);
    will-change: opacity, transform;
  }
  html[data-motion="auto"] [data-reveal="fade"] { transform: none; }
  html[data-motion="auto"] [data-reveal].is-visible { opacity: 1; transform: none; }

  /* hero holographic CTA sheen */
  html[data-motion="auto"] .btn--cta::before { animation: holo-shift 9s linear infinite; }

  /* slow blueprint grid drift on the page background */
  html[data-motion="auto"] body { animation: grid-drift 60s linear infinite; }

  /* hero title micro-glitch on load */
  html[data-motion="auto"] .glitch-in { animation: glitch-in 620ms var(--easing) both; }

  /* hero holo blob gentle float */
  html[data-motion="auto"] .hero__holo { animation: float-soft 9s ease-in-out infinite; }

  /* skeleton shimmer */
  html[data-motion="auto"] .skeleton { animation: shimmer-move 1.4s linear infinite; }

  /* faint scanline overlay element */
  html[data-motion="auto"] .scanline-overlay::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
    background: linear-gradient(180deg, transparent, rgba(0,167,196,.05), transparent);
    pointer-events: none; animation: scanline-move 7s linear infinite;
  }

  /* number-reveal cells (JS adds .is-revealed sequentially) */
  html[data-motion="auto"] .reveal__cell.anim { opacity: 0; }
  html[data-motion="auto"] .reveal__cell.anim.is-revealed { animation: pop-in 360ms var(--easing) both; }

  /* card hover lift already in style.css transitions; nothing extra here */
}

/* ---- Confetti pieces (motion.js injects; static = none) ----------------- */
.confetti-piece {
  position: fixed; top: 0; width: 9px; height: 14px; border-radius: 2px; z-index: 140; pointer-events: none;
  animation: confetti-fall var(--dur, 2.4s) var(--easing) forwards;
}
@media (prefers-reduced-motion: reduce) { .confetti-piece { display: none; } }
html[data-motion="reduced"] .confetti-piece, html[data-motion="off"] .confetti-piece { display: none; }