/* desktop.css — colours, wallpaper, top panel, dock. Look borrowed from a KDE Plasma setup. */

:root {
  --bg: #1a1530;
  --glass: rgba(34, 29, 50, .8);
  --glass-on: rgba(38, 32, 56, .9);
  --line: rgba(255, 255, 255, .07);
  --card: rgba(255, 255, 255, .04);
  --ink: #ece6f6;
  --ink-2: #c7bedb;
  --muted: #9a90b3;
  --accent: #b79cf0;
  --accent-2: #e58fa8;
  --green: #9fd6a0;
  --yellow: #f4cf8c;
  --pink: #e0758f;
  --radius: 10px;
  --font: "Inter", "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Fira Code", "Noto Sans Mono", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); overflow: hidden; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* wallpaper; the desk adds .frost while a window is highlighted */
.wall { position: fixed; inset: -24px; z-index: 0; background: #14102a url("../img/wallpaper.webp") center 40% / cover no-repeat;
  transition: filter .45s ease, transform .45s ease; }
body.frost .wall { filter: blur(14px); transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .wall { transition: none; } }

/* top panel */
.panel { position: fixed; top: 0; left: 0; right: 0; height: 32px; z-index: 1000; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 12px; font-size: 13px; font-weight: 600; background: rgba(18, 14, 30, .55); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.panel-l { display: flex; align-items: center; gap: 8px; }
.logo { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 210deg, var(--accent), var(--accent-2), #8fc5ec, var(--accent)); box-shadow: inset 0 0 0 4px rgba(18, 14, 30, .9); }
.leaf { font-size: 12px; }
.clock { font-variant-numeric: tabular-nums; }
.clock-note { margin-left: 5px; font-size: 10.5px; font-weight: 400; color: var(--muted); opacity: .8; }
@media (max-width: 600px) { .clock-note { display: none; } }
.panel-r { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.tray { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tray circle { fill: var(--ink); stroke: none; }
.tray-txt { font-size: 11px; letter-spacing: .06em; color: var(--ink-2); }

/* little flags, drawn with gradients so no image requests */
.flag { display: inline-block; width: 20px; height: 13px; border-radius: 2px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.flag.trans { background: linear-gradient(#5bcefa 0 20%, #f5a9b8 20% 40%, #fff 40% 60%, #f5a9b8 60% 80%, #5bcefa 80%); }
.flag.rainbow { background: linear-gradient(#e40303 0 16.6%, #ff8c00 16.6% 33.3%, #ffed00 33.3% 50%, #008026 50% 66.6%, #24408e 66.6% 83.3%, #732982 83.3%); }
.flag.canada { background: linear-gradient(90deg, #d52b1e 0 25%, #fff 25% 75%, #d52b1e 75%); position: relative; }
.flag.canada::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: #d52b1e; transform: translate(-50%, -50%) rotate(45deg); }

/* dock */
.dock { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 1000; display: flex; gap: 6px; padding: 6px 8px;
  border-radius: 16px; background: rgba(18, 14, 30, .5); border: 1px solid var(--line); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.dock button { position: relative; width: 64px; padding: 6px 2px 5px; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: background .15s, transform .15s; }
.dock button:hover { background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.dock .lbl { font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.dock button.open .lbl { color: var(--ink); }
.dock button.open::after { content: ""; position: absolute; top: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink-2); }
.dock button.focus { background: rgba(183, 156, 240, .16); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dock button.focus::after { background: var(--accent); }
.ico { width: 36px; height: 36px; display: block; flex: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }

/* red notification badge on the profile, so people go and look */
.badge { position: absolute; top: 2px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff;
  font: 700 11px/18px var(--font); text-align: center; box-shadow: 0 0 0 2px rgba(18, 14, 30, .9); animation: nudge 3.5s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 76% { transform: translateY(-7px); } 82% { transform: translateY(0); } 87% { transform: translateY(-3px); } 92% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .badge { animation: none; } }
.badge.gone { display: none; }

/* small screens: windows become a scrolling column, the dock jumps to them */
@media (max-width: 900px) {
  body { overflow: auto; }
  .panel-r .tray-txt, .panel-r .tray { display: none; }
  .dock { bottom: 8px; max-width: calc(100vw - 16px); overflow-x: auto; gap: 0; padding: 4px; }
  .dock button { width: 50px; }
  .dock .lbl { font-size: 9.5px; }
  .ico { width: 30px; height: 30px; }
}

/* ---------- splash (Layan-style: drifting blobs, logo, progress bar) ---------- */
/* blobs are soft radial gradients, not blur filters: cheap to repaint, so the fade-out stays smooth */
.splash { position: fixed; inset: 0; z-index: 5000; display: grid; place-content: center; justify-items: center; gap: 28px; overflow: hidden;
  background: #16131f; animation: splash-bail .4s 8s forwards; }   /* bail out after 8 s even without JS; desktop.js fades it out normally */
.splash > * { animation: splash-in .5s ease-out both; }
.splash i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; animation: splash-in .8s ease-out both, blob 9s ease-in-out infinite alternate; }
.splash i:nth-child(1) { left: -30vmax; top: -32vmax; background: radial-gradient(closest-side, rgba(91, 92, 240, .6), transparent); }
.splash i:nth-child(2) { right: -32vmax; top: -6vh; background: radial-gradient(closest-side, rgba(155, 108, 240, .55), transparent); animation-delay: 0s, -3s; }
.splash i:nth-child(3) { left: -4vw; bottom: -40vmax; background: radial-gradient(closest-side, rgba(224, 112, 160, .4), transparent); animation-delay: 0s, -6s; }
.splash svg { position: relative; width: min(190px, 40vw); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .4)); }
.splash b { position: relative; width: 220px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
/* fills to the end in 1.5 s, the shortest the splash stays, so it never has to jump when it leaves */
.splash b span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7b7cf5, #b79cf0); transform-origin: left;
  animation: load 1.5s cubic-bezier(.3, .6, .4, 1) both; }
@keyframes splash-in { from { opacity: 0; } }
@keyframes blob { to { transform: translate(6vmax, 4vmax) scale(1.12); } }
@keyframes load { from { transform: scaleX(0); } }
@keyframes splash-bail { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .splash i { animation: none; } }