/* Animations
 * @starting-style entry animations, stagger delays, and shared keyframes.
 * Respects prefers-reduced-motion via _reset.css global rule.
 */

@layer components {
  /* ── Entry animation via @starting-style ── */

  .animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;

    @starting-style {
      opacity: 0;
      transform: translateY(12px);
    }
  }

  /* Stagger delays (60ms increments) */
  .animate-in--d1 { transition-delay: 0ms; }
  .animate-in--d2 { transition-delay: 60ms; }
  .animate-in--d3 { transition-delay: 120ms; }
  .animate-in--d4 { transition-delay: 180ms; }
  .animate-in--d5 { transition-delay: 240ms; }
  .animate-in--d6 { transition-delay: 300ms; }
  .animate-in--d7 { transition-delay: 360ms; }
  .animate-in--d8 { transition-delay: 420ms; }
  .animate-in--d9 { transition-delay: 480ms; }
  .animate-in--d10 { transition-delay: 540ms; }
  .animate-in--d11 { transition-delay: 600ms; }
  .animate-in--d12 { transition-delay: 660ms; }

  /* ── Shared keyframes ── */

  /* Card/element fade-in (used in feeds, lists) */
  @keyframes card-fade-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }

  /* Sheet slide up from bottom */
  @keyframes sheet-slide-up {
    from {
      transform: translateY(40px);
      opacity: 0.8;
    }
  }

  /* General fade-in */
  @keyframes fade-in {
    from { opacity: 0; }
  }

  /* Pulse glow (rally points, live indicators) */
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 oklch(var(--lch-laser) / 0.4); }
    50% { box-shadow: 0 0 0 8px oklch(var(--lch-laser) / 0); }
  }

  /* Flare pulse (primary actions, notifications) */
  @keyframes pulse-flare {
    0%, 100% { box-shadow: 0 0 0 0 oklch(var(--lch-flare) / 0.4); }
    50% { box-shadow: 0 0 0 8px oklch(var(--lch-flare) / 0); }
  }

  /* Shimmer loading effect */
  @keyframes shimmer {
    from { background-position: -200% 0; }
    to { background-position: 200% 0; }
  }

  /* Message fade (chat bubbles) */
  @keyframes msg-fade {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}