/* ============================================================
   terminal3d.css  —  depth / 3D / CRT framing layer
   Additive only. Loaded AFTER style.css so it wins by source order
   + higher (two-ID) specificity. Does not touch terminal text colours
   or any command output; purely a "screen floating in space" frame.
   ============================================================ */

:root {
    /* New depth palette (prefixed --t3d- so nothing existing is touched) */
    --t3d-space-1: #04060d;   /* far space */
    --t3d-space-2: #0a1020;   /* near space */
    --t3d-glass:   rgba(8, 14, 28, 0.62);   /* panel tint over matrix */
    --t3d-edge:    #35f2d6;   /* teal neon edge */
    --t3d-edge-2:  #8a6bff;   /* violet secondary */
    --t3d-edge-soft: rgba(53, 242, 214, 0.55);
    --t3d-rx: 0deg;           /* live tilt, driven by JS */
    --t3d-ry: 0deg;
    --t3d-lift: 0px;          /* parallax depth */
}

/* Deep-space gradient behind the matrix rain → first layer of depth */
body.matrix-mode {
    background:
        radial-gradient(1200px 800px at 50% 18%, var(--t3d-space-2), var(--t3d-space-1) 70%) fixed;
}

/* ----- Portfolio shell: header + about/commands OUTSIDE the 3D box ----- */
#portfolio {
    position: relative;
    z-index: 1;
    height: 100vh;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(290px, 360px) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header header"
        "aside  terminal";
    gap: clamp(10px, 1.4vw, 22px);
    padding: clamp(12px, 1.8vw, 24px);
}

/* Header */
#px-header { grid-area: header; display: flex; align-items: baseline;
    justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding: 4px 8px; }
.px-brand { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.px-logo {
    font: 800 clamp(20px, 2.4vw, 30px)/1 'Lucida Console', Monaco, monospace;
    letter-spacing: .06em;
    color: #eafffb;
    text-shadow: 0 0 18px rgba(53,242,214,0.5);
}
.px-logo .px-dot { color: var(--t3d-edge); }
.px-logo { white-space: nowrap; }
/* blinking caret used by the logo morph animation (brand.js) */
.px-caret {
    display: inline-block;
    margin-left: 1px;
    color: var(--t3d-edge);
    font-weight: 400;
    text-shadow: 0 0 10px var(--t3d-edge-soft);
    animation: px-caret-blink 1.05s steps(1) infinite;
}
@keyframes px-caret-blink {
    0%, 50%      { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}
.px-name {
    font: 500 clamp(12px, 1.2vw, 15px)/1 'Lucida Console', Monaco, monospace;
    color: rgba(180, 240, 230, 0.7); letter-spacing: .04em;
    transition: opacity .5s ease;
}
.px-tagline {
    font: 500 clamp(11px, 1.1vw, 14px)/1 'Lucida Console', Monaco, monospace;
    color: var(--t3d-edge-2);
    text-shadow: 0 0 14px rgba(138,107,255,0.45);
    letter-spacing: .03em;
}

/* Aside (about + quick commands) — a column of glass cards, scrolls if tall */
#px-aside {
    grid-area: aside;
    min-height: 0;
    overflow: auto;
    display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px);
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(53,242,214,0.4) transparent;
    /* Float the card column in the same 3D field as the terminal — driven by
       the same --t3d-* vars, so cards and screen tilt together as one scene. */
    transform:
        perspective(1500px)
        rotateX(var(--t3d-rx))
        rotateY(var(--t3d-ry))
        translateZ(var(--t3d-lift));
    transform-style: preserve-3d;
    transition: transform .12s ease-out;
    will-change: transform;
}
#px-aside::-webkit-scrollbar { width: 8px; }
#px-aside::-webkit-scrollbar-thumb {
    background: rgba(53,242,214,0.3); border-radius: 8px; }

