/* =============================================================================
 *  ANIMATIONS — keyframes + the scroll-reveal system.
 * ===========================================================================*/

/* ---- scroll reveal (driven by IntersectionObserver adding .is-visible) ---- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* fallback: if JS is off, never hide content */
.no-js .reveal { opacity: 1; transform: none; }

/* ---- keyframes ---- */
@keyframes scroll-dot {
  0% { transform: translate(-50%, 0); opacity: 1; }
  70% { transform: translate(-50%, 14px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

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

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255,138,61,.4)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 22px rgba(255,138,61,.8)); }
}

@keyframes dots {
  0%, 20% { content: ""; }
  40% { content: "."; }
  60% { content: ".."; }
  80%, 100% { content: "..."; }
}
.dots::after { content: ""; animation: dots 1.4s steps(1) infinite; }

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

/* gentle entrance for nav on load */
@keyframes nav-drop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.nav { animation: nav-drop .7s var(--ease-out) both; animation-delay: .2s; }