/*
  Движение камеры и света поверх готовой картинки, не сгенерированное видео.
  Включение: html[data-auth-motion="on"]. Пауза: [data-auth-motion-paused].
  Изображение меняет ракурс уже в первые секунды; текст и форма неподвижны.
*/
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html[data-auth-motion='on']:is([data-auth-visual='monolith'], [data-auth-visual='daylight'], [data-auth-visual='bluehour']) .auth-visual__image {
    will-change: transform;
    backface-visibility: hidden;
    animation: var(--auth-motion-camera) var(--auth-motion-duration) cubic-bezier(.42, 0, .58, 1) var(--auth-motion-delay) infinite both;
  }
  html[data-auth-motion='on']:is([data-auth-visual='monolith'], [data-auth-visual='daylight'], [data-auth-visual='bluehour']) .auth-visual__art::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform, opacity;
    animation: var(--auth-motion-light) var(--auth-motion-duration) cubic-bezier(.42, 0, .58, 1) var(--auth-motion-delay) infinite both;
  }

  /* Титан: движение камеры и широкое отражение на металле. */
  html[data-auth-motion='on'][data-auth-visual='monolith'] {
    --auth-motion-camera: auth-monolith-camera;
    --auth-motion-light: auth-metal-reflection;
    --auth-motion-duration: 12s;
    --auth-motion-delay: -1.5s;
  }
  html[data-auth-motion='on'][data-auth-visual='monolith'] .auth-visual__image { transform-origin: 50% 46%; }
  html[data-auth-motion='on'][data-auth-visual='monolith'] .auth-visual__art::after {
    background: linear-gradient(113deg, transparent 25%, rgba(233, 241, 255, .16) 42%, rgba(255, 255, 255, .26) 48%, transparent 61%);
    mask-image: radial-gradient(ellipse 49% 43% at 50% 48%, #000 40%, transparent 92%);
    mix-blend-mode: screen;
  }

  /* Дневной свет: естественный параллакс и рассеянный свет от окна. */
  html[data-auth-motion='on'][data-auth-visual='daylight'] {
    --auth-motion-camera: auth-daylight-camera;
    --auth-motion-light: auth-daylight-light;
    --auth-motion-duration: 16s;
    --auth-motion-delay: -2.5s;
  }
  html[data-auth-motion='on'][data-auth-visual='daylight'] .auth-visual__image { transform-origin: 43% 58%; }
  html[data-auth-motion='on'][data-auth-visual='daylight'] .auth-visual__art::after {
    background: radial-gradient(ellipse 94% 78% at -5% 28%, rgba(255, 251, 234, .25), rgba(255, 247, 226, .07) 55%, transparent 83%);
  }

  /* Синий час: камера вдоль окна, мягкий тёплый свет настольной лампы. */
  html[data-auth-motion='on'][data-auth-visual='bluehour'] {
    --auth-motion-camera: auth-bluehour-camera;
    --auth-motion-light: auth-evening-light;
    --auth-motion-duration: 16s;
    --auth-motion-delay: -2.5s;
  }
  html[data-auth-motion='on'][data-auth-visual='bluehour'] .auth-visual__image { transform-origin: 56% 48%; }
  html[data-auth-motion='on'][data-auth-visual='bluehour'] .auth-visual__art::after {
    background: radial-gradient(ellipse 42% 43% at 22% 39%, rgba(255, 201, 123, .21), rgba(255, 214, 155, .06) 52%, transparent 82%);
    mix-blend-mode: screen;
  }

  html[data-auth-motion='on'][data-auth-motion-paused] .auth-visual__image,
  html[data-auth-motion='on'][data-auth-motion-paused] .auth-visual__art::after { animation-play-state: paused; }
}

@keyframes auth-monolith-camera {
  0%, 100% { transform: perspective(1200px) translate3d(-.8%, .4%, 0) rotateX(.15deg) rotateY(-.5deg) scale(1.03); }
  50% { transform: perspective(1200px) translate3d(.8%, -.4%, 0) rotateX(-.15deg) rotateY(.5deg) scale(1.05); }
}
@keyframes auth-daylight-camera {
  0%, 100% { transform: translate3d(-1%, .5%, 0) scale(1.03); }
  50% { transform: translate3d(1%, -.5%, 0) scale(1.05); }
}
@keyframes auth-bluehour-camera {
  0%, 100% { transform: translate3d(1%, .4%, 0) scale(1.03); }
  50% { transform: translate3d(-1%, -.5%, 0) scale(1.05); }
}
@keyframes auth-metal-reflection {
  0%, 100% { opacity: .15; transform: translate3d(-12%, -1%, 0); }
  50% { opacity: .65; transform: translate3d(12%, 1%, 0); }
}
@keyframes auth-daylight-light {
  0%, 100% { opacity: .18; transform: translate3d(-2%, 0, 0); }
  50% { opacity: .6; transform: translate3d(2%, 1%, 0); }
}
@keyframes auth-evening-light {
  0%, 100% { opacity: .2; transform: translate3d(-1%, 0, 0); }
  50% { opacity: .58; transform: translate3d(1%, -.5%, 0); }
}