* { box-sizing: border-box; }
html, body, #stage { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
.slide { position: fixed; inset: 0; opacity: 0; transition: opacity 600ms ease; background: #000; }
.slide.active { opacity: 1; }
.slide .backdrop { position: absolute; inset: -7%; width: 114%; height: 114%; object-fit: cover; filter: blur(var(--blur, 40px)); transform: scale(1.08); }
.slide .shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .18); }
.slide .photo { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100vw; max-height: 92vh; object-fit: contain; }
.slide.landscape .backdrop, .slide.landscape .shade { display: none; }
.slide.landscape .photo { max-height: 100vh; } /* intrinsic auto size prevents upscaling; max dimensions only shrink */
#stage[data-transition="zoom"] .slide { transition-duration: 350ms; }
#stage[data-transition="zoom"] .slide.portrait.active .photo { animation: gentle-zoom var(--interval, 10s) ease-out both; }
#status { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; padding: 8vw; color: #fff; background: #000; text-align: center; font-family: system-ui, sans-serif; }
#status[hidden] { display: none; }
#status h1 { margin: 0 0 1rem; font-size: clamp(28px, 4vw, 64px); }
#status p { margin: 0; color: #bbb; font-size: clamp(16px, 2vw, 30px); }
@keyframes gentle-zoom { from { transform: scale(1); } to { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } #stage[data-transition="zoom"] .slide.portrait.active .photo { animation: none; } }