/* JBB International LLC - animations.css
   CSS start states for GSAP scroll-triggered reveals.
   These rules only activate when the animations.js script adds "has-motion"
   to <html>. Without that class every element is fully visible, so the page
   works without JavaScript or when prefers-reduced-motion is set.

   Two reveal patterns are used:
     data-reveal="fade"   -- element fades + slides up (GSAP class-based)
     data-reveal="mask"   -- image masked in with a sliding clip-path
*/

/* ---------- Fade reveal (used on .process-step, .principles > div, etc.) --- */
.has-motion [data-reveal="fade"] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: opacity, transform;
}
.has-motion [data-reveal="fade"].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Mask reveal (used on .intro-media, .about-hero-media) ---------- */
.has-motion [data-reveal="mask"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s var(--ease);
  will-change: clip-path;
}
.has-motion [data-reveal="mask"].is-revealed {
  clip-path: inset(0 0% 0 0);
}

/* ---------- Hero copy entrance -------------------------------------------- */
.has-motion .hero-slide.swiper-slide-active .hero-copy h1,
.has-motion .hero-slide.swiper-slide-active .hero-copy h2 {
  animation: heroHeadIn .8s var(--ease) forwards;
}
.has-motion .hero-slide.swiper-slide-active .hero-copy p {
  animation: heroHeadIn .8s var(--ease) .15s both;
}
.has-motion .hero-slide.swiper-slide-active .hero-actions {
  animation: heroHeadIn .8s var(--ease) .28s both;
}
@keyframes heroHeadIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Reduce motion safety net -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal="fade"],
  .has-motion [data-reveal="mask"] { transition: none; }
  .has-motion .hero-slide .hero-copy h1,
  .has-motion .hero-slide .hero-copy h2,
  .has-motion .hero-slide .hero-copy p,
  .has-motion .hero-slide .hero-actions { animation: none; opacity: 1; transform: none; }
}