/* The opening has its own composition; game HUD and input stay behind it. */
.cinematic { background:#03070d; }
.cinematic.hidden { display:none; }
.cinematic::after { display:none; }
#opening-film { position:absolute; inset:0; z-index:1; width:100%; height:100%; image-rendering:auto; }
.film-grain,.film-letterbox,.film-caption,.film-location,.film-timeline { z-index:2; }
.film-top,.film-title { z-index:3; }
.film-top { z-index:4; }
.film-grain { position:absolute; inset:0; pointer-events:none; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px); }
.film-letterbox { position:absolute; inset:0; border-block:clamp(24px,7vh,76px) solid #03070d; pointer-events:none; }
.film-top { position:absolute; top:3vh; left:4vw; right:4vw; display:flex; justify-content:space-between; align-items:center; gap:20px; color:#728894; font:10px/1.5 ui-monospace,monospace; letter-spacing:.2em; }
.film-top span::before { content:''; display:inline-block; width:5px; height:5px; margin-right:10px; background:#fe5577; box-shadow:0 0 12px #fe5577; }
.film-sound,.film-replay { border:0; padding:10px 0; background:transparent; color:#91a9b6; font:11px/1.5 inherit; cursor:pointer; }
.film-sound:hover,.film-replay:hover { color:#e9fcff; }
.film-caption { position:absolute; left:12%; right:12%; bottom:13%; text-align:center; pointer-events:none; opacity:0; transform:translateY(6px); transition:opacity .3s,transform .3s; text-shadow:0 2px 18px #000,0 2px 4px #000; }
.film-caption.visible { opacity:1; transform:none; }
.film-caption small { display:block; margin-bottom:10px; color:#f6859d; font:10px/1.4 ui-monospace,monospace; letter-spacing:.24em; }
.film-caption p { margin:0; color:#f3f6f7; font:500 clamp(16px,2.1vw,25px)/1.65 sans-serif; letter-spacing:.035em; }
.film-location { position:absolute; left:5vw; top:15%; color:#d7e6eb; font:12px/1.8 ui-monospace,monospace; letter-spacing:.2em; opacity:0; transition:opacity .6s; }
.film-location small { display:block; color:#7a99ab; font-size:9px; margin-top:5px; letter-spacing:.17em; }
.film-location.visible { opacity:1; }
.film-title { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 24px; text-align:center; opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity 1.5s,transform 1.8s,visibility 1.5s; }
.film-title.visible { opacity:1; visibility:visible; transform:none; }
.film-title .film-kicker { color:#e39caa; font:10px/1.6 ui-monospace,monospace; letter-spacing:.36em; }
.film-title h1 { margin:22px 0 0; color:#eef9fc; font:900 clamp(64px,10.5vw,148px)/1.15 sans-serif; letter-spacing:-.08em; text-shadow:0 2px 0 #5d8293,0 14px 70px #0b1829; }
.film-title .film-english { margin:15px 0 0; padding-left:.55em; color:#80a9b9; font:11px/1.6 ui-monospace,monospace; letter-spacing:.55em; }
.film-title .film-rule { width:70px; height:1px; margin:28px 0 24px; background:linear-gradient(90deg,transparent,#f75d7f,transparent); }
.film-title .film-tagline { margin:0 0 32px; color:#a9bac4; font:13px/1.8 sans-serif; letter-spacing:.08em; }
.film-enter { position:relative; min-width:238px; min-height:52px; padding:15px 24px; border:1px solid #83c5d24a; background:#0d202c85; color:#d6faff; font:600 13px/1.5 inherit; letter-spacing:.13em; cursor:pointer; transition:background .25s,border-color .25s,box-shadow .25s; }
.film-enter:hover { background:#193643; border-color:#83c5d2; box-shadow:0 0 30px #5ae2ff17; }
.film-enter span { margin-left:35px; color:#72d5df; }
.film-replay { margin-top:14px; font-size:10px; letter-spacing:.12em; }
.film-sound:focus-visible,.film-replay:focus-visible,.film-enter:focus-visible { outline:1px solid #abf5ff; outline-offset:6px; }
.cinematic .intro-skip { position:absolute; z-index:4; bottom:2.2vh; right:4vw; min-height:36px; padding:6px 0; border:0; background:transparent; color:#8b9aa4; font-size:10px; letter-spacing:.08em; cursor:pointer; }
.cinematic .intro-skip::before { content:'ESC'; display:inline-block; padding:2px 4px; margin-right:10px; font-size:9px; border:1px solid #77889940; }
.cinematic .intro-skip:focus-visible { outline:1px solid #83c5d2; outline-offset:4px; }
.film-timeline { position:absolute; bottom:0; left:0; height:1px; width:100%; background:#6fc2d75c; transform:scaleX(0); transform-origin:left; }
.cinematic.at-title .intro-skip { visibility:hidden; }
.cinematic.exiting { opacity:0; transition:opacity .7s; }
.cinematic.exiting .signal-cut { display:none; }
@media(max-width:600px) {
  .film-letterbox { border-block-width:28px; }
  .film-top { top:10px; font-size:8px; letter-spacing:.08em; }
  .film-sound { font-size:9px; padding:0; }
  .film-location { top:11%; font-size:10px; }
  .film-caption { left:7%; right:7%; bottom:17%; }
  .film-title h1 { font-size:clamp(60px,17vw,94px); }
  .film-title .film-kicker { font-size:8px; letter-spacing:.22em; }
  .film-title .film-tagline { font-size:12px; }
  .film-title .film-rule { margin:25px 0 20px; }
  .cinematic .intro-skip { bottom:20px; }
}
@media(max-height:520px) and (min-width:600px) {
  .film-title { padding:25px; }
  .film-title h1 { font-size:68px; margin-top:10px; }
  .film-title .film-rule { margin:14px 0; }
  .film-title .film-tagline { margin-bottom:15px; }
  .film-title .film-english { margin-top:8px; }
  .film-replay { margin-top:5px; }
}
@media(prefers-reduced-motion:reduce) {
  .film-title,.film-caption,.cinematic { transition:none!important; transform:none!important; }
}