/* ============================================================
   Stacks Garage — animations.css
   Keyframes: reveal-on-scroll, marquee, blink, stamp-in
   ============================================================ */

/* ---------- Typewriter cursor blink ---------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.cursor-blink { animation: blink 1s step-end infinite; }

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

/* ---------- Reveal animations (used with IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

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

.reveal--scale { transform: scale(0.9); }
.reveal--scale.is-visible { transform: scale(1); }

/* ---------- Stamp-in — the one signature load moment: the hero
   eyebrow badge lands like an ink stamp hitting paper ---------- */
@keyframes stamp-in {
  0%   { opacity: 0; transform: scale(1.8) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(0.96) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(-2deg); }
}
.stamp-in { animation: stamp-in 0.5s var(--ease) both; }

/* ---------- Spotlight — soft radial glow used behind hero/feature blocks ---------- */
.hero-spotlight {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, var(--accent-soft) 0%, transparent 60%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .stamp-in { animation: none; }
}