/* ═══════════════════════════════════════════════════
   CASCADE LAYERS
   ═══════════════════════════════════════════════════ */
@layer base, theme, layout, components, animations, utilities;

/* ═══════════════════════════════════════════════════
   THEME — GitHub Dark palette + Ptyxis chrome
   ═══════════════════════════════════════════════════ */
@layer theme {
    :root {
        --c-canvas:        #0d1117;
        --c-canvas-subtle: #161b22;
        --c-canvas-inset:  #010409;
        --c-border:        #30363d;
        --c-border-muted:  #21262d;
        --c-fg:            #e6edf3;
        --c-fg-muted:      #8b949e;
        --c-fg-subtle:     #6e7681;
        --c-accent:        #58a6ff;
        --c-success:       #3fb950;
        --c-attention:     #d29922;
        --c-danger:        #f85149;
        --c-done:          #a371f7;
        --c-pink:          #db61a2;

        /* Chrome */
        --chrome-bg:       #1c2128;
        --chrome-fg:       #8b949e;
        --tab-active-bg:   var(--c-canvas);
        --tab-hover-bg:    color-mix(in srgb, var(--c-fg) 6%, transparent);

        /* Typography */
        --ff: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
        --fs-2xs: 0.65rem;
        --fs-xs:  0.72rem;
        --fs-sm:  0.8rem;
        --fs-base: 0.875rem;
        --fs-lg:  1rem;
        --fs-xl:  1.15rem;

        /* Spacing */
        --sp-1: 0.25rem;
        --sp-2: 0.5rem;
        --sp-3: 0.75rem;
        --sp-4: 1rem;
        --sp-5: 1.25rem;
        --sp-6: 1.5rem;
        --sp-8: 2rem;
        --sp-10: 2.5rem;
        --sp-12: 3rem;

        /* Radii */
        --r-window: 12px;
        --r-tab: 8px;
        --r-sm: 4px;
    }
}

/* ═══════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════ */
@layer base {
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        hanging-punctuation: first last;
    }

    body {
        font-family: var(--ff);
        font-size: var(--fs-base);
        font-feature-settings: 'liga' 1, 'calt' 1;
        line-height: 1.65;
        color: var(--c-fg);
        background:
            radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--c-done) 4%, transparent) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 80%, color-mix(in srgb, var(--c-accent) 3%, transparent) 0%, transparent 50%),
            var(--c-canvas-inset);
        min-height: 100dvh;
        display: grid;
        place-items: center;
        padding: var(--sp-4);
        overflow: hidden;
    }

    ::selection {
        background: color-mix(in srgb, var(--c-accent) 35%, transparent);
        color: var(--c-fg);
    }

    :focus-visible {
        outline: 2px solid var(--c-accent);
        outline-offset: 2px;
        border-radius: var(--r-sm);
    }

    a {
        color: var(--c-accent);
        text-decoration: none;
        text-underline-offset: 3px;

        &:hover { text-decoration: underline; }
    }

    /* Custom scrollbar */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--c-border) transparent;
    }
}

/* ═══════════════════════════════════════════════════
   LAYOUT — Terminal window
   ═══════════════════════════════════════════════════ */
