html{scroll-behavior:smooth}.cinematic-opening{position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;min-height:420px;background:#050505;overflow:hidden;display:grid;place-items:center}.cinematic-opening::before{content:"";position:absolute;inset:-30px;z-index:-1;background:url('/mirror-room-opening.png') center/cover no-repeat;filter:blur(20px) brightness(.35);transform:scale(1.08)}.cinematic-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center}.cinematic-actions{position:absolute;bottom:clamp(20px,4vh,44px);left:0;right:0;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:0 20px}.cinematic-actions .button{margin:0;background:linear-gradient(125deg,#b98b41,#f0d59c,#c49b54);box-shadow:0 4px 30px #000b;border:1px solid #f1d8a6}.cinematic-scroll{color:#ffedcd;text-decoration:none;font-size:13px;text-shadow:0 2px 8px #000;background:#120e07b3;padding:12px 16px;border:1px solid #ad8e4a66;border-radius:8px}.cinematic-scroll span{display:inline-block;margin-left:10px}#start-exploring{scroll-margin-top:24px}.welcome{grid-template-columns:minmax(0,1fr);max-width:800px;margin:auto}.welcome .intro{padding:40px}.welcome .lead{max-width:none}@media(max-width:700px){.cinematic-opening{min-height:480px}.cinematic-actions{flex-direction:column;gap:12px;bottom:30px}.cinematic-image{width:100%;height:100%}.welcome .intro{padding:28px 18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.cinematic-picture{display:block;width:100%;height:100%;min-width:0;min-height:0}
@media(max-width:700px){.cinematic-opening::before{background-image:url('/mirror-room-opening-phone.png')}.cinematic-picture .cinematic-image{object-fit:contain}}
/* Fill the opening screen edge to edge, without letterboxing. */
.cinematic-opening{min-height:0;height:100vh;height:100svh}
.cinematic-picture .cinematic-image{object-fit:cover;object-position:center center}
@media(max-width:700px){.cinematic-opening{min-height:0;height:100vh;height:100svh}.cinematic-picture .cinematic-image{object-fit:cover;object-position:50% 30%}}

/* Fill phones with the portrait artwork; keep its title safely in view. */
@media(max-width:700px){.cinematic-picture .cinematic-image{object-fit:cover;object-position:center top}}
