/*
 * Zero Next One BASE NIIKAPPU
 * Atmospheric motion composition layer v2.3.0
 *
 * Static design remains untouched. These variables are activated by JavaScript
 * only while motion controllers are mounted.
 */

.page-top [data-motion-fluid="true"],
.page-top [data-motion-depth="true"] {
  --motion-scroll-x: 0px;
  --motion-scroll-y: 0px;
  --motion-scroll-scale: 1;
  --motion-pointer-x: 0px;
  --motion-pointer-y: 0px;
  --motion-depth-scale: 1;
  --motion-ambient-x: 0px;
  --motion-ambient-y: 0px;
  --motion-ambient-scale: 1;
  --motion-inertia-x: 0px;
  --motion-inertia-y: 0px;
  --motion-inertia-rotate: 0deg;
  --motion-inertia-scale: 1;

  transform:
    translate3d(
      calc(
        var(--motion-scroll-x)
        + var(--motion-pointer-x)
        + var(--motion-ambient-x)
        + var(--motion-inertia-x)
      ),
      calc(
        var(--motion-scroll-y)
        + var(--motion-pointer-y)
        + var(--motion-ambient-y)
        + var(--motion-inertia-y)
      ),
      0
    )
    rotate(var(--motion-inertia-rotate))
    scale(var(--motion-depth-scale))
    scale(var(--motion-scroll-scale))
    scale(var(--motion-ambient-scale))
    scale(var(--motion-inertia-scale));
  transform-origin: center center;
  will-change: transform;
}

/* v2.3 does not use the line wrappers as hard digital masks. */
.page-top.is-top-atelier-ready .c-motion-line-mask,
body.is-top-atelier-ready .page-top .c-motion-line-mask {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .page-top [data-motion-fluid="true"],
  .page-top [data-motion-depth="true"] {
    transform: none !important;
    will-change: auto;
  }
}