/* ==========================================================================
   AlphaSync Global — Motion
   One orchestrated moment: the hero chart draws in on load. Everything else
   moves only in response to the visitor (menus, accordions, hover).
   ========================================================================== */

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.js .hero__copy > * { animation: rise 0.7s var(--ease) both; }
.js .hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
.js .hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
.js .hero__copy > *:nth-child(4) { animation-delay: 0.24s; }
.js .hero__visual { animation: rise 0.9s 0.15s var(--ease) both; }

.js .hero .ch-ema, .js .hero .ch-ema2 { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s 0.7s var(--ease) forwards; }
.js .hero .ch-candles { animation: fade 0.9s 0.45s both; }
.js .hero .ch-marker { animation: fade 0.4s 2.2s both; }
.hero .m-live { animation: pulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js .hero .ch-ema, .js .hero .ch-ema2 { stroke-dashoffset: 0; }
}