/* Cinder Signal opening titles and the original field interface. */

/* ---------- Cinder Signal opening + original field interface ---------- */
#cold-open{position:fixed;inset:0;z-index:48;display:flex;align-items:flex-end;pointer-events:none;opacity:0;
  visibility:hidden;padding:0 0 clamp(92px,13vh,150px) clamp(34px,6vw,104px);transition:opacity .65s ease;
  background:linear-gradient(90deg,rgba(0,0,0,.7),transparent 58%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%)}
#cold-open.active{opacity:1;visibility:visible}
#cold-open.recede{opacity:0;visibility:hidden}
.co-card{max-width:min(660px,78vw);padding-left:17px;border-left:3px solid var(--amber);
  filter:drop-shadow(0 4px 12px var(--ink))}
#co-kicker{color:var(--amber);font:700 10px/1.2 var(--font-mono);letter-spacing:.26em;text-transform:uppercase}
#co-title{margin-top:9px;color:var(--cream-700);font:800 clamp(28px,4.7vw,62px)/.92 var(--font-display);
  letter-spacing:.04em;text-transform:uppercase;text-shadow:2px 3px var(--ink)}
#co-sub{margin-top:10px;color:var(--paper-mute);font:700 10px/1.4 var(--font-mono);letter-spacing:.2em;text-transform:uppercase}
/* The card shares the bottom-left corner with Health/Points. Hide that stack
   for the few seconds the card is up — Opening already toggles #hud.opening. */
#hud.opening #hud-bl{opacity:0;visibility:hidden}
/* On a phone the bottom-left is the move stick, so the title card is a small
   strip under the top edge instead of a block over the thumb and the prompt. */
html.is-touch #cold-open{align-items:flex-start;justify-content:center;
  padding:calc(max(10px,env(safe-area-inset-top)) + 62px) 0 0;
  background:linear-gradient(180deg,rgba(0,0,0,.62),transparent 42%)}
html.is-touch .co-card{max-width:min(460px,46vw)}
html.is-touch #co-title{font-size:clamp(20px,3.4vw,30px);margin-top:5px}
html.is-touch #co-kicker,html.is-touch #co-sub{font-size:8px}
html.is-touch #co-sub{margin-top:6px}
html.is-touch #intro-skip{font-size:12px}
/* #signal-subtitle is HUD: see hud-layout.css / hud-theme.css. */
#escape-cinematic{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  pointer-events:none;visibility:hidden;opacity:0;background:rgba(3,5,4,0);transition:opacity .45s ease,background .7s ease}
#escape-cinematic.active{visibility:visible;opacity:1}
#escape-cinematic.black{background:rgba(3,5,4,.96)}
.cine-bar{position:absolute;left:0;width:100%;height:0;background:var(--steel-850);transition:height .55s cubic-bezier(.2,.8,.2,1)}
.cine-top{top:0}.cine-bottom{bottom:0}
#escape-cinematic.active .cine-bar{height:clamp(54px,11vh,122px)}
.cine-copy{max-width:min(780px,84vw);padding:20px;text-align:center;opacity:0;transform:translateY(16px);
  transition:opacity .45s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
#escape-cinematic.chapter .cine-copy{opacity:1;transform:none}
#cine-kicker{color:var(--amber);font:700 10px/1.3 var(--font-mono);letter-spacing:.3em;text-transform:uppercase}
#cine-title{margin-top:12px;color:var(--tone-ddd4be);font:900 clamp(31px,6vw,76px)/.9 var(--font-display);
  letter-spacing:.06em;text-transform:uppercase;text-shadow:2px 4px var(--ink)}
#cine-caption{margin-top:15px;color:var(--paper-mute);font:700 10px/1.5 var(--font-mono);letter-spacing:.18em;text-transform:uppercase}
/* Intro cutscene chrome: letterbox + a late title-card beat, then HUD reveal.
   Sits one step under the extraction cinematic (z 70) so wake-up blinks cover the bars.
   `.video` lifts the overlay above #fade (z 70) so the HTML5 pack is actually visible. */
