/*
 * Scroll motion — editorial streetwear motion layer.
 *
 * The ready class is deliberately opt-in: without the companion script, or if
 * the observer cannot be created, every target remains visible by default.
 */

.scroll-motion-ready .motion-reveal-pending,
.scroll-motion-ready .motion-reveal-visible {
  --motion-enter-y: 0px;
  transition-property: opacity, translate;
  transition-duration: 680ms;
  transition-timing-function: cubic-bezier(.2, .72, .2, 1);
  transition-delay: var(--motion-enter-delay, 0ms);
  translate: 0 calc(var(--motion-parallax-y, 0px) + var(--motion-enter-y, 0px));
}

.scroll-motion-ready .motion-reveal-pending {
  --motion-enter-y: 22px;
  opacity: 0;
}

.scroll-motion-ready .motion-reveal-visible {
  --motion-enter-y: 0px;
  opacity: 1;
}

/* Gallery cards enter as a quiet image sequence, including native horizontal tracks. */
.scroll-motion-ready .motion-gallery-item {
  transition-duration: 760ms;
}

/* Parallax stays intentionally small so editorial composition remains calm. */
.scroll-motion-ready .motion-parallax {
  translate: 0 calc(var(--motion-parallax-y, 0px) + var(--motion-enter-y, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .scroll-motion-ready .motion-reveal-pending,
  .scroll-motion-ready .motion-reveal-visible,
  .scroll-motion-ready .motion-gallery-item,
  .scroll-motion-ready .motion-parallax {
    opacity: 1;
    transition: none;
    translate: 0 0;
    will-change: auto;
  }
}

/* Keyboard focus never waits for an entrance animation. */
.scroll-motion-ready .motion-reveal-visible:focus-within {
  opacity: 1;
  --motion-enter-y: 0px;
  transition-duration: 0ms;
  transition-delay: 0ms;
}