/* ═══════════════════════════════════════════════════════════════
   Stims Motion Design System
   Spring physics, view transitions, and coordinated animations.
   Tokens defined in tokens.css — this file adds keyframes + utilities.
   ═══════════════════════════════════════════════════════════════ */

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

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

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

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

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.85;
  }
}

@keyframes stims-stage-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -18px, 0) scale(1.04);
  }
}

@keyframes stims-stage-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.75;
  }
}

@keyframes stims-stage-drift {
  0% {
    transform: translateX(-50%) rotate(16deg);
  }
  50% {
    transform: translateX(-49%) rotate(22deg);
  }
  100% {
    transform: translateX(-50%) rotate(16deg);
  }
}

@keyframes hueShift {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

/* Preset transition animation — subtle crossfade + scale */
@keyframes preset-transition-in {
  from {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes preset-transition-out {
  from {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: scale(1.02);
    filter: blur(4px);
  }
}

/* Utility classes for coordinated entry animations */
.anim-enter-up {
  animation: sheet-enter-up var(--spring-enter) forwards;
}

.anim-exit-down {
  animation: sheet-exit-down var(--spring-exit) forwards;
}

.anim-enter-fade {
  animation: fade-in var(--transition-base) forwards;
}

.anim-exit-fade {
  animation: fade-out var(--transition-base) forwards;
}

.anim-enter-scale {
  animation: scale-in var(--spring-enter) forwards;
}

.anim-exit-scale {
  animation: scale-out var(--spring-exit) forwards;
}

.anim-enter-right {
  animation: slide-in-right var(--spring-enter) forwards;
}

.anim-exit-right {
  animation: slide-out-right var(--spring-exit) forwards;
}

/* Preset card stagger — each card enters with a delay */
.stims-shell__preset-list > li {
  animation: fade-in 0.35s ease both;
}

.stims-shell__preset-list > li:nth-child(1) {
  animation-delay: 0.02s;
}
.stims-shell__preset-list > li:nth-child(2) {
  animation-delay: 0.05s;
}
.stims-shell__preset-list > li:nth-child(3) {
  animation-delay: 0.08s;
}
.stims-shell__preset-list > li:nth-child(4) {
  animation-delay: 0.11s;
}
.stims-shell__preset-list > li:nth-child(5) {
  animation-delay: 0.14s;
}
.stims-shell__preset-list > li:nth-child(n + 6) {
  animation-delay: 0.17s;
}

/* View Transitions API — preset switch crossfade */
@supports (view-transition-name: none) {
  .stims-shell__stage-frame[data-mode="live"] {
    view-transition-name: stims-stage;
  }

  ::view-transition-old(stims-stage) {
    animation: preset-transition-out 0.35s ease both;
  }

  ::view-transition-new(stims-stage) {
    animation: preset-transition-in 0.45s var(--spring-enter) both;
  }
}

/* Reduced motion: disable all animations */
@media (prefers-reduced-motion: reduce) {
  .anim-enter-up,
  .anim-exit-down,
  .anim-enter-fade,
  .anim-exit-fade,
  .anim-enter-scale,
  .anim-exit-scale,
  .anim-enter-right,
  .anim-exit-right {
    animation: none;
  }

  .stims-shell__preset-list > li {
    animation: none;
  }

  ::view-transition-old(stims-stage),
  ::view-transition-new(stims-stage) {
    animation-duration: 0.01ms;
  }
}