/* ============================================================
   NyxGG — animations.css
   ============================================================ */

/* ----------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------- */

@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(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

@keyframes pulseSlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 252, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(124, 92, 252, 0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 6px rgba(124, 92, 252, 0.4); }
  50%       { box-shadow: 0 0 20px rgba(124, 92, 252, 0.8); }
}

@keyframes glowText {
  0%, 100% { text-shadow: 0 0 4px rgba(167, 139, 250, 0.4); }
  50%       { text-shadow: 0 0 16px rgba(167, 139, 250, 0.9); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 600px; }
}

@keyframes sliderFadeIn {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes dotPop {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.4); }
}

@keyframes checkmark {
  0%   { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 0; }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes badgeSlideIn {
  from { opacity: 0; transform: scale(0.7) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg); }
}

@keyframes toastSlide {
  from { opacity: 0; transform: translateX(120%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(120%); }
}

/* ----------------------------------------------------------
   UTILITY CLASSES
   ---------------------------------------------------------- */

.anim-fade-in       { animation: fadeIn      0.35s ease both; }
.anim-fade-in-up    { animation: fadeInUp    0.4s  ease both; }
.anim-fade-in-down  { animation: fadeInDown  0.4s  ease both; }
.anim-fade-in-left  { animation: fadeInLeft  0.4s  ease both; }
.anim-fade-in-right { animation: fadeInRight 0.4s  ease both; }
.anim-scale-in      { animation: scaleIn     0.3s  ease both; }
.anim-float         { animation: float       3s    ease-in-out infinite; }
.anim-bounce        { animation: bounce      1.2s  ease-in-out infinite; }
.anim-glow          { animation: glow        2s    ease-in-out infinite; }
.anim-glow-text     { animation: glowText    2s    ease-in-out infinite; }

/* Staggered delays */
.delay-1  { animation-delay: 0.05s; }
.delay-2  { animation-delay: 0.1s;  }
.delay-3  { animation-delay: 0.15s; }
.delay-4  { animation-delay: 0.2s;  }
.delay-5  { animation-delay: 0.25s; }
.delay-6  { animation-delay: 0.3s;  }

/* ----------------------------------------------------------
   LOADING SPINNER
   ---------------------------------------------------------- */

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(124, 92, 252, 0.25);
  border-top-color: var(--accent, #7c5cfc);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.spinner-lg {
  width: 36px;
  height: 36px;
  border-width: 3px;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.btn-loading::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ----------------------------------------------------------
   SHIMMER SKELETON
   ---------------------------------------------------------- */

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(30, 30, 53, 0.6) 25%,
    rgba(60, 50, 90, 0.5) 50%,
    rgba(30, 30, 53, 0.6) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}

.skeleton-text {
  height: 0.9em;
  margin: 0.3em 0;
  border-radius: 4px;
}

.skeleton-card {
  height: 120px;
  border-radius: 14px;
}

/* ----------------------------------------------------------
   PAGE TRANSITIONS
   ---------------------------------------------------------- */

.page { display: none; }

.page.active {
  display: block;
  animation: fadeInUp 0.35s ease both;
}

.page-exit {
  animation: fadeIn 0.2s ease reverse both;
}

/* ----------------------------------------------------------
   SECTION REVEAL
   ---------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

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

/* ----------------------------------------------------------
   BUTTON RIPPLE
   ---------------------------------------------------------- */

.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
  animation: ripple 0.55s ease-out forwards;
}

/* ----------------------------------------------------------
   SELECTED BADGE ANIMATION
   ---------------------------------------------------------- */

.game-select-badge,
.pkg-select-badge {
  animation: badgeSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ----------------------------------------------------------
   TOAST NOTIFICATION
   ---------------------------------------------------------- */

.toast {
  animation: toastSlide 0.3s ease both;
}

.toast.toast-out {
  animation: toastOut 0.3s ease both;
}

/* ----------------------------------------------------------
   CARD HOVER LIFT
   ---------------------------------------------------------- */

.lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lift:hover {
  transform: translateY(-3px);
}

/* ----------------------------------------------------------
   PULSE DOT (live indicator)
   ---------------------------------------------------------- */

.pulse-dot {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   ACCORDION / SLIDE-DOWN
   ---------------------------------------------------------- */

.slide-down {
  overflow: hidden;
  animation: slideDown 0.35s ease both;
}

/* ----------------------------------------------------------
   CONFETTI EMOJI BURST (used on confirm page)
   ---------------------------------------------------------- */

@keyframes confettiFall {
  0%   { transform: translateY(-30px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(80px)  rotate(360deg); opacity: 0; }
}

.confetti-piece {
  position: absolute;
  font-size: 1.2rem;
  pointer-events: none;
  animation: confettiFall 1.2s ease forwards;
}