/* Opening-only presentation. The approved office and ending keep their styles. */
#standby[hidden],#opening[hidden],#lockdown[hidden],#openingScene[hidden],#openingBanner[hidden]{display:none!important}
.opening-standby,.opening-sequence,.opening-lockdown{position:fixed;inset:0;z-index:30;overflow:hidden;background:#05090e;color:#ffedce}
.opening-standby{display:grid;place-items:center;text-align:center;padding:30px;background:radial-gradient(ellipse at 50% 46%,#18243170,transparent 58%),#05090e}
.opening-standby h1{margin:0;font-family:Georgia,serif;font-weight:700;font-size:clamp(3.5rem,11vw,10rem);letter-spacing:-.045em;line-height:1.05;text-transform:none;text-shadow:0 0 85px #d9954738}
.opening-sequence{background:#080e13}
.opening-scene{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.opening-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:openingPan var(--opening-duration,8s) linear both;animation-delay:var(--opening-elapsed,0ms)}
.opening-scene.is-changing{animation:cinemaPanel .55s ease both}
.opening-shade{position:absolute;inset:0;background:linear-gradient(180deg,#030914ed, #0309149c 16%, transparent 39%,transparent 52%,#030914b8 84%,#030914f2);pointer-events:none}
.opening-sequence .scene-caption{top:7%;left:7%;right:7%;font-size:clamp(1.05rem,2.05vw,2rem);line-height:1.38;max-width:1300px;margin:auto}
.opening-sequence .scene-dialogue{bottom:13%;left:8%;right:8%}
.opening-sequence .scene-dialogue p{font-size:clamp(1.1rem,2.15vw,2rem);max-width:970px}
.opening-sequence .scene-dialogue:empty{display:none}
.opening-banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8vw;background:radial-gradient(ellipse at 50% 48%,#182b3b,transparent 65%),#05090e}
.opening-banner h2{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:clamp(2.8rem,7.8vw,8rem);letter-spacing:.035em;line-height:1.04;color:#ffb957;margin:0 0 28px;text-shadow:3px 5px 0 #000}
.opening-banner p{font-family:Georgia,serif;font-size:clamp(1.3rem,2.9vw,2.8rem);line-height:1.5;max-width:1050px;margin:0;text-wrap:balance}
.opening-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#172330;z-index:2}
.opening-progress span{display:block;height:100%;background:#dca065;width:0}
.opening-lockdown{display:grid;place-items:center;padding:7vw;text-align:center;background:radial-gradient(ellipse,#4e2b13,#0c1017 64%)}
.opening-lockdown h2{margin:0;font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:clamp(4rem,12.3vw,13rem);letter-spacing:.025em;line-height:.99;color:#ffcc7f;text-shadow:6px 8px 0 #050609;animation:lockdownSlam .6s cubic-bezier(.14,.84,.27,1) both}
@keyframes openingPan{from{transform:scale(1.02)}to{transform:scale(1.075)}}
@keyframes lockdownSlam{0%{opacity:0;transform:scale(1.65)}60%{opacity:1;transform:scale(.98)}80%{transform:scale(1.025)}100%{opacity:1;transform:scale(1)}}
body.intro-paused .opening-scene>img,body.intro-paused .opening-lockdown h2{animation-play-state:paused}
.room-tools{z-index:45}
.front-start{z-index:45}
body[data-phase="riddle"] .room-tools{left:24px;right:auto}
body[data-phase="riddle"] .site{padding-bottom:120px}
@media(max-width:700px){
  body[data-phase="riddle"] .room-tools{left:16px;right:16px;justify-content:center}
  .opening-sequence .opening-scene{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;padding:36px 6% 112px}
  .opening-sequence .opening-scene>img{position:relative;inset:auto;grid-row:2;height:100%;object-fit:contain;min-height:0}
  .opening-shade{background:linear-gradient(180deg,#07101d 0%,#07101d88 29%,transparent 40%,transparent 59%,#07101dbb 70%,#07101d 100%)}
  .opening-sequence .scene-caption{position:relative;inset:auto;grid-row:1;font-size:clamp(1rem,4.15vw,1.25rem);line-height:1.4;z-index:1}
  .opening-sequence .scene-dialogue{position:relative;inset:auto;grid-row:3;max-height:none;overflow:visible;z-index:1}
  .opening-sequence .scene-dialogue p,.opening-sequence .scene-dialogue[data-count="1"] p{font-size:1.1rem;padding:13px 16px;line-height:1.38}
  .opening-banner{padding:8%}
  .opening-banner h2{font-size:clamp(2.8rem,11vw,4.5rem)}
  .opening-banner p{font-size:1.35rem}
  .opening-standby h1{font-size:clamp(3.5rem,15vw,6rem)}
}
@media(max-height:540px) and (min-width:701px){
  .opening-sequence .scene-caption{top:5%;font-size:1rem;line-height:1.3}
  .opening-sequence .scene-dialogue{bottom:18%}
  .opening-sequence .scene-dialogue p{font-size:1.05rem;padding:9px 14px}
}
@media(prefers-reduced-motion:reduce){.opening-scene,.opening-scene>img,.opening-lockdown h2{animation:none!important;transform:none!important}}