/* css/animations.css
 *
 * Keyframes shared across the app: staggered entrance, idle "breathing",
 * and the skeleton shimmer sweep. Tab cross-fade and press states are
 * simple transitions, defined next to the elements they affect
 * (layout.css, components.css) — nothing to keyframe there.
 */

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card-entrance items start invisible; JS adds .is-entering (staggered by
 * animation-delay) to fade + rise them in, 60ms apart. */
.js-stagger {
  opacity: 0;
}

.js-stagger.is-entering,
.trivia-card.is-entering {
  animation: fade-rise var(--duration-entrance) var(--ease-standard) both;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.008);
  }
}

.breathing {
  display: inline-block;
  animation: breathe var(--breathing-duration) ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes shimmer-sweep {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* Weather tab's barometric-ring motif (css/sky.css, .sky-hero__top::before)
 * — a very slow rotation, just enough to read as "alive" without drawing
 * attention away from the temperature it sits behind. */
@keyframes isobar-drift {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .breathing {
    animation: none;
  }
  .shimmer::after {
    animation: none;
  }
  .sky-hero__top::before {
    animation: none;
  }
}