/* =====================================================================
 * aisite-fx.css — supporting styles for declarative GSAP effects
 * --------------------------------------------------------------------- */

/* Elements that will animate in via reveal/stagger start invisible
   so they don't flash before GSAP boots. Removed once .fx-ready is set. */
html:not(.fx-ready) [data-fx="reveal"],
html:not(.fx-ready) [data-fx="reveal-stagger"] > *,
html:not(.fx-ready) [data-fx="split-words"] {
  opacity: 0;
}

/* Parallax + tilt elements need GPU compositing */
[data-fx="parallax"],
[data-fx="tilt"],
[data-fx="magnetic"] {
  will-change: transform;
}

/* Marquee container defaults — overridden by JS but keep these as safety net */
[data-fx="marquee"] {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  gap: 2rem;
}
[data-fx="marquee"] > * {
  flex-shrink: 0;
}

/* Tilt + magnetic transitions when JS not loaded */
[data-fx="tilt"],
[data-fx="magnetic"] {
  transform-style: preserve-3d;
  transition: transform 0.2s ease;
}

/* Pin sections need consistent stacking */
[data-fx="pin"] {
  position: relative;
  z-index: 1;
}

/* Reduced motion fallback — completely disable */
@media (prefers-reduced-motion: reduce) {
  html:not(.fx-ready) [data-fx="reveal"],
  html:not(.fx-ready) [data-fx="reveal-stagger"] > *,
  html:not(.fx-ready) [data-fx="split-words"] {
    opacity: 1 !important;
  }
  [data-fx] {
    animation: none !important;
    transition: none !important;
  }
}