/* ================= marketing/mission.css — The Mission: the intro movie in the game's own briefing window =================
   The window, its bar, the medallion, the link badges, the grid / noise / scan band and the subtitles follow css/intro.css
   (the game's), sized by the window here (--w / --h, mission.js) instead of the screen. The room behind it is the loading
   screen's: a dark green grid, scan lines, a slow band running down. */
.room{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(28px,5vw,56px) clamp(56px,8vw,96px);
  background:radial-gradient(ellipse at 50% 38%,rgba(20,52,38,.55),transparent 62%),
    repeating-linear-gradient(0deg,rgba(143,240,184,.035) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,rgba(143,240,184,.035) 0 1px,transparent 1px 32px),#050908}
.room::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.7) 100%)}
.room .scan{position:absolute;left:0;right:0;top:-30%;height:30%;z-index:-1;pointer-events:none;background:linear-gradient(transparent,rgba(143,240,184,.04) 70%,rgba(143,240,184,.1) 99%,transparent);animation:ldScan 7s linear infinite}
@keyframes ldScan{to{transform:translateY(440%)}}

/* the C.O.R.E title: collapsed it reads C.O.R.E, then the words write out between the letters (the game's start screen) */
.core-x{display:flex;justify-content:center;align-items:baseline;white-space:nowrap;visibility:hidden;margin-bottom:clamp(18px,3vw,30px);
  font:700 clamp(15px,2.3vw,28px)/1.1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:rgba(200,236,218,.78)}
.core-x.ready{visibility:visible}
.cx-w{position:relative;display:inline-flex;align-items:baseline;margin-right:.32em;animation:cxMove 11s cubic-bezier(.6,0,.25,1) infinite;transform:translateX(var(--dx,0))}
.cx-w:last-child{margin-right:0}
.cx-w b{position:relative;font-weight:800;color:var(--phos);text-shadow:0 0 14px rgba(143,240,184,.55)}
.cx-w:not(.cx-last):not(.cx-amp) b::after{content:'.';position:absolute;left:100%;color:var(--phos);animation:cxDot 11s linear infinite}
.cx-t i{font-style:normal;display:inline-block;opacity:0;animation:cxType 11s linear infinite;animation-delay:calc(var(--i) * 45ms)}
.cx-amp .cx-t i{color:rgba(143,240,184,.7)}
@keyframes cxMove{0%,16%{transform:translateX(var(--dx,0))}30%,74%{transform:translateX(0)}88%,100%{transform:translateX(var(--dx,0))}}
@keyframes cxDot{0%,17%{opacity:1}22%,84%{opacity:0}89%,100%{opacity:1}}
@keyframes cxType{0%,24%{opacity:0}31%,75%{opacity:1}80%,100%{opacity:0}}

.brief-head{display:grid;gap:12px;justify-items:center;text-align:center;margin-bottom:clamp(40px,6vw,64px)}
.brief-head h1{font:800 clamp(34px,5.4vw,62px)/.98 var(--display);text-transform:uppercase;letter-spacing:.01em}
.brief-head p{color:var(--muted);max-width:56ch}

