/* ============================================================
   PERSLIS WIN95 DEMO  —  PROTOTYPE
   A full-screen Windows 95 desktop you "scroll into" from the
   node grid. Perslis runs a fake build in a Win95 window.
   Self-contained; toggled by js/perslis-demo.js.
   ============================================================ */

:root{
  --w95-desktop:#008080;      /* classic teal */
  --w95-face:#c0c0c0;         /* button/window face */
  --w95-light:#ffffff;
  --w95-shadow:#808080;
  --w95-dark:#000000;
  --w95-title:#000080;        /* navy title bar */
  --w95-title2:#1084d0;       /* title gradient end */
  --w95-text:#000000;
  --w95-font:"Pixelated MS Sans Serif","MS Sans Serif",Tahoma,Geneva,sans-serif;
}

/* ---- overlay root ---- */
.w95{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  background:var(--w95-desktop);
  font-family:var(--w95-font);
  color:var(--w95-text);
  overflow:hidden;
  cursor:default;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
}
.w95.open{ display:block; }

/* "zoom into the terminal" — a green pane grows from the clicked node to
   fill the screen, then the Win95 desktop takes over on top of it. */
.terminal-zoom{
  position:fixed; z-index:8700; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, #7dffb4, #00e676 55%, #00351c);
  border-radius:8px; opacity:.96;
  box-shadow:0 0 70px rgba(0,255,120,.7);
  transition:left .62s cubic-bezier(.5,.05,.2,1), top .62s cubic-bezier(.5,.05,.2,1),
             width .62s cubic-bezier(.5,.05,.2,1), height .62s cubic-bezier(.5,.05,.2,1),
             border-radius .62s ease, opacity .62s ease;
}
.terminal-zoom.go{
  left:-12vw; top:-12vh; width:124vw; height:124vh; border-radius:0; opacity:1;
}

/* zoom OUT of the desktop when diving to the modern Mac era —
   the Win95 world recedes and fades as the Mac is revealed behind it. */
.w95.zoom-out{
  transition:transform 1.15s cubic-bezier(.4,.05,.2,1), opacity 1.15s ease, filter 1.15s ease;
  transform:scale(.46) translateY(-2%);
  opacity:0;
  filter:blur(3px);
}

/* smooth entrance — a gentle fade up from black, no flash/explosion */
.w95.entering{ animation:w95-in .55s ease both; }
@keyframes w95-in{
  0%{ opacity:0; transform:scale(1.015); }
  100%{ opacity:1; transform:scale(1); }
}
/* legacy flash element retired */
.w95-flash{ display:none; }

