/* Motion spec — Section 7. All decorative motion is disabled by the
   prefers-reduced-motion block in base.css. */

@keyframes drift {
  from { transform: translate(0, 0); }
  to { transform: translate(46px, 24px); }
}
.motion-drift {
  animation: drift 22s ease-in-out infinite alternate;
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.motion-rotate-slow {
  animation: rotate-slow 90s linear infinite;
}

.motion-rotate-fast {
  animation: rotate-slow 26s linear infinite;
}

@keyframes glow-drift {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.06); opacity: 0.85; }
}
.motion-glow-drift {
  animation: glow-drift 10s ease-in-out infinite;
}

@keyframes shimmer-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

/* Same sweep, but packed into the first ~18% of an 8s cycle so it reads as
   "a quick shimmer every 8 seconds" rather than one long slow sweep. */
@keyframes shimmer-sweep-periodic {
  0% { transform: translateX(-120%); }
  18% { transform: translateX(120%); }
  18.01%, 100% { transform: translateX(-120%); }
}

/* Player bar top border: a glowing streak sweeps left-to-right, then pauses
   for the rest of the cycle -- see .player-bar::after in components.css. */
@keyframes player-bar-flash {
  0% { transform: translateX(-110px); }
  22% { transform: translateX(calc(100vw + 110px)); }
  22.01%, 100% { transform: translateX(-110px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 164, 169, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(47, 164, 169, 0); }
}

@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
}
.reveal.is-revealed {
  animation: fade-up 500ms ease-out forwards;
}

/* Individually-observed nodes (long lists, e.g. a Shajrah chain) — same
   fade-up as .reveal but each element gets its own IntersectionObserver
   entry (see features/reveal.js) instead of revealing as a batch. */
.reveal-node {
  opacity: 0;
}
.reveal-node.is-revealed {
  animation: fade-up 500ms ease-out forwards;
}

@keyframes crossfade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* Shajrah chain node sequential reveal (used on Home teaser cards too) */
.reveal-sequence > * {
  opacity: 0;
}
.reveal-sequence.is-revealed > *:nth-child(1) { animation: fade-up 500ms ease-out 0ms forwards; }
.reveal-sequence.is-revealed > *:nth-child(2) { animation: fade-up 500ms ease-out 80ms forwards; }
.reveal-sequence.is-revealed > *:nth-child(3) { animation: fade-up 500ms ease-out 160ms forwards; }
.reveal-sequence.is-revealed > *:nth-child(4) { animation: fade-up 500ms ease-out 240ms forwards; }
.reveal-sequence.is-revealed > *:nth-child(5) { animation: fade-up 500ms ease-out 320ms forwards; }
.reveal-sequence.is-revealed > *:nth-child(6) { animation: fade-up 500ms ease-out 400ms forwards; }