/* Site-wide motion — opacity, color, position only (see DESIGN.md) */

/* Scroll reveals */
.motion-reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--motion-transition-panel),
    transform var(--motion-transition-panel);
  transition-delay: var(--motion-stagger, 0ms);
}

.motion-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.motion-reveal--child {
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity var(--motion-transition-panel),
    transform var(--motion-transition-panel);
  transition-delay: var(--motion-stagger, 0ms);
}

.motion-reveal--visible .motion-reveal--child,
.motion-reveal--child.motion-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Homepage hero load */
.hero-home__content .motion-hero-item {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--motion-transition-panel),
    transform var(--motion-transition-panel);
  transition-delay: var(--motion-stagger, 0ms);
}

.hero-home--loaded .motion-hero-item {
  opacity: 1;
  transform: translateY(0);
}

/* Editorial hero load + parallax */
.editorial-hero__layer--back,
.editorial-hero__layer--front {
  transform: translate3d(0, var(--hero-parallax-y, 0), 0);
  will-change: transform;
}

.editorial-hero__scrim {
  opacity: var(--hero-scrim-opacity, 1);
  transition: opacity var(--motion-transition-panel);
}

.editorial-hero__content .motion-hero-item {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--motion-transition-panel),
    transform var(--motion-transition-panel);
  transition-delay: var(--motion-stagger, 0ms);
}

.editorial-hero--loaded .motion-hero-item {
  opacity: 1;
  transform: translateY(0);
}

/* Editorial spread inset lags primary */
.editorial-spread__figure--inset.motion-reveal {
  transition-delay: calc(var(--motion-stagger, 0ms) + var(--motion-duration-fast));
}

/* Pullquote stitch marks */
.editorial-mark__cell {
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
  transition-delay: var(--mark-stagger, 0ms);
}

.editorial-mark--visible .editorial-mark__cell {
  opacity: 1;
}

/* Tapestry stitch-on-scroll */
.tile-accent__cell--cream,
.tile-accent__cell--fill {
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
  transition-delay: var(--stitch-stagger, 0ms);
}

.tile-accent--stitched .tile-accent__cell--cream,
.tile-accent--stitched .tile-accent__cell--fill {
  opacity: 1;
}

/* Toast */
.toast {
  opacity: 0;
  transform: translateX(-50%) translateY(0.5rem);
  transition:
    opacity var(--motion-transition-panel),
    transform var(--motion-transition-panel);
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.is-exiting {
  opacity: 0;
  transform: translateX(-50%) translateY(0.5rem);
  transition-timing-function: var(--motion-easing-exit);
}

/* Catalog whisper crossfade */
.catalog__whisper--fading {
  opacity: 0;
}

/* Product price crossfade */
.product-detail__price {
  position: relative;
}

.product-detail__price-value {
  display: inline-block;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.product-detail__price-value.is-changing {
  opacity: 0;
}

/* Also-like scroll edge hint */
.also-like__track--fade-edges {
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 1.5rem,
    #000 calc(100% - 1.5rem),
    transparent 100%
  );
}

.also-like__nav-btn {
  transition:
    opacity var(--motion-transition-panel),
    color var(--motion-transition-hover);
}

/* Mobile nav panel — open state opacity handled in motion.css */

/* Also-like section swap */
.also-like--swapping .also-like__inner {
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-reveal--child,
  .motion-hero-item,
  .editorial-hero__layer--back,
  .editorial-hero__layer--front,
  .editorial-hero__scrim,
  .editorial-mark__cell,
  .tile-accent__cell--cream,
  .tile-accent__cell--fill,
  .toast,
  .catalog__whisper,
  .product-detail__price-value,
  .also-like__inner,
  .nav__menu-panel {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }

  .motion-reveal,
  .motion-reveal--child {
    opacity: 1;
    transform: none;
  }

  .tile-accent__cell--cream,
  .tile-accent__cell--fill {
    opacity: 1;
  }
}