/* ================================================
   OTL ANIMATIONS
   Link this on every page:
   <link rel="stylesheet" href="animations.css">
   ================================================ */

/* --- KEYFRAMES --- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes glowPulse {
  0%, 100% {
    text-shadow:
      0 0 20px rgba(255,255,255,0.4),
      0 0 60px rgba(255,255,255,0.2),
      0 0 100px rgba(255,255,255,0.1);
  }
  50% {
    text-shadow:
      0 0 30px rgba(255,255,255,0.6),
      0 0 80px rgba(255,255,255,0.3),
      0 0 120px rgba(255,255,255,0.15);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- HERO ANIMATIONS --- */
/* Fade up with custom delay via --delay variable */
.anim-fade-up {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
  animation-delay: var(--delay, 0s);
}

/* Slide in from left */
.anim-slide-right {
  display: inline-block;
  opacity: 0;
  animation: slideRight 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay, 0s);
}

/* Nav slides down */
.nav-anim {
  animation: slideDown 0.6s ease forwards;
}

/* BG text pulses */
.bg-text {
  animation: glowPulse 4s ease-in-out infinite;
}

/* --- SCROLL REVEAL --- */
/* Base state — hidden */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Triggered by JS when in viewport */
.reveal.is-visible, .drop-card.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger siblings */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal:nth-child(6) { transition-delay: 0.5s; }

/* --- DROP CARD POP --- */
.drop-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s;
}

.drop-card.visible {
  opacity: 1;
  transform: translateY(0) !important;
}

.drop-card:nth-child(1) { transition-delay: 0s; }
.drop-card:nth-child(2) { transition-delay: 0.12s; }
.drop-card:nth-child(3) { transition-delay: 0.24s; }
.drop-card:nth-child(4) { transition-delay: 0.36s; }

/* --- DIVIDER ANIMATION --- */
.divider {
  transform: scaleX(0);
  transform-origin: left;
  animation: scaleIn 0.8s ease forwards;
  animation-delay: 0.15s;
}

/* --- TAG HOVER --- */
.tag {
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.tag:hover {
  border-color: #555;
  color: #ccc;
  transform: translateY(-2px);
}

/* --- BUTTON HOVER EFFECTS --- */
.btn-dark {
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

/* Hover glow + lift now lives in index.css (.btn-dark:hover) to avoid
   this file's older plain-shadow hover silently overriding the glow. */

.btn-ghost {
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.btn-ghost:hover {
  background: #1a1a1a;
  color: #ccc;
  border-color: #555;
  transform: translateY(-2px);
}

/* --- STAT VALUE COUNT UP FLASH --- */
.stat-val {
  transition: color 0.3s;
}

.stat-val:hover { color: #e8e8e8; }