/* ============================================
   FenceX Motion System
   Scroll reveals
   ============================================ */

:root {
  --motion-reveal-duration: 520ms;
  --motion-reveal-distance: 10px;
  --motion-reveal-blur: 4px;
}

/* Ensure content renders above background layer */
body {
  position: relative;
  z-index: 0;
}

#nav-root,
main,
footer,
header {
  position: relative;
  z-index: 1;
}

/* ============================================
   Scroll Reveal System
   ============================================ */
.fx-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-distance), 0);
  filter: blur(var(--motion-reveal-blur));
  transition: opacity var(--motion-reveal-duration) var(--ease-out),
              transform var(--motion-reveal-duration) var(--ease-out),
              filter var(--motion-reveal-duration) var(--ease-out);
  will-change: transform, opacity, filter;
}

.fx-reveal.is-visible,
.fx-reveal.fx-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.fx-reveal--left {
  transform: translate3d(calc(-1 * var(--motion-reveal-distance)), 0, 0);
}

.fx-reveal--right {
  transform: translate3d(var(--motion-reveal-distance), 0, 0);
}

.fx-reveal--pop {
  transform: scale(0.97);
}

.fx-reveal--left.is-visible,
.fx-reveal--right.is-visible,
.fx-reveal--pop.is-visible,
.fx-reveal--left.fx-visible,
.fx-reveal--right.fx-visible,
.fx-reveal--pop.fx-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}