/* Cutscene runtime: letterbox, subtitle channel, title card, skip prompt, cinematic vignette.
   Deliberately the same dialect as the killcam letterbox (css/premium.css .rp-bar) so the whole
   game speaks one cinematic language: black bars, gold kicker, one line of text at a time. */

#cs { position: fixed; inset: 0; z-index: 9990; pointer-events: none; overflow: hidden; }

/* ---- letterbox ---------------------------------------------------------------------------- */
#cs .cs-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .95s cubic-bezier(.2,.8,.2,1); }
#cs .cs-bar.t { top: 0; }
#cs .cs-bar.b { bottom: 0; }
#cs.on .cs-bar { height: 10.5vh; }
#cs.out .cs-bar { height: 0; transition-duration: 1.15s; }

/* ---- vignette ---------------------------------------------------------------------------- */
#cs .cs-vig {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, .30) 76%, rgba(0, 0, 0, .74) 100%);
}
#cs.on .cs-vig { opacity: 1; }

/* a slow horizontal light sweep across the frame, sells "film" without a grain pass */
#cs .cs-sweep {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 214, 150, .05) 48%, transparent 60%);
  transition: opacity 1.6s ease;
}
#cs.on .cs-sweep { opacity: 1; }

/* ---- subtitle channel -------------------------------------------------------------------- */
#cs .cs-sub {
  position: absolute; left: 50%; bottom: 15.5vh; translate: -50% 0; width: max-content; max-width: 62vw;
  text-align: center; opacity: 0; transition: opacity .26s ease;
}
#cs .cs-sub.on { opacity: 1; }
#cs .cs-who {
  display: block; margin-bottom: 8px; font: 700 11px/1 var(--f-hud, sans-serif); letter-spacing: .24em;
  text-transform: uppercase; color: #ffd79a; opacity: .82; text-shadow: 0 1px 6px rgba(0, 0, 0, .95);
}
#cs .cs-txt {
  display: block; font: 500 clamp(15px, 1.45vw, 21px)/1.5 var(--f-body, sans-serif); color: #f5f2ec;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .92), 0 0 3px rgba(0, 0, 0, 1);
}
#cs .cs-sub.on .cs-txt { animation: csline .52s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes csline { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- title card -------------------------------------------------------------------------- */
#cs .cs-card {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; text-align: center;
  opacity: 0; transition: opacity 1.2s ease, letter-spacing 2.4s ease; letter-spacing: .3em;
}
#cs .cs-card.on { opacity: 1; letter-spacing: .16em; }
#cs .cs-card small {
  display: block; font: 700 11px/1 var(--f-hud, sans-serif); letter-spacing: .38em; color: #ffd79a;
  text-transform: uppercase; margin-bottom: 14px;
}
#cs .cs-card b {
  display: block; font: 300 clamp(26px, 3.4vw, 50px)/1.15 var(--f-title, var(--f-body, sans-serif));
  color: #fff; text-transform: uppercase; text-shadow: 0 3px 30px rgba(0, 0, 0, .85);
}
#cs .cs-card i { display: block; width: 76px; height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, rgba(255, 215, 154, .8), transparent); }
#cs .cs-card span {
  display: block; margin-top: 14px; font: 500 12px/1 var(--f-hud, sans-serif); letter-spacing: .26em;
  color: rgba(255, 255, 255, .5); text-transform: uppercase;
}

/* ---- skip prompt ------------------------------------------------------------------------- */
#cs .cs-skip {
  position: absolute; right: 3.4vw; bottom: 12.2vh; display: flex; align-items: center; gap: 10px;
  font: 700 11px var(--f-hud, sans-serif); letter-spacing: .2em; color: rgba(255, 255, 255, .42);
  opacity: 0; transition: opacity .6s ease;
}
#cs .cs-skip.on { opacity: 1; }
#cs .cs-skip b { color: #fff; font-weight: 700; }
#cs .cs-skip i { width: 0; height: 0; border-left: 5px solid #ffd79a; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

/* ---- the game's own UI stands down ------------------------------------------------------- */
body.cutscene #hud,
body.cutscene #comms,
body.cutscene #chat,
body.cutscene #perfhud,
body.cutscene #controlCues,
body.cutscene #counters { opacity: 0 !important; pointer-events: none !important; }
body.cutscene { cursor: none; }