/* First-person opening. All positions fit the viewport; atmosphere stays behind controls. */
#boot {
 display:block; padding:0; width:100%; height:100svh; height:100dvh;
 overflow:hidden; background:#03070b; color:#e9c8ce;
 --wake-eyes:1; --wake-blur:0; --wake-door:0; --wake-light:.33; --wake-approach:0; --wake-reveal:1;
}
#boot[hidden], #boot [hidden] { display:none!important; }
#boot::after { display:none; }
#boot .wake-world { position:absolute; inset:-3%; overflow:hidden; pointer-events:none; filter:blur(calc(var(--wake-blur)*1px)) brightness(var(--wake-light)); transform:scale(calc(1.02 + var(--wake-approach)*.07)) translateY(calc((1 - var(--wake-approach))*1%)); }
#boot .wake-room { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; object-position:43% 45%; }
#boot .wake-room-light { position:absolute; inset:0; background:radial-gradient(ellipse at 48% 8%,#cadcd220,transparent 62%),linear-gradient(0deg,#080c17aa,transparent 50%); }
#boot .wake-door { position:absolute; top:0; bottom:0; width:50%; box-sizing:border-box; border:1px solid #a0a7ab38; background:linear-gradient(90deg,#0b1017ed,#151e27ed 6%,#0c121bdc 15%,#24303bcc 49%,#0e151ede 90%,#3b4247dd 98%,#111923f5),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 5px); box-shadow:inset 0 0 85px #000b; will-change:transform; }
#boot .wake-door::before { content:''; position:absolute; inset:12% 14%; border:1px solid #a5a7a226; background:linear-gradient(140deg,#c5cbcb06,#04080b33); }
#boot .wake-door::after { content:''; position:absolute; width:5px; top:33%; bottom:29%; background:#e1b5b81c; border:1px solid #b8c6ca39; box-shadow:0 0 18px #adc8d810; }
#boot .wake-door-left { left:0; transform:translateX(calc(var(--wake-door)*-103%)); border-right:2px solid #a8c4ca5c; }
#boot .wake-door-right { right:0; transform:translateX(calc(var(--wake-door)*103%)); border-left:2px solid #a8c4ca5c; }
#boot .wake-door-left::after { right:8%; }
#boot .wake-door-right::after { left:8%; }
#boot .wake-door span { position:absolute; top:36%; font:clamp(40px,8vw,120px)/1 Georgia,serif; letter-spacing:.08em; color:#bac5c419; }
#boot .wake-door-left span { right:18%; } #boot .wake-door-right span { left:18%; }
#boot .wake-door b { position:absolute; top:59%; width:100%; text-align:center; color:#bcc8ca55; font:8px/1.5 var(--mono); letter-spacing:.3em; font-weight:400; }
#boot .wake-door-lamp { position:absolute; top:19%; left:18%; right:18%; height:2px; background:#d7a4aa; box-shadow:0 0 20px 2px #dfa0ac40; opacity:.65; }
#boot .wake-seam { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#d8e5e2; opacity:calc((1 - var(--wake-door))*.25); box-shadow:0 0 35px 10px #aec4cd08; }
#boot .wake-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 42%,transparent 10%,#03071055 67%,#02050be6 100%),linear-gradient(0deg,#040812d9 0,transparent 37%,transparent 75%,#03081066); }
#boot .wake-eyelids { position:absolute; inset:0; pointer-events:none; z-index:2; }
#boot .wake-eyelids i { position:absolute; left:-10%; width:120%; height:51%; background:#020409; box-shadow:0 0 22px 12px #020409; }
#boot .wake-eyelids i:first-child { top:0; border-radius:0 0 50% 50%; transform:translateY(calc(var(--wake-eyes)*-117%)); }
#boot .wake-eyelids i:last-child { bottom:0; border-radius:50% 50% 0 0; transform:translateY(calc(var(--wake-eyes)*117%)); }
#boot .wake-heading { position:absolute; z-index:3; inset:10% max(22px,env(safe-area-inset-right)) auto max(22px,env(safe-area-inset-left)); display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; opacity:var(--wake-reveal); transform:translateY(calc((1 - var(--wake-reveal))*12px)); pointer-events:none; }
#boot .wake-rose { width:clamp(48px,7vh,78px); height:clamp(48px,7vh,78px); object-fit:contain; }
#boot .wake-credit { color:#b99ca8; font:8px/1.5 var(--mono); letter-spacing:.4em; margin:0; }
#boot .wake-title { margin:0; color:#ead5d7; font:400 clamp(36px,7.7vw,110px)/1.1 var(--serif); letter-spacing:.065em; text-shadow:0 4px 55px #03070b; }
#boot .wake-title span { color:#dba7b3; }
#boot .wake-tagline { margin:0; color:#d5b9c1; font:italic clamp(13px,1.45vw,19px)/1.6 var(--serif); }
#boot .wake-prompt { position:absolute; z-index:4; left:max(24px,env(safe-area-inset-left)); right:max(24px,env(safe-area-inset-right)); bottom:max(15%,110px); display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
#boot .wake-message { min-height:2em; margin:0; color:#e1d2d3; font:italic clamp(14px,1.6vw,20px)/1.7 var(--serif); letter-spacing:.02em; max-width:600px; text-shadow:0 2px 12px #000; }
#boot .wake-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 28px; }
#boot .wake-actions button { min-height:46px; padding:12px 24px; border:1px solid #d5adb859; border-radius:2px; background:#0c142077; backdrop-filter:blur(8px); color:#e9c8ce; font:10px/1.6 var(--mono); letter-spacing:.12em; cursor:pointer; }
#boot .wake-actions button:hover { background:#e6b9c322; border-color:#e6b9c3; }
#boot .wake-actions button:disabled { opacity:.5; cursor:wait; }
#boot .wake-actions button:focus-visible, #boot .wake-tools button:focus-visible { outline:2px solid #e6b9c3; outline-offset:5px; }
#boot .wake-actions button:last-child { background:transparent; border-color:transparent; border-bottom-color:#d5adb83b; }
#boot .wake-audio-note { margin:0; color:#bcb3bd; font:10px/1.6 var(--mono); }
#boot .wake-footer { position:absolute; z-index:5; bottom:max(24px,env(safe-area-inset-bottom)); left:max(28px,env(safe-area-inset-left)); right:max(28px,env(safe-area-inset-right)); display:grid; grid-template-columns:1fr minmax(120px,260px) 1fr; gap:24px; align-items:end; }
#boot .wake-rating { color:#ab929e; font:7px/1.7 var(--mono); letter-spacing:.2em; }
#boot .wake-progress { display:flex; flex-direction:column; gap:10px; }
#boot #bootPhaseLabel { color:#c3a9b4; font:7px/1.6 var(--mono); letter-spacing:.2em; text-align:center; }
#boot .wake-progress-track { height:2px; background:#d4b5c124; overflow:hidden; }
#boot .wake-progress-track::after { content:''; display:block; height:100%; width:calc(var(--progress,0)*100%); background:#d9a9b8; box-shadow:0 0 10px #d9a9b844; }
#boot .wake-tools { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:4px 18px; }
#boot .wake-tools button { min-height:44px; border:0; padding:6px 0; color:#ccb4bf; background:transparent; font:9px/1.5 var(--mono); cursor:pointer; }
#boot .wake-tools button:disabled { opacity:.35; cursor:wait; }
#boot[data-state=playing] .wake-message { animation:wake-caption 1s ease-out both; }
@keyframes wake-caption { from {opacity:0} to {opacity:1} }
@media (max-aspect-ratio:1/1) {
 #boot .wake-room { object-position:37% 50%; }
 #boot .wake-heading { top:14%; gap:14px; }
 #boot .wake-title { font-size:clamp(33px,8vw,72px); letter-spacing:.03em; }
 #boot .wake-tagline { max-width:280px; font-size:15px; }
 #boot .wake-prompt { bottom:23%; gap:18px; }
 #boot .wake-message { font-size:16px; max-width:420px; }
 #boot .wake-footer { grid-template-columns:1fr; gap:14px; bottom:max(20px,env(safe-area-inset-bottom)); }
 #boot .wake-rating { order:3; text-align:center; }
 #boot .wake-progress { width:min(240px,80%); justify-self:center; }
 #boot .wake-tools { justify-content:center; gap:26px; }
 #boot .wake-door b { font-size:6px; letter-spacing:.16em; }
}
@media (max-height:520px) and (min-aspect-ratio:1/1) {
 #boot .wake-heading { top:5%; gap:6px; }
 #boot .wake-rose { width:38px; height:38px; }
 #boot .wake-title { font-size:clamp(30px,5vw,58px); }
 #boot .wake-credit { display:none; }
 #boot .wake-tagline { font-size:13px; }
 #boot .wake-prompt { bottom:22%; gap:10px; }
 #boot .wake-message { font-size:14px; }
 #boot .wake-footer { bottom:max(12px,env(safe-area-inset-bottom)); }
}
@media (max-width:360px) { #boot .wake-actions {gap:8px} #boot .wake-actions button {padding:10px 14px} #boot .wake-prompt {bottom:25%} }
@media (prefers-reduced-motion:reduce) {
 #boot .wake-world, #boot .wake-eyelids i, #boot .wake-door, #boot .wake-heading { transform:none!important; filter:none!important; }
 #boot .wake-world { opacity:.55; }
 #boot .wake-eyelids, #boot .wake-door, #boot .wake-seam { display:none; }
 #boot .wake-message { animation:none!important; }
 #boot { transition:none; }
}