/* Motion: keyframes, reveals, floating. All motion is disabled under prefers-reduced-motion. */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes timer { to { transform: scaleX(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }

/* Floating hero elements: CSS `translate` floats, JS parallax uses `transform` — they compose. */
.hero-visual .float-card, .phone-hero { animation: float-y 4.8s var(--ease-in-out) 1; }
.fc-order { animation-delay: -2s !important; }
.fc-wallet { animation-delay: -4s !important; animation-duration: 7s !important; }
.phone-hero { animation-duration: 8s !important; animation-delay: -1s !important; }
[data-depth] { transition: transform 600ms var(--ease-out); }

/* Scroll reveals — only hidden once JS has confirmed it can reveal them. */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js-reveal .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 270ms; }

/* Content swap used by tabs, explorer and flow detail. */
.swap-in { animation: fade-up 420ms var(--ease-out) both; }

/* Tilt */
.tilt { transform-style: preserve-3d; transition: transform 500ms var(--ease-out); will-change: transform; }

/* Accordion: hide collapsed content from tab order and AT after the collapse transition. */
.acc-panel > div { visibility: hidden; transition: visibility 0s linear var(--t-med); }
.acc-item.is-open .acc-panel > div { visibility: visible; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .js-reveal .reveal, .js-reveal .reveal-stagger > * { opacity: 1; transform: none; }
  .hotspot::after { display: none; }
  .tilt, [data-depth] { transform: none !important; }
}