/* ── Swipe File — Animation System ──────────────────────── */

/* ── Keyframes ─────────────────────────────────────────── */

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

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

@keyframes sf-pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(200, 230, 74, 0.6),
      0 0 20px rgba(200, 230, 74, 0.35),
      0 0 60px rgba(200, 230, 74, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(200, 230, 74, 0.8),
      0 0 30px rgba(200, 230, 74, 0.5),
      0 0 80px rgba(200, 230, 74, 0.15);
  }
}

@keyframes sf-slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sf-slide-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes sf-save-ripple {
  from {
    transform: scale(0);
    opacity: 0.6;
  }
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes sf-card-stagger {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sf-pill-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* ── Animation Classes ─────────────────────────────────── */

.sf-overlay-enter {
  animation: sf-fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sf-overlay-exit {
  animation: sf-fade-out 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sf-selection-active {
  animation: sf-pulse-glow 1.5s ease-in-out infinite;
}

.sf-panel-enter {
  animation: sf-slide-up 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sf-panel-exit {
  animation: sf-slide-down 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sf-pill-enter {
  animation: sf-fade-in 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
             sf-pill-float 3s ease-in-out 1s infinite;
}

.sf-card-reveal {
  animation: sf-card-stagger 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.sf-ripple {
  animation: sf-save-ripple 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Reduced Motion ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sf-overlay-enter,
  .sf-overlay-exit,
  .sf-selection-active,
  .sf-panel-enter,
  .sf-panel-exit,
  .sf-pill-enter,
  .sf-card-reveal,
  .sf-ripple {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}