/* TradingLounge animation system — declarative entrance states + shared keyframes.
   Pair with assets/js/animate.js, which toggles .is-visible via IntersectionObserver
   and sets --stagger-index for data-animate="stagger" children. */

[data-animate]{
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft), filter var(--dur-slow) var(--ease-soft);
  transition-delay:calc(var(--stagger-index, 0) * 90ms);
}
[data-animate].is-visible{opacity:1;transform:none;filter:none}

[data-animate="fade-up"]{transform:translateY(30px)}
[data-animate="fade-up-sm"]{transform:translateY(14px)}
[data-animate="fade-in"]{transform:none}
[data-animate="scale-in"]{transform:scale(.94)}
[data-animate="blur-in"]{filter:blur(8px);transform:translateY(18px)}
[data-animate="from-left"]{transform:translateX(-30px)}
[data-animate="from-right"]{transform:translateX(30px)}

[data-animate="draw-line"]{opacity:1;transition:none}
[data-animate="draw-line"] path,[data-animate="draw-line"] .draw{
  stroke-dasharray:var(--path-length,1000);
  stroke-dashoffset:var(--path-length,1000);
  transition:stroke-dashoffset 1.6s var(--ease-soft);
}
[data-animate="draw-line"].is-visible path,[data-animate="draw-line"].is-visible .draw{stroke-dashoffset:0}

/* ---------- keyframes ---------- */
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(224,168,36,.55)}70%{box-shadow:0 0 0 12px rgba(224,168,36,0)}100%{box-shadow:0 0 0 0 rgba(224,168,36,0)}}
@keyframes pulse-ring-teal{0%{box-shadow:0 0 0 0 rgba(90,163,143,.55)}70%{box-shadow:0 0 0 12px rgba(90,163,143,0)}100%{box-shadow:0 0 0 0 rgba(90,163,143,0)}}
@keyframes drift{to{transform:translate(16px,20px) scale(1.08)}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes float-y-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes bubble-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes blink-dot{0%,100%{opacity:1}50%{opacity:.35}}

.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse-ring 2s infinite}
.pulse-dot.teal{background:var(--accent2);animation-name:pulse-ring-teal}
.live-badge{display:inline-flex;align-items:center;gap:8px;font:10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-animate]{opacity:1!important;transform:none!important;filter:none!important}
  [data-animate="draw-line"] path,[data-animate="draw-line"] .draw{stroke-dashoffset:0!important}
}