/* Private optical study. Only the separate raster layer moves. */
#preview.launch-preview { position: relative; overflow: clip; }
#preview .clip-main { position: relative; isolation: isolate; }
#preview .trailer-prism-layer {
  position: absolute; z-index: -1; inset: -58px -62px; pointer-events: none;
  background: var(--trailer-prism-image, none) center / 100% 100% no-repeat;
  opacity: .9; --prism-start-x: -22px; --prism-start-y: 8px; --prism-x: 28px; --prism-y: -12px;
}
#closing {
  background-image: url("../review/closing-prism.svg"); background-repeat: no-repeat;
  background-size: min(1520px, 116vw) 70px; background-position: center bottom;
}
@media (prefers-reduced-motion: no-preference) {
  #preview.prism-motion-enabled .trailer-prism-layer { animation: prism-drift 14s ease-in-out -2s infinite; animation-play-state: paused; }
  #preview[data-prism-running] .trailer-prism-layer { animation-play-state: running; will-change: transform, opacity; }
}
@keyframes prism-drift {
  0%, 100% { transform: translate3d(var(--prism-start-x), var(--prism-start-y), 0) rotate(-.65deg); opacity: .76; }
  50% { transform: translate3d(var(--prism-x), var(--prism-y), 0) rotate(.9deg); opacity: 1; }
}
@media (max-width: 640px) {
  #preview .trailer-prism-layer { inset: -34px -24px; --prism-start-x: -14px; --prism-start-y: 6px; --prism-x: 18px; --prism-y: -8px; }
  #closing { background-size: 135vw 48px; }
}
@media (prefers-reduced-motion: reduce) {
  #preview .trailer-prism-layer { animation: none !important; transform: none !important; opacity: .9; will-change: auto; }
}
@media (forced-colors: active) {
  #preview .trailer-prism-layer { display: none; }
  #closing { background-image: none; }
}

/* Optional motion has a keyboard-accessible stop control outside the video. */
#preview .prism-pause { position: absolute; right: max(var(--gutter), calc((100% - 1080px) / 2)); bottom: 14px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: #aaa6b3; border-radius: 50%; cursor: pointer; }
#preview .prism-pause::before { content: ""; position: absolute; inset: 6px; border: 1px solid #aaa6b333; border-radius: 50%; pointer-events: none; }
#preview .prism-pause:hover { color: #ead9bc; }
#preview .prism-pause:focus-visible { outline: 2px solid #ead9bc; outline-offset: 2px; }
#preview .prism-pause[hidden], #preview .prism-play-icon { display: none; }
#preview .prism-pause[aria-pressed="true"] .prism-play-icon { display: block; }
#preview .prism-pause[aria-pressed="true"] .prism-pause-icon { display: none; }
@media (max-width: 640px) { #preview .prism-pause { bottom: 8px; } }

/* Preserve the same bottom artwork while moving a separate decorative layer. */
#closing { position: relative; isolation: isolate; overflow: clip; background-image: none; }
#closing .closing-prism-layer { position: absolute; left: -24px; bottom: 0; width: calc(100% + 48px); height: 70px; z-index: -1; pointer-events: none; background: url("../review/closing-prism.svg") center bottom / min(1520px, 116vw) 70px no-repeat; }
#closing .prism-pause { position: absolute; right: max(var(--gutter), calc((100% - 1080px) / 2)); bottom: 8px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: #aaa6b3; border-radius: 50%; cursor: pointer; }
#closing .prism-pause::before { content: ""; position: absolute; inset: 6px; border: 1px solid #aaa6b333; border-radius: 50%; pointer-events: none; }
#closing .prism-pause:hover { color: #ead9bc; }
#closing .prism-pause:focus-visible { outline: 2px solid #ead9bc; outline-offset: 2px; }
#closing .prism-pause[hidden], #closing .prism-play-icon { display: none; }
#closing .prism-pause[aria-pressed="true"] .prism-play-icon { display: block; }
#closing .prism-pause[aria-pressed="true"] .prism-pause-icon { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #closing.prism-motion-enabled .closing-prism-layer { animation: closing-prism-drift 12s ease-in-out -2s infinite; animation-play-state: paused; }
  #closing[data-prism-running] .closing-prism-layer { animation-play-state: running; will-change: transform, opacity; }
}
@keyframes closing-prism-drift { 0%,100% { transform: translate3d(-32px, 2px, 0); opacity: .7; } 50% { transform: translate3d(36px, -16px, 0); opacity: 1; } }
@media (max-width: 640px) { #closing .closing-prism-layer { height: 48px; background-size: 135vw 48px; } }
@media (prefers-reduced-motion: reduce) { #closing .closing-prism-layer { animation: none !important; transform: none !important; opacity: 1; will-change: auto; } }
@media (forced-colors: active) { #closing .closing-prism-layer { display: none; } }