/*
 * File: desktop.css
 * Author: Hanik Sator
 *
 * Description:
 * This file contains the global styling for the portfolio desktop environment,
 * including theme variables, layout, desktop background, dock,
 * desktop icons, top navigation bar, and boot screen.
 *
 * This file is the very appearance of the operating system I'm trying to emulate
 * before individual application windows are rendered.
 */
      :root {
        --bg: #EDEAE4;
        --bg-alt: #E3DDD5;

        --panel: rgba(244, 240, 233, 0.88);
        --panel-solid: #F4F1EC;

        --text: #2E2A26;
        --heading: #1F1B18;

        --accent: #87907F;
        --accent-hover: #737C6C;

        --border: rgba(70, 60, 50, 0.10);
        --border-strong: rgba(70, 60, 50, 0.18);

        --shadow:
        0 10px 30px rgba(0,0,0,.10),
        0 2px 8px rgba(0,0,0,.05);

        --ease: cubic-bezier(0.4, 0, 0.2, 1);
      }

      *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      a {
        text-decoration: none;
        color: inherit;
      }

      img {
        max-width: 100%;
        display: block;
      }

      body {
        margin: 0;
        overflow: hidden;
        background: var(--bg);
        color: var(--text);
        font-family: "Inter", "Segoe UI", sans-serif;
      }

      /* Desktop */
      #desktop {
        width: 100vw;
        height: 100vh;
        position: relative;

        background:
        radial-gradient(
          circle at 15% 20%,
          rgba(116,128,107,.38),
          transparent 30%
        ),

        radial-gradient(
          circle at 85% 75%,
          rgba(92,104,85,.30),
          transparent 32%
        ),

        radial-gradient(
          circle at 50% 50%,
          rgba(140,150,132,.12),
          transparent 45%
        ),

        linear-gradient(
          145deg,
          #2C322B 0%,
          #3E463D 28%,
          #596255 58%,
          #6E7768 78%,
          #7C8574 100%
        );

        background-size: cover;
        overflow: hidden;
      }

      #desktop::before {
        content: "";

        position: absolute;

        width: 1200px;
        height: 1200px;

        left: -300px;
        top: -350px;

        background:
        radial-gradient(
          circle,
          rgba(116,128,107,.45),
          rgba(116,128,107,.18) 35%,
          transparent 70%
        );

        filter: blur(120px);

        opacity: .95;

        pointer-events: none;
      }

      #desktop::after {
        content: "";

        position: absolute;

        width: 900px;
        height: 900px;

        right: -250px;
        bottom: -250px;

        background:
        radial-gradient(
          circle,
          rgba(170,180,160,.14),
          transparent 70%
        );

        filter: blur(100px);

        pointer-events: none;
      }

      /* top bar css beginning */
      .top-bar {
        position: fixed;
        top: 0;

        width: 100%;
        height: 40px;

        background: rgba(245, 241, 235, 0.72);
        backdrop-filter: blur(14px);

        border-bottom: 1px solid var(--border);

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 1rem;

        color: var(--text);

        z-index: 999;
      }

      .top-left,
      .top-center,
      .top-right {
        display: flex;
        align-items: center;
        gap: .9rem;
      }

      .top-left {
        font-weight: 600;
      }

      .top-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        opacity: .72;

        font-size: .88rem;
      }

      .top-right {
        margin-right: 2rem;

        font-size: .88rem;

        opacity: .82;
      }
      /* top bar css ending */

      .dock {
        position: fixed;

        left: 16px;
        top: 50%;

        transform: translateY(-50%);

        display: flex;
        flex-direction: column;
        gap: 1rem;

        background: rgba(228, 224, 215, 0.68);

        border: 1px solid var(--border);

        padding: .8rem;

        border-radius: 20px;

        backdrop-filter: blur(18px);

        box-shadow: var(--shadow);
      }

      .dock-icon {
        width: 52px;
        height: 52px;

        border: 1px solid transparent;
        border-radius: 14px;

        background: rgba(255,255,255,.24);

        color: var(--text);

        cursor: pointer;

        font-size: 1.3rem;

        transition: .2s ease;
      }

      .dock-icon:hover {
        transform: scale(1.08);
        background: rgba(135,144,127,.18);
        border-color: rgba(135,144,127,.22);
      }

      .dock-icon.active-dock {
        background: rgba(135,144,127,.22);
        border-color: rgba(135,144,127,.32);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
        position: relative;
      }

      .dock-icon.active-dock::after {
        content: "";

        position: absolute;
        left: -10px;
        top: 50%;

        width: 5px;
        height: 5px;

        border-radius: 50%;

        background: var(--accent);

        transform: translateY(-50%);
      }

      .desktop-icons {
        padding-top: 80px;
        padding-left: 120px;

        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .desktop-icon {
        width: 80px;

        background: none;
        border: none;

        color: #F3F6EE;

        cursor: pointer;

        text-align: center;
      }

      .desktop-icon svg {
        width: 34px;
        height: 34px;

        stroke-width: 1.9;

        margin: 0 auto;

        color: #F3F6EE;

        filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
      }

      .desktop-icon p {
        margin-top: .4rem;

        font-size: .85rem;
        font-weight: 500;

        color: #F3F6EE;

        text-shadow:
        0 2px 8px rgba(0,0,0,.65),
        0 0 14px rgba(0,0,0,.35);
      }

      /* only for the easter egg game */
      .desktop-icons-right {
        position: absolute;
        top: 80px;
        right: 78px;
        padding: 0;
        align-items: center;
      }

      .boot-overlay {
        position: fixed;
        inset: 0;

        background: #000;

        color: #e5eef7;

        font: 0.95rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;

        padding: 2rem;

        overflow-y: auto;

        z-index: 1000;

        transition: opacity .6s var(--ease);
      }

      .boot-overlay.hidden {
        opacity: 0;
        pointer-events: none;
      }

      #skipBoot {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 6px 12px;

        background: rgba(30,28,26,.92);
        color: #D8E0CC;

        border: 1px solid rgba(255,255,255,.08);
        font-size: 0.9rem;
        border-radius: 6px;

        cursor: pointer;
        opacity: 0.82;
        transition: opacity 0.2s ease;

        z-index: 9999;
      }

      #skipBoot:hover {
        opacity: 1;
      }