/* ============================================================
   Backpack Premium HTML — Animations
   ============================================================ */

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 60ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 420ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 480ms; }

/* Soft float */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.float { animation: float-y 6s ease-in-out infinite; }

/* Glow pulse */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,232,180,0.35); }
  50%      { box-shadow: 0 0 0 12px rgba(56,232,180,0); }
}
.pulse-ring { animation: glow-pulse 2.4s ease-out infinite; }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 24px; animation: marquee 36s linear infinite; flex-shrink: 0; }

/* Loading shimmer for numbers */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(90deg, var(--text-primary) 0%, var(--brand-500) 50%, var(--text-primary) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 3.2s linear infinite;
}

/* Draw line */
@keyframes draw {
  from { stroke-dashoffset: var(--len, 600); }
  to   { stroke-dashoffset: 0; }
}
.draw {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}
.draw.is-visible { animation: draw 1600ms var(--ease-out) forwards; }

/* Hero chip drift */
@keyframes drift {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-8px) translateX(4px); }
}
.drift { animation: drift 7s ease-in-out infinite; }
.drift--alt { animation-duration: 9s; }

/* Accordion height */
details[open] summary ~ * { animation: fade-in 320ms var(--ease-out); }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ticker bar */
.ticker {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-soft);
  font-family: var(--font-mono); font-size: var(--fs-12);
  color: var(--text-tertiary);
}
.ticker .label { color: var(--text-muted); letter-spacing: var(--letter-wide); text-transform: uppercase; }
.ticker .value { color: var(--text-primary); }
.ticker .delta-up { color: var(--brand-500); }
.ticker .delta-dn { color: var(--accent-rose); }

/* Background orbs */
.bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.4;
  z-index: -1; pointer-events: none;
}
.bg-orb--a { background: rgba(56,232,180,0.18); width: 320px; height: 320px; top: -80px; left: -80px; }
.bg-orb--b { background: rgba(14,165,233,0.18); width: 280px; height: 280px; right: -60px; bottom: -60px; }
.bg-orb--c { background: rgba(99,102,241,0.14); width: 240px; height: 240px; left: 40%; top: 30%; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}