/* ============================================
   INTERACTI GAMING - ANIMATIONS
   ig-animations.css
   ============================================ */

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

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

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

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

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

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

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

@keyframes ig-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

@keyframes ig-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(233,69,96,0.3); }
  50%       { box-shadow: 0 0 40px rgba(233,69,96,0.6); }
}

@keyframes ig-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ig-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ig-scan-line {
  0%   { top: -100%; }
  100% { top: 100%; }
}

@keyframes ig-count-up {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ig-bar-fill {
  from { width: 0%; }
  to   { width: var(--ig-target-width); }
}

@keyframes ig-neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 5px var(--ig-accent2),
      0 0 10px var(--ig-accent2),
      0 0 20px var(--ig-accent2);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

@keyframes ig-bg-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ig-particle-float {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* ---- SCROLL-TRIGGERED REVEAL ---- */

.ig-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.ig-reveal.ig-revealed {
  opacity: 1;
  transform: translateY(0);
}

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

.ig-reveal-left.ig-revealed {
  opacity: 1;
  transform: translateX(0);
}

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

.ig-reveal-right.ig-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
.ig-reveal-delay-1 { transition-delay: 0.1s; }
.ig-reveal-delay-2 { transition-delay: 0.2s; }
.ig-reveal-delay-3 { transition-delay: 0.3s; }
.ig-reveal-delay-4 { transition-delay: 0.4s; }
.ig-reveal-delay-5 { transition-delay: 0.5s; }

/* ---- HERO ENTRANCE ---- */

.ig-hero-label { animation: ig-fade-up 0.6s ease 0.1s both; }
.ig-hero-title  { animation: ig-fade-up 0.7s ease 0.25s both; }
.ig-hero-desc   { animation: ig-fade-up 0.7s ease 0.4s both; }
.ig-hero-actions { animation: ig-fade-up 0.7s ease 0.55s both; }
.ig-hero-stats  { animation: ig-fade-up 0.7s ease 0.7s both; }

/* ---- FLOATING SHAPES ---- */

.ig-shape-float {
  animation: ig-float 6s ease-in-out infinite;
}

.ig-shape-float-delay {
  animation: ig-float 8s ease-in-out infinite;
  animation-delay: -3s;
}

/* ---- AMBIENT PARTICLES ---- */

.ig-particles-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ig-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ig-accent2);
  opacity: 0;
}

/* ---- CARD HOVER EFFECTS ---- */

.ig-hover-glow:hover {
  animation: ig-glow-pulse 1.5s ease infinite;
}

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

.ig-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--ig-accent2);
  border-radius: 50%;
  animation: ig-rotate 0.8s linear infinite;
  display: inline-block;
}

/* ---- TYPING CURSOR ---- */

.ig-typing-cursor::after {
  content: '|';
  animation: ig-pulse-dot 1s step-end infinite;
  color: var(--ig-accent2);
}

/* ---- SHIMMER LOADING ---- */

.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 1.5s infinite;
}

/* ---- 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.4);
}

/* ---- NEON TEXT ---- */

.ig-neon-text {
  animation: ig-neon-flicker 3s ease-in-out infinite;
}

/* ---- ANIMATED GRADIENT BG ---- */

.ig-gradient-animated {
  background: linear-gradient(270deg, #e94560, #7b2fff, #00d4ff, #e94560);
  background-size: 400% 400%;
  animation: ig-bg-shift 8s ease infinite;
}

/* ---- SCROLL PROGRESS ---- */

.ig-scroll-progress {
  position: fixed;
  top: 70px;
  left: 0;
  height: 2px;
  background: var(--ig-gradient-accent);
  z-index: 999;
  width: 0%;
  transition: width 0.1s linear;
}