/* ---------- the briefing window ---------- */
.stage{position:relative;width:min(100%,1060px,calc((100vh - 330px) * 1.78));min-width:min(100%,320px);margin:0 auto}
.hud{position:relative;border:1px solid rgba(143,240,184,.55);border-radius:12px;overflow:hidden;background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 30px rgba(143,240,184,.18)}
.hud.grow{animation:hudGrow .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes hudGrow{from{transform:scale(.04);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
.hud-bar{height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;background:linear-gradient(#10241a,#0b1a13);border-bottom:1px solid rgba(143,240,184,.3)}
.hud-bar img.face{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1.5px solid var(--phos)}
.hud-bar span{display:flex;flex-direction:column;line-height:1.15}
.hud-bar b{font:600 14px var(--body);color:#e6fff0}
.hud-bar small{display:flex;align-items:center;gap:5px;font:500 11px var(--body);color:var(--phos)}
.hud-bar small i{width:7px;height:7px;border-radius:50%;background:#e0402f;box-shadow:0 0 6px #e0402f;animation:blink 1.6s steps(2,start) infinite}
.hud-bar img.core{margin-left:auto;height:38px;width:auto;filter:drop-shadow(0 0 5px rgba(143,240,184,.35))}
.view{position:relative;aspect-ratio:var(--ar,16/9);background:#000}
.view video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}

/* the medallion on the window's top edge, turning once the movie's own C.O.R.E opening is over */
.medal{position:absolute;left:50%;top:0;width:clamp(50px,6vw,72px);aspect-ratio:1;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#173a2c,#06110c 74%);border:1.5px solid rgba(143,240,184,.75);
  box-shadow:0 0 0 4px rgba(4,12,9,.88),0 0 22px rgba(143,240,184,.32),0 8px 24px rgba(0,0,0,.6);opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.stage.medal-on .medal{opacity:1;transform:translate(-50%,-50%) scale(1)}
.medal .im-ring{position:absolute;inset:-9px;border-radius:50%;border:1.5px dashed rgba(143,240,184,.42);animation:imRing 16s linear infinite}
.medal img{display:block;width:62%;height:auto;animation:medalTurn 6s linear infinite;filter:drop-shadow(0 0 6px rgba(143,240,184,.55))}
@keyframes medalTurn{from{transform:perspective(500px) rotateY(0)}to{transform:perspective(500px) rotateY(360deg)}}
@keyframes imRing{to{transform:rotate(360deg)}}

/* a secure feed: a fine phosphor grid, scan lines, moving noise, a band rolling down, a vignette, a faint flicker */
.fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;animation:cfFlicker 4.3s steps(1) infinite}
.fx::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,22,10,.22) 0 1px,rgba(80,255,160,.04) 1px 2px,transparent 2px 3px);mix-blend-mode:multiply}
.fx::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(60,255,150,.05) 0,rgba(0,40,18,.12) 64%,rgba(0,12,5,.5) 100%)}
.fx .grid{position:absolute;inset:0;mix-blend-mode:screen;opacity:.9;
  background-image:linear-gradient(rgba(80,255,150,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(80,255,150,.13) 1px,transparent 1px),
    linear-gradient(rgba(80,255,150,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(80,255,150,.055) 1px,transparent 1px);
  background-size:calc(var(--w,900px) / 16) calc(var(--w,900px) / 16),calc(var(--w,900px) / 16) calc(var(--w,900px) / 16),calc(var(--w,900px) / 64) calc(var(--w,900px) / 64),calc(var(--w,900px) / 64) calc(var(--w,900px) / 64);background-position:center center}
.fx .noise{position:absolute;inset:-40px;opacity:.15;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 1 0 0 0 0 .6 0 0 0 1.6 -.45'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:cfNoise .42s steps(5) infinite}
.fx .band{position:absolute;left:0;right:0;height:16%;top:-20%;background:linear-gradient(to bottom,transparent,rgba(110,255,170,.09) 45%,rgba(160,255,200,.17) 50%,rgba(110,255,170,.09) 55%,transparent);mix-blend-mode:screen;animation:cfBand 6.4s linear infinite}
@keyframes cfBand{to{top:110%}}
@keyframes cfFlicker{0%,100%{opacity:1}31%{opacity:.86}32%{opacity:1}67%{opacity:.9}68%{opacity:1}84%{opacity:.8}85%{opacity:1}}
@keyframes cfNoise{0%{transform:translate(0,0)}20%{transform:translate(-23px,11px)}40%{transform:translate(14px,-19px)}60%{transform:translate(-9px,25px)}80%{transform:translate(27px,-6px)}100%{transform:translate(0,0)}}

/* the subtitles: the speaker's line at the bottom middle, a line called out from the side on the left, in amber */
.subs{position:absolute;inset:0;pointer-events:none;z-index:2;container-type:size}
.subs span{position:absolute;max-width:70%;padding:.24em .65em .3em;border-radius:6px;background:rgba(3,8,6,.74);color:#f2fff7;font:600 18px/1.32 var(--body);font-size:clamp(11px,2.5cqw,26px);
  text-align:center;text-shadow:0 1px 2px #000;opacity:0;transition:opacity .12s ease;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.subs span.on{opacity:1}
.subs .sub-main{left:50%;bottom:7%;transform:translateX(-50%)}
.subs .sub-side{left:4%;top:44%;transform:translateY(-50%);max-width:40%;text-align:left;color:#ffd27a;border-left:3px solid #ffb648;background:rgba(18,12,2,.78)}

/* the link badges: TEAM BRAVO over the movie's Airport popup, then C.O.R.E LAB over its Cyber Lab popup (times in mission.js) */
.link{position:absolute;right:calc(var(--w,900px) * .045);top:calc(var(--h,506px) * .755);bottom:calc(var(--h,506px) * .072);width:calc(var(--w,900px) * .19);z-index:2;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;gap:calc(var(--w,900px) * .003);padding:calc(var(--w,900px) * .006) calc(var(--w,900px) * .009);
  background:linear-gradient(160deg,#06120d,#030a08);border:1px solid rgba(255,181,71,.5);border-left:3px solid #ffb547;border-radius:6px;
  box-shadow:0 8px 22px rgba(0,0,0,.6),inset 0 0 20px rgba(255,181,71,.05);font-family:var(--display);color:#e6fff0;
  opacity:0;transform:translateX(18px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s}
.hud.link-on .link:not(.lab){opacity:1;transform:none}
.link .il-head{display:flex;align-items:center;gap:calc(var(--w,900px) * .005);font:600 calc(var(--w,900px) * .0078) "Courier New",monospace;letter-spacing:.12em;color:rgba(200,236,218,.7)}
.link .il-k{flex:1;white-space:nowrap;overflow:hidden}
.link .il-dot{width:calc(var(--w,900px) * .006);height:calc(var(--w,900px) * .006);border-radius:50%;background:#ffb547;box-shadow:0 0 8px #ffb547;animation:ilBlink .8s steps(1) infinite}
.link .il-t{font-weight:800;font-size:calc(var(--w,900px) * .0175);line-height:1.05;letter-spacing:.06em;color:#ffd9a0;white-space:nowrap}
.link .il-s{font:600 calc(var(--w,900px) * .0082) "Courier New",monospace;letter-spacing:.08em;color:rgba(255,217,160,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link .il-sig{display:flex;align-items:flex-end;gap:2px;height:calc(var(--w,900px) * .01)}
.link .il-sig i{width:calc(var(--w,900px) * .0025);background:rgba(143,240,184,.22);animation:ilSeek 1.25s steps(1) infinite}
.link .il-sig i:nth-child(1){height:20%}.link .il-sig i:nth-child(2){height:40%;animation-delay:.15s}.link .il-sig i:nth-child(3){height:60%;animation-delay:.3s}.link .il-sig i:nth-child(4){height:80%;animation-delay:.45s}.link .il-sig i:nth-child(5){height:100%;animation-delay:.6s}
.link .il-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font:600 calc(var(--w,900px) * .0078) "Courier New",monospace;letter-spacing:.04em}
.link .il-steps li{display:none;align-items:center;gap:calc(var(--w,900px) * .008);color:rgba(200,236,218,.32);text-transform:uppercase}
.link .il-steps li::before{content:'·';width:1.2em;text-align:center}
.link .il-steps li.cur{display:flex;color:#ffd9a0}.link .il-steps li.cur::before{content:'▸';color:#ffb547;animation:ilBlink .6s steps(1) infinite}
.link .il-bar{height:2px;margin-top:calc(var(--w,900px) * .003);margin-right:calc(var(--w,900px) * .012);background:rgba(143,240,184,.14);border-radius:2px;overflow:hidden}
.link .il-bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,#ffb547,#ffd27a);transition:width .3s linear}
.hud.il-ok .link{border-color:rgba(61,255,138,.45);border-left-color:#3dff8a;box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 30px rgba(61,255,138,.06)}
.hud.il-ok .link .il-dot,.link.lab .il-dot{background:#3dff8a;box-shadow:0 0 8px #3dff8a;animation:ilPulse 1.6s ease-in-out infinite}
.hud.il-ok .link .il-t,.link.lab .il-t{color:var(--phos)}
.hud.il-ok .link .il-s,.link.lab .il-s{color:rgba(143,240,184,.9)}
.hud.il-ok .link .il-sig i,.link.lab .il-sig i{background:var(--phos);box-shadow:0 0 4px rgba(143,240,184,.6);animation:none}
.hud.il-ok .link .il-bar i{width:100%;background:linear-gradient(90deg,#3dff8a,var(--phos))}
.hud.il-flash .link{animation:ilFlash .7s ease-out}
.link.lab{top:calc(var(--h,506px) * .785);bottom:calc(var(--h,506px) * .07);right:calc(var(--w,900px) * .022);width:calc(var(--w,900px) * .176);
  border-color:rgba(61,255,138,.45);border-left-color:#3dff8a;transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.hud.lab-on .link.lab{opacity:1;transform:none}
.link.lab .il-bar i{width:100%;background:linear-gradient(90deg,rgba(61,255,138,.25),var(--phos) 50%,rgba(61,255,138,.25));background-size:200% 100%;animation:ixSweep 1.6s linear infinite}
@keyframes ixSweep{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes ilBlink{50%{opacity:.2}}
@keyframes ilPulse{50%{opacity:.45}}
@keyframes ilSeek{0%{background:rgba(143,240,184,.22)}40%,70%{background:#ffb547}}
@keyframes ilFlash{0%{box-shadow:0 0 0 0 rgba(61,255,138,.9)}100%{box-shadow:0 0 0 14px rgba(61,255,138,0)}}
.hud.small .link{display:none}

/* ---------- before it plays: the incoming call; after: the end card ---------- */
.cover{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:16px;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,52,38,.75),rgba(3,8,6,.96) 70%),repeating-linear-gradient(0deg,rgba(143,240,184,.05) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(143,240,184,.05) 0 1px,transparent 1px 24px),#030806;
  transition:opacity .35s}
.cover.gone{opacity:0;pointer-events:none}
.cover .in{display:grid;gap:clamp(8px,1.4vw,14px);justify-items:center;max-width:46ch}
.cover .k{font:600 clamp(10px,1.1vw,12px)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(143,240,184,.7)}
.cover .t{font:800 clamp(22px,3.6vw,40px)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#e8fff1;text-shadow:0 0 14px rgba(143,240,184,.35)}
.cover .t::after{content:'_';margin-left:3px;color:var(--phos);animation:blink 1s steps(2,start) infinite}
.cover .s{font-size:clamp(13px,1.4vw,15px);color:var(--muted)}
.emblem{position:relative;width:clamp(64px,10vw,112px);aspect-ratio:1}
.emblem i{position:absolute;border-radius:50%}
.emblem .r1{inset:0;border:2px dashed rgba(143,240,184,.45);animation:imRing 14s linear infinite}
.emblem .r2{inset:12%;border:3px solid rgba(143,240,184,.18);border-top-color:var(--phos);border-right-color:rgba(143,240,184,.7);animation:imRing 2.2s cubic-bezier(.5,.1,.5,.9) infinite reverse;filter:drop-shadow(0 0 6px rgba(143,240,184,.6))}
.emblem .sw{inset:22%;background:conic-gradient(from 0deg,rgba(143,240,184,.32),transparent 28%);animation:imRing 2.8s linear infinite}
.emblem img{position:absolute;left:50%;top:50%;width:52%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px rgba(143,240,184,.45))}
.cover .btn{margin-top:4px}
.ring-call .btn.go{animation:callPulse 1.6s ease-in-out infinite}
@keyframes callPulse{0%,100%{box-shadow:0 0 0 0 rgba(143,240,184,.55)}60%{box-shadow:0 0 0 14px rgba(143,240,184,0)}}
@media (max-width:620px){.cover .s,.cover .emblem{display:none}.cover .in{gap:8px}.cover .t{font-size:20px}.cover .btn{padding:10px 14px;font-size:14px}.cover .btns{gap:8px}}

/* ---------- the controls under the window ---------- */
.ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.ctl button{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 10px;border-radius:8px;
  border:1px solid var(--line2);background:var(--panel);color:var(--fg);font:700 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.ctl button:hover{border-color:var(--phos)}
.ctl button:focus-visible{outline:2px solid var(--phos);outline-offset:3px}
.ctl button[aria-pressed="true"]{background:var(--phos-soft);border-color:var(--phos);color:var(--phos)}
.ctl button:disabled{opacity:.4;cursor:default}
.ctl svg{width:18px;height:18px}
.ctl .seek{flex:1 1 160px;min-width:120px;accent-color:var(--phos);height:40px;background:transparent}
.ctl .time{font:500 13px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;min-width:92px;text-align:right}

/* ---------- the mission file under it ---------- */
.dossier{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-top:clamp(48px,7vw,80px)}
.dossier dl{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line2)}
.dossier dl div{padding:16px 16px 0 0;display:grid;gap:6px}
.dossier dt{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--phos)}
.dossier dd{margin:0;color:#cfe3d8;font-size:15px}
@media (max-width:860px){.dossier{grid-template-columns:1fr}.dossier dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.hud.grow{animation:none}.fx,.fx *,.medal *,.emblem *,.room .scan,.cx-w,.cx-t i,.cx-w b::after{animation:none!important}.cx-w{transform:none}.cx-t i{opacity:1}.cx-w b::after{opacity:0}}