.px-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 18%),
        var(--t3d-glass);
    backdrop-filter: blur(7px) saturate(1.1);
    -webkit-backdrop-filter: blur(7px) saturate(1.1);
    border: 1px solid rgba(53, 242, 214, 0.22);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow:
        0 0 22px rgba(53,242,214,0.1),
        0 24px 50px -28px rgba(0,0,0,0.85),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.px-card {
    transition: border-color .3s ease, box-shadow .3s ease;
}
.px-card:hover {
    border-color: rgba(53, 242, 214, 0.45);
    box-shadow:
        0 0 28px rgba(53,242,214,0.18),
        0 28px 56px -28px rgba(0,0,0,0.88),
        inset 0 1px 0 rgba(255,255,255,0.12);
}
.px-card-title {
    margin: 0 0 12px;
    font: 700 13px/1 'Lucida Console', Monaco, monospace;
    letter-spacing: .08em; text-transform: lowercase;
    color: var(--t3d-edge);
    text-shadow: 0 0 12px rgba(53,242,214,0.4);
}
.px-card-sub {
    margin: -4px 0 14px;
    font: 400 11px/1.4 'Lucida Console', Monaco, monospace;
    color: rgba(170, 220, 210, 0.6);
}
.px-about-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 9px;
    font: 500 13px/1.4 'Lucida Console', Monaco, monospace;
    color: rgba(220, 245, 240, 0.92);
}
.px-about-list li { padding-left: 2px; }

/* Quick-command groups + chips (reuse existing .cmd-btn click handler) */
.px-cmd-group { margin-bottom: 14px; }
.px-cmd-group:last-child { margin-bottom: 0; }
.px-cmd-label {
    display: block; margin-bottom: 8px;
    font: 600 11px/1 'Lucida Console', Monaco, monospace;
    letter-spacing: .05em; color: rgba(180, 230, 220, 0.75);
}
.px-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.px-chips .cmd-btn {
    display: inline-block; cursor: pointer; user-select: none;
    font: 600 12px/1 'Lucida Console', Monaco, monospace;
    color: #d6fff8;
    padding: 6px 11px; border-radius: 8px;
    background: rgba(53, 242, 214, 0.08);
    border: 1px solid rgba(53, 242, 214, 0.28);
    transition: transform .12s ease, background .2s ease,
                box-shadow .2s ease, color .2s ease;
}
.px-chips .cmd-btn:hover {
    transform: translateY(-2px);
    color: #04141a;
    background: var(--t3d-edge);
    border-color: var(--t3d-edge);
    box-shadow: 0 0 16px rgba(53,242,214,0.6);
}
.px-chips .cmd-btn:active { transform: translateY(0) scale(.96); }

/* ----- The perspective stage now fills its grid cell ----- */
#t3d-scene {
    position: relative;
    z-index: 1;
    grid-area: terminal;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: stretch;
    padding: clamp(6px, 1vmin, 16px);
    perspective: 1500px;
    perspective-origin: 50% 42%;
    pointer-events: none;          /* only the screen itself is interactive */
}

#t3d-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}

/* Push the matrix rain back: dim + slight blur so the screen reads as nearer */
#mybgTerminal {
    width: 104vw !important;
    height: 104vh !important;
    left: -2vw !important;
    top: -2vh !important;
    opacity: 0.28;
    filter: blur(0.6px) saturate(0.85) brightness(0.9);
    transform: translate3d(var(--t3d-mx, 0), var(--t3d-my, 0), 0);
    transition: opacity .4s ease;
}

