/* ══════════════════════════════════════════════════════════════
   ANIMATIONS · Keyframes, scroll reveals, micro-interactions
   ══════════════════════════════════════════════════════════════ */

/* ── Hero entrance animations (CSS-only, play once) ─────────── */

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate-1 {
  animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both;
}

.hero-animate-2 {
  animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.hero-animate-3 {
  animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.70s both;
}

/* ── Scroll indicator bounce ────────────────────────────────── */

@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(8px); opacity: 1; }
}

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

/* ── Ticker (achievements stats strip) ─────────────────────── */

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Scroll reveal: initial hidden states ──────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

/* ── In-view (active) state ─────────────────────────────────── */

.reveal.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view {
  opacity: 1;
  transform: none;
}

/* ── Stagger delays ─────────────────────────────────────────── */

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }

/* ── Background shimmer for placeholders ───────────────────── */

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

/* ── Dot pulse (contact availability) ──────────────────────── */

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}

/* ── Reduced motion: disable all animations ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-animate-1,
  .hero-animate-2,
  .hero-animate-3 {
    animation: none;
    opacity: 1;
  }

  .scroll-indicator {
    animation: none;
    opacity: 0.6;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}