@layer layout {
    .terminal {
        width: min(100%, 980px);
        height: min(88dvh, 740px);
        background: var(--c-canvas);
        border-radius: var(--r-window);
        border: 1px solid var(--c-border);
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--c-canvas-inset) 50%, transparent),
            0 0 80px -20px color-mix(in srgb, var(--c-accent) 10%, transparent),
            0 25px 60px -15px rgba(0, 0, 0, 0.55);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        container-type: inline-size;
        container-name: terminal;
        opacity: 0;
        animation: window-enter 0.6s ease-out 0.2s forwards;
        transition: height 0.35s ease, width 0.35s ease, border-radius 0.25s ease,
                    max-width 0.35s ease, max-height 0.35s ease;
    }

    /* Minimized — collapse to header bar */
    .terminal.minimized {
        height: 46px !important;
    }

    .terminal.minimized .terminal-body,
    .terminal.minimized .terminal-prompt-bar {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    .terminal:not(.minimized) .terminal-body,
    .terminal:not(.minimized) .terminal-prompt-bar {
        opacity: 1;
        transition: opacity 0.2s ease 0.15s;
    }

    /* Maximized — fill viewport */
    .terminal.maximized {
        width: 100% !important;
        height: 100dvh !important;
        border-radius: 0;
        border-color: transparent;
    }

    /* Shutdown overlay */
    .shutdown-overlay {
        position: absolute;
        inset: 0;
        background: var(--c-canvas-inset);
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp-3);
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.6s ease;
        pointer-events: none;
    }

    .shutdown-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .shutdown-overlay .shutdown-msg {
        color: var(--c-fg-subtle);
        font-size: var(--fs-sm);
    }

    .shutdown-overlay .shutdown-hint {
        color: var(--c-fg-subtle);
        font-size: var(--fs-xs);
        opacity: 0.5;
    }

    .terminal-header {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        padding: 0 var(--sp-4);
        height: 46px;
        min-height: 46px;
        background: var(--chrome-bg);
        border-bottom: 1px solid var(--c-border-muted);
        user-select: none;
        -webkit-user-select: none;
    }

    .terminal-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        scroll-behavior: smooth;
    }

    .terminal-prompt-bar {
        border-top: 1px solid var(--c-border-muted);
        padding: var(--sp-3) var(--sp-5);
        background: color-mix(in srgb, var(--c-canvas-subtle) 50%, var(--c-canvas));
    }
}