/* ----- The floating "screen" ----- */
#t3d-scene #terminal-fullscreen {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: auto;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 16%),
        var(--t3d-glass);
    backdrop-filter: blur(7px) saturate(1.1);
    -webkit-backdrop-filter: blur(7px) saturate(1.1);
    border: 1px solid rgba(53, 242, 214, 0.28);
    transform:
        rotateX(calc(var(--t3d-rx) + var(--t3d-wheel-tilt, 0deg)))
        rotateY(var(--t3d-ry))
        translateZ(var(--t3d-lift));
    transform-style: preserve-3d;
    transition: box-shadow .4s ease, border-color .4s ease;
    box-shadow:
        /* edge neon */
        0 0 0 1px rgba(138,107,255,0.18),
        0 0 22px var(--t3d-edge-soft),
        0 0 60px rgba(138,107,255,0.22),
        /* long depth drop → it hovers above the field */
        0 40px 90px -30px rgba(0,0,0,0.9),
        0 18px 40px -20px rgba(0,0,0,0.7),
        /* glassy inner highlights / inset curve */
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 0 90px rgba(0, 20, 30, 0.55),
        inset 0 -30px 60px -30px rgba(0,0,0,0.6);
    will-change: transform;
}

#t3d-scene #terminal-fullscreen:hover {
    border-color: rgba(53, 242, 214, 0.5);
    box-shadow:
        0 0 0 1px rgba(138,107,255,0.25),
        0 0 30px var(--t3d-edge-soft),
        0 0 80px rgba(138,107,255,0.28),
        0 44px 100px -30px rgba(0,0,0,0.92),
        0 18px 40px -20px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 0 90px rgba(0, 20, 30, 0.55),
        inset 0 -30px 60px -30px rgba(0,0,0,0.6);
}

/* Window-chrome titlebar — gives the terminal the same `// label` voice as the
   aside cards so all four panels read as one family. */
.t3d-titlebar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(53, 242, 214, 0.18);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 90%),
        rgba(4, 18, 24, 0.35);
    user-select: none;
    pointer-events: none;
}
.t3d-dots { display: inline-flex; gap: 7px; }
.t3d-dots i {
    width: 11px; height: 11px; border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 0 6px currentColor;
}
.t3d-dots i:nth-child(1) { background: #ff5f56; color: rgba(255,95,86,0.6); }
.t3d-dots i:nth-child(2) { background: #ffbd2e; color: rgba(255,189,46,0.6); }
.t3d-dots i:nth-child(3) { background: #27c93f; color: rgba(39,201,63,0.6); }
.t3d-title {
    font: 700 12px/1 'Lucida Console', Monaco, monospace;
    letter-spacing: .08em; text-transform: lowercase;
    color: var(--t3d-edge);
    text-shadow: 0 0 12px rgba(53,242,214,0.4);
}
.t3d-host {
    margin-left: auto;
    font: 500 11px/1 'Lucida Console', Monaco, monospace;
    letter-spacing: .04em;
    color: rgba(170, 220, 210, 0.55);
}

/* Terminal fills the whole 3D screen (not the viewport) and scrolls inside */
#t3d-scene #container,
#t3d-scene #terminal-fullscreen .terminal {
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    padding: 14px 18px 18px !important;
    overflow: auto !important;
}

/* CRT / hologram overlay: scanlines + vignette + curvature. Click-through. */
#t3d-overlay {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    z-index: 5;
    transform: translateZ(30px);
    background:
        /* vignette */
        radial-gradient(120% 130% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.5) 100%),
        /* scanlines */
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.16) 0px,
            rgba(0,0,0,0.16) 1px,
            rgba(0,0,0,0) 3px
        );
    mix-blend-mode: multiply;
    opacity: 0.55;
    animation: t3d-flicker 5.5s steps(60) infinite;
}
/* faint moving glare sweep */
#t3d-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(115deg,
        rgba(255,255,255,0) 40%,
        rgba(120,255,235,0.05) 50%,
        rgba(255,255,255,0) 60%);
    animation: t3d-sweep 9s ease-in-out infinite;
}

@keyframes t3d-flicker {
    0%, 96%, 100% { opacity: 0.55; }
    97% { opacity: 0.48; }
    98% { opacity: 0.6; }
}
@keyframes t3d-sweep {
    0%, 100% { transform: translateZ(30px) translateX(-30%); opacity: 0; }
    50%      { transform: translateZ(30px) translateX(30%); opacity: 1; }
}

