/* ==========================================================================
   ANIMATIONS.CSS — keyframes, scroll-reveal, transitions, hover states
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.stagger-1 { transition-delay: 0.08s; }
.reveal.stagger-2 { transition-delay: 0.16s; }
.reveal.stagger-3 { transition-delay: 0.24s; }

/* ---------- Marquee scroll ---------- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee-scroll 32s linear infinite;
}

/* ---------- Hero scroll-hint bounce ---------- */
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Showcase screenshot swap ---------- */
#showcase-image {
  transition: opacity 0.15s ease;
}

/* ---------- Toast transitions ---------- */
.toast {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  animation: toast-in 0.4s var(--ease-out) forwards;
}
.toast.is-leaving {
  animation: toast-out 0.3s var(--ease-out) forwards;
}
@keyframes toast-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* ---------- FAQ accordion ---------- */
.faq-question .plus svg { transition: transform var(--dur-med) var(--ease-out); }

/* ---------- Misc hover lift ---------- */
.hover-lift {
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .scroll-hint .chevron { animation: none; }
  .build-card,
  .build-chrome,
  .build-final,
  .build-dashboard-wrap {
    transition-duration: 0.001ms;
  }
  .build-splash img,
  .build-splash-glow {
    animation: none;
  }
}