/* =============================================================
   neo-animations.css — Animation & Transition System (Design System v2.2)
   NashDomBG · Neo-Glassmorphism
   Depends on: neo-tokens.css (all var() references defined there)
   ============================================================= */

/* -------------------------------------------------------------
   A: FADE
   ------------------------------------------------------------- */
.transition-fade {
  transition: opacity var(--dur-fade) var(--ease-glass);
}
.transition-fade[hidden],
.transition-fade.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------
   B: SLIDES
   ------------------------------------------------------------- */
.transition-slide-up {
  transition:
    transform var(--dur-slide) var(--ease-slide),
    opacity  var(--dur-slide) var(--ease-slide);
}
.transition-slide-up[hidden],
.transition-slide-up.is-hidden {
  transform: translateY(100%);
  opacity: 0;
}

.transition-slide-down {
  transition:
    transform var(--dur-slide) var(--ease-slide),
    opacity  var(--dur-slide) var(--ease-slide);
}
.transition-slide-down[hidden],
.transition-slide-down.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.transition-slide-left {
  transition:
    transform var(--dur-slide) var(--ease-slide),
    opacity  var(--dur-slide) var(--ease-slide);
}
.transition-slide-left[hidden],
.transition-slide-left.is-hidden {
  transform: translateX(100%);
  opacity: 0;
}

.transition-slide-right {
  transition:
    transform var(--dur-slide) var(--ease-slide),
    opacity  var(--dur-slide) var(--ease-slide);
}
.transition-slide-right[hidden],
.transition-slide-right.is-hidden {
  transform: translateX(-100%);
  opacity: 0;
}

/* -------------------------------------------------------------
   C: SCALE IN/OUT
   ------------------------------------------------------------- */
.transition-scale-in {
  transition:
    transform var(--dur-standard) var(--ease-glass),
    opacity  var(--dur-standard) var(--ease-glass);
}
.transition-scale-in[hidden],
.transition-scale-in.is-hidden {
  transform: scale(0.96);
  opacity: 0;
}

/* -------------------------------------------------------------
   D: MODAL ENTER/EXIT
   ------------------------------------------------------------- */
.transition-modal-enter {
  transition:
    transform var(--dur-standard) var(--ease-spring),
    opacity  var(--dur-standard) var(--ease-spring);
}
.transition-modal-enter[hidden],
.transition-modal-enter.is-hidden {
  transform: scale(0.96) translateY(20px);
  opacity: 0;
}

/* -------------------------------------------------------------
   E: SHEET ENTER (bottom sheet)
   ------------------------------------------------------------- */
.transition-sheet-enter {
  transition: transform var(--dur-slide) var(--ease-spring);
}
.transition-sheet-enter[hidden],
.transition-sheet-enter.is-hidden {
  transform: translateY(100%);
}

/* -------------------------------------------------------------
   F: KEYFRAME ANIMATIONS
   ------------------------------------------------------------- */

/* Counter digit flip — out */
@keyframes counter-flip-out {
  0%   { transform: translateY(0);     opacity: 1; }
  100% { transform: translateY(-40%);  opacity: 0; }
}

/* Counter digit flip — in */
@keyframes counter-flip-in {
  0%   { transform: translateY(40%);  opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.counter-digit-out {
  animation: counter-flip-out var(--dur-quick) var(--ease-glass) forwards;
}
.counter-digit-in {
  animation: counter-flip-in var(--dur-quick) var(--ease-glass) forwards;
}

/* Ripple expand */
@keyframes ripple-expand {
  0%   { transform: scale(0);    opacity: 0.35; }
  60%  { transform: scale(1);    opacity: 0.12; }
  100% { transform: scale(1.05); opacity: 0;    }
}

.transition-ripple {
  position: absolute;
  border-radius: var(--radius-pill);
  background: var(--palette-accent-muted);
  pointer-events: none;
  animation: ripple-expand var(--dur-ripple) var(--ease-out-quad) forwards;
}

/* Ripple container setup */
.ripple-container {
  position: relative;
  overflow: hidden;
}

/* Crystal glow — applied via :hover on glass panels */
@keyframes crystal-glow {
  0%   { box-shadow: 0 0 0 0 var(--palette-accent-muted); }
  50%  { box-shadow: 0 0 24px 4px var(--palette-accent-muted); }
  100% { box-shadow: 0 0 0 0 var(--palette-accent-muted); }
}

.transition-crystal-glow:hover {
  animation: crystal-glow var(--dur-standard) var(--ease-glass) forwards;
}

/* Float drift — ambient decoration elements */
@keyframes float-drift {
  0%   { transform: translateY(0)    rotate(0deg);   }
  25%  { transform: translateY(-12px) rotate(1.5deg); }
  50%  { transform: translateY(-6px)  rotate(-1deg);  }
  75%  { transform: translateY(-16px) rotate(2deg);   }
  100% { transform: translateY(0)    rotate(0deg);   }
}

.transition-float {
  animation: float-drift var(--dur-float) var(--ease-soft) infinite;
}

/* Shimmer pulse — loading/highlight states */
@keyframes shimmer-pulse {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.transition-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer-pulse var(--dur-shimmer) var(--ease-glass) infinite;
}

/* Stagger card entrance */
@keyframes stagger-card-enter {
  0%   { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.transition-stagger-enter {
  animation:
    stagger-card-enter var(--dur-enter) var(--ease-spring) both;
  animation-delay: calc(var(--stagger-i, 0) * 0.15s);
}

/* -------------------------------------------------------------
   G: 4-STATE PANEL SYSTEM
   ------------------------------------------------------------- */
.panel--closed {
  display: none;
  opacity: 0;
  transform: scale(0.96) translateY(20px);
}

.panel--entering {
  display: flex;
  opacity: 0;
  transform: scale(0.96) translateY(20px);
}

.panel--open {
  display: flex;
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--dur-standard) var(--ease-spring),
    transform var(--dur-standard) var(--ease-spring);
}

.panel--leaving {
  display: flex;
  opacity: 0;
  transform: scale(0.98) translateY(10px);
  transition:
    opacity   var(--dur-quick) var(--ease-glass),
    transform var(--dur-quick) var(--ease-glass);
}

/* -------------------------------------------------------------
   H: HEAVY ANIMATION CONTROLLER
   ------------------------------------------------------------- */
html.heavy-animating .transition-float,
html.heavy-animating .transition-shimmer {
  animation-play-state: paused !important;
}

/* -------------------------------------------------------------
   I: REDUCED MOTION (P0 MANDATORY)
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .transition-float,
  .transition-shimmer {
    animation: none !important;
  }
}