/* Keyboard-control hint pill */
#t3d-hint {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 4;
    font: 500 11px/1 'Lucida Console', Monaco, monospace;
    letter-spacing: .03em;
    color: rgba(170, 230, 220, 0.8);
    background: rgba(8, 14, 28, 0.6);
    border: 1px solid rgba(53, 242, 214, 0.25);
    border-radius: 999px;
    padding: 7px 14px;
    pointer-events: none;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 18px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity .5s ease;
}
#t3d-hint.t3d-show { opacity: 1; }

/* Flattened mode (toggle with Alt+3) — kills perspective for focus/perf */
body.t3d-flat #t3d-scene { perspective: none; }
body.t3d-flat #t3d-scene #terminal-fullscreen { transform: none !important; }
body.t3d-flat #px-aside { transform: none !important; }
body.t3d-flat #mybgTerminal { opacity: 0.35; }

/* Respect reduced-motion + small screens: flatten, stay full-bleed & usable */
@media (prefers-reduced-motion: reduce) {
    #t3d-overlay { animation: none; }
    #t3d-overlay::after { animation: none; opacity: 0; }
    #t3d-scene #terminal-fullscreen { transition: none; }
}

@media (max-width: 900px) {
    /* allow the page to scroll so stacked sections are reachable */
    html, body { overflow: auto !important; height: auto !important; }
    #portfolio {
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "header"
            "terminal"
            "aside";
    }
    #px-aside { overflow: visible; transform: none !important; }
    #t3d-scene {
        height: 72vh;
        padding: 0;
        perspective: none;
    }
    #t3d-stage { width: 100%; height: 100%; }
    #t3d-scene #terminal-fullscreen {
        transform: none !important;
        backdrop-filter: blur(3px);
        box-shadow:
            0 0 22px var(--t3d-edge-soft),
            inset 0 0 80px rgba(0,0,0,0.5);
    }
    #t3d-overlay { opacity: 0.4; }
    #t3d-hint { display: none; }
}

/* ============================================================
   ENTRANCE REVEAL + FOCUS + SOUND BUTTON  (transitions.js / sfx.js)
   ============================================================ */

/* Staggered boot-in. Only when motion is welcome; JS adds .t3d-anim
   to <html> immediately, then .t3d-in on the next frame. */
@media (prefers-reduced-motion: no-preference) {
    .t3d-anim #px-header,
    .t3d-anim #px-aside .px-card,
    .t3d-anim #t3d-stage {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .8s cubic-bezier(.16,1,.3,1),
                    transform .9s cubic-bezier(.16,1,.3,1);
        will-change: opacity, transform;
    }
    .t3d-anim #t3d-stage { transform: translateY(26px) scale(.985); }

    /* stagger */
    .t3d-anim #px-header                       { transition-delay: .05s; }
    .t3d-anim #px-aside .px-card:nth-child(1)  { transition-delay: .18s; }
    .t3d-anim #px-aside .px-card:nth-child(2)  { transition-delay: .30s; }
    .t3d-anim #t3d-stage                       { transition-delay: .12s; }

    .t3d-anim.t3d-in #px-header,
    .t3d-anim.t3d-in #px-aside .px-card,
    .t3d-anim.t3d-in #t3d-stage {
        opacity: 1;
        transform: none;
    }
}

/* Keyboard focus ring on command chips (chip nav) */
#px-aside .cmd-btn:focus-visible {
    outline: none;
    color: #04141a;
    background: var(--t3d-edge);
    border-color: var(--t3d-edge);
    box-shadow: 0 0 0 2px rgba(53,242,214,0.35),
                0 0 18px rgba(53,242,214,0.7);
}

