/* ============================================
   ANIMATIONS — Keyframes, micro-interactions
   Scroll reveals + progress are driven by Motion (see js/main.js);
   this file holds load-in, hover and ambient motion only.
   ============================================ */

/* ── Base keyframes ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes dot-ring-pulse {
  0%   { box-shadow: 0 0 0 0 var(--dot-glow, rgba(211, 138, 69, 0.4)); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--p4-glow); }
  50%      { box-shadow: 0 0 0 4px var(--p4-glow); }
}

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

@keyframes cta-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ── Hero entrance (CSS, runs on load) ── */
.hero-content   { animation: fade-up 0.9s var(--ease-out) both; }
.timeline-container { animation: fade-up 0.9s 0.2s var(--ease-out) both; }

/* Gentle bob on the hero CTA's arrow */
.hero-cta svg { animation: cta-bob 1.8s ease-in-out infinite; }

/* ── Dot animations ── */
.timeline-dot-wrap.active .timeline-dot {
  animation: dot-ring-pulse 2s var(--ease-out) 0.3s;
}

/* ── Badge micro-interaction ── */
.badge-body:hover {
  animation: badge-pulse 1.2s ease-in-out infinite;
  cursor: default;
}

/* ── Scroll progress shimmer overlay ── */
.scroll-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.4) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
  opacity: 0.5;
}

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

/* ── Timeline dot phase glow on hover ── */
.timeline-dot-wrap:hover .timeline-dot {
  box-shadow:
    0 6px 20px var(--dot-glow, rgba(0,0,0,0.15)),
    0 0 0 6px var(--dot-glow, rgba(0,0,0,0.05));
}

/* ── Page load fade-in ── */
body { animation: fade-in 0.4s ease both; }

/* ── Theme icon hover ── */
.theme-toggle-fixed svg,
.theme-toggle-small svg {
  transition: transform var(--duration-base) var(--ease-spring);
}
.theme-toggle-fixed:hover .icon-sun,
.theme-toggle-small:hover .icon-sun { transform: rotate(20deg) scale(1.1); }
.theme-toggle-fixed:hover .icon-moon,
.theme-toggle-small:hover .icon-moon { transform: rotate(-15deg) scale(1.1); }

/* ── Sticky nav slide-down on show ── */
.sticky-nav.visible { animation: slide-down var(--duration-slow) var(--ease-out) both; }

/* ── Theme card icon float on hover ── */
.theme-card:hover .theme-icon { animation: float 2s ease-in-out infinite; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .scroll-progress::after { display: none; }
  .hero-cta svg { animation: none; }
}