#intro-cinematic{position:fixed;inset:0;z-index:69;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .45s ease}
#intro-cinematic.active{visibility:visible;opacity:1}
#intro-cinematic.video #intro-title{display:none}
#intro-cinematic.video.title #intro-title{
  display:flex;opacity:1;transform:none;
  background:linear-gradient(180deg,rgba(5,7,10,.55),rgba(5,7,10,.82));
}
#intro-cinematic.active .cine-bar{height:clamp(46px,9vh,100px)}
#intro-video-stage{position:absolute;inset:0;background:var(--ink,#050403)}
.cine-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .28s ease;background:#050403}
.cine-clip.on{opacity:1}
#intro-skip{position:absolute;right:clamp(18px,3vw,44px);bottom:calc(clamp(46px,9vh,100px) + 14px);
  min-height:44px;min-width:44px;padding:10px 16px;margin:0;
  border:1px solid rgba(226,220,202,.28);border-radius:2px;
  background:rgba(8,10,12,.62);color:var(--paper-mute);font:700 9px/1 var(--font-mono);
  letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  opacity:0;transition:opacity .6s ease,color .12s ease,border-color .12s ease,background .12s ease;
  pointer-events:none}
#intro-cinematic.hint #intro-skip{opacity:.82;pointer-events:auto}
#intro-skip:hover{color:var(--paper-bright,#f2ead8);border-color:var(--tone-b89a68,#b89a68);background:rgba(16,18,20,.84)}
#intro-skip:focus-visible{outline:1px solid var(--amber,#c4a35a);outline-offset:2px}
#intro-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
#intro-cinematic.title #intro-title{opacity:1;transform:none}
#intro-kicker{color:var(--amber);font:700 10px/1.3 var(--font-mono);letter-spacing:.3em;text-transform:uppercase}
#intro-wordmark{margin-top:12px;color:var(--tone-ddd4be,#ddd4be);font:900 clamp(34px,6.4vw,78px)/.9 var(--font-display);
  letter-spacing:.06em;text-transform:uppercase;text-shadow:2px 4px var(--ink)}
#intro-caption{margin-top:14px;color:var(--paper-mute);font:700 10px/1.5 var(--font-mono);letter-spacing:.18em;text-transform:uppercase}
#round-sting{position:fixed;inset:0;z-index:46;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .28s ease}
#round-sting.active{visibility:visible;opacity:1}
#round-sting .cine-bar{height:0;transition:height .35s cubic-bezier(.2,.8,.2,1)}
#round-sting.active .cine-bar{height:clamp(18px,4.5vh,42px)}
#round-sting.video-on .sting-clip{opacity:.72}
#round-sting.helo{z-index:72}
#round-sting.helo .sting-clip{opacity:.86}
#sting-skip{position:absolute;right:clamp(16px,2.5vw,36px);bottom:calc(clamp(18px,4.5vh,42px) + 10px);
  min-height:44px;min-width:44px;padding:8px 14px;margin:0;
  border:1px solid rgba(226,220,202,.22);border-radius:2px;
  background:rgba(8,10,12,.55);color:var(--paper-mute);font:700 9px/1 var(--font-mono);
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
#round-sting.video-on #sting-skip.show{opacity:.7;pointer-events:auto}
#sting-skip:hover{color:var(--paper-bright,#f2ead8);border-color:var(--tone-b89a68,#b89a68)}
#sting-skip:focus-visible{outline:1px solid var(--amber,#c4a35a);outline-offset:2px}
html.reduce-motion #intro-cinematic.active .cine-bar{height:clamp(28px,6vh,64px);transition:none}
html.reduce-motion #intro-title,html.reduce-motion #round-sting .cine-bar,html.reduce-motion .cine-clip{transition:none}
/* The objective card and its world marker are HUD, and live in
   hud-layout.css / hud-theme.css. This file is the cinematics only. */

/* The "original field interface" HUD positions that used to live here (round
   and points top-right, perks down the right edge) were every one of them
   overridden by the later theme sheets. The layout now has a single owner:
   hud.css anchors the corners, hud-waw.css themes them, hud-responsive.css
   scales them. */

@media(max-width:800px){
  .title-content{margin-left:28px;width:calc(100vw - 56px);padding-top:8vh}
  /* Never hide the Controls remapper — that page owns .controls-panel too. */
  #title-screen:not([data-page=controls]) .title-content > .controls-panel{display:none}
  .gt-main{font-size:clamp(40px,13vw,70px)}
  .mbtn{min-width:270px}
  #vm-img{width:clamp(700px,96vw,920px)}
}
@media(max-height:690px){
  .title-content{transform:scale(.84);transform-origin:left center}
  #title-screen:not([data-page=controls]) .title-content > .controls-panel{display:none}
}