/* Sound toggle button (sfx.js) */
#sfx-toggle {
    position: fixed;
    left: 18px; bottom: 16px;
    z-index: 50;
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 13px;
    font: 700 12px/1 'Lucida Console', Monaco, monospace;
    letter-spacing: .05em;
    color: var(--t3d-edge);
    background: rgba(8, 14, 28, 0.6);
    border: 1px solid rgba(53, 242, 214, 0.35);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 16px rgba(0,0,0,0.5), 0 0 14px rgba(53,242,214,0.18);
    transition: transform .15s ease, box-shadow .25s ease, color .25s ease;
}
#sfx-toggle:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(53,242,214,0.4); }
#sfx-toggle.sfx-off { color: rgba(180, 220, 215, 0.65); border-color: rgba(120,150,150,0.35); }
#sfx-toggle .sfx-ico { font-size: 14px; }
#sfx-toggle .sfx-lbl { opacity: .8; }
/* animated equaliser bars while sound is on */
#sfx-toggle .sfx-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
#sfx-toggle .sfx-bars i {
    width: 3px; background: var(--t3d-edge); border-radius: 1px;
    box-shadow: 0 0 6px rgba(53,242,214,0.7);
    animation: sfx-eq .9s ease-in-out infinite;
}
#sfx-toggle .sfx-bars i:nth-child(1) { height: 6px; animation-delay: 0s; }
#sfx-toggle .sfx-bars i:nth-child(2) { height: 12px; animation-delay: .15s; }
#sfx-toggle .sfx-bars i:nth-child(3) { height: 8px; animation-delay: .3s; }
@keyframes sfx-eq {
    0%, 100% { transform: scaleY(0.45); }
    50%      { transform: scaleY(1); }
}

@media (max-width: 900px) {
    #sfx-toggle { left: 10px; bottom: 10px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    #sfx-toggle .sfx-bars i { animation: none; }
}

/* ---- Research card (credibility) ---- */
.px-research-role {
    margin: 0 0 6px;
    font: 500 12px/1.45 'Lucida Console', Monaco, monospace;
    color: #c8d8d4;
}
.px-research-focus {
    margin: 0 0 12px;
    font: 400 11px/1.5 'Lucida Console', Monaco, monospace;
    color: rgba(170, 220, 210, 0.62);
}
/* research interests — deliberately NOT button-styled (so they don't read
   as clickable commands). Borderless violet keywords with a diamond marker. */
.px-tags {
    list-style: none; margin: 0 0 12px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 5px 16px;
}
.px-tags li {
    position: relative;
    padding-left: 14px;
    font: 500 12.5px/1.4 'Lucida Console', Monaco, monospace;
    color: #c2b3ff;
    letter-spacing: .01em;
}
.px-tags li::before {
    content: '◆';
    position: absolute; left: 0; top: 2px;
    font-size: 8px;
    color: var(--t3d-edge-2);
    text-shadow: 0 0 8px rgba(138, 107, 255, 0.6);
}
.px-research-links {
    margin-bottom: 10px;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font: 600 12px/1.4 'Lucida Console', Monaco, monospace;
}
.px-research-links a {
    color: #8a6bff; text-decoration: none;
    border-bottom: 1px solid rgba(138, 107, 255, 0.4);
    transition: color .2s ease, text-shadow .2s ease;
}
.px-research-links a:hover { color: #c8b9ff; text-shadow: 0 0 10px rgba(138, 107, 255, 0.5); }
.px-research-links span { color: #5b6b78; }
.px-card-sub b { color: #35f2d6; font-weight: 700; }

/* ---- terminal-style content protection: no selection / copy / callout ---- */
html, body { -webkit-touch-callout: none; }
body, #portfolio, #px-header, #px-header *,
.px-card, .px-card *,
.terminal, .terminal *, #container, #container * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
/* keep links/chips obviously clickable */
.px-chips .cmd-btn, .px-research-links a, #sfx-toggle { cursor: pointer; }