/* ==========================================================================
   Animations — scroll reveals, hero/image masking, globe draw, parallax
   All hidden states are scoped to .js so no-JS users always see content.
   ========================================================================== */

/* --- Scroll reveal ------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo),
    transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* --- Hero media: gentle scale-in + parallax wrapper --------------------- */
.js [data-parallax] { will-change: transform; }
.js .hero__media .media img {
  transform: scale(1.08);
  transition: transform 1300ms var(--ease-out-expo);
}
.js .hero.is-ready .hero__media .media img { transform: scale(1); }

/* --- Industry images: subtle mask-zoom on reveal ------------------------ */
.js .industry .industry__media img {
  transform: scale(1.06);
  transition: transform 1300ms var(--ease-out-expo);
}
.js .industry.is-visible .industry__media img { transform: scale(1); }

/* --- Global network: globe rotation is defined in sections.css ---------- */

/* --- Respect reduced-motion: show everything, animate nothing ----------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .hero__media .media img,
  .js .industry .industry__media img { transform: none !important; }
  .globe__rotor { animation: none !important; transform: translateX(-13%) !important; }
}