/* =========================================================
   DIMENXO — animation support styles
   Actual tweens are driven by GSAP (see js/*.js). This file only
   holds: the loader transition, magnetic-button setup, and the
   prefers-reduced-motion overrides that turn heavy motion off.
   ========================================================= */

#loader {
  transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);
}
#loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Magnetic buttons are translated by JS on pointer move — GPU hint only */
[data-magnetic] { will-change: transform; }

/* Elements GSAP animates on load/scroll start invisible via inline styles
   set at runtime (gsap.set), never via CSS — so content stays visible and
   readable if JavaScript fails to load or is disabled. */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }

  #cursor-dot, #cursor-ring { display: none !important; }

  .hero-scroll-cue { display: none; }

  .vision-field { display: none; }

  #hero-canvas { opacity: 0.5; }
}

/* Respect the same preference even when toggled via JS (Lenis / GSAP
   read this class to skip parallax and smooth-scroll entirely). */
body.reduced-motion #cursor-dot,
body.reduced-motion #cursor-ring { display: none !important; }
body.reduced-motion .vision-field { display: none; }
body.reduced-motion .hero-scroll-cue { display: none; }