/* =============================================================================
 * mnemonic2047.css — MNEMONIC 2047: a full-screen future environment that
 * "installs" over TACTICAL-OS 96. Alien-tech hologram centerpiece (the
 * uploaded renders), HUD chrome, telemetry streams, particle field. Fully
 * self-contained overlay (#m2047) — UNPLUG returns you to 1996 untouched.
 * ===========================================================================*/
#m2047{position:fixed;inset:0;z-index:8800;overflow:hidden;background:#030812;
  font-family:'Share Tech Mono','Courier New',monospace;color:#9fdcff;user-select:none;
  --c1:#00e5ff; --c2:#ff2de5;}
#m2047 *{box-sizing:border-box}

/* environment backdrop: the holo-lab render (drift + parallax driven by JS) */
#m2047 .bg{position:absolute;inset:-4%;will-change:transform;
  background:radial-gradient(90% 70% at 50% 40%,#08131f,#030812 75%)}
/* optional lab-loop video: drop /img/cyber/lab-loop.mp4 in the repo and it lights up.
   full height, stretched wider (130vh) so it owns the middle; edges feather out.
   the side gaps get the falling eridian glyph rain (drawn on the .rain canvas). */
#m2047 .bgvid{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  height:100%;width:min(130vh,100%);object-fit:fill;opacity:0;transition:opacity 1.2s;
  filter:saturate(1.15) brightness(.9);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
#m2047 .bgvid.on{opacity:1}
#m2047 .veil{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 42%,transparent 30%,#030812e6 88%),
  linear-gradient(#03081200 70%,#030812 100%)}
#m2047 .rain{position:absolute;inset:0;mix-blend-mode:screen;opacity:.7}
#m2047 .scan{position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(180deg,transparent 0 2px,#000 2px 3px);animation:m47flick 4s steps(3) infinite}
@keyframes m47flick{0%,94%{opacity:.16}96%{opacity:.30}98%{opacity:.10}}

/* ---------- HUD chrome ---------- */
#m2047 header{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:18px;
  padding:12px 20px;border-bottom:1px solid #0e3a4a;background:linear-gradient(#030812e0,#03081240)}
#m2047 .mark{font-family:Orbitron,'Share Tech Mono',monospace;font-weight:900;font-size:19px;letter-spacing:4px;color:#fff}
#m2047 .mark b{color:var(--c1);text-shadow:0 0 14px var(--c1)}
#m2047 .stat{font-size:11px;letter-spacing:2px;color:#4d8ba3;display:flex;gap:16px;flex-wrap:wrap}
#m2047 .stat i{font-style:normal;color:var(--c1)}
#m2047 .stat .ok::before{content:"●";color:#33ff99;margin-right:5px;animation:m47pulse 2s infinite}
@keyframes m47pulse{50%{opacity:.35}}
#m2047 .clk{margin-left:auto;font-size:13px;letter-spacing:3px;color:#cfeeff}

/* corner brackets */
#m2047 .cnr{position:absolute;width:26px;height:26px;border:2px solid #0e5a72;z-index:5;pointer-events:none}
#m2047 .cnr.tl{top:64px;left:14px;border-right:0;border-bottom:0}
#m2047 .cnr.tr{top:64px;right:14px;border-left:0;border-bottom:0}
#m2047 .cnr.bl{bottom:78px;left:14px;border-right:0;border-top:0}
#m2047 .cnr.br{bottom:78px;right:14px;border-left:0;border-top:0}

/* ---------- the floating hologram ---------- */
#m2047 .stage{position:absolute;inset:64px 0 78px 0;display:flex;align-items:center;justify-content:center;gap:5vw;padding:0 4vw}
#m2047 .holo-wrap{position:relative;width:min(44vh,42vw);aspect-ratio:1;flex:none;animation:m47lev 5.2s ease-in-out infinite}
@keyframes m47lev{0%,100%{transform:translateY(-12px)}50%{transform:translateY(14px)}}
#m2047 .holo{position:absolute;inset:7%;border-radius:50%;overflow:hidden;cursor:pointer;
  box-shadow:0 0 60px -8px var(--c1),inset 0 0 60px #00e5ff22;
  -webkit-mask-image:radial-gradient(circle,#000 62%,transparent 74%);
  mask-image:radial-gradient(circle,#000 62%,transparent 74%);
  animation:m47hflick 7s steps(20) infinite}
#m2047 .holo img{width:100%;height:100%;object-fit:cover;display:block}
#m2047 .holo.blend img{mix-blend-mode:screen;filter:brightness(1.15)}
@keyframes m47hflick{0%,93%{opacity:1}94%{opacity:.72}95%{opacity:1}97%{opacity:.85}98%{opacity:1}}
/* rotating instrument rings */
#m2047 .ring{position:absolute;border-radius:50%;pointer-events:none}
#m2047 .r1{inset:0;border:1px dashed #00e5ff66;animation:m47spin 26s linear infinite}
#m2047 .r2{inset:-5%;border:1px solid #00e5ff22;border-top-color:var(--c1);animation:m47spin 9s linear infinite}
#m2047 .r3{inset:4%;border:1px dotted #ff2de544;animation:m47spin 17s linear infinite reverse}
@keyframes m47spin{to{transform:rotate(360deg)}}
#m2047 .tick{position:absolute;left:50%;top:-7px;width:2px;height:12px;background:var(--c1);box-shadow:0 0 8px var(--c1)}
/* projection beam + pedestal */
#m2047 .beam{position:absolute;left:50%;bottom:-34%;transform:translateX(-50%);width:74%;height:52%;pointer-events:none;
  background:linear-gradient(#00e5ff2e,#00e5ff05);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  filter:blur(2px);animation:m47beam 3.4s ease-in-out infinite}
@keyframes m47beam{50%{opacity:.55}}
#m2047 .pedestal{position:absolute;left:50%;bottom:-38%;transform:translateX(-50%);width:56%;height:12px;border-radius:50%;
  background:radial-gradient(ellipse,#00e5ff88,#00e5ff11 70%,transparent);filter:blur(1px)}

/* ---------- specimen data pane ---------- */
#m2047 .pane{position:relative;width:min(400px,36vw);border:1px solid #0e5a72;background:#04101acc;
  padding:16px 18px;backdrop-filter:blur(3px);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
#m2047 .pane::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--c1),var(--c2))}
#m2047 .pane h3{margin:0 0 4px;font-family:Orbitron,monospace;font-size:15px;letter-spacing:2px;color:#fff}
#m2047 .pane h3 b{color:var(--c1)}
#m2047 .pane .sub{font-size:10px;letter-spacing:3px;color:var(--c2);margin-bottom:12px}
#m2047 .pane pre{margin:0;white-space:pre-wrap;font:inherit;font-size:12px;line-height:1.75;color:#9fdcff;min-height:170px}
#m2047 .pane .cur{background:var(--c1);color:transparent;animation:m47cur 1s steps(1) infinite}
@keyframes m47cur{50%{opacity:0}}
#m2047 .pane .rowbtns{display:flex;gap:8px;margin-top:12px}
#m2047 .pane .pbtn{flex:1;padding:10px;cursor:pointer;font:inherit;font-size:12px;letter-spacing:3px;
  color:#031018;background:linear-gradient(90deg,var(--c1),#7ef3ff);border:0;font-weight:700;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
#m2047 .pane .pbtn:hover{filter:brightness(1.15)}
#m2047 .pane .scanb{color:var(--c1);background:transparent;border:1px solid var(--c1)}
#m2047 .pane .scanb:hover{background:#00e5ff1c}
#m2047 .pane.alert{border-color:#ff2d2d;animation:m47alert .5s steps(2) infinite}
#m2047 .pane.alert::before{background:#ff2d2d}
@keyframes m47alert{50%{box-shadow:0 0 24px #ff2d2d88}}

/* ---------- side telemetry ---------- */
#m2047 .tele{position:absolute;top:90px;bottom:100px;width:150px;z-index:4;overflow:hidden;pointer-events:none;
  font-size:9px;line-height:1.9;letter-spacing:1px;color:#1e6d86;
  -webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}
#m2047 .tele.l{left:16px}
#m2047 .tele.r{right:16px;text-align:right}

/* ---------- dock ---------- */
#m2047 footer{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:14px;
  padding:12px 20px;border-top:1px solid #0e3a4a;background:linear-gradient(#03081240,#030812e6)}
#m2047 .slot{width:44px;height:44px;flex:none;display:grid;place-items:center;font-size:17px;color:#155a70;
  border:1px solid #0e3a4a;background:#04101a;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
#m2047 .slot.live{color:var(--c1);border-color:var(--c1);cursor:pointer;box-shadow:0 0 14px #00e5ff44}
#m2047 .dockmsg{font-size:10px;letter-spacing:3px;color:#2e7d99}
#m2047 .unplug{margin-left:auto;padding:10px 18px;cursor:pointer;font:inherit;font-size:12px;letter-spacing:3px;
  color:var(--c2);background:transparent;border:1px solid var(--c2);
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px)}
#m2047 .unplug:hover{background:#ff2de51e;box-shadow:0 0 16px #ff2de555}

/* CRT power-off exit */
#m2047.off{animation:m47off .45s ease-in forwards}
@keyframes m47off{40%{transform:scaleY(.006);opacity:1}100%{transform:scaleY(.006) scaleX(0);opacity:0}}

/* ---------- boot splash inside the env (loading bar drives the reveal) ---------- */
#m2047 .boot47{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:#030812}
#m2047 .boot47.done{opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
#m2047 .boot47 .big{font-family:Orbitron,monospace;font-weight:900;font-size:clamp(30px,6vw,62px);letter-spacing:8px;color:#fff}
#m2047 .boot47 .big b{color:var(--c1);text-shadow:0 0 26px var(--c1)}
#m2047 .boot47 .small{font-size:11px;letter-spacing:5px;color:#4d8ba3}
#m2047 .bar47{width:min(380px,72vw);height:16px;border:1px solid #0e5a72;background:#04101a;padding:2px}
#m2047 .bar47 i{display:block;height:100%;width:0;box-shadow:0 0 12px #00e5ff55;transition:width .12s linear;
  background:repeating-linear-gradient(90deg,var(--c1) 0 12px,#063a4a 12px 14px)}

/* ---------- download progress dialog bits (inside the Win96 dialog) ---------- */
.m47-bar{height:18px;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;padding:2px;margin:8px 0 4px}
.m47-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#000080 0 12px,#1084d0 12px 14px);transition:width .18s linear}
.m47-status{font-family:'Courier New',monospace;font-size:11px;color:#333;min-height:14px}

/* ---------- INTERACTIVE LAYER ---------- */
/* mute toggle */
#m2047 .mute{margin-left:auto;font:inherit;font-size:15px;background:transparent;border:1px solid #0e5a72;
  color:#9fdcff;padding:4px 9px;cursor:pointer}
#m2047 .mute:hover{border-color:var(--c1)}
#m2047 .clk{margin-left:0}

/* hologram video slot (drop /img/cyber/spec-00N.mp4 and it lights up) */
#m2047 .holo video{width:100%;height:100%;object-fit:cover;display:block}
#m2047 .holo.blend video{mix-blend-mode:screen;filter:brightness(1.15)}

/* cursor-aware: rings spin faster + glow harder when you get close */
#m2047 .holo-wrap.near .r1{animation-duration:8s}
#m2047 .holo-wrap.near .r2{animation-duration:2.6s;border-top-color:var(--c2)}
#m2047 .holo-wrap.near .r3{animation-duration:5s}
#m2047 .holo-wrap.near .holo{box-shadow:0 0 90px -6px var(--c1),inset 0 0 70px #00e5ff33}

/* ANALYZE scan sweep */
#m2047 .scanbar{position:absolute;left:0;right:0;top:-6%;height:3px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--c1),transparent);box-shadow:0 0 18px var(--c1)}
#m2047 .holo.scan .scanbar{animation:m47scan 1.5s linear 1;opacity:1}
@keyframes m47scan{from{top:-4%}to{top:102%}}

/* containment breach */
#m2047 .restab{position:absolute;left:50%;bottom:-16%;transform:translateX(-50%);display:none;z-index:8;
  white-space:nowrap;padding:12px 20px;font:inherit;font-size:12px;letter-spacing:2px;cursor:pointer;
  color:#fff;background:#2a040bee;border:1px solid #ff2d2d;overflow:hidden;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  animation:m47alert .6s steps(2) infinite}
#m2047 .restab .rfill{position:absolute;left:0;top:0;bottom:0;width:0;background:#ff2d2d55;pointer-events:none}
#m2047.breach .veil{background:radial-gradient(120% 90% at 50% 42%,#ff2d2d14 30%,#180208e6 88%),linear-gradient(#03081200 70%,#1a020a 100%)}
#m2047.breach .holo{animation:m47breachshake .16s linear infinite}
#m2047.breach .corest{color:#ff2d2d}
#m2047.breach header{border-bottom-color:#7a1020}
@keyframes m47breachshake{0%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}50%{transform:translate(3px,-3px)}75%{transform:translate(-2px,-2px)}100%{transform:translate(3px,3px)}}

/* idle: the lab dims when you do */
#m2047.idle .bg,#m2047.idle .bgvid{filter:saturate(.6) brightness(.42);transition:filter 2.5s}
#m2047.idle .holo{opacity:.55;transition:opacity 2.5s}
#m2047.idle .ring{animation-play-state:paused}
#m2047.idle .beam{opacity:.3}

/* hot telemetry lines */
#m2047 .tele .hot{color:var(--c1);text-shadow:0 0 8px var(--c1)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  #m2047 .stage{flex-direction:column;gap:12px;inset:56px 0 70px 0;padding:8px}
  #m2047 .holo-wrap{width:min(52vw,34vh)}
  #m2047 .pane{width:min(92vw,420px)}
  #m2047 .pane pre{min-height:110px;font-size:11px}
  #m2047 .tele{display:none}
  #m2047 .stat{display:none}
}