/* Motion system — restrained, responsive and progressive. */
[data-reveal] { opacity: 1; translate: none; }

.motion-ready .motion-reveal {
  opacity: 0;
  translate: 0 16px;
  filter: blur(1.5px);
  transition:
    opacity 680ms var(--ease-out) var(--reveal-delay, 0ms),
    translate 760ms var(--ease-out) var(--reveal-delay, 0ms),
    filter 680ms var(--ease-out) var(--reveal-delay, 0ms);
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

.motion-parallax {
  transform: translate3d(0, var(--scroll-shift, 0px), 0);
  will-change: transform;
}

.editorial-link,
.work-filter {
  translate: var(--magnetic-x, 0px) var(--magnetic-y, 0px);
  transition:
    translate 260ms var(--ease-out),
    color var(--motion-fast),
    border-color var(--motion-fast);
}

.oooo-motion circle,
.oooo-motion line {
  transition: transform var(--motion-slow) var(--ease-out), opacity var(--motion-normal) ease;
}

/* Cross-document transitions in browsers supporting View Transitions. */
::view-transition-old(root) {
  animation: oooo-page-out 180ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: oooo-page-in 360ms var(--ease-out) both;
}

@keyframes oooo-page-out {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes oooo-page-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-ready .motion-reveal { opacity: 1; translate: none; filter: none; }
  .motion-parallax { transform: none !important; }
  .editorial-link, .work-filter { translate: none !important; }
}