/* ============================================================
   RetroGamingArt - Animations
   https://retrogamingart.com
   ============================================================ */

/* ---- Keyframes ---- */

@keyframes rga-grid-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(60px); }
}

@keyframes rga-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(8px); }
}

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

@keyframes rga-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes rga-pop-in {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes rga-pulse-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(0,212,255,0.3); }
  50% { box-shadow: 0 0 40px rgba(0,212,255,0.7), 0 0 60px rgba(0,212,255,0.2); }
}

@keyframes rga-neon-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.8; }
  97% { opacity: 1; }
  98% { opacity: 0.6; }
  99% { opacity: 1; }
}

@keyframes rga-scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes rga-glitch-1 {
  0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(-3px, -3px); }
  25% { clip-path: polygon(0 10%, 100% 10%, 100% 60%, 0 60%); transform: translate(3px, 3px); }
  50% { clip-path: polygon(0 30%, 100% 30%, 100% 75%, 0 75%); transform: translate(-3px, 0); }
  75% { clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%); transform: translate(3px, -3px); }
}

@keyframes rga-glitch-2 {
  0%, 100% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(3px, 3px); }
  25% { clip-path: polygon(0 40%, 100% 40%, 100% 85%, 0 85%); transform: translate(-3px, -3px); }
  50% { clip-path: polygon(0 60%, 100% 60%, 100% 95%, 0 95%); transform: translate(3px, 0); }
  75% { clip-path: polygon(0 50%, 100% 50%, 100% 90%, 0 90%); transform: translate(-3px, 3px); }
}

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

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

@keyframes rga-typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes rga-cursor-blink {
  0%, 100% { border-color: var(--rga-neon-blue); }
  50% { border-color: transparent; }
}

@keyframes rga-star-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

@keyframes rga-pixel-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0% 0 0); }
}

@keyframes rga-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes rga-counter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Applied Animation Classes ---- */

.rga-animate-pulse-glow { animation: rga-pulse-glow 2.5s ease infinite; }
.rga-animate-float { animation: rga-float 4s ease infinite; }
.rga-animate-neon { animation: rga-neon-flicker 4s linear infinite; }
.rga-animate-fade-in { animation: rga-fade-in 0.6s ease forwards; }
.rga-animate-pop-in { animation: rga-pop-in 0.6s ease forwards; }

/* ---- Scroll progress bar ---- */
.rga-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rga-neon-blue), var(--rga-neon-pink));
  z-index: 1001;
  width: 0%;
  transition: width 0.1s linear;
}

/* ---- Loading spinner ---- */
.rga-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(0,212,255,0.2);
  border-top-color: var(--rga-neon-blue);
  border-radius: 50%;
  animation: rga-rotate 0.8s linear infinite;
  display: inline-block;
}

/* ---- Particle dots (hero decoration) ---- */
.rga-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rga-neon-blue);
  animation: rga-star-twinkle var(--duration, 3s) ease infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0.4;
}

/* ---- Typewriter effect ---- */
.rga-typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--rga-neon-blue);
  animation: rga-cursor-blink 0.7s step-end infinite;
}

/* ---- Hover lift ---- */
.rga-hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.rga-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }

/* ---- Glow text ---- */
.rga-glow-blue { text-shadow: 0 0 20px rgba(0,212,255,0.6), 0 0 40px rgba(0,212,255,0.2); }
.rga-glow-pink { text-shadow: 0 0 20px rgba(255,0,128,0.6), 0 0 40px rgba(255,0,128,0.2); }
.rga-glow-green { text-shadow: 0 0 20px rgba(57,255,20,0.6), 0 0 40px rgba(57,255,20,0.2); }

/* ---- Scanline overlay (for arcade aesthetic) ---- */
.rga-scanlines {
  position: relative;
}
.rga-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  border-radius: inherit;
}

/* ---- Score popup ---- */
.rga-score-popup {
  position: absolute;
  font-family: var(--rga-font-pixel);
  font-size: 0.7rem;
  color: var(--rga-neon-green);
  pointer-events: none;
  animation: rga-float-up 1s ease forwards;
  white-space: nowrap;
}

@keyframes rga-float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(1.5); }
}

/* ---- Page transition ---- */
.rga-page-transition {
  position: fixed;
  inset: 0;
  background: var(--rga-deep-purple);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.rga-page-transition.rga-entering { opacity: 1; pointer-events: all; }