/*
 * Common motion primitives.
 * Add data-motion to an element only when its section motion is specified.
 * `translate` and `scale` are intentionally used instead of `transform`, so
 * existing layout transforms such as translateX(-50%) remain untouched.
 */

html.motion-ready [data-motion] {
  opacity: 0;
  transition-property: opacity, translate, scale;
  transition-duration: var(--motion-duration, 0.85s);
  transition-delay: var(--motion-delay, 0s);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: auto;
}

html.motion-ready [data-motion-load] {
  will-change: opacity, translate, scale;
}

.stage-mobile [data-motion] { --motion-distance: 36px; }
.stage-desktop [data-motion] { --motion-distance: 60px; }

html.motion-ready [data-motion="fade-in"] {
  --motion-duration: 1.1s;
}

html.motion-ready [data-motion="slide-fade-left"] {
  translate: var(--motion-distance, 36px) 0;
  --motion-duration: 1.25s;
}

html.motion-ready [data-motion="slide-fade-right"] {
  translate: calc(var(--motion-distance, 36px) * -1) 0;
  --motion-duration: 1.25s;
}

html.motion-ready [data-motion="slide-fade-up"] {
  translate: 0 var(--motion-distance, 36px);
  --motion-duration: 1.25s;
}

html.motion-ready [data-motion="slide-fade-down"] {
  translate: 0 calc(var(--motion-distance, 36px) * -1);
  --motion-duration: 1.25s;
}

html.motion-ready [data-motion="fade-zoom"] {
  scale: 0.9;
  --motion-duration: 0.9s;
}

html.motion-ready [data-motion="fade-zoom-80"] {
  scale: 0.8;
  --motion-duration: 0.9s;
}

/* First-view sequence only. Individual transform properties preserve layout transforms. */
html.motion-ready [data-motion="fv-photo"] {
  scale: 1.04;
  --motion-duration: 1.4s;
}

html.motion-ready [data-motion="fv-title"] {
  --motion-duration: 1.2s;
  --motion-delay: 0.25s;
}

html.motion-ready [data-motion="fv-copy"] {
  translate: 0 12px;
  --motion-duration: 1.1s;
}

html.motion-ready [data-motion="fv-button"] {
  --motion-duration: 0.8s;
}

html.motion-ready [data-motion="info-button"] {
  --motion-duration: 1.3s;
}

/* About (section 02) onward: approximately 30% faster than the approved base motion. */
html.motion-ready [data-motion="fade-in"]:not([data-motion-load]) {
  --motion-duration: 0.77s;
}

html.motion-ready [data-motion="slide-fade-left"]:not([data-motion-load]),
html.motion-ready [data-motion="slide-fade-right"]:not([data-motion-load]),
html.motion-ready [data-motion="slide-fade-up"]:not([data-motion-load]),
html.motion-ready [data-motion="slide-fade-down"]:not([data-motion-load]) {
  --motion-duration: 0.875s;
}

html.motion-ready [data-motion="fade-zoom"]:not([data-motion-load]),
html.motion-ready [data-motion="fade-zoom-80"]:not([data-motion-load]) {
  --motion-duration: 0.63s;
}

html.motion-ready [data-motion="fv-copy"]:not([data-motion-load]) {
  --motion-duration: 0.77s;
}

html.motion-ready [data-motion="info-button"]:not([data-motion-load]) {
  --motion-duration: 0.91s;
}

html.motion-ready [data-motion].is-motion-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-motion],
  html.motion-ready [data-motion].is-motion-visible {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
    will-change: auto;
  }
}