/* ============================================================
   Trixo Market — Animations & Motion
   All scroll/marquee motion is disabled under prefers-reduced-motion.
   ============================================================ */

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes chg-flash {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}

/* Directional flash for live-price ticks (driven by live-prices.js) */
@keyframes flash-up { 0% { background: var(--up-soft); } 100% { background: transparent; } }
@keyframes flash-down { 0% { background: var(--down-soft); } 100% { background: transparent; } }
.live-up { animation: flash-up 700ms var(--ease); border-radius: 6px; }
.live-down { animation: flash-down 700ms var(--ease); border-radius: 6px; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes spin-slow { to { transform: rotate(360deg); } }

/* Scroll-reveal (driven by motion.js adding .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--left { transform: translateX(-40px); }
.reveal--right { transform: translateX(40px); }
html[dir="rtl"] .reveal--left { transform: translateX(40px); }
html[dir="rtl"] .reveal--right { transform: translateX(-40px); }
.reveal--scale { transform: scale(0.94); }

/* The directional RTL rules above out-specify `.reveal.is-visible`, so the
   reveal state must be restated at matching specificity or the element never
   slides back into place under dir="rtl". */
html[dir="rtl"] .reveal--left.is-visible,
html[dir="rtl"] .reveal--right.is-visible { transform: none; }

/* Stagger children */
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

.floating { animation: float-y 6s var(--ease) infinite; }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; animation: pulse-glow 8s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ticker__track, .floating, .glow-orb, .spin-slow { animation: none !important; }
}