/* ═══════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════ */
@layer components {

    /* ── Header: Tabs ── */
    .tab-list {
        display: flex;
        align-items: center;
        gap: var(--sp-1);
        flex: 1;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 6px 0;

        &::-webkit-scrollbar { display: none; }
    }

    .tab {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        padding: 5px 14px;
        border-radius: var(--r-tab);
        border: 1px solid transparent;
        background: transparent;
        color: var(--chrome-fg);
        font: inherit;
        font-size: var(--fs-xs);
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.15s ease;
        position: relative;

        &:hover {
            background: var(--tab-hover-bg);
            color: var(--c-fg);
        }

        &[aria-selected="true"] {
            background: var(--tab-active-bg);
            color: var(--c-fg);
            border-color: var(--c-border-muted);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        & .tab-icon {
            font-size: var(--fs-sm);
            opacity: 0.7;
        }
    }

    /* ── Header: Window controls ── */
    .window-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: var(--sp-2);
    }

    .wc-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        transition: opacity 0.15s;
        opacity: 0.85;
        position: relative;

        &:hover { opacity: 1; }

        &.wc-close  { background: var(--c-danger); }
        &.wc-min    { background: var(--c-attention); }
        &.wc-max    { background: var(--c-success); }
    }

    /* ── Tab Content Panels ── */
    .tab-panel {
        display: none;
        padding: var(--sp-6) var(--sp-5);
        min-height: 100%;

        &.active {
            display: block;
            animation: panel-in 0.25s ease-out;
        }
    }

    .cleared {
        display: none !important;
    }

    /* ── Hero scene ── */
    #panel-home {
        padding: 0;
        position: relative;
    }

    .hero-scene {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    #hero-canvas {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* ── Prompt styling (used in output) ── */
    .prompt-prefix {
        color: var(--c-success);
        font-weight: 500;

        &::after {
            content: ' ';
        }
    }

    .prompt-path {
        color: var(--c-accent);
    }

    .prompt-symbol {
        color: var(--c-fg-muted);
    }

    .cmd-text {
        color: var(--c-fg);
    }

    /* ── Output blocks ── */
    .output-block {
        margin-bottom: var(--sp-5);

        &:last-child { margin-bottom: 0; }
    }

    .cmd-line {
        margin-bottom: var(--sp-2);
        font-size: var(--fs-sm);
    }

    .cmd-output {
        padding-left: var(--sp-1);
    }

    /* ── Neofetch ── */
    .neofetch {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0 var(--sp-6);
        font-size: var(--fs-sm);
        line-height: 1.7;
    }

    .neofetch-art {
        color: var(--c-accent);
        white-space: pre;
        font-size: var(--fs-xs);
        line-height: 1.4;
        align-self: center;
    }

    .neofetch-info {
        & .nf-header {
            color: var(--c-accent);
            font-weight: 500;
        }

        & .nf-sep {
            color: var(--c-border);
            display: block;
            margin: var(--sp-1) 0;
            overflow: hidden;
            max-width: 28ch;

            &::after {
                content: '────────────────────────────';
                color: var(--c-border);
            }
        }

        & .nf-label {
            color: var(--c-done);
            font-weight: 500;
        }

        & .nf-value {
            color: var(--c-fg-muted);
        }

        & .nf-colors {
            display: flex;
            gap: 3px;
            margin-top: var(--sp-2);

            & span {
                width: 22px;
                height: 12px;
                border-radius: 2px;
            }
        }
    }

    /* ── Project list ── */
    .project-table {
        font-size: var(--fs-sm);
        width: 100%;
    }

    .project-header {
        color: var(--c-fg-subtle);
        font-size: var(--fs-xs);
        padding-bottom: var(--sp-2);
        border-bottom: 1px solid var(--c-border-muted);
        margin-bottom: var(--sp-2);
        display: grid;
        grid-template-columns: 8ch 1fr 8ch 7ch;
        gap: var(--sp-3);
    }

    .project-row {
        display: grid;
        grid-template-columns: 8ch 1fr 8ch 7ch;
        gap: var(--sp-3);
        padding: var(--sp-2) 0;
        border-bottom: 1px solid color-mix(in srgb, var(--c-border-muted) 40%, transparent);
        cursor: pointer;
        transition: background 0.15s ease;
        border-radius: var(--r-sm);
        padding-inline: var(--sp-2);
        margin-inline: calc(-1 * var(--sp-2));

        &:hover {
            background: var(--tab-hover-bg);
        }

        & .pr-perms {
            color: var(--c-fg-subtle);
            font-size: var(--fs-xs);
        }

        & .pr-name {
            font-weight: 500;

            & a { color: var(--c-fg); }
            & a:hover { color: var(--c-accent); }
        }

        & .pr-lang {
            color: var(--c-attention);
            font-size: var(--fs-xs);
            text-align: right;
        }

        & .pr-stars {
            color: var(--c-fg-subtle);
            font-size: var(--fs-xs);
            text-align: right;
        }
    }

    .project-desc {
        grid-column: 1 / -1;
        color: var(--c-fg-muted);
        font-size: var(--fs-xs);
        padding-top: var(--sp-1);
        padding-left: calc(8ch + var(--sp-3));
    }

    .project-tags {
        grid-column: 1 / -1;
        display: flex;
        gap: var(--sp-2);
        padding-top: var(--sp-1);
        padding-left: calc(8ch + var(--sp-3));
        flex-wrap: wrap;

        & span {
            font-size: var(--fs-2xs);
            padding: 1px 8px;
            border-radius: 99px;
            border: 1px solid var(--c-border-muted);
            color: var(--c-fg-subtle);
        }
    }

    /* ── Contact ── */
    .contact-block {
        font-size: var(--fs-sm);

        & .contact-line {
            padding: var(--sp-1) 0;
            display: flex;
            gap: var(--sp-3);

            & .cl-icon {
                color: var(--c-fg-subtle);
                min-width: 2ch;
                text-align: center;
            }

            & .cl-label {
                color: var(--c-fg-muted);
                min-width: 10ch;
            }

            & .cl-value a {
                color: var(--c-accent);
            }
        }
    }

    .pgp-block {
        margin-top: var(--sp-5);
        padding: var(--sp-3) var(--sp-4);
        background: var(--c-canvas-subtle);
        border: 1px solid var(--c-border-muted);
        border-radius: var(--r-sm);
        font-size: var(--fs-xs);
        color: var(--c-fg-subtle);
        max-width: 52ch;

        & .pgp-label {
            color: var(--c-fg-muted);
            margin-bottom: var(--sp-1);
            display: block;
        }

        & code {
            word-break: break-all;
            color: var(--c-fg-muted);
        }
    }

    .availability {
        margin-top: var(--sp-5);
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        font-size: var(--fs-sm);
        color: var(--c-fg-muted);

        & .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--c-success);
            animation: pulse-dot 2s ease-in-out infinite;
        }
    }

    /* ── Interactive prompt ── */
    .prompt-input-line {
        display: flex;
        align-items: center;
        gap: 0;
        font-family: var(--ff);
        font-size: var(--fs-sm);
    }

    .prompt-label {
        color: var(--c-success);
        font-weight: 500;
        white-space: nowrap;
    }

    .input-wrapper {
        flex: 1;
        position: relative;
        overflow: hidden;
    }

    .prompt-input {
        width: 100%;
        background: none;
        border: none;
        color: var(--c-fg);
        font: inherit;
        font-size: var(--fs-sm);
        outline: none;
        caret-color: var(--c-accent);
        padding: 0;
        margin-left: var(--sp-1);
        position: relative;
        z-index: 1;
    }

    .ghost-text {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: var(--sp-1);
        pointer-events: none;
        font: inherit;
        font-size: var(--fs-sm);
        line-height: inherit;
        white-space: pre;
        height: 100%;
        display: flex;
        align-items: center;
        z-index: 0;
    }

    .ghost-typed {
        visibility: hidden;
    }

    .ghost-remainder {
        color: var(--c-fg-subtle);
        opacity: 0.38;
    }

    .tab-hint {
        display: inline-flex;
        align-items: center;
        margin-left: var(--sp-2);
        padding: 0 5px;
        font-size: var(--fs-2xs);
        color: var(--c-fg-subtle);
        opacity: 0.5;
        border: 1px solid var(--c-border-muted);
        border-radius: 3px;
        line-height: 1.6;
    }

    .completion-list {
        color: var(--c-fg-muted);
        font-size: var(--fs-sm);
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-1) var(--sp-4);
        padding: var(--sp-1) 0;

        & span {
            min-width: 10ch;
        }

        & .match {
            color: var(--c-accent);
        }
    }

    /* ── Section titles ── */
    .section-comment {
        color: var(--c-fg-subtle);
        font-size: var(--fs-xs);
        margin-bottom: var(--sp-4);
        font-style: italic;
    }

    /* ── Scanline + vignette overlay ── */
    .terminal-body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        display: block;
        pointer-events: none;
        z-index: 5;
        background:
            repeating-linear-gradient(
                0deg,
                transparent,
                transparent 3px,
                rgba(0, 0, 0, 0.015) 3px,
                rgba(0, 0, 0, 0.015) 4px
            );
    }

    .terminal-body::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(
            ellipse at 50% 50%,
            transparent 55%,
            rgba(0, 0, 0, 0.12) 100%
        );
        pointer-events: none;
        z-index: 5;
    }

    /* ── Command history output ── */
    .history-output {
        padding: var(--sp-3) var(--sp-5);
        border-top: 1px solid var(--c-border-muted);
    }

    .history-cmd {
        font-size: var(--fs-sm);
        margin-bottom: var(--sp-1);
    }

    .history-result {
        font-size: var(--fs-sm);
        color: var(--c-fg-muted);
        padding-left: var(--sp-1);
        margin-bottom: var(--sp-3);
        white-space: pre-wrap;

        &.error {
            color: var(--c-danger);
        }
    }

    /* ── Water zone ── */
    .water-zone {
        position: absolute;
        left: 0;
        right: 0;
        bottom: var(--prompt-h, 45px);
        height: calc((100% - 46px - var(--prompt-h, 45px)) / 3);
        pointer-events: none;
        z-index: 8;
        overflow: hidden;
        display: none;
    }

    .water-zone.active {
        display: block;
        pointer-events: auto;
        animation: panel-in 0.4s ease-out;
    }

    .terminal.minimized .water-zone {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .water-surface {
        position: absolute;
        top: -4px;
        left: 0;
        width: 200%;
        height: 30px;
        animation: surface-drift 16s linear infinite;
        z-index: 3;
    }

    .water-body {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            hsla(205, 50%, 18%, 0.22) 0%,
            hsla(208, 55%, 14%, 0.36) 35%,
            hsla(210, 60%, 11%, 0.46) 100%
        );
        backdrop-filter: url(#water-warp) blur(0.5px);
        -webkit-backdrop-filter: url(#water-warp) blur(0.5px);
        z-index: 1;
    }

    /* Light caustics */
    .water-body::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 90px 55px at 22% 30%, hsla(195, 70%, 55%, 0.045) 0%, transparent 70%),
            radial-gradient(ellipse 70px 45px at 60% 55%, hsla(195, 70%, 55%, 0.035) 0%, transparent 70%),
            radial-gradient(ellipse 80px 50px at 80% 40%, hsla(195, 70%, 55%, 0.04) 0%, transparent 70%),
            radial-gradient(ellipse 60px 40px at 40% 75%, hsla(195, 70%, 55%, 0.03) 0%, transparent 70%);
        animation: caustics-drift 10s ease-in-out infinite alternate;
    }

    /* Fish */
    .fish {
        position: absolute;
        pointer-events: none;
        z-index: 3;
    }

    .fish-body {
        transition: translate 0.3s ease-out;
    }

    /* Bubbles */
    .bubble {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, hsla(195, 80%, 80%, 0.18), hsla(195, 70%, 60%, 0.06));
        border: 1px solid hsla(195, 70%, 70%, 0.08);
        pointer-events: none;
        z-index: 3;
    }

    /* Seaweed */
    .seaweed {
        position: absolute;
        bottom: 0;
        width: var(--sw-w, 10px);
        height: var(--sw-h, 60px);
        border-radius: 40% 40% 0 0;
        background: linear-gradient(to top, var(--sw-c1, hsla(140,55%,28%,0.55)), var(--sw-c2, hsla(155,50%,35%,0.25)));
        transform-origin: bottom center;
        animation: sway var(--sway-dur, 3.5s) ease-in-out var(--sway-delay, 0s) infinite alternate;
        pointer-events: none;
        z-index: 2;
    }

    /* Jellyfish */
    .jellyfish {
        position: absolute;
        pointer-events: none;
        z-index: 3;
    }

    /* Whale */
    .whale {
        position: absolute;
        pointer-events: none;
        z-index: 0;
    }
}