/* ---- desktop icons (left column) ---- */
.w95-desktop{ position:absolute; inset:0 0 30px 0; }
.w95-icons{
  position:absolute; top:8px; left:8px;
  display:flex; flex-direction:column; gap:16px;
  width:84px;
}
.w95-icon{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  width:84px; padding:2px; text-align:center; cursor:default; user-select:none;
}
.w95-icon .glyph{
  width:34px; height:34px; font-size:28px; line-height:34px;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.35));
}
.w95-icon .label{
  color:#fff; font-size:11px; line-height:1.15;
  text-shadow:1px 1px 0 rgba(0,0,0,.9);
  padding:1px 2px;
}
.w95-icon.selected .label{ background:#0a0a8a; outline:1px dotted #fff; }
.w95-icon.selected .glyph{ filter:brightness(.7) drop-shadow(1px 1px 0 rgba(0,0,0,.35)); }

/* ---- generic Win95 window ---- */
.w95-window{
  position:absolute;
  background:var(--w95-face);
  border:2px solid;
  border-color:var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--w95-shadow), 2px 2px 0 rgba(0,0,0,.35);
  padding:2px;
  display:flex; flex-direction:column;
}
.w95-titlebar{
  height:20px; flex:0 0 20px;
  display:flex; align-items:center; gap:4px;
  padding:0 2px 0 3px;
  background:linear-gradient(90deg,var(--w95-title),var(--w95-title2));
  color:#fff; font-weight:700; font-size:12px;
}
.w95-titlebar .t-icon{ font-size:13px; }
.w95-titlebar .t-text{ flex:1; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w95-tbtn{
  width:16px; height:14px; margin-top:1px;
  background:var(--w95-face);
  border:1px solid; border-color:var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--w95-shadow);
  color:#000; font-size:10px; font-weight:700; line-height:11px; text-align:center;
  cursor:pointer; padding:0;
}
.w95-tbtn:active{ box-shadow:inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 var(--w95-shadow); }
.w95-menubar{
  display:flex; gap:12px; padding:2px 6px; font-size:12px; color:#000;
  border-bottom:1px solid var(--w95-shadow);
 color:#808080; }
.w95-menubar span u{ text-decoration:none; }   /* dead menus keep no access-key promises */

/* ---- Perslis build console ---- */
.w95-console{ width:min(640px,86vw); height:min(420px,72vh); left:50%; top:52%; transform:translate(-46%,-50%); }
.w95-console .w95-body{
  flex:1; margin:3px; padding:8px 10px;
  background:#000; color:#00e676;
  border:2px solid; border-color:var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  box-shadow:inset 1px 1px 0 var(--w95-shadow);
  font-family:"Consolas","Courier New",monospace; font-size:13px; line-height:1.35;
  overflow:hidden; white-space:pre-wrap; word-break:break-word;
}
.w95-console .w95-body .cmd{ color:#fff; }
.w95-console .w95-body .ok{ color:#00e676; }
.w95-console .w95-body .warn{ color:#ffd54a; }
.w95-console .w95-body .head{ color:#7fd3ff; }
.w95-console .w95-body .dim{ color:#3a8f5a; }
.w95-console .w95-body .bar{ color:#00e676; letter-spacing:1px; }
.w95-console .w95-body .done{ color:#000; background:#00e676; padding:0 4px; }
/* KIST's voice — the AI operator thinking out loud, distinct from tool output */
.w95-console .w95-body .kist{ color:#d9c4ff; font-style:italic; margin:3px 0; }
.w95-console .w95-body .kist .tag{
  font-style:normal; font-size:11px; letter-spacing:.5px;
  color:#fff; background:#5a2ea6; padding:0 4px; margin-right:5px;
}
.w95-cursor{ display:inline-block; width:8px; height:14px; background:#00e676; vertical-align:-2px; animation:w95-blink 1s steps(1) infinite; }
@keyframes w95-blink{ 50%{opacity:0} }
.w95-statusbar{
  flex:0 0 18px; display:flex; align-items:center; gap:8px; padding:0 6px; font-size:11px; color:#000;
  border-top:1px solid var(--w95-shadow);
}
.w95-statusbar .cell{
  border:1px solid; border-color:var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
  padding:0 6px; height:14px; line-height:14px;
}

/* ---- taskbar ---- */
.w95-taskbar{
  position:absolute; left:0; right:0; bottom:0; height:30px;
  display:flex; align-items:center; gap:4px; padding:2px 3px;
  background:var(--w95-face);
  border-top:2px solid var(--w95-light);
}
.w95-start{
  display:flex; align-items:center; gap:5px;
  height:24px; padding:0 8px 0 5px; font-weight:700; font-size:13px; color:#000;
  background:var(--w95-face);
  border:2px solid; border-color:var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--w95-shadow);
  cursor:pointer;
}
.w95-start:active,.w95-start.on{ box-shadow:inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 var(--w95-shadow); }
.w95-start .flag{
  width:16px; height:14px; display:inline-block;
  background:
    linear-gradient(135deg,#ff3b30 0 50%, #ff9f0a 50% 100%) 0 0/8px 7px no-repeat,
    linear-gradient(135deg,#34c759 0 50%, #0a84ff 50% 100%) 8px 7px/8px 7px no-repeat,
    linear-gradient(135deg,#ff9f0a 0 50%, #ff3b30 50% 100%) 8px 0/8px 7px no-repeat,
    linear-gradient(135deg,#0a84ff 0 50%, #34c759 50% 100%) 0 7px/8px 7px no-repeat;
  transform:skewX(-8deg);
}
.w95-taskitem{
  flex:0 0 auto; max-width:180px; height:24px; padding:0 8px;
  display:flex; align-items:center; gap:6px; font-size:12px; color:#000;
  background:var(--w95-face);
  border:2px solid; border-color:var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow:inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 var(--w95-shadow);
  cursor:pointer;
}
.w95-tray{
  margin-left:auto; height:22px; display:flex; align-items:center; gap:6px; padding:0 8px;
  border:1px solid; border-color:var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
  font-size:11px; color:#000;
}
/* the uptime story: this payroll has run nightly since 1994 */
.w95-since{
  padding:1px 6px; color:#000;
  border:1px solid; border-color:var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
  cursor:help;
}
.w95-hint{
  position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
  font-family:var(--w95-font); font-size:11px; color:#fff; text-shadow:1px 1px 0 #000;
  opacity:.85; pointer-events:none;
}

/* ---- first-boot: the real Windows 98 splash ---- */
.w95-bootseq{
  position:absolute; inset:0; z-index:9600; background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .45s ease;
}
.w95-bootseq.fade{ opacity:0; }
.w95-bootsplash{ position:relative; height:100%; aspect-ratio:4/3; max-width:100%; }
.w95-bootsplash img{
  width:100%; height:100%; object-fit:fill; display:block;
  image-rendering:pixelated; user-select:none;
}
/* the boot bar's palette cycle: a light band sweeping the bottom strip */
.w95-bootbar-sweep{
  position:absolute; left:0; right:0; bottom:0; height:2%;
  overflow:hidden; mix-blend-mode:screen; pointer-events:none;
}
.w95-bootbar-sweep::before{
  content:''; position:absolute; top:0; bottom:0; left:-30%; width:30%;
  background:linear-gradient(90deg, transparent, rgba(150,200,255,.85), transparent);
  animation:w95BarSweep 1.4s linear infinite;
}
@keyframes w95BarSweep{ from{ left:-30%; } to{ left:100%; } }