/*
 * File: windows.css
 * Author: Hanik Sator
 *
 * Description:
 * This file defines the shared window system used throughout the portfolio.
 *
 * It includes the styling for window containers, title bars, window controls,
 * animations, focus states, dragging behavior visuals, and maximize,
 * minimize, and close states.
 */
      /* window css beginning */
      .window {
        position: absolute;

        width: 700px;
        height: 500px;

        background: rgba(236, 233, 225, 0.84);

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

        border-radius: 18px;

        backdrop-filter: blur(18px);

        overflow: hidden;

        box-shadow: var(--shadow);

        top: 120px;
        left: 240px;

        display: flex;
        flex-direction: column;

        color: var(--text);

        opacity: 1;
        transform: scale(1);

        transition:
          opacity .22s var(--ease),
          transform .22s var(--ease),
          box-shadow .2s var(--ease),
          border-color .2s var(--ease);
      }

      .hidden {
        display: none;
      }

      .window.is-closing {
        opacity: 0;
        transform: scale(.96) translateY(10px);
        pointer-events: none;
      }

      .window.minimized {
        opacity: 0;
        transform: scale(.92) translateY(18px);
        pointer-events: none;
      }

      .window.window-opening {
        animation: windowOpen .18s var(--ease);
      }

      .window.active-window {
        border-color: rgba(135,144,127,.34);

        box-shadow:
          0 18px 45px rgba(0,0,0,.16),
          0 0 0 1px rgba(135,144,127,.18);
      }

      .window.maximized {
        width: calc(100vw - 140px);
        height: calc(100vh - 90px);

        top: 56px !important;
        left: 100px !important;

        border-radius: 18px;
      }

      @keyframes windowOpen {
        from {
          opacity: 0;
          transform: scale(.96) translateY(8px);
        }

        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }

      .window-header {
        height: 52px;

        display: flex;
        align-items: center;

        gap: 1rem;

        padding: 0 1rem;

        background: rgba(135,144,127,.10);

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

        color: var(--heading);

        font-weight: 600;

        cursor: grab;
      }

      .window-controls {
        display: flex;
        align-items: center;
        gap: .45rem;
      }

      .window-controls span {
        width: 12px;
        height: 12px;
        border-radius: 50%;

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

        cursor: pointer;

        transition:
            transform .15s var(--ease),
            filter .15s var(--ease),
            box-shadow .15s var(--ease);
      }

      .window-controls span svg {
          width: 8px;
          height: 8px;

          stroke: rgba(0,0,0,.65);
          stroke-width: 3;

          opacity: 0;

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

      .window-controls span:hover svg {
          opacity: 1;
      }

      .window-controls span:hover {
        transform: scale(1.2);
        filter: brightness(1.08);

        box-shadow:
            0 0 0 3px rgba(255, 255, 255, .35),
            0 2px 5px rgba(0, 0, 0, .22);
      }

      .close {
        background: #ff5f57;
      }

      .minimize {
        background: #febc2e;
      }

      .maximize {
        background: #28c840;
      }

      .window-content {
        padding: 1.2rem;
        overflow: auto;
        flex: 1;
      }

      .window-content h2 {
        color: var(--heading);
        margin-bottom: .75rem;
      }
      /* window css ending */