/* ═══════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════ */
@layer animations {
    @keyframes window-enter {
        from {
            opacity: 0;
            translate: 0 12px;
            scale: 0.98;
        }
        to {
            opacity: 1;
            translate: 0 0;
            scale: 1;
        }
    }

    @keyframes panel-in {
        from {
            opacity: 0;
            translate: 0 6px;
        }
        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @keyframes pulse-dot {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0.4; }
    }

    @keyframes stagger-in {
        from {
            opacity: 0;
            translate: 0 4px;
        }
        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* Water */
    @keyframes surface-drift {
        from { translate: 0 0; }
        to { translate: -50% 0; }
    }

    @keyframes caustics-drift {
        from { translate: -8px -3px; opacity: 0.7; }
        to { translate: 10px 5px; opacity: 1; }
    }

    @keyframes sway {
        from { rotate: -7deg; }
        to   { rotate: 7deg; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

        .terminal {
            opacity: 1;
        }
    }
}

/* ═══════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════ */
@layer utilities {
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .text-muted   { color: var(--c-fg-muted); }
    .text-subtle  { color: var(--c-fg-subtle); }
    .text-accent  { color: var(--c-accent); }
    .text-success { color: var(--c-success); }
    .text-warn    { color: var(--c-attention); }
    .text-danger  { color: var(--c-danger); }
    .text-done    { color: var(--c-done); }
    .text-pink    { color: var(--c-pink); }
    .fw-500       { font-weight: 500; }
}

/* ═══════════════════════════════════════════════════
   CONTAINER QUERIES — compact layout < 600px
   ═══════════════════════════════════════════════════ */
@container terminal (max-width: 600px) {
    .neofetch {
        grid-template-columns: 1fr;
    }

    .neofetch-art {
        display: none;
    }

    .project-header,
    .project-row {
        grid-template-columns: 1fr auto;
    }

    .project-header .pr-perms,
    .project-row .pr-perms {
        display: none;
    }

    .project-desc,
    .project-tags {
        padding-left: 0;
    }

    .tab-panel {
        padding: var(--sp-4) var(--sp-3);
    }
}

@container terminal (max-width: 420px) {
    .tab {
        padding: 5px 10px;
        font-size: var(--fs-2xs);
    }

    .window-controls {
        gap: 6px;
    }

    .wc-dot {
        width: 10px;
        height: 10px;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    body { padding: 0; }

    .terminal {
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        border: none;
    }
}