/* A21 Motion v2: local stained-glass shafts; keep the illustration still. */
.scene .scene-art {
  animation: none;
  transform: scale(1.005) translateX(0);
}

.scene > [data-scene-motion] {
  position: absolute;
  top: -30px;
  width: clamp(48px, 7%, 112px);
  height: min(30svh, 250px);
  pointer-events: none;
  transform-origin: 50% 0;
  clip-path: polygon(42% 0, 62% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg,
    rgb(var(--shaft-color) / 0.05) 0%,
    rgb(var(--shaft-color) / 0.5) 20%,
    rgb(var(--shaft-color) / 0.28) 58%,
    rgb(var(--shaft-color) / 0) 100%);
  animation: a21-glass-drift 7.5s ease-in-out infinite;
  will-change: transform, opacity;
}

.scene > .glass-shaft--turquoise {
  --shaft-color: 121 239 223;
  --shaft-angle: 17deg;
  --shaft-drift: 28px;
  left: 44%;
  animation-delay: -0.8s;
}

.scene > .glass-shaft--rose {
  --shaft-color: 245 151 174;
  --shaft-angle: -12deg;
  --shaft-drift: -24px;
  left: 56%;
  animation-delay: -3.1s;
}

.scene > .glass-shaft--pearl {
  --shaft-color: 207 235 248;
  --shaft-angle: 14deg;
  --shaft-drift: 22px;
  right: 0;
  animation-delay: -5.2s;
}

@keyframes a21-glass-drift {
  0%, 100% {
    transform: translate3d(0, -7px, 0) rotate(var(--shaft-angle));
    opacity: 0.38;
  }
  50% {
    transform: translate3d(var(--shaft-drift), 12px, 0) rotate(var(--shaft-angle));
    opacity: 0.9;
  }
}

html[data-motion="paused"] .scene > [data-scene-motion],
html[data-motion="hidden"] .scene > [data-scene-motion] {
  animation-play-state: paused;
}

/* Confine mobile light to the upper architecture, above the title and entries. */
@media (max-width: 640px) {
  .scene > [data-scene-motion] {
    top: -20px;
    width: 44px;
    height: min(22svh, 160px);
  }

  .scene > .glass-shaft--turquoise {
    left: 2%;
    --shaft-angle: -10deg;
    --shaft-drift: 16px;
  }

  .scene > .glass-shaft--rose {
    left: 17%;
    --shaft-angle: -7deg;
    --shaft-drift: -14px;
  }

  .scene > .glass-shaft--pearl {
    right: -8px;
    --shaft-angle: 12deg;
    --shaft-drift: 14px;
  }
}
