/**
 * Scroll-driven motion utilities (pairs with assets/js/animation.js).
 * Motion runs only at min-width: 1200px (see animation.js MOTION_MEDIA).
 */

@media (min-width: 1200px) {
  /*
   * Do not set opacity: 0 here: GSAP animates opacity (fade-in). A static
   * opacity: 0 in CSS can leave content invisible if JS is late or fails.
   */

  /* Parallax layers: clip overflow in editor / templates as needed */
  [data-scroll-parallax],
  .scroll-parallax {
    will-change: transform;
  }

  .scroll-parallax__inner,
  [data-scroll-parallax] > img,
  [data-scroll-parallax] > picture {
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
  }

  .scroll-anim-hover {
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.35s ease;
  }

  .scroll-anim-hover:hover,
  .scroll-anim-hover:focus-visible {
    transform: translateY(-2px);
  }

  /* Masthead init timeline (animation.js buildInitAnimations) */
  [data-anim-init='masthead'] .masthead__wrapper,
  [data-anim-init='masthead'] .masthead__info h1,
  [data-anim-init='masthead'] .masthead__info .masthead__button,
  [data-anim-init='masthead'] img.hero-image,
  [data-anim-init='masthead'] img.masthead__bg {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  [data-anim-init='inner-masthead'] .masthead__row,
  [data-anim-init='inner-masthead'] .image-text__text > *,
  [data-anim-init='inner-masthead'] .image-text__img img {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

    [data-scroll-reveal],
    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right,
    .scroll-reveal-down,
    .scroll-reveal-zoom,
    .scroll-reveal-fade {
        will-change: transform, opacity;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
}

/*
 * Below desktop breakpoint or reduced motion: strip transforms/opacity so
 * content never stays hidden (resize mobile <-> desktop, no JS on narrow viewports).
 */
@media (max-width: 1199px), (prefers-reduced-motion: reduce) {
  .scroll-anim-hover {
    transition: none;
  }

  .scroll-anim-hover:hover,
  .scroll-anim-hover:focus-visible {
    transform: none;
  }

  [data-scroll-reveal],
  [data-scroll-stagger] > *,
  [data-scroll-parallax],
  .scroll-reveal,
  .scroll-reveal-down,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-zoom,
  .scroll-reveal-fade,
  .scroll-stagger > *,
  .scroll-parallax,
  [data-anim-init='masthead'] .masthead__wrapper,
  [data-anim-init='masthead'] .masthead__info h1,
  [data-anim-init='masthead'] .masthead__info .masthead__button,
  [data-anim-init='masthead'] img.hero-image,
  [data-anim-init='masthead'] img.masthead__bg {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-anim-init='inner-masthead'] .masthead__row,
  [data-anim-init='inner-masthead'] .image-text__text > *,
  [data-anim-init='inner-masthead'] .image-text__img img {
    opacity: 1 !important;
    transform: none !important;
  }
}