/* ==========================================================================
   motion.css — premium, restrained motion layer (paired with /js/motion.js).

   The hidden initial state for [data-reveal] is gated behind html.has-motion,
   which motion.js adds ONLY when animation is permitted (JS on, Intersection
   Observer present, reduced-motion not requested). Without that class every
   element renders in its final, visible state — so content is never trapped
   invisible. The global prefers-reduced-motion guard in base.css is the second
   safety net.
   ========================================================================== */

/* --- scroll reveal -------------------------------------------------------- */
html.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.72s var(--ease),
    transform 0.72s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.has-motion [data-reveal="left"] {
  transform: translateX(-30px);
}
html.has-motion [data-reveal="right"] {
  transform: translateX(30px);
}
html.has-motion [data-reveal="scale"] {
  transform: scale(0.95);
}
html.has-motion [data-reveal="none"] {
  transform: none;
}

html.has-motion [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* --- stagger: children of a [data-stagger] cascade in -------------------- */
html.has-motion [data-stagger] > [data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
html.has-motion [data-stagger] > [data-reveal]:nth-child(2) { --reveal-delay: 70ms; }
html.has-motion [data-stagger] > [data-reveal]:nth-child(3) { --reveal-delay: 140ms; }
html.has-motion [data-stagger] > [data-reveal]:nth-child(4) { --reveal-delay: 210ms; }
html.has-motion [data-stagger] > [data-reveal]:nth-child(5) { --reveal-delay: 280ms; }
html.has-motion [data-stagger] > [data-reveal]:nth-child(6) { --reveal-delay: 350ms; }
html.has-motion [data-stagger] > [data-reveal]:nth-child(7) { --reveal-delay: 420ms; }
html.has-motion [data-stagger] > [data-reveal]:nth-child(8) { --reveal-delay: 490ms; }

/* --- hero parallax: keep the footage from showing edges while it shifts --- */
.hero-video__bg {
  will-change: transform;
  transform: scale(1.12);
}

/* --- marquee (logos / clients) ------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(34px, 5vw, 72px);
  width: max-content;
  animation: marqueeScroll 42s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- hover micro-interactions: subtle media zoom ------------------------- */
.dir-card__media,
.product-card__media,
.news-card__media {
  overflow: hidden;
}

.dir-card__media img,
.product-card__media img,
.news-card__media img {
  transition: transform 0.55s var(--ease);
}

.dir-card:hover .dir-card__media img,
.product-card:hover .product-card__media img,
.news-card:hover .news-card__media img {
  transform: scale(1.06);
}

/* button arrows nudge forward on hover */
.btn .arr {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.btn:hover .arr {
  transform: translateX(4px);
}

.btn .arr--back {
  transition: transform 0.25s var(--ease);
}

.btn:hover .arr--back {
  transform: translateX(-4px);
}

/* --- reduced motion: hard stop ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.has-motion [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-video__bg {
    transform: none;
  }
  .marquee__track {
    animation: none;
  }
}