/* === ANIMATIONS.CSS — Keyframes, Scroll Reveal, Transitions === */

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms cubic-bezier(0.4,0,0.2,1), transform 600ms cubic-bezier(0.4,0,0.2,1);
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 600ms cubic-bezier(0.4,0,0.2,1), transform 600ms cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.revealed { opacity: 1; transform: none; }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 600ms cubic-bezier(0.4,0,0.2,1), transform 600ms cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.revealed { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 600ms cubic-bezier(0.4,0,0.2,1), transform 600ms cubic-bezier(0.4,0,0.2,1);
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* Stagger delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* ── Hero title entrance ── */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-title-line {
  display: block;
  animation: slide-up 700ms cubic-bezier(0.4,0,0.2,1) both;
  animation-fill-mode: both;
}

.hero-title-line:nth-child(1) { animation-delay: 200ms; }
.hero-title-line:nth-child(2) { animation-delay: 350ms; }
.hero-title-line:nth-child(3) { animation-delay: 500ms; }

/* ── Hero subtitle fade ── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-fade { animation: fade-in-up 700ms ease both; }
.hero-fade.delay-700 { animation-delay: 700ms; }
.hero-fade.delay-900 { animation-delay: 900ms; }

/* ── Glitch effect ── */
@keyframes glitch {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  15%  { clip-path: inset(15% 0 70% 0); transform: translate(-4px,  2px); }
  30%  { clip-path: inset(60% 0 20% 0); transform: translate( 4px, -2px); }
  45%  { clip-path: inset(35% 0 45% 0); transform: translate(-2px,  1px); }
  60%  { clip-path: inset(80% 0  5% 0); transform: translate( 3px, -1px); }
  75%  { clip-path: inset( 5% 0 85% 0); transform: translate(-3px,  2px); }
  90%  { clip-path: inset(50% 0 30% 0); transform: translate( 2px, -2px); }
}

.glitch-wrap {
  position: relative;
}

.glitch-layer {
  position: absolute;
  inset: 0;
  color: var(--red-neon);
  pointer-events: none;
  opacity: 0;
}

.glitch-wrap:hover .glitch-layer {
  opacity: 1;
  animation: glitch 500ms steps(1) infinite;
}

/* ── Neon flicker ── */
@keyframes neon-flicker {
  0%, 94%, 100% { text-shadow: var(--glow-red); opacity: 1; }
  95% { text-shadow: none; opacity: 0.7; }
  96% { text-shadow: var(--glow-red); opacity: 1; }
  97% { text-shadow: none; opacity: 0.5; }
  98% { text-shadow: var(--glow-red); opacity: 1; }
}

.neon-flicker:hover {
  animation: neon-flicker 3s infinite;
}

/* ── Scroll indicator bounce ── */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(8px); opacity: 1; }
}

.scroll-indicator {
  animation: scroll-bounce 2s ease-in-out infinite;
}

/* ── Float animation (particles) ── */
@keyframes float-particle {
  0% { transform: translate(0, 0); }
  25% { transform: translate(20px, -15px); }
  50% { transform: translate(-10px, -30px); }
  75% { transform: translate(-20px, -10px); }
  100% { transform: translate(0, 0); }
}

/* ── Pulse ring ── */
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

.pulse-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--red);
  animation: pulse-ring 2s cubic-bezier(0.4,0,0.2,1) infinite;
}

/* ── Red underline animated ── */
.animated-underline {
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: var(--red);
  box-shadow: var(--glow-red-sm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms cubic-bezier(0.4,0,0.2,1);
}

.animated-underline.visible::after { transform: scaleX(1); }

/* ── Counter (stat numbers) ── */
@keyframes counter-grow {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.stat-number {
  animation: counter-grow 400ms cubic-bezier(0.4,0,0.2,1) both;
}

/* ── Page transition ── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-enter {
  animation: page-enter 300ms cubic-bezier(0.4,0,0.2,1) both;
}

/* ── Image gallery crossfade ── */
@keyframes img-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery-img-enter { animation: img-fade 300ms ease; }

/* ── Card shine ── */
@keyframes shine {
  from { left: -100%; }
  to { left: 200%; }
}

.card-shine {
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}

.game-card:hover .card-shine {
  animation: shine 600ms ease;
}

/* ── Tag hover expand ── */
.genre-filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Timeline ── */
@keyframes timeline-draw {
  from { height: 0; }
  to { height: 100%; }
}

.timeline-line.animated {
  animation: timeline-draw 1s ease both;
}

/* ── Confetti keyframes (JS-driven, just CSS needed) ── */
@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: fixed;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 99999;
  animation: confetti-fall 2s ease both;
}