/**
 * css/animations.css
 * Entrance animations and skeleton shimmer.
 * Rules: transform + opacity only, ≤300ms, ease-out entering.
 * prefers-reduced-motion: --transition-* tokens collapse to 0ms in variables.css;
 * JS stagger also guards matchMedia('(prefers-reduced-motion: reduce)').
 */

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

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* Entrance utility classes — added by JS staggerEntrance() */
.anim-fade-up {
  animation: fade-up var(--anim-enter, 250ms ease-out) both;
}

.anim-fade-in {
  animation: fade-in 200ms ease-out both;
}

/* Stagger: JS sets --_delay via inline style */
.anim-staggered {
  animation-delay: var(--_delay, 0ms);
}

/* ─── Skeleton shimmer ─────────────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--bg-hover)    50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
  color: transparent;
  user-select: none;
}

.skeleton-text {
  height: 1em;
  border-radius: var(--radius-sm);
}

.skeleton-rect {
  border-radius: var(--radius-md);
}