/* =========================================================
   Animations & transitions
   Replacements for framer-motion — pure CSS keyframes plus
   a .reveal / .visible pattern driven by IntersectionObserver
   (see js/main.js).
   ========================================================= */

/* Scroll-in reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-x-left  { transform: translateX(-24px); }
.reveal-x-right { transform: translateX(24px); }
.reveal-x-left.visible, .reveal-x-right.visible { transform: translateX(0); }

/* Staggered delays applied via inline style="--d: 60ms" on children */
.reveal[style*="--d"] { transition-delay: var(--d); }

/* Fade-in on load */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.6s ease-out both; }
.fade-in-up.delay-1 { animation-delay: 0.1s; }
.fade-in-up.delay-2 { animation-delay: 0.2s; }
.fade-in-up.delay-3 { animation-delay: 0.3s; }
.fade-in-up.delay-4 { animation-delay: 0.4s; }

/* Pulsing dot (hero badge) */
@keyframes pingSoft {
  0%   { transform: scale(1);    opacity: 0.6; }
  75%,100% { transform: scale(2.2); opacity: 0; }
}
.ping-dot { position: relative; display: inline-flex; }
.ping-dot::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: currentColor;
  animation: pingSoft 1.6s cubic-bezier(0,0,0.2,1) infinite;
}

/* Horizontal marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 28s linear infinite; display: flex; width: max-content; }

/* Hover lift shorthand */
.hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.hover-lift:hover { transform: translateY(-4px); }

/* Nav underline effect for header links */
.nav-link {
  position: relative;
  transition: color 0.2s;
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  height: 2px; width: 0;
  background: var(--color-accent);
  transition: width 0.25s ease;
}
.nav-link:hover { color: var(--color-secondary); }
.nav-link:hover::after { width: 100%; }