/* ==========================================================================
   SpoonFlow Micro-Animations & Keyframes
   Accessible, calming, and high-craft motion design
   ========================================================================== */

/* 4-4-4-4 Box Breathing Animation for Focus Rail */
@keyframes breathingAnimation {
  0%, 100% {
    transform: scale(0.9);
    box-shadow: 0 0 20px var(--spoon-lavender-glow);
    border-color: var(--spoon-lavender);
  }
  25% {
    /* Inhale */
    transform: scale(1.35);
    box-shadow: 0 0 55px rgba(129, 140, 248, 0.45);
    border-color: var(--spoon-cyan);
  }
  50% {
    /* Hold */
    transform: scale(1.35);
    box-shadow: 0 0 60px rgba(6, 182, 212, 0.45);
    border-color: var(--spoon-cyan);
  }
  75% {
    /* Exhale */
    transform: scale(0.9);
    box-shadow: 0 0 20px var(--spoon-lavender-glow);
    border-color: var(--spoon-lavender);
  }
}

/* Restorative Token Glow */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.25);
    border-color: var(--spoon-cyan);
  }
  50% {
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.6);
    border-color: #38bdf8;
  }
}

/* Warm Alert Breathing */
@keyframes gentlePulse {
  0%, 100% {
    border-color: var(--spoon-amber);
    box-shadow: 0 0 0 rgba(245, 158, 11, 0);
  }
  50% {
    border-color: #fbbf24;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
  }
}

/* Entrance Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spoonBounce {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.anim-spoon-in {
  animation: spoonBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Respect OS-Level Reduced Motion Setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}