/* ========================================
   Stripe Design System — Animations
   ======================================== */

:root {
  /* ── Duration Tokens ── */
  --duration-instant: 0.1s;
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.8s;
  --duration-hero-gradient: 12s;

  /* ── Easing Tokens ── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* ── Fade In ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Scale ── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleUp {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* ── Hero Gradient Animation ── */
@keyframes heroGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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

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

/* ── Shimmer ── */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

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

/* ── Utility Classes ── */
.animate-fade-in {
  animation: fadeIn var(--duration-slow) var(--ease-enter) forwards;
}

.animate-fade-in-up {
  animation: fadeInUp var(--duration-slow) var(--ease-enter) forwards;
}

.animate-fade-in-down {
  animation: fadeInDown var(--duration-slow) var(--ease-enter) forwards;
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-enter) forwards;
}

.animate-float {
  animation: float 3s var(--ease-standard) infinite;
}

.animate-pulse {
  animation: pulse 2s var(--ease-standard) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ── Scroll-Triggered Animation ── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stagger Delay ── */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.10s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.20s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.30s; }

/* ── Hover Effects ── */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.hover-glow:hover {
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.hover-scale {
  transition: transform var(--duration-normal) var(--ease-standard);
}

.hover-scale:hover {
  transform: scale(1.03);
}

/* ── Transition Utilities ── */
.transition-fast {
  transition: all var(--duration-fast) var(--ease-standard);
}

.transition-normal {
  transition: all var(--duration-normal) var(--ease-standard);
}

.transition-slow {
  transition: all var(--duration-slow) var(--ease-standard);
}

/* ── Gradient Animation ── */
.gradient-animated {
  background-size: 200% 200%;
  animation: heroGradientShift var(--duration-hero-gradient) ease infinite;
}

/* ── Page Transition ── */
.page-enter {
  animation: fadeIn var(--duration-slow) var(--ease-enter);
}

.page-exit {
  animation: fadeIn var(--duration-fast) var(--ease-exit) reverse;
}