/* ============================================================
   Animations — scroll reveals, ambient motion, keyframes
   ============================================================ */

/* Scroll reveal base states (JS adds .in) */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

/* stagger children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal-stagger].in > * { opacity: 1; transform: none; }
[data-reveal-stagger].in > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-stagger].in > *:nth-child(2) { transition-delay: .12s; }
[data-reveal-stagger].in > *:nth-child(3) { transition-delay: .19s; }
[data-reveal-stagger].in > *:nth-child(4) { transition-delay: .26s; }
[data-reveal-stagger].in > *:nth-child(5) { transition-delay: .33s; }
[data-reveal-stagger].in > *:nth-child(6) { transition-delay: .40s; }

/* hero entrance */
.hero__copy > * { animation: rise .9s var(--ease) both; }
.hero__copy > *:nth-child(1) { animation-delay: .05s; }
.hero__copy > *:nth-child(2) { animation-delay: .14s; }
.hero__copy > *:nth-child(3) { animation-delay: .23s; }
.hero__copy > *:nth-child(4) { animation-delay: .32s; }
.hero__copy > *:nth-child(5) { animation-delay: .41s; }
.hero__media { animation: boardIn 1.1s var(--ease) .35s both; }

/* floating ambient board */
.hero__media { position: relative; }
.board { animation: float 7s ease-in-out infinite; }

/* decorative floating chips near the board */
.float-chip {
  position: absolute; z-index: 2;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 11px 14px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 600; font-family: var(--font-display);
}
.float-chip .dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--grad-soft); color: var(--violet-600); }
.float-chip .dot svg { width: 15px; height: 15px; }
.float-chip--a { top: 6%; left: -26px; animation: float 6s ease-in-out infinite; }
.float-chip--b { bottom: 8%; right: -20px; animation: float 6s ease-in-out .8s infinite reverse; }
@media (max-width: 940px) { .float-chip { display: none; } }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes boardIn {
  from { opacity: 0; transform: translateY(40px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* reduced motion — turn everything calm */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .board, .float-chip--a, .float-chip--b { animation: none !important; }
  .chart .bar__fill { transition: none !important; }
}