/* ==========================================================================
   Atlas Umzüge — Animations
   Scroll reveals, image masks, reduced-motion fallback
   ========================================================================== */

/* --- Scroll reveal --------------------------------------------------------
   Elements carry [data-reveal] and are promoted by IntersectionObserver.
   Only opacity and transform are animated.                              */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal='left']  { transform: translateX(-34px); }
[data-reveal='right'] { transform: translateX(34px); }
[data-reveal='scale'] { transform: scale(0.96); }
[data-reveal='none']  { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Scroll parallax is expressed as a custom property so it can combine with
   the reveal transforms above instead of overwriting them. */
[data-parallax] {
  --parallax-y: 0px;
  --parallax-scale: 1.08;
  transform: translate3d(0, var(--parallax-y), 0) scale(var(--parallax-scale));
  will-change: transform;
}

[data-parallax-scale='1'] { --parallax-scale: 1; }

[data-reveal][data-parallax] {
  transform: translate3d(0, var(--parallax-y), 0) translateY(26px);
}

[data-reveal='left'][data-parallax] {
  transform: translate3d(0, var(--parallax-y), 0) translateX(-34px);
}

[data-reveal='right'][data-parallax] {
  transform: translate3d(0, var(--parallax-y), 0) translateX(34px);
}

[data-reveal='scale'][data-parallax] {
  transform: translate3d(0, var(--parallax-y), 0) scale(0.96);
}

[data-reveal].is-revealed[data-parallax] {
  transform: translate3d(0, var(--parallax-y), 0) scale(var(--parallax-scale));
  will-change: transform;
}

/* Staggering: set --i on children of a [data-stagger] container */

[data-stagger] > * {
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* --- Masked image reveal ---------------------------------------------------
   The wrapper wipes upward, the image counter-scales, so the photo
   appears to settle into place.                                        */

/* The clip sits on the image, never on the observed element: clipping the
   target itself would zero its intersection area and the observer could
   never fire. */
.mask-reveal {
  overflow: hidden;
}

.mask-reveal img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.14);
  transition: clip-path 1s var(--ease-out), transform 1.3s var(--ease-out);
}

.mask-reveal.is-revealed img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* --- Hover zoom on framed media -------------------------------------------- */

.zoom-frame { overflow: hidden; }

.zoom-frame img {
  transition: transform 0.8s var(--ease-out);
}

.zoom-frame:hover img { transform: scale(1.05); }

/* --- Reduced motion --------------------------------------------------------
   Content must be fully visible and usable with motion switched off.   */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  [data-reveal],
  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  [data-parallax],
  [data-reveal][data-parallax],
  [data-reveal].is-revealed[data-parallax] {
    transform: none;
  }

  .mask-reveal img,
  .mask-reveal.is-revealed img {
    clip-path: none;
    transform: none;
  }

  .marquee__track { animation: none; }

  .marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .process__track { height: auto; }

  .process__stage {
    position: static;
    height: auto;
    min-height: 0;
  }
}