/* ============================================================
   desk.cloud — landing extras
   boot sequence · holo live demo · CRT kill test · dispatch mesh
   glitch + magnetic micro-interactions
   All effects have static end-states and honor reduced motion.
   ============================================================ */

.cloudsfx {
  font-size: 0.72em; font-weight: 500; letter-spacing: 1px;
  text-transform: none; color: var(--accent, #ffd166);
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.35);
}

/* ---------- BIOS boot overlay ---------- */
#boot {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: var(--bg, #020506); cursor: pointer;
}
#boot.on { display: grid; place-items: center; }
#boot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 245, 255, 0.025) 3px 4px);
}
#boot.out { animation: bootout 0.4s ease both; pointer-events: none; }
@keyframes bootout { to { opacity: 0; visibility: hidden; } }
.bootbox { width: min(520px, 86vw); position: relative; }
.bootmark { font-size: 26px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; }
.bootlines { margin-top: 20px; font-size: 11.5px; line-height: 2.05; min-height: 12.3em; color: var(--text, #cdeef0); }
.bootline.d { color: var(--text-dim, #6aa); }
.bootline.c { color: var(--accent, #ffd166); }
.bootline .ok { color: var(--ok, #21f7a3); text-shadow: 0 0 8px rgba(33, 247, 163, 0.35); }
.bootbar { margin-top: 8px; height: 3px; background: rgba(0, 245, 255, 0.12); overflow: hidden; }
.bootbar i {
  display: block; height: 100%; background: var(--line-strong, #4fe);
  box-shadow: 0 0 12px var(--glow-strong, rgba(0, 245, 255, 0.4));
  transform: scaleX(0); transform-origin: left; transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.boothint { margin-top: 18px; font-size: 9px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--text-dim, #6aa); }

/* ---------- Holo live-demo frame ---------- */
.holo {
  position: relative; margin-top: 44px;
  background: var(--bg-elevated, #07151a);
  box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.25)), 0 0 40px var(--glow, rgba(0, 245, 255, 0.1));
}
/* amber corner brackets, echoing the hero mock */
.holo::before, .holo::after, .holo .hbk1, .holo .hbk2 {
  content: ""; position: absolute; width: 20px; height: 20px;
  border: 0 solid var(--accent, #ffd166); opacity: 0.85; z-index: 2; pointer-events: none;
}
.holo::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.holo::after { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.holo .hbk1 { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.holo .hbk2 { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.holo-top {
  display: flex; align-items: center; gap: 16px; padding: 9px 14px;
  border-bottom: 1px solid var(--line, rgba(0, 245, 255, 0.25));
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-dim, #6aa);
}
.holo-title { color: var(--line-strong, #4fe); }
.holo-badge {
  margin-left: auto; padding: 3px 10px; color: var(--accent, #ffd166);
  box-shadow: inset 0 0 0 1px var(--accent, #ffd166); font-size: 9px; letter-spacing: 2px;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
  animation: badgepulse 2.6s ease-in-out infinite;
}
@keyframes badgepulse { 0%, 100% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 rgba(255, 209, 102, 0); } 50% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px rgba(255, 209, 102, 0.35); } }
.holo .live, .mesh-tag .live {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok, #21f7a3); box-shadow: 0 0 8px var(--ok, #21f7a3);
  animation: blink 1.6s ease-in-out infinite;
}
.holo-stat { display: inline-flex; align-items: center; gap: 7px; }
.holo-stage { position: relative; overflow: hidden; background: var(--term-bg, #02080a); min-height: 220px; }
.holo-screen { position: relative; width: 1280px; height: 720px; transform-origin: top left; }
.holo-screen .crt-inner { width: 100%; height: 100%; }
.holo-screen iframe { width: 1280px; height: 720px; border: 0; display: block; background: var(--term-bg, #02080a); }
.holo-stage.power .crt-inner { animation: crtOn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes crtOn {
  0% { transform: scaleY(0.004); filter: brightness(6) saturate(0); }
  55% { transform: scaleY(1.015); filter: brightness(1.6); }
  100% { transform: none; filter: none; }
}
.holo-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85), transparent); }
.holo-stage.power .holo-flash { animation: holoflash 0.55s ease-out both; }
@keyframes holoflash { 0% { opacity: 0.9; transform: scaleY(0.03); } 100% { opacity: 0; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .holo-stage.power .crt-inner, .holo-stage.power .holo-flash, .holo-badge { animation: none; }
}
.holo-foot {
  display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; padding: 9px 14px;
  border-top: 1px solid var(--line, rgba(0, 245, 255, 0.25));
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim, #6aa);
}
.holo-keys { color: var(--line-strong, #4fe); }

/* ---------- Fleet control deck ---------- */
.fleetdeck {
  margin-top: 44px; padding: 22px 24px; display: grid; gap: 18px;
  background: var(--bg-elevated, #07151a);
  box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.25)), inset 3px 0 0 var(--line-strong, #4fe);
}
.fd-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.fd-copy { flex: 1 1 340px; display: grid; gap: 7px; }
.fd-copy b { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--line-strong, #4fe); }
.fd-copy span { font-size: 11.5px; line-height: 1.65; color: var(--text-dim, #6aa); }
.fd-copy em { font-style: normal; color: var(--accent, #ffd166); }
.fd-status { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim, #6aa); white-space: nowrap; }
.fd-status b { color: var(--ok, #21f7a3); font-variant-numeric: tabular-nums; }
.fd-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #21f7a3); box-shadow: 0 0 8px var(--ok); animation: blink 1.6s ease-in-out infinite; }

/* the fleet — buttons + one pill per agent session, all on one line */
.fd-fleet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fd-fleet .btn { padding: 8px 14px; font-size: 11px; }
.fd-div { width: 1px; align-self: stretch; min-height: 26px; background: var(--line, rgba(0, 245, 255, 0.25)); margin: 0 6px; }
.apill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  font-size: 10.5px; letter-spacing: .4px; color: var(--text-dim, #6aa);
  background: var(--term-bg, #02080a); box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.18));
  clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
  transition: color .25s, box-shadow .25s, opacity .25s;
}
.apill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.apill.up { color: var(--ok, #21f7a3); box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.25)); }
.apill.up i { box-shadow: 0 0 8px var(--ok); }
.apill.att { color: var(--accent, #ffd166); box-shadow: inset 0 0 0 1px var(--accent, #ffd166), 0 0 14px rgba(255, 209, 102, 0.25); }
.apill.att i { box-shadow: 0 0 9px var(--accent); animation: pdot 1.1s ease-in-out infinite; }
.apill.down { color: var(--text-dim, #6aa); opacity: .42; }
.apill.down i { background: var(--text-dim, #6aa); box-shadow: none; }
.apill.spawn { animation: apillSpawn .32s cubic-bezier(.2,.9,.2,1) both; }
@keyframes apillSpawn { 0% { opacity: 0; transform: translateY(6px) scale(.94); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .apill.spawn { animation: none; } .apill.att i { animation: none; } }

/* action buttons */
.fd-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--up { background: rgba(33, 247, 163, 0.08); color: var(--ok, #21f7a3); font-weight: 700; box-shadow: inset 0 0 0 1px var(--ok, #21f7a3); }
.btn--up:hover { background: var(--ok, #21f7a3); color: #04130d; box-shadow: 0 0 26px rgba(33, 247, 163, 0.45); }
.btn--down { background: rgba(255, 209, 102, 0.06); color: var(--accent, #ffd166); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent, #ffd166); }
.btn--down:hover { background: var(--accent, #ffd166); color: #1c1403; box-shadow: 0 0 26px rgba(255, 209, 102, 0.4); }
.btn--kill {
  background: rgba(255, 77, 109, 0.08); color: var(--error, #ff4d6d); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--error, #ff4d6d);
}
.btn--kill:hover {
  background: var(--error, #ff4d6d); color: #fff;
  box-shadow: 0 0 30px rgba(255, 77, 109, 0.5); animation: killshake 0.3s linear;
}
.btn[disabled] { opacity: .4; pointer-events: none; }
@keyframes killshake { 25% { transform: translateX(-1px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-2px); } }

/* inline command log */
.fd-log { font-size: 10.5px; line-height: 1.8; min-height: 1.8em; color: var(--text-dim, #6aa); }
.fd-log .fl { display: block; }
.fd-log .fl.g { color: var(--ok, #21f7a3); }
.fd-log .fl.a { color: var(--accent, #ffd166); }
.fd-log .fl.r { color: var(--error, #ff4d6d); }
.fd-log .fl.d { color: var(--text-dim, #6aa); }

.fd-note { font-size: 11px; letter-spacing: .3px; line-height: 1.6; color: var(--text-dim, #6aa); }
.fd-note .p { color: var(--line-strong, #4fe); }
.fd-note em { font-style: normal; color: var(--accent, #ffd166); }
.kd-ok { color: var(--ok, #21f7a3); }

/* ---------- Full-page CRT death / reboot overlay ---------- */
#crt { position: fixed; inset: 0; z-index: 55; display: none; }
#crt.on { display: block; }
#crt .pane {
  position: absolute; left: 0; right: 0; height: 50.5%; z-index: 1;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 245, 255, 0.02) 3px 4px),
    #010304;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* opening ease */
}
#crt .pane.top { top: -0.5%; transform: translateY(-101%); box-shadow: 0 1px 0 var(--line-strong, #4fe), 0 4px 30px var(--glow-strong, rgba(0, 245, 255, 0.4)); }
#crt .pane.bot { bottom: -0.5%; transform: translateY(101%); box-shadow: 0 -1px 0 var(--line-strong, #4fe), 0 -4px 30px var(--glow-strong, rgba(0, 245, 255, 0.4)); }
#crt.shut .pane { transform: translateY(0); transition: transform 0.32s cubic-bezier(0.7, 0, 0.84, 0); } /* violent close */
#crt .crt-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; z-index: 2;
  background: #fff; opacity: 0; pointer-events: none;
  box-shadow: 0 0 18px 4px var(--line-strong, #4fe), 0 0 70px 14px var(--glow-strong, rgba(0, 245, 255, 0.4));
}
#crt.shut .crt-line { animation: crtline 0.6s ease-out 0.28s both; }
@keyframes crtline {
  0% { opacity: 1; transform: scaleX(1); }
  70% { opacity: 1; transform: scaleX(0.04); }
  100% { opacity: 0; transform: scaleX(0.002); }
}
#crt .crt-log {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: min(520px, 86vw); font-size: 12.5px; line-height: 2;
  color: var(--text, #cdeef0); opacity: 0; transition: opacity 0.2s ease;
}
#crt.logon .crt-log { opacity: 1; }
.crt-row.r { color: var(--error, #ff4d6d); text-shadow: 0 0 10px rgba(255, 77, 109, 0.4); }
.crt-row.g { color: var(--ok, #21f7a3); text-shadow: 0 0 10px rgba(33, 247, 163, 0.3); }
.crt-row.d { color: var(--text-dim, #6aa); }
.crt-row.c { color: var(--accent, #ffd166); }
.shell.jolt { animation: jolt 0.35s steps(3, end) both; }
@keyframes jolt {
  20% { transform: translateX(-6px) skewX(-2deg); filter: hue-rotate(40deg); }
  45% { transform: translateX(8px) skewX(3deg); }
  70% { transform: translateX(-4px); filter: none; }
  100% { transform: none; }
}

/* ---------- Dispatch mesh + channel log ---------- */
.meshgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
@media (max-width: 880px) { .meshgrid { grid-template-columns: 1fr; } }
.meshwrap {
  position: relative; min-height: 400px;
  background: var(--term-bg, #02080a);
  box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.25)), inset 0 0 50px var(--glow, rgba(0, 245, 255, 0.1));
}
#mesh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mesh-tag {
  position: absolute; left: 13px; bottom: 11px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim, #6aa);
}
.chanlog {
  display: grid; grid-template-rows: auto 1fr auto; min-height: 400px;
  background: var(--bg-elevated, #07151a);
  box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.25));
}
.chan-head {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border-bottom: 1px solid var(--line, rgba(0, 245, 255, 0.25));
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--line-strong, #4fe);
}
.chan-head span { margin-left: auto; font-size: 9.5px; letter-spacing: 1.4px; color: var(--text-dim, #6aa); }
.chan-body {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 14px; overflow: hidden; font-size: 11.5px; line-height: 1.6;
}
.chan-msg { animation: chanin 0.3s var(--ease-out, ease) both; }
@keyframes chanin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chan-msg { animation: none; } }
.chan-msg .who { letter-spacing: 0.5px; color: var(--line-strong, #4fe); }
.chan-msg .who.human { color: var(--accent, #ffd166); }
.chan-msg .who.critic { color: var(--ok, #21f7a3); }
.chan-msg .who::after { content: " ▸ "; color: var(--text-dim, #6aa); }
.chan-msg .txt { color: var(--text, #cdeef0); }
.chan-msg .txt .at { color: var(--accent, #ffd166); text-shadow: 0 0 8px rgba(255, 209, 102, 0.3); }
.chan-msg.fade { opacity: 0.35; }
.chan-input {
  display: grid; gap: 9px; padding: 11px 14px;
  border-top: 1px solid var(--line, rgba(0, 245, 255, 0.25));
  font-size: 11px; color: var(--text-dim, #6aa);
}
.chan-input .p { color: var(--accent, #ffd166); }
.ci-gate { font-size: 10px; letter-spacing: .4px; color: var(--text-dim, #6aa); min-height: 1.3em; }
.ci-gate em { font-style: normal; color: var(--accent, #ffd166); }
.ci-chips { display: flex; flex-wrap: wrap; gap: 7px; transition: opacity .2s; }
.ci-chips.off { opacity: .4; pointer-events: none; }
.cchip {
  font: inherit; font-size: 10.5px; cursor: pointer; padding: 4px 10px; color: var(--line-strong, #4fe);
  background: var(--term-bg, #02080a); box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.3));
  clip-path: polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px);
  transition: color .15s, box-shadow .15s, background .15s;
}
.cchip:hover { color: var(--accent, #ffd166); box-shadow: inset 0 0 0 1px var(--accent, #ffd166), 0 0 14px rgba(255, 209, 102, 0.25); }
.chan-msg.typing { opacity: .8; }
.chan-msg.typing .txt { color: var(--text-dim, #6aa); display: inline-flex; align-items: center; gap: 7px; }
.tdots { display: inline-flex; align-items: center; gap: 3px; }
.tdots i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong, #4fe); animation: tdot 1s ease-in-out infinite; }
.tdots i:nth-child(2) { animation-delay: .15s; }
.tdots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .tdots i { animation: none; } }

/* ---------- Glitch micro-interactions ---------- */
.glx { animation: glx 0.38s steps(2, end) both; }
@keyframes glx {
  0% { text-shadow: 3px 0 var(--error, #ff4d6d), -3px 0 var(--line-strong, #4fe); transform: translateX(1px) skewX(-5deg); }
  50% { text-shadow: -3px 0 var(--error, #ff4d6d), 3px 0 var(--line-strong, #4fe); transform: translateX(-2px); }
  100% { text-shadow: none; transform: none; }
}
.band h2:hover { text-shadow: 2px 0 rgba(255, 77, 109, 0.5), -2px 0 var(--glow-strong, rgba(0, 245, 255, 0.4)); }
@media (prefers-reduced-motion: reduce) { .glx { animation: none; } }

/* ---------- back-to-top beacon ---------- */
#totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit; font-size: 15px; color: var(--line-strong, #4fe);
  background: var(--bg-elevated, #07151a);
  box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.35)), 0 0 18px var(--glow, rgba(0, 245, 255, 0.12));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out, ease), visibility 0.25s,
    color 0.15s, box-shadow 0.2s;
}
#totop.show { opacity: 1; visibility: visible; transform: none; }
#totop:hover {
  color: var(--accent, #ffd166);
  box-shadow: inset 0 0 0 1px var(--accent, #ffd166), 0 0 26px rgba(255, 209, 102, 0.35);
}
#totop:active { transform: translateY(1px); }
#totop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 245, 255, 0.05) 3px 4px);
}
@media (prefers-reduced-motion: reduce) { #totop { transition: opacity 0.2s, visibility 0.2s; transform: none; } }

/* ---------- sound toggle (sits above the back-to-top beacon) ---------- */
#sfx {
  position: fixed; right: 22px; bottom: 76px; z-index: 40;
  width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--line-strong, #4fe);
  background: var(--bg-elevated, #07151a);
  box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.35)), 0 0 18px var(--glow, rgba(0, 245, 255, 0.12));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transition: color 0.15s, box-shadow 0.2s;
}
#sfx svg { width: 17px; height: 17px; }
#sfx:hover { color: var(--accent, #ffd166); box-shadow: inset 0 0 0 1px var(--accent, #ffd166), 0 0 26px rgba(255, 209, 102, 0.35); }
#sfx .s-off { display: none; }
#sfx.off { color: var(--text-dim, #6aa); }
#sfx.off .s-on { display: none; }
#sfx.off .s-off { display: block; }