/* ==========================================================================
   animations.css — keyframes and pre-animation states.
   Hidden states only apply under html.motion-ok (set before paint when the
   visitor has not asked for reduced motion). animations.js removes the class
   if GSAP fails to load, so content can never stay invisible.
   ========================================================================== */

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 97, 58, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(232, 97, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 97, 58, 0); }
}
@keyframes scroll-hint {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes burst {
  0% { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Pre-animation states ---------- */
.motion-ok [data-hero-item],
.motion-ok [data-hero-cta],
.motion-ok [data-reveal],
.motion-ok [data-stagger],
.motion-ok [data-step] { opacity: 0; }
.motion-ok .site-header { opacity: 0; }
.motion-ok [data-hero-title] .line > span { transform: translateY(105%); }
.motion-ok [data-reveal-img] { clip-path: inset(100% 0 0 0); }
.motion-ok .page-hero [data-hero-title] { opacity: 0; }

/* Split-text word wrappers (created by animations.js) */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-word > span { display: inline-block; will-change: transform; }

/* Loading shimmer for skeleton states */
.is-loading-skeleton { background: linear-gradient(90deg, var(--stone) 25%, var(--paper) 50%, var(--stone) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .brand-marquee__track, .footer-marquee__track { animation: none; }
  .cursor-follow { display: none; }
}