/* ==========================================================================
   MintYourCard v2 - Animation System
   ==========================================================================
   All keyframes and utility classes for the v2 design system.
   GPU-only animations: transform and opacity exclusively.
   prefers-reduced-motion fully respected.

   Table of Contents:
   1.  Keyframes - Fade
   2.  Keyframes - Slide
   3.  Keyframes - Scale
   4.  Keyframes - Page Transitions
   5.  Keyframes - Decorative / Utility
   6.  Entrance Utility Classes
   7.  Stagger Delays
   8.  Page Transition Classes
   9.  Shimmer Background
   10. Celebration / Decorative Classes
   11. Reduced Motion Override
   ========================================================================== */


/* ==========================================================================
   1. KEYFRAMES - FADE
   ========================================================================== */

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

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


/* ==========================================================================
   2. KEYFRAMES - SLIDE
   ========================================================================== */

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

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

@keyframes v2-slide-right {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes v2-slide-left {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ==========================================================================
   3. KEYFRAMES - SCALE
   ========================================================================== */

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


/* ==========================================================================
   4. KEYFRAMES - PAGE TRANSITIONS
   ==========================================================================
   Forward navigation: enter from right, exit to left (with fade).
   Back navigation: enter from left, exit to right.
   ========================================================================== */

/* Forward: new page slides in from the right */
@keyframes v2-page-enter {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Forward: old page slides out to the left and fades */
@keyframes v2-page-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30%);
  }
}

/* Back: previous page slides in from the left and fades in */
@keyframes v2-page-back-enter {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Back: current page slides out to the right */
@keyframes v2-page-back-exit {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}


/* ==========================================================================
   5. KEYFRAMES - DECORATIVE / UTILITY
   ========================================================================== */

/* Skeleton shimmer (background-position shift) */
@keyframes v2-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Continuous rotation (spinners) */
@keyframes v2-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Gentle pulse (loading indicators) */
@keyframes v2-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Spring pop - overshoot and settle (celebrations, unlocks) */
@keyframes v2-spring-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  40% {
    opacity: 1;
    transform: scale(1.15);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Count-up reveal (numbers appearing from below) */
@keyframes v2-count-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bell shake (notification attention) */
@keyframes v2-bell-shake {
  0%   { transform: rotateZ(0deg); }
  10%  { transform: rotateZ(15deg); }
  20%  { transform: rotateZ(-15deg); }
  30%  { transform: rotateZ(12deg); }
  40%  { transform: rotateZ(-12deg); }
  50%  { transform: rotateZ(8deg); }
  60%  { transform: rotateZ(-8deg); }
  70%  { transform: rotateZ(4deg); }
  80%  { transform: rotateZ(-4deg); }
  90%  { transform: rotateZ(2deg); }
  100% { transform: rotateZ(0deg); }
}

/* Badge pulse (new badge earned indicator) */
@keyframes v2-badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Glow pulse (accent glow breathing on cards/buttons) */
@keyframes v2-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(0, 255, 163, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(0, 255, 163, 0.4));
  }
}


/* ==========================================================================
   6. ENTRANCE UTILITY CLASSES
   ==========================================================================
   Apply to elements to animate them in. Combine with stagger delays
   for sequential reveals.

   Usage:
     <div class="v2-enter-fade">Fades in</div>
     <div class="v2-enter-slide-up v2-stagger-2">Slides up with delay</div>
   ========================================================================== */

.v2-enter-fade {
  animation: v2-fade-in var(--v2-duration-normal) var(--v2-ease-out-quart) both;
}

.v2-enter-slide-up {
  animation: v2-slide-up var(--v2-duration-normal) var(--v2-ease-out-quart) both;
}

.v2-enter-slide-down {
  animation: v2-slide-down var(--v2-duration-normal) var(--v2-ease-out-quart) both;
}

.v2-enter-slide-right {
  animation: v2-slide-right var(--v2-duration-normal) var(--v2-ease-out-quart) both;
}

