/* ==========================================================================
   animations.css - Entry states + keyframes
   Elements with [data-anim] start hidden ONLY when JS is available.
   base.css .no-js rule keeps them visible if JS fails.
   ========================================================================== */

/* JS present: set initial hidden states for scroll reveals */
.js [data-anim="fade-up"] { opacity: 0; transform: translateY(24px); }
.js [data-anim="fade-in"] { opacity: 0; }
.js [data-anim="scale-in"] { opacity: 0; transform: scale(0.96); }
.js [data-anim="clip-up"] { clip-path: inset(100% 0 0 0); }
.js [data-anim="clip-right"] { clip-path: inset(0 100% 0 0); }
.js [data-anim="zoom-settle"] { opacity: 0; transform: scale(1.05); }

/* Hero pieces animated by the GSAP timeline; hide until timeline runs */
.js .hero [data-hero] { opacity: 0; }

/* Reduced motion: cancel ambient loops and reveal everything */
@media (prefers-reduced-motion: reduce) {
  .hotspot__ring,
  .marker__ring,
  .hero__scanbeam,
  .hero__scrollcue .mouse::after,
  .miniloader__spin { animation: none !important; }

  .js [data-anim],
  .js .hero [data-hero] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero__scanbeam { opacity: 0 !important; }

  /* Checklist shows as completed (no tick-in animation) */
  .js .checklist__box {
    background: var(--orange) !important;
    color: var(--white) !important;
    border-color: var(--orange) !important;
  }
  .js .checklist__box svg { opacity: 1 !important; transform: none !important; }
}