/* M3E Expressive Spring Curves via CSS linear() */

/* Fast Spatial: damping 0.6, stiffness 800 — hero headline, small components */
:root {
  --spring-fast: linear(
    0, 0.009, 0.035 2%, 0.141 4%, 0.316 6%, 0.547 8%, 0.797 10%,
    1.026 12%, 1.198 14%, 1.299 16%, 1.332 18%, 1.311 20%,
    1.252 22%, 1.172 24%, 1.089 26%, 1.017 28%, 0.965 30%,
    0.934 32%, 0.924 34%, 0.931 36%, 0.951 38%, 0.976 40%,
    1.001 42%, 1.021 44%, 1.032 46%, 1.035 48%, 1.030 50%,
    1.020 52%, 1.009 54%, 0.999 58%, 0.995 62%, 0.997 66%,
    1.001 70%, 1.003 74%, 1.001 80%, 1.000 86%, 1
  );
  --spring-fast-duration: 600ms;

  /* Default Spatial: damping 0.8, stiffness 380 — card reveals, partial-screen */
  --spring-default: linear(
    0, 0.008, 0.032 2.4%, 0.13 4.8%, 0.293 7.2%, 0.511 9.6%,
    0.748 12%, 0.955 14.4%, 1.1 16.8%, 1.179 19.2%, 1.2 21.6%,
    1.176 24%, 1.125 26.4%, 1.065 28.8%, 1.011 31.2%,
    0.973 33.6%, 0.952 36%, 0.948 38.4%, 0.957 40.8%,
    0.973 43.2%, 0.992 45.6%, 1.007 48%, 1.015 50.4%,
    1.017 52.8%, 1.013 55.2%, 1.006 57.6%, 1.000 62%,
    0.997 66%, 0.999 72%, 1.001 78%, 1.000 84%, 1
  );
  --spring-default-duration: 800ms;

  /* Slow Spatial: damping 0.8, stiffness 200 — full-screen transitions */
  --spring-slow: linear(
    0, 0.006, 0.024 3%, 0.097 6%, 0.219 9%, 0.383 12%,
    0.561 15%, 0.724 18%, 0.85 21%, 0.937 24%, 0.988 27%,
    1.012 30%, 1.018 33%, 1.012 36%, 1.001 39%,
    0.99 42%, 0.985 45%, 0.985 48%, 0.99 51%,
    0.996 54%, 1.001 57%, 1.003 60%, 1.002 66%,
    1.000 72%, 0.999 78%, 1.000 84%, 1
  );
  --spring-slow-duration: 1000ms;

  /* Critically damped — for opacity/color (no overshoot) */
  --spring-effects: linear(
    0, 0.067 2%, 0.249 5%, 0.502 8%, 0.707 11%,
    0.849 14%, 0.937 18%, 0.978 22%, 0.994 28%,
    0.999 36%, 1.000 48%, 1
  );
  --spring-effects-duration: 400ms;
}

/* Page transition animations */
@keyframes springFadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Scroll-reveal: elements start hidden, animate in when .revealed is added */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--spring-effects-duration) var(--spring-effects),
    transform var(--spring-default-duration) var(--spring-default);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for child elements in a reveal group */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 300ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 360ms; }

/* Hero-specific: headline springs in faster with more overshoot */
.hero-spring {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--spring-effects-duration) var(--spring-effects),
    transform var(--spring-fast-duration) var(--spring-fast);
}

.hero-spring.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero chip stagger */
.hero-chip-stagger m3e-chip {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--spring-effects-duration) var(--spring-effects),
    transform var(--spring-fast-duration) var(--spring-fast);
}

.hero-chip-stagger.revealed m3e-chip:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.hero-chip-stagger.revealed m3e-chip:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 140ms; }
.hero-chip-stagger.revealed m3e-chip:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.hero-chip-stagger.revealed m3e-chip:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 260ms; }
.hero-chip-stagger.revealed m3e-chip:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }

/* Page content transition wrapper */
.page-entering {
  animation: springFadeInUp var(--spring-default-duration) var(--spring-default) both;
}

.page-exiting {
  animation: springFadeOut 100ms var(--spring-effects) both;
}

/* Stepper step reveal */
.ai-step {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--spring-effects-duration) var(--spring-effects),
    transform var(--spring-default-duration) var(--spring-default);
}

.ai-step.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stepper progress line animation */
.ai-step-line {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform var(--spring-slow-duration) var(--spring-slow);
}

.ai-step.revealed .ai-step-line {
  transform: scaleY(1);
}

/* Nav active pill — deferred: M3E handles active states natively */

/* Success checkmark spring */
@keyframes springCheckmark {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  70% { transform: scale(0.95); }
  85% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.form-success m3e-icon {
  animation: springCheckmark var(--spring-fast-duration) var(--spring-fast) both;
}

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

  .reveal,
  .hero-spring,
  .ai-step {
    opacity: 1;
    transform: none;
  }

  .hero-chip-stagger m3e-chip {
    opacity: 1;
    transform: none;
  }

  .ai-step-line {
    transform: scaleY(1);
  }
}