:root {
  color-scheme: dark;
  --night: #09070c;
  --ink: #fff7e8;
  --gold: #ffd36a;
  --glass: rgb(9 7 12 / 58%);
  --glass-hover: rgb(9 7 12 / 82%);
  --edge: rgb(255 247 232 / 30%);
  --fade: 2.4s;
  --hold: 12.4s;
  --video-height: 30vh;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--night); color: var(--ink); }
body { font-family: ui-sans-serif, system-ui, sans-serif; }

.stage { position: fixed; inset: 0; overflow: hidden; background: var(--night); }
.slides { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity var(--fade) ease-in-out, visibility 0s linear var(--fade); }
.slide.is-current { z-index: 2; opacity: 1; visibility: visible; transition: opacity var(--fade) ease-in-out, visibility 0s; }
.slide.is-previous { z-index: 1; opacity: 1; visibility: visible; transition: none; }

.slide img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.slide .backdrop { display: none; object-fit: cover; filter: blur(28px) saturate(1.3) brightness(.66); transform: scale(1.14); }
.photo { object-fit: cover; object-position: 50% 30%; transform-origin: 50% 30%; }
.slide.is-current .photo, .slide.is-previous .photo { animation: drift var(--hold) ease-out both; }
.paused .slide .photo { animation-play-state: paused; }

@keyframes drift {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}

/* Keep the whole artwork, including its headline, on tall or very wide screens. */
@media (max-aspect-ratio: 4/3), (min-aspect-ratio: 2/1) {
  .slide .backdrop { display: block; }
  .photo { object-fit: contain; object-position: 50% 50%; transform-origin: 50% 50%; }
}

/* Feather the contained artwork into its own blurred field. */
@media (max-aspect-ratio: 4/3) {
  .photo {
    --edge-a: calc(50% - 28.125vw);
    --edge-b: calc(50% + 28.125vw);
    -webkit-mask-image: linear-gradient(transparent var(--edge-a), #000 calc(var(--edge-a) + 3vw), #000 calc(var(--edge-b) - 3vw), transparent var(--edge-b));
    mask-image: linear-gradient(transparent var(--edge-a), #000 calc(var(--edge-a) + 3vw), #000 calc(var(--edge-b) - 3vw), transparent var(--edge-b));
  }
}
/* Portrait screens trade a sliver of each side for a larger scene. */
@media (max-aspect-ratio: 1/1) {
  .slide .photo { left: -5vw; width: 110vw; }
  .photo { --edge-a: calc(50% - 30.9375vw); --edge-b: calc(50% + 30.9375vw); }
}
@media (min-aspect-ratio: 2/1) {
  .photo {
    --edge-a: calc(50% - 88.889vh);
    --edge-b: calc(50% + 88.889vh);
    -webkit-mask-image: linear-gradient(90deg, transparent var(--edge-a), #000 calc(var(--edge-a) + 5vh), #000 calc(var(--edge-b) - 5vh), transparent var(--edge-b));
    mask-image: linear-gradient(90deg, transparent var(--edge-a), #000 calc(var(--edge-a) + 5vh), #000 calc(var(--edge-b) - 5vh), transparent var(--edge-b));
  }
}

.video-slot { --video-width: min(92vw, calc(var(--video-height) * 16 / 9)); --video-box-height: calc(var(--video-width) * 9 / 16); position: absolute; z-index: 4; top: 50%; left: 50%; width: var(--video-width); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); overflow: hidden; border-radius: 6px; background: #000; box-shadow: 0 22px 60px rgb(0 0 0 / 50%); }
.video-slot[hidden] { display: none; }
.video-slot iframe { display: block; width: 100%; height: 100%; border: 0; }
/* The artwork headline sits mid-screen on phones, so the video moves below it. */
@media (max-aspect-ratio: 1/1) {
  .video-slot { top: min(calc(50% + 30.9375vw + 18px), calc(100% - var(--video-box-height) - 76px - env(safe-area-inset-bottom))); transform: translateX(-50%); }
}

.toggle { position: absolute; z-index: 5; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--edge); border-radius: 50%; background: var(--glass); color: var(--ink); cursor: pointer; opacity: .38; backdrop-filter: blur(8px); transition: opacity .2s ease, background-color .2s ease, transform .2s ease; }
.toggle[hidden] { display: none; }
.toggle:hover, .toggle:focus-visible, .paused .toggle { opacity: 1; background: var(--glass-hover); }
.toggle:active { transform: scale(.94); }
.toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.toggle svg { width: 20px; height: 20px; fill: currentColor; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (hover: none) { .toggle { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  :root { --fade: .01s; }
  .slide.is-current .photo, .slide.is-previous .photo { animation: none; }
  .toggle { transition: none; }
}
@media (forced-colors: active) { .toggle { border-color: ButtonText; background: ButtonFace; color: ButtonText; forced-color-adjust: none; } }