/* New movement uses separate layers, preserving the existing scroll transforms. */
.artwork-window { --lane-travel: 30px; }
.artwork-lane {
  animation: collage-glide 14s ease-in-out infinite alternate;
  animation-delay: -5s;
}
.artwork-lane:nth-child(even) { animation-direction: alternate-reverse; animation-duration: 18s; }
.artwork-lane:nth-child(3n) { animation-delay: -11s; animation-duration: 21s; }
.opening-frame::before {
  content: "";
  position: absolute;
  inset: -1px auto auto -1px;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b79aff, #65e5e0, transparent);
  animation: frame-travel 8s ease-in-out infinite alternate;
}
.opening-prisms { position: absolute; inset: 0; pointer-events: none; }
.opening-prisms i {
  position: absolute;
  width: 18%;
  height: 140%;
  left: 66%;
  top: -20%;
  border-left: 1px solid #b79aff66;
  background: linear-gradient(90deg, #b79aff10, transparent 75%);
  transform: translate3d(var(--design-x, 0px), var(--design-y, 0px), 0) skew(-22deg);
  animation: prism-glide 15s ease-in-out infinite alternate;
}
.opening-prisms i:nth-child(2) {
  left: 88%;
  width: 9%;
  border-color: #65e5e070;
  background: linear-gradient(90deg, #65e5e017, transparent);
  animation-direction: alternate-reverse;
  animation-delay: -6s;
}
.opening-prisms i:nth-child(3) {
  left: 45%;
  width: 2%;
  border: 0;
  background: #ffffff09;
  animation-duration: 19s;
  animation-delay: -9s;
}
.scroll-line { position: relative; overflow: hidden; }
.scroll-line::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 14px;
  background: var(--game-accent);
  animation: scroll-tick 2.4s ease-in-out infinite;
}
.gap-prism { animation: divider-float 6s ease-in-out infinite alternate; }
.gap-prism i { animation: prism-faces 5s ease-in-out infinite alternate; }
.gap-prism i:nth-child(2) { animation-delay: -2s; }
.gap-prism i:nth-child(3) { animation-delay: -4s; }
.gap-tile { animation: divider-float 8s ease-in-out infinite alternate-reverse; }

/* Diagonal shutters open before the scene reaches its reading position. */
.scene-transition {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
  opacity: clamp(0, calc((1 - var(--scene-arrival, 1)) * 20), 1);
}
.scene-transition i {
  position: absolute;
  inset: -1px 36% -1px -16%;
  background: var(--world-shade);
  border-right: 2px solid color-mix(in srgb, var(--world-accent) 65%, transparent);
  transform: translate3d(calc(var(--scene-arrival, 1) * -130%), 0, 0) skew(-16deg);
}
.scene-transition i + i {
  inset: -1px -16% -1px 36%;
  border-right: 0;
  border-left: 2px solid color-mix(in srgb, var(--world-accent) 65%, transparent);
  transform: translate3d(calc(var(--scene-arrival, 1) * 130%), 0, 0) skew(-16deg);
}
[data-theme="light"] .scene-transition i { background: #e8edf3; }

/* Glass-like fragments stay beside the artwork, behind the reading layers. */
.scene-facets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  color: var(--world-accent);
  transform: translate3d(calc(var(--pointer-x, 0px) * -.6), calc(var(--symbol-y, 0px) * .35), 0);
}
.scene-facets i {
  position: absolute;
  right: 6%;
  top: 14%;
  width: 32%;
  height: 68%;
  border: 1px solid color-mix(in srgb, currentColor 36%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, currentColor 9%, transparent), transparent 45%);
  transform: skew(-12deg) rotate(-8deg);
  animation: facet-float 11s ease-in-out infinite alternate;
  animation-delay: var(--life-offset, 0s);
}
.scene-facets i:nth-child(2) {
  right: 2%;
  top: 10%;
  width: 9%;
  height: 34%;
  background: color-mix(in srgb, currentColor 10%, transparent);
  clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%);
  animation-duration: 8s;
  animation-direction: alternate-reverse;
}
.scene-facets i:nth-child(3) {
  top: 70%;
  right: 36%;
  width: 46px;
  height: 46px;
  background: none;
  transform: rotate(35deg);
  animation-duration: 13s;
}
.scene-reverse .scene-facets { scale: -1 1; }
[data-collection="games"].world-scene .scene-facets i:first-child {
  transform: perspective(900px) rotateX(20deg) rotateY(-15deg) rotate(-12deg);
  border-style: dashed;
}
.env-couture .scene-facets i:nth-child(2) { width: 3%; background: #ffffff26; }
.env-gilded .scene-facets i:first-child { transform: rotate(5deg); border-style: double; border-width: 3px; }
.env-orbit .scene-facets i:first-child { transform: perspective(900px) rotateX(54deg) rotate(-24deg); }
[data-theme="light"] .scene-facets { color: color-mix(in srgb, var(--world-accent) 45%, #273349); opacity: .75; }

/* A restrained moving reflection makes the posters feel like physical objects. */
.poster-mount { overflow: hidden; }
.poster-mount::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #ffffff00 43%, #ffffff24 49%, #ffffff06 56%, transparent 64%);
  animation: poster-reflection 12s ease-in-out infinite;
  animation-delay: var(--life-offset, 0s);
}
.poster-corner { z-index: 2; }
.poster-mount::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 2;
  border: 1px solid #ffffff00;
  pointer-events: none;
  transition: border-color .55s ease, inset .55s ease;
}
.scene-poster:is(:hover, :focus-visible) .poster-mount::before { border-color: #ffffff85; inset: 14px; }
.project-link > span, .round-link > span, .text-link > span, .contact-arrow {
  display: inline-block;
  transition: translate .45s cubic-bezier(.22,.61,.36,1);
}
.project-link:is(:hover, :focus-visible) > span,
.round-link:is(:hover, :focus-visible) > span,
.text-link:is(:hover, :focus-visible) > span { translate: 4px -4px; }
.contact-headline:is(:hover, :focus-visible) .contact-arrow { translate: 12px -12px; }

@keyframes collage-glide { from { translate: 0 calc(var(--lane-travel) * -1); } to { translate: 0 var(--lane-travel); } }
@keyframes prism-glide { from { translate: -35px 0; opacity: .5; } to { translate: 35px 0; opacity: 1; } }
@keyframes frame-travel { from { translate: 0 0; } to { translate: 190% 0; } }
@keyframes scroll-tick { 0% { translate: 0 -16px; opacity: 0; } 25% { opacity: 1; } 100% { translate: 0 48px; opacity: 0; } }
@keyframes divider-float { from { translate: 0 -8px; rotate: -5deg; } to { translate: 0 8px; rotate: 5deg; } }
@keyframes prism-faces { from { opacity: .5; } to { opacity: 1; } }
@keyframes facet-float { from { translate: -12px 14px; rotate: -3deg; } to { translate: 12px -14px; rotate: 3deg; } }
@keyframes poster-reflection { 0%, 12% { translate: -65% 0; opacity: 0; } 28% { opacity: .8; } 58%, 100% { translate: 65% 0; opacity: 0; } }

.motion-paused .scene-transition { visibility: hidden; }
.motion-paused .scene-facets, .motion-paused .opening-prisms i { transform: none; }
.motion-paused .project-link > span, .motion-paused .round-link > span,
.motion-paused .text-link > span, .motion-paused .contact-arrow { translate: none; transition: none; }
.motion-paused .poster-mount::before { transition: none; }
.text-selection-active .artwork-lane,
.text-selection-active .opening-prisms i,
.text-selection-active .scene-facets i,
.text-selection-active .poster-mount::after { animation-play-state: paused !important; }
@media (max-width: 760px) {
  .artwork-window { --lane-travel: 15px; }
  .opening-prisms i:nth-child(3), .scene-facets i:nth-child(n+2) { display: none; }
  .scene-facets { opacity: .55; }
  .scene-facets i { top: 39%; right: 5%; width: 43%; height: 44%; }
  .scene-transition i { border-width: 1px; }
  .scene-poster .poster-mount::after { animation-duration: 16s; }
}
@media print {
  .scene-transition, .scene-facets, .opening-prisms, .poster-mount::after { display: none !important; }
}