/*
 * ============================================================
 * ANIMATIONS  —  animations.css
 * ============================================================
 * All keyframes and motion utilities live here.
 *
 * If something is animating when it shouldn't be, or you
 * want to kill all motion for testing, comment out the
 * @keyframes block or set its duration to 0ms here.
 *
 * The prefers-reduced-motion block at the bottom cuts every
 * animation for users who have requested reduced motion in
 * their OS settings — don't remove it.
 * ============================================================
 */

/* --- Button ripple ----------------------------------------- */
@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --- Scroll reveal (.reveal class on any element) ---------- */
/*
 * Add class="reveal" to any element.
 * main.js will add .visible when it enters the viewport.
 */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.5s ease,
    transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay helpers — add e.g. class="reveal delay-1" */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* --- Reduced-motion kill-switch ---------------------------- */
/*
 * Users who turn on "Reduce Motion" in their OS or browser
 * get static versions of everything below.
 * This block must stay at the bottom of this file so it wins.
 */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  /* Show headline immediately */
  .reveal-inner { transform: translateY(0); }

  /* Show fade-in elements immediately */
  .hero-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Show scroll-reveal elements immediately */
  .reveal {
    opacity: 1;
    transform: none;
  }

  /* Hide the progress bar entirely */
  #scroll-progress { display: none; }

}