/* QUAZE home: finite entrances and scroll-directed assembly. */
[data-motion-scene] {
  --motion-progress: 1;
  --motion-scroll: 0;
}

[data-motion-scene].is-motion-ready [data-motion-node] {
  translate: calc((1 - var(--motion-progress)) * var(--node-x, 0px))
    calc((1 - var(--motion-progress)) * var(--node-y, 0px));
  rotate: calc((1 - var(--motion-progress)) * var(--node-rotate, 0deg));
  scale: calc(.94 + var(--motion-progress) * .06);
  transform-box: fill-box;
  transform-origin: center;
}

[data-motion-scene].is-motion-ready [data-motion-path] {
  stroke-dasharray: var(--motion-path-length, 1);
  stroke-dashoffset: calc((1 - var(--motion-progress)) * var(--motion-path-length, 1));
  opacity: calc(.2 + var(--motion-progress) * .8);
}

[data-motion-scene].is-motion-ready [data-motion-parallax] {
  translate: 0 calc(var(--motion-scroll) * -12px);
}

[data-motion-magnetic],
[data-motion-link] {
  transition: translate 240ms cubic-bezier(.2,.75,.2,1),
    box-shadow 240ms cubic-bezier(.2,.75,.2,1),
    background-color 240ms ease, color 240ms ease;
}

[data-motion-magnetic]:focus-visible,
[data-motion-link]:focus-visible {
  translate: 0 -3px;
}

@media (hover: hover) and (pointer: fine) {
  [data-motion-magnetic]:hover,
  [data-motion-link]:hover {
    translate: 0 -3px;
  }
}

[data-motion-magnetic]:active,
[data-motion-link]:active {
  translate: 0 1px;
  transition-duration: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-motion-scene] [data-motion-node],
  [data-motion-scene] [data-motion-parallax],
  [data-motion-magnetic],
  [data-motion-link] {
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    transition: none !important;
  }
  [data-motion-scene] [data-motion-path] {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
}