/* ===== boot.css — the little machine (bottom-centre) + BenOS boot overlay ===== */

/* the machine: a small Mac, centred at the bottom where a theme toggle would sit */
/* the footer: a ruled link/social band, with the machine (computer) below it.
   sits at the bottom of every page (body is a flex column; .stage takes the slack) */
.foot{width:min(40rem,90vw);margin:0 auto;padding:0 0 36px;display:flex;flex-direction:column;align-items:center;gap:28px}
.foot-band{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:13px 2px}
.foot-links{display:flex;gap:18px;font-family:var(--serif);font-size:14.5px}
.foot-links a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.foot-links a:hover{color:var(--leaf);border-color:#cfe0c2}
.foot-links a:focus-visible{outline:2px solid var(--leaf);outline-offset:3px;border-radius:2px}
.foot-soc{display:flex;align-items:center;gap:6px}
.foot-soc .soc{color:var(--ink-soft);display:grid;place-items:center;width:40px;height:40px;border-radius:8px;transition:color .18s,background .18s}
.foot-soc .soc svg{width:18px;height:18px;display:block}
.foot-soc .soc:hover{color:var(--leaf);background:rgba(79,115,67,.08)}
.foot-soc .soc:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}

.machine{display:flex;flex-direction:column;align-items:center;gap:8px;user-select:none}
.machine .ver{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--faint)}
.mac{position:relative;width:42px;height:46px;min-width:44px;min-height:44px;padding:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(160deg,#efe9da,#ddd4be 60%,#ccc1a8);
  border:1px solid #b6ab8c;
  box-shadow:0 6px 16px rgba(60,50,30,.20),inset 0 1px 0 rgba(255,255,255,.75);
  transition:transform .16s ease,box-shadow .16s ease}
.mac:hover{transform:translateY(-3px)}
.mac:focus-visible{outline:2px solid var(--leaf);outline-offset:3px}
.mac .scr{position:absolute;left:7px;right:7px;top:7px;height:20px;border-radius:3px;
  background:linear-gradient(160deg,#2c3540,#1d242d);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;transition:background .3s ease,box-shadow .3s ease}
.mac .scr::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);opacity:.5}
.mac .drive{position:absolute;left:50%;transform:translateX(-50%);bottom:9px;width:18px;height:2px;border-radius:2px;
  background:#a99d80;box-shadow:inset 0 1px 1px rgba(0,0,0,.3)}
.mac .led{position:absolute;right:8px;bottom:7px;width:4px;height:4px;border-radius:50%;
  background:#b9935a;box-shadow:0 0 4px rgba(185,147,90,.8);animation:macled 2.6s ease-in-out infinite}
@keyframes macled{0%,100%{opacity:.5}50%{opacity:1}}
.mac:hover .scr{background:linear-gradient(160deg,#26424f,#16303c);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 8px rgba(95,160,200,.25)}
.machine.on .mac{transform:translateY(1px);box-shadow:0 3px 9px rgba(60,50,30,.25),inset 0 1px 0 rgba(255,255,255,.6)}
.machine.on .scr{background:linear-gradient(160deg,#7fb6f0,#3f86df);box-shadow:inset 0 0 8px rgba(255,255,255,.4)}
.machine.on .led{background:#5ed16b;box-shadow:0 0 7px rgba(94,209,107,.95);animation:none;opacity:1}

/* ===== BenOS boot overlay ===== */
.boot{position:fixed;inset:0;z-index:9999;background:#05080d;opacity:0;pointer-events:none;transition:opacity .4s ease}
.boot.show{opacity:1;pointer-events:auto}
.boot .screen{position:absolute;inset:0;overflow:hidden}
.boot .wake{position:absolute;inset:0;display:grid;place-items:center;background:#05080d;z-index:3;transition:opacity .5s ease}
.boot .wake .mark{font-family:var(--mono);color:#bcd9ff;font-size:13px;letter-spacing:.3em;text-transform:uppercase;opacity:.9}
.boot .wake .barb{margin-top:14px;width:120px;height:6px;border-radius:999px;overflow:hidden;
  background:repeating-linear-gradient(45deg,#3a5f96 0 8px,#27406f 8px 16px);background-size:22px 6px;animation:barb .8s linear infinite}
@keyframes barb{to{background-position:22px 0}}
.boot.lit .wake{opacity:0;pointer-events:none}

/* the real BenOS, framed full-bleed inside the screen (served at /os/) */
#osframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* parent-layer exit — the one always-visible way back to the Almanac. Sits above
   the iframe (and the wake screen), centred under the spot the OS menubar leaves
   empty, so it never collides with BenOS's own ◈/clock. */
.boot .osback{position:absolute;top:33px;left:50%;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 13px 0 11px;margin:0;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#e6f0ff;background:rgba(10,16,26,.62);border:1px solid rgba(150,180,220,.40);border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.35);
  cursor:pointer;opacity:0;
  transition:opacity .35s ease .25s,background .16s ease,transform .16s ease,border-color .16s ease}
.boot.show .osback{opacity:.92}
.boot .osback:hover{opacity:1;background:rgba(18,28,44,.86);border-color:rgba(180,205,240,.7);transform:translateX(-50%) translateY(1px)}
.boot .osback:active{transform:translateX(-50%) translateY(2px)}
.boot .osback:focus-visible{outline:2px solid #7fb6f0;outline-offset:2px}
.osback-i{width:13px;height:13px;display:block}
@media(prefers-reduced-motion:reduce){.boot .osback{transition:opacity .2s linear}}

@media(max-width:560px){
  .foot{padding-bottom:28px;gap:22px}
  .foot-band{flex-direction:column;gap:12px;align-items:center}
  .mac{width:40px;height:44px}
}