/* =========================================
   ANIMATIONS — Recipe to Grocery List v2.0
   ========================================= */

/* ── Fade In/Out ── */
@keyframes fade-in  { from { opacity: 0; }        to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; }        to { opacity: 0; } }

/* ── Slide Up ── */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Slide Down ── */
@keyframes slide-down {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}

/* ── Slide In Right ── */
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Scale In ── */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Scale Out ── */
@keyframes scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.90); }
}

/* ── Spin ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Pulse ── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── Shimmer ── */
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ── Skeleton Sweep ── */
@keyframes skeleton-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Toast In/Out ── */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0)   scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(0.95); }
}

/* ── Card Selected ── */
@keyframes card-selected {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}

/* ── Checkmark Draw ── */
@keyframes checkmark-draw {
  from { opacity: 0; transform: rotate(-45deg) scale(0.5); }
  to   { opacity: 1; transform: rotate(-45deg) scale(1); }
}

/* ── Float (hero elements) ── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

/* ── Glow Pulse ── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: var(--shadow-brand); }
  50%       { box-shadow: var(--shadow-brand-glow); }
}

/* ── Gradient Shift ── */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Page Transition (View Transition API) ── */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 120ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: fade-in 250ms cubic-bezier(0, 0, 0.2, 1) both;
}

/* ── Utility Classes ── */
.animate-fade-in    { animation: fade-in    var(--duration-normal) var(--ease-out)    both; }
.animate-slide-up   { animation: slide-up   var(--duration-normal) var(--ease-out)    both; }
.animate-scale-in   { animation: scale-in   var(--duration-normal) var(--ease-spring) both; }
.animate-float      { animation: float 3s   var(--ease-smooth) infinite; }
.animate-glow-pulse { animation: glow-pulse 2s var(--ease-smooth) infinite; }

/* ── Delay Variants ── */
.animate-delay-1 { animation-delay: 50ms; }
.animate-delay-2 { animation-delay: 100ms; }
.animate-delay-3 { animation-delay: 150ms; }
.animate-delay-4 { animation-delay: 200ms; }
.animate-delay-5 { animation-delay: 250ms; }
.animate-delay-6 { animation-delay: 300ms; }

/* ── Loading Spinner ── */
.icon-loading {
  display: inline-block;
  animation: spin 750ms linear infinite;
}

/* ── Stagger Animation ── */
.stagger-item {
  opacity: 0;
  animation: slide-up 320ms var(--ease-out) forwards;
}

.stagger-item:nth-child(1)  { animation-delay: 0ms; }
.stagger-item:nth-child(2)  { animation-delay: 55ms; }
.stagger-item:nth-child(3)  { animation-delay: 110ms; }
.stagger-item:nth-child(4)  { animation-delay: 165ms; }
.stagger-item:nth-child(5)  { animation-delay: 220ms; }
.stagger-item:nth-child(6)  { animation-delay: 275ms; }
.stagger-item:nth-child(7)  { animation-delay: 330ms; }
.stagger-item:nth-child(8)  { animation-delay: 385ms; }
.stagger-item:nth-child(9)  { animation-delay: 440ms; }
.stagger-item:nth-child(10) { animation-delay: 495ms; }

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

  .animate-fade-in,
  .animate-slide-up,
  .animate-scale-in,
  .animate-float,
  .animate-glow-pulse { animation: none !important; opacity: 1 !important; transform: none !important; }

  .stagger-item { animation: none !important; opacity: 1 !important; }
}