/* ==========================================================================
   animations.css — Keyframes, micro-animations, scroll reveals
   aiengineer.hu — all respect prefers-reduced-motion (see reset.css)
   ========================================================================== */

/* ---- Blob float (hero) ---- */
@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, 30px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, -20px) scale(1.05); }
  66% { transform: translate(30px, -30px) scale(1.1); }
}
@keyframes blob-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.08); }
}

/* ---- Modal pop ---- */
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Fade-in up (scroll reveal) ---- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Only hide reveal elements when JS is available to reveal them again.
   Without JS (no html.js class), content stays fully visible. */
.js .reveal {
  opacity: 0;
}

.js .reveal.is-visible {
  animation: fade-in-up var(--duration-reveal, 0.8s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

/* Stagger helper (via inline --reveal-delay or nth-child) */
.js .reveal.is-visible { animation-delay: var(--reveal-delay, 0ms); }

/* Chapter card stagger on home */
.js .grid--chapters .chapter-card.reveal.is-visible:nth-child(3n+1) { --reveal-delay: 0ms; }
.js .grid--chapters .chapter-card.reveal.is-visible:nth-child(3n+2) { --reveal-delay: 60ms; }
.js .grid--chapters .chapter-card.reveal.is-visible:nth-child(3n+3) { --reveal-delay: 120ms; }

/* ---- Glow pulse (active chapter in nav) ---- */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--surface-glow); }
  50% { box-shadow: 0 0 16px 2px var(--surface-glow); }
}

.glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ---- Badge pop ---- */
@keyframes badge-pop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
.badge-pop { animation: badge-pop 0.2s ease-out; }

/* ---- Underline slide (link hover) ---- */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--accent-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ---- Spin (loading) ---- */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* ---- Roadmap node reveal (JS adds .is-visible) ---- */
/* Only hide when JS is present (html.js); roadmap.js reveals them. */
.js .roadmap-node {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.js .roadmap-node.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: reveal everything instantly, no transform animation. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .roadmap-node {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}