:root {
  --editorial-motion-distance: clamp(32px, 6vw, 88px);
  --editorial-motion-duration: 1s;
  --editorial-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --editorial-motion-overlay: linear-gradient(180deg, rgba(10, 6, 8, 0) 0%, rgba(10, 6, 8, 0.55) 100%);
}

html.motion-enabled [data-editorial-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--editorial-motion-distance), 0);
  will-change: opacity, transform;
}

html.motion-enabled [data-editorial-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-lottie-src],
[data-three-scene] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-lottie-src]::after,
[data-three-scene]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--editorial-motion-overlay);
  opacity: var(--editorial-motion-overlay-opacity, 0);
  pointer-events: none;
}

[data-lottie-src][data-motion-state='reduced'] {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

[data-lottie-src] svg,
[data-lottie-src] canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

[data-three-scene] {
  min-height: clamp(220px, 40vw, 640px);
}

.editorial-motion-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html.motion-reduce [data-editorial-reveal],
html.motion-reduce [data-lottie-src],
html.motion-reduce [data-three-scene] {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

html.motion-reduce [data-editorial-reveal] {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --editorial-motion-duration: 0s;
    --editorial-motion-distance: 0px;
  }
}