/* ============================================================
   GOLDEN ARK SYSTEMS · ANIMATIONS
   Subtle, performant motion. Driven by IntersectionObserver
   in shell.js — JS adds .in-view, CSS handles the rest.
   ============================================================ */

/* === FADE-IN ON SCROLL === */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* === STAGGERED CHILDREN ===
   For grids — children fade in sequentially. */
.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
.fade-in-stagger.in-view > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.fade-in-stagger.in-view > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 60ms; }
.fade-in-stagger.in-view > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
.fade-in-stagger.in-view > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.fade-in-stagger.in-view > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.fade-in-stagger.in-view > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.fade-in-stagger.in-view > *:nth-child(7)  { opacity: 1; transform: translateY(0); transition-delay: 340ms; }
.fade-in-stagger.in-view > *:nth-child(8)  { opacity: 1; transform: translateY(0); transition-delay: 380ms; }
.fade-in-stagger.in-view > *:nth-child(9)  { opacity: 1; transform: translateY(0); transition-delay: 420ms; }
.fade-in-stagger.in-view > *:nth-child(n+10) { opacity: 1; transform: translateY(0); transition-delay: 460ms; }

/* === SUBTLE PULSE (status indicator already defined in components) === */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-dim, var(--gold-dim)); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

/* === REDUCED MOTION FALLBACK === */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}