/* IdleGaming - Animations Stylesheet */
/* ig-animations.css */

/* ===== ENTRANCE ANIMATIONS ===== */
@keyframes ig-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

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

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

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

/* ===== ANIMATION CLASSES ===== */
.ig-animate-slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ig-animate-slide-left {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ig-animate-slide-right {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ig-animate-scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ig-animate-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.ig-animated {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== DELAY UTILITIES ===== */
.ig-delay-1 { transition-delay: 0.1s !important; }
.ig-delay-2 { transition-delay: 0.2s !important; }
.ig-delay-3 { transition-delay: 0.3s !important; }
.ig-delay-4 { transition-delay: 0.4s !important; }
.ig-delay-5 { transition-delay: 0.5s !important; }
.ig-delay-6 { transition-delay: 0.6s !important; }

/* ===== HERO ENTRANCE ===== */
.ig-hero-content > * {
  animation: ig-slide-up 0.8s ease forwards;
  opacity: 0;
}

.ig-hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.ig-hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.ig-hero-content > *:nth-child(3) { animation-delay: 0.4s; }
.ig-hero-content > *:nth-child(4) { animation-delay: 0.55s; }
.ig-hero-content > *:nth-child(5) { animation-delay: 0.7s; }

.ig-hero-visual-wrap {
  animation: ig-slide-left 0.9s ease 0.3s forwards;
  opacity: 0;
}

/* ===== FLOATING ELEMENTS ===== */
@keyframes ig-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes ig-float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.ig-float { animation: ig-float 4s ease-in-out infinite; }
.ig-float-slow { animation: ig-float-slow 6s ease-in-out infinite; }
.ig-float-delay { animation: ig-float 4s ease-in-out infinite 1.5s; }

/* ===== PULSE ANIMATIONS ===== */
@keyframes ig-pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); }
  50% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.5), 0 0 80px rgba(0, 255, 255, 0.1); }
}

@keyframes ig-pulse-purple {
  0%, 100% { box-shadow: 0 0 20px rgba(123, 47, 255, 0.2); }
  50% { box-shadow: 0 0 40px rgba(123, 47, 255, 0.5), 0 0 80px rgba(123, 47, 255, 0.1); }
}

@keyframes ig-pulse-pink {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 45, 120, 0.2); }
  50% { box-shadow: 0 0 40px rgba(255, 45, 120, 0.5); }
}

.ig-pulse-glow { animation: ig-pulse-glow 3s ease-in-out infinite; }
.ig-pulse-purple { animation: ig-pulse-purple 3s ease-in-out infinite; }
.ig-pulse-pink { animation: ig-pulse-pink 3s ease-in-out infinite; }

/* ===== SCAN LINE EFFECT ===== */
@keyframes ig-scanline {
  0% { top: -10%; }
  100% { top: 110%; }
}

.ig-scanline-wrap {
  position: relative;
  overflow: hidden;
}

.ig-scanline-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(transparent, rgba(0,255,255,0.15), transparent);
  animation: ig-scanline 4s linear infinite;
  pointer-events: none;
}

/* ===== NUMBER COUNT UP ===== */
.ig-count-up {
  display: inline-block;
}

/* ===== PROGRESS BARS ===== */
@keyframes ig-progress-fill {
  from { width: 0%; }
  to { width: var(--ig-target-width, 70%); }
}

.ig-progress-animated {
  animation: ig-progress-fill 1.5s ease 0.3s forwards;
  width: 0%;
}

/* ===== SHIMMER ===== */
@keyframes ig-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ig-shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: ig-shimmer 2s infinite;
}

/* ===== TYPING CURSOR ===== */
@keyframes ig-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.ig-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--ig-primary);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: ig-blink 1s ease infinite;
}

/* ===== LOADING DOTS ===== */
@keyframes ig-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.ig-loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.ig-loading-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ig-primary);
  animation: ig-dot-bounce 1.4s ease infinite;
}

.ig-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.ig-loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* ===== PARTICLE DOTS ===== */
.ig-particles-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ig-particle {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.4);
  animation: ig-particle-drift linear infinite;
}

@keyframes ig-particle-drift {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(60px); opacity: 0; }
}

/* ===== NEON FLICKER ===== */
@keyframes ig-neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 10px rgba(0,255,255,0.5), 0 0 20px rgba(0,255,255,0.3);
  }
  20%, 24%, 55% { text-shadow: none; }
}

.ig-neon-flicker {
  animation: ig-neon-flicker 6s infinite;
}

/* ===== ROTATE SPIN ===== */
@keyframes ig-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ig-spin-slow { animation: ig-spin-slow 20s linear infinite; }
.ig-spin-slow-reverse { animation: ig-spin-slow 15s linear infinite reverse; }

/* ===== QUIZ OPTION CLICK ===== */
@keyframes ig-option-ripple {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

/* ===== CARD HOVER LIFT ===== */
.ig-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ig-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

/* ===== STAGGER GRID ===== */
.ig-stagger-grid > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.ig-stagger-grid.ig-animated > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.ig-stagger-grid.ig-animated > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.ig-stagger-grid.ig-animated > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.2s; }
.ig-stagger-grid.ig-animated > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.3s; }
.ig-stagger-grid.ig-animated > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.4s; }
.ig-stagger-grid.ig-animated > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.5s; }
.ig-stagger-grid.ig-animated > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.6s; }
.ig-stagger-grid.ig-animated > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.7s; }