/* ============================================================
   TheGamingTheme - Animations
   tg-animations.css
   ============================================================ */

/* ---- KEYFRAMES ---- */
@keyframes tg-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tg-fade-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes tg-fade-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes tg-pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,229,255,0.2); }
  50%       { box-shadow: 0 0 40px rgba(0,229,255,0.5); }
}

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

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

@keyframes tg-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes tg-scan-line {
  0%   { top: -5%; opacity: 0.6; }
  100% { top: 105%; opacity: 0; }
}

@keyframes tg-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes tg-counter-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

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

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

@keyframes tg-hero-particle {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.5; }
  33%  { transform: translateY(-60px) translateX(30px) scale(1.2); opacity: 0.8; }
  66%  { transform: translateY(-20px) translateX(-20px) scale(0.8); opacity: 0.3; }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.5; }
}

/* ---- APPLY ANIMATIONS ---- */
.tg-animate-fade-in {
  animation: tg-fade-in 0.7s ease forwards;
}
.tg-animate-float {
  animation: tg-float 4s ease-in-out infinite;
}
.tg-animate-pulse {
  animation: tg-pulse-glow 3s ease-in-out infinite;
}
.tg-animate-gradient {
  background-size: 200% 200%;
  animation: tg-gradient-shift 4s ease infinite;
}

/* ---- SCROLL REVEAL ---- */
.tg-reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.tg-reveal.revealed {
  opacity: 1; transform: translateY(0);
}
.tg-reveal-left {
  opacity: 0; transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.tg-reveal-left.revealed {
  opacity: 1; transform: translateX(0);
}
.tg-reveal-scale {
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.tg-reveal-scale.revealed {
  opacity: 1; transform: scale(1);
}

/* Staggered delays */
.tg-delay-1 { transition-delay: 0.1s !important; }
.tg-delay-2 { transition-delay: 0.2s !important; }
.tg-delay-3 { transition-delay: 0.3s !important; }
.tg-delay-4 { transition-delay: 0.4s !important; }
.tg-delay-5 { transition-delay: 0.5s !important; }
.tg-delay-6 { transition-delay: 0.6s !important; }

/* ---- HERO BACKGROUND ---- */
.tg-hero-bg-animate {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.tg-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.tg-orb-1 {
  width: 400px; height: 400px;
  background: rgba(0,229,255,0.08);
  top: -100px; right: 10%;
  animation: tg-float 8s ease-in-out infinite;
}
.tg-orb-2 {
  width: 300px; height: 300px;
  background: rgba(124,58,237,0.1);
  bottom: -50px; left: 5%;
  animation: tg-float 10s ease-in-out infinite reverse;
}
.tg-orb-3 {
  width: 200px; height: 200px;
  background: rgba(236,72,153,0.06);
  top: 40%; right: 25%;
  animation: tg-float 6s ease-in-out infinite 2s;
}

/* ---- GLITCH TEXT ---- */
.tg-glitch {
  position: relative;
}
.tg-glitch::before,
.tg-glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--tg-bg-primary);
  overflow: hidden;
  clip-path: inset(0 0 95% 0);
}
.tg-glitch::before {
  left: -2px; text-shadow: 2px 0 var(--tg-accent-cyan);
  animation: tg-glitch-1 3s infinite linear;
}
.tg-glitch::after {
  left: 2px; text-shadow: -2px 0 var(--tg-accent-pink);
  animation: tg-glitch-2 3s infinite linear;
}
@keyframes tg-glitch-1 {
  0%,100% { clip-path: inset(0 0 95% 0); }
  20%      { clip-path: inset(30% 0 50% 0); }
  40%      { clip-path: inset(70% 0 10% 0); }
  60%      { clip-path: inset(10% 0 80% 0); }
  80%      { clip-path: inset(50% 0 30% 0); }
}
@keyframes tg-glitch-2 {
  0%,100% { clip-path: inset(0 0 90% 0); }
  25%      { clip-path: inset(60% 0 20% 0); }
  50%      { clip-path: inset(20% 0 60% 0); }
  75%      { clip-path: inset(80% 0 5% 0); }
}

/* ---- TYPING CURSOR ---- */
.tg-cursor-blink::after {
  content: '|';
  animation: tg-blink 0.8s infinite;
  color: var(--tg-accent-cyan);
  margin-left: 2px;
}

/* ---- PROGRESS BAR FILL ---- */
.tg-progress-animated .tg-quiz-progress-fill {
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* ---- LOADING SHIMMER ---- */
.tg-shimmer {
  background: linear-gradient(90deg, var(--tg-bg-card) 0%, var(--tg-bg-card-hover) 50%, var(--tg-bg-card) 100%);
  background-size: 200% 100%;
  animation: tg-shimmer 1.5s infinite;
}

/* ---- QUIZ RESULT ANIMATION ---- */
.tg-result-circle {
  width: 120px; height: 120px; border-radius: 50%;
  border: 4px solid transparent;
  background: linear-gradient(var(--tg-bg-card),var(--tg-bg-card)) padding-box,
              var(--tg-gradient-accent) border-box;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  animation: tg-scale-in 0.5s ease forwards, tg-pulse-glow 3s ease-in-out infinite 1s;
}

/* ---- PAGE TRANSITIONS ---- */
.tg-page-enter {
  animation: tg-fade-in 0.5s ease forwards;
}

/* ---- NAV SCROLL EFFECT ---- */
.tg-navbar.scrolled {
  background: rgba(10,11,15,0.97);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}