/* React + Framer Motion controller feeds these CSS variables on each scene. */
.landing-page {
  /* Фон, видимый после последнего блока и при elastic scroll. */
  background: #050505;
}

.landing-page .site-footer {
  background: linear-gradient(180deg, #090909 0%, #020202 100%);
}

html.landing-scroll-motion-ready [data-scroll-scene] {
  opacity: var(--landing-scene-opacity, 1);
  transform: translate3d(0, var(--landing-scene-y, 0), 0) scale(var(--landing-scene-scale, 1));
  transform-origin: center center;
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  html.landing-scroll-motion-ready [data-scroll-scene] {
    transform: translate3d(0, calc(var(--landing-scene-y, 0) * .45), 0) scale(var(--landing-scene-scale, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.landing-scroll-motion-ready [data-scroll-scene] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
}