body:has(#opening:not([hidden])){overflow:hidden}
#opening{position:fixed;inset:0;z-index:5000;background:#a9d9f5;overflow:hidden;isolation:isolate;color:#fff8df}
#opening[hidden]{display:none}
.opening-art{position:absolute;width:100%;height:100%;object-fit:cover;object-position:40% 50%;animation:opening-camera 10s ease-in-out infinite;z-index:-2}
#opening::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 42%,#17496b22),linear-gradient(0deg,#122934aa,transparent 45%)}
.opening-copy{position:absolute;right:5%;top:20%;width:43%;text-align:center;animation:opening-title 1.1s cubic-bezier(.2,.8,.2,1) both}
.opening-copy small{color:#224a54;letter-spacing:.4em;font-weight:800}
.opening-copy h1{font-size:clamp(36px,5.8vw,88px);line-height:1.2;color:#fff7d8;letter-spacing:.05em;margin:18px 0;text-shadow:0 4px 0 #8d4527,3px 0 #8d4527,-3px 0 #8d4527,0 -2px #8d4527,0 8px 18px #293d5960}
#openingStart{margin-top:26px;padding:16px 38px;font-size:clamp(22px,2.5vw,36px);font-weight:900;border:3px solid #fff2cb;border-radius:50px;color:#fff9de;background:#b94c2a;box-shadow:0 6px 0 #743920,0 12px 30px #17324740}
#openingStart:disabled{opacity:.7;cursor:wait}
#openingHint{font-weight:700;color:#fff;text-shadow:0 1px 5px #193947;font-size:14px}
#openingMusic{position:absolute;right:20px;top:max(18px,env(safe-area-inset-top));background:#fff9e8e8;border:0;color:#344b50;font-size:14px}
#opening.departing #openingStart{animation:opening-confirm .6s ease-in-out 2}
@keyframes opening-camera{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes opening-title{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes opening-confirm{0%,100%{opacity:1}50%{opacity:.3}}
@media(max-width:720px){.opening-art{object-position:38% 50%}.opening-copy{right:0;top:auto;bottom:max(35px,env(safe-area-inset-bottom));width:100%;padding:0 16px}.opening-copy h1{font-size:42px;margin:8px 0}.opening-copy small{color:#fff8df}.opening-copy h1 br{display:none}#openingStart{margin-top:12px;font-size:25px}#opening::after{background:linear-gradient(0deg,#172f4ae8,transparent 65%)} }
@media(prefers-reduced-motion:reduce){.opening-art,.opening-copy{animation:none}}