/* Stitch project 8190051736196894964: A05 Motion v2. */
.scene .scene-art {
  animation: none;
  transform: none;
  will-change: auto;
}

/* Match object-fit: cover coordinates; clip out the central portrait. */
.scene .archive-moonlight {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 179.166667vh);
  height: max(100vh, 55.813954vw);
  transform: translate(-50%, -50%);
  clip-path: polygon(68% 4%, 81% 4%, 88% 60%, 62% 60%, 62% 28%);
  overflow: hidden;
  pointer-events: none;
}

.scene .archive-moonbeam {
  position: absolute;
  top: -10%;
  left: 57%;
  width: 38%;
  height: 90%;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.scene .archive-moonbeam-one {
  background: linear-gradient(105deg, transparent 0%, rgba(185,240,230,.28) 45%, rgba(220,255,250,.35) 52%, rgba(180,240,230,.08) 65%, transparent 100%);
  animation: moonbeamDriftOne 6.5s ease-in-out infinite;
}

.scene .archive-moonbeam-two {
  background: linear-gradient(110deg, transparent 0%, rgba(180,240,230,.18) 40%, rgba(215,255,250,.28) 50%, rgba(170,230,220,.05) 60%, transparent 100%);
  animation: moonbeamDriftTwo 6.5s ease-in-out -3.2s infinite;
}

@keyframes moonbeamDriftOne {
  0%, 100% { transform: translate3d(-15%, -20%, 0) rotate(-25deg); opacity: .2; }
  50% { transform: translate3d(8%, 10%, 0) rotate(-25deg); opacity: .55; }
}

@keyframes moonbeamDriftTwo {
  0%, 100% { transform: translate3d(20%, -10%, 0) rotate(-23deg); opacity: .45; }
  50% { transform: translate3d(-5%, 15%, 0) rotate(-23deg); opacity: .22; }
}

html:is([data-motion="paused"], [data-motion="hidden"]) .archive-moonlight,
html:is([data-motion="paused"], [data-motion="hidden"]) .archive-moonlight::before,
html:is([data-motion="paused"], [data-motion="hidden"]) .archive-moonlight::after,
html:is([data-motion="paused"], [data-motion="hidden"]) .archive-moonlight *,
html:is([data-motion="paused"], [data-motion="hidden"]) .archive-moonlight *::before,
html:is([data-motion="paused"], [data-motion="hidden"]) .archive-moonlight *::after {
  animation-play-state: paused;
}

@media (max-width: 600px) {
  .scene .archive-moonlight {
    /* The mobile art is 960x536 inside the existing 470px scene. */
    top: 0;
    width: max(100%, 841.791045px);
    height: max(470px, 55.833334vw);
    transform: translateX(-50%);
    clip-path: polygon(65% 4%, 82% 4%, 88% 60%, 61.5% 60%, 61.5% 30%);
  }
}