.v2-enter-slide-left {
  animation: v2-slide-left var(--v2-duration-normal) var(--v2-ease-out-quart) both;
}

.v2-enter-scale {
  animation: v2-scale-in var(--v2-duration-normal) var(--v2-ease-spring-gentle) both;
}


/* ==========================================================================
   7. STAGGER DELAYS
   ==========================================================================
   50ms increments for sequential animation reveals.

   Usage:
     <div class="v2-enter-slide-up v2-stagger-1">First</div>
     <div class="v2-enter-slide-up v2-stagger-2">Second</div>
     <div class="v2-enter-slide-up v2-stagger-3">Third</div>
   ========================================================================== */

.v2-stagger-1  { animation-delay: 50ms; }
.v2-stagger-2  { animation-delay: 100ms; }
.v2-stagger-3  { animation-delay: 150ms; }
.v2-stagger-4  { animation-delay: 200ms; }
.v2-stagger-5  { animation-delay: 250ms; }
.v2-stagger-6  { animation-delay: 300ms; }
.v2-stagger-7  { animation-delay: 350ms; }
.v2-stagger-8  { animation-delay: 400ms; }
.v2-stagger-9  { animation-delay: 450ms; }
.v2-stagger-10 { animation-delay: 500ms; }


/* ==========================================================================
   8. PAGE TRANSITION CLASSES
   ==========================================================================
   Applied by the navigation system to view containers during
   route changes.

   Usage (JS):
     newView.classList.add('v2-page-entering');
     oldView.classList.add('v2-page-exiting');
   ========================================================================== */

/* Page transition classes are defined in shell.css (loaded after this file).
   shell.css is the source of truth for view transition animations. */


/* ==========================================================================
   9. SHIMMER BACKGROUND
   ==========================================================================
   Reusable shimmer effect for skeleton placeholders. Applied via class
   rather than pseudo-element when needed standalone.

   Usage:
     <div class="v2-shimmer-bg" style="height: 20px; width: 60%;"></div>
   ========================================================================== */

.v2-shimmer-bg {
  background: linear-gradient(
    90deg,
    var(--v2-bg-surface) 0%,
    var(--v2-bg-surface-2) 25%,
    rgba(255, 255, 255, 0.06) 50%,
    var(--v2-bg-surface-2) 75%,
    var(--v2-bg-surface) 100%
  );
  background-size: 200% 100%;
  animation: v2-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--v2-radius-md);
}


/* ==========================================================================
   10. CELEBRATION / DECORATIVE CLASSES
   ==========================================================================
   For special moments: badge unlocks, streak milestones, etc.
   ========================================================================== */

/* Spring pop for celebrations (badge unlocks, achievements) */
.v2-celebrate {
  animation: v2-spring-pop var(--v2-duration-emphasis) var(--v2-ease-spring) both;
}

/* Continuous spin for loading spinners */
.v2-spin {
  animation: v2-spin 1s linear infinite;
}

/* Pulse for loading/waiting states */
.v2-pulse {
  animation: v2-pulse 2s ease-in-out infinite;
}

/* Count-up for numeric value reveals */
.v2-count-up {
  animation: v2-count-up var(--v2-duration-slow) var(--v2-ease-out-expo) both;
  overflow: hidden;
  display: inline-block;
}

/* Bell shake for notification alerts */
.v2-bell-shake {
  animation: v2-bell-shake var(--v2-duration-emphasis) var(--v2-ease-in-out) both;
  transform-origin: top center;
}

/* Badge pulse for new badge indicators */
.v2-badge-pulse {
  animation: v2-badge-pulse 0.6s var(--v2-ease-spring) both;
}

/* Glow pulse for highlighted interactive elements */
.v2-glow-pulse {
  animation: v2-glow-pulse 2s ease-in-out infinite;
}


/* ==========================================================================
   11. REDUCED MOTION OVERRIDE
   ==========================================================================
   Respects user preference for reduced motion. All animations collapse
   to near-instant (0.01ms) so state changes still apply but motion
   is eliminated. Scroll behavior also reverts to auto (no smooth scroll).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}