/* ==========================================================================
   Food Diplomacy — light motion layer
   Replaces GSAP / SplitText / SmoothScroll / magic-cursor / Three.js hover.
   Layout, colours, spacing unchanged. GPU-friendly opacity/transform only.
   Rules that hide content ONLY apply when html.fd-motion-js is set by JS,
   so a slow/blocked script never leaves blank headings.
   ========================================================================== */

html {
  scroll-behavior: auto;
}

body.fd-light-motion #magic-cursor,
body.fd-light-motion #ball {
  display: none !important;
  pointer-events: none !important;
}
body.fd-light-motion,
body.fd-light-motion a,
body.fd-light-motion button {
  cursor: auto;
}
body.fd-light-motion a,
body.fd-light-motion button,
body.fd-light-motion [role="button"],
body.fd-light-motion input[type="submit"],
body.fd-light-motion label[for] {
  cursor: pointer;
}

/* Image clip reveal */
html.fd-motion-js .at-animation-image-style-1:not(.fd-inview) img {
  clip-path: inset(0 100% 0 0);
}
html.fd-motion-js .at-animation-image-style-1 img {
  will-change: clip-path;
  transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
html.fd-motion-js .at-animation-image-style-1.fd-inview img {
  clip-path: inset(0 0% 0 0);
}

/* Heading soft enter */
html.fd-motion-js .at-animation-heading-style-1:not(.fd-inview) .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-1:not(.fd-inview) .ekit-heading--title,
html.fd-motion-js .at-animation-heading-style-2:not(.fd-inview) .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-2:not(.fd-inview) .ekit-heading--title,
html.fd-motion-js .at-animation-heading-style-3:not(.fd-inview) .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-3:not(.fd-inview) .ekit-heading--title,
html.fd-motion-js .at-animation-heading-style-4:not(.fd-inview) .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-4:not(.fd-inview) .ekit-heading--title {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
html.fd-motion-js .at-animation-heading-style-1 .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-1 .ekit-heading--title,
html.fd-motion-js .at-animation-heading-style-2 .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-2 .ekit-heading--title,
html.fd-motion-js .at-animation-heading-style-3 .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-3 .ekit-heading--title,
html.fd-motion-js .at-animation-heading-style-4 .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-4 .ekit-heading--title {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.fd-motion-js .at-animation-heading-style-1.fd-inview .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-1.fd-inview .ekit-heading--title,
html.fd-motion-js .at-animation-heading-style-2.fd-inview .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-2.fd-inview .ekit-heading--title,
html.fd-motion-js .at-animation-heading-style-3.fd-inview .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-3.fd-inview .ekit-heading--title,
html.fd-motion-js .at-animation-heading-style-4.fd-inview .elementor-heading-title,
html.fd-motion-js .at-animation-heading-style-4.fd-inview .ekit-heading--title {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Distortion hover: light scale instead of WebGL */
html.fd-motion-js .at-distortion-effect img {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
html.fd-motion-js .at-distortion-effect:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  html.fd-motion-js .at-animation-image-style-1 img,
  html.fd-motion-js .at-animation-heading-style-1 .elementor-heading-title,
  html.fd-motion-js .at-animation-heading-style-1 .ekit-heading--title,
  html.fd-motion-js .at-animation-heading-style-2 .elementor-heading-title,
  html.fd-motion-js .at-animation-heading-style-2 .ekit-heading--title,
  html.fd-motion-js .at-animation-heading-style-3 .elementor-heading-title,
  html.fd-motion-js .at-animation-heading-style-3 .ekit-heading--title,
  html.fd-motion-js .at-animation-heading-style-4 .elementor-heading-title,
  html.fd-motion-js .at-animation-heading-style-4 .ekit-heading--title,
  html.fd-motion-js .at-distortion-effect img {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}