/*
========================================
TABLE OF CONTENTS

  1.  Reset
  2.  Theme Variables (Deep Space vs E-Ink)
  3.  Design Tokens (Radius & Transition Timing)
  4.  Base Styles
  5.  Typography Effects (Juba Style)
  6.  Navbar Scroll State
  7.  Sticky Cards (For the Work Section) — early transition-only rule
  8.  Computer Vision Cursor
  9.  Breakpoint Reference (for this project)
  10. Global Layout
  11. Particle Canvas
  12. WebGL Particle Container
  13. Navbar
  14. Hero
  15. Work Section & Typography
  16. Sticky Cards Layout (Split Design)
  17. About Section & Grid
  18. Orbital Resume Badge
  19. Scroll Reveal Bio (Normal Paragraph)
  20. About Bottom Row (Telemetry & Links)
  21. Experiment Lab Grid
  22. Lab Terminal & Fullscreen Mode
  23. Experiment Registry Menu
  24. Terminal Window UI (Restored)
  25. Native Fullscreen Layout (Edge-to-Edge)
  26. Transforming Social Sidebar (Updated)
  27. System Toolkit Grid & Cards
  28. Toolkit Micro-Interactions
  29. Professional About Interface
  30. Unified Scroll Snap (Timeline & Credentials)
  31. System Footer

  Note: sections 7 and 16 are NOT duplicates —
  #7 is one early rule (.project-card transition)
  that got placed near the top of the file,
  while #16 is the full sticky-card layout system
  used by the Work section. Worth eventually
  moving #7 down next to #16 so the file reads
  top-to-bottom in true page order.

  Tip: search for the ALL-CAPS header text
  above (e.g. "LAB TERMINAL") to jump to a
  section — each one matches a "====" block
  further down in this file.
========================================
*/

/*
========================================
RESET
========================================
*/
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}


/*
========================================
THEME VARIABLES (Deep Space vs E-Ink)
========================================
*/
:root {
    --bg-color: #0a0a0a;
    --text-color: #ffffff;
    --text-muted: #9ca3af;
    --accent-color: #c3fffc;
    --card-bg: #171717;
    --border-color: #262626;
}

/*
========================================
DESIGN TOKENS (Radius & Transition Timing)

Same in both themes, so these live in :root
only, not repeated in body.theme-e-ink.
========================================
*/
:root {
    /* Border radius scale */
    --radius-xs: 0.25rem;
    --radius-sm: 4px;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-pill: 100px;
    --radius-circle: 50%;

    /* Transition timing */
    --transition-fast: var(--transition-fast);          /* hover states: color, border, opacity */
    --transition-medium: var(--transition-medium);        /* fades, theme swaps */
    --transition-slow: var(--transition-slow);          /* slower opacity fades */
    --transition-panel: var(--transition-panel);       /* sliding panels/menus */
    --transition-panel-slow: var(--transition-panel-slow);  /* larger panel transforms */
    --transition-spring: var(--transition-spring); /* bracket "snap" effect */
}

body.theme-e-ink {
    /* Muted, warm "paper" tone instead of a clean off-white,
       and a desaturated rust accent instead of a saturated
       vermillion — real e-ink panels can't render vivid color. */
    --bg-color: #eae7dc;
    --text-color: #2a2824;
    --text-muted: #726c5e;
    --accent-color: #9c4221;
    --card-bg: #ded9c9;
    --border-color: #cfc9b8;
}

/*
========================================
BASE STYLES
========================================
*/
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-medium), color var(--transition-medium);

    background-image: 
        linear-gradient(color-mix(in srgb, var(--text-muted) 15%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 15%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--text-muted) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 6%, transparent) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    background-attachment: scroll;
}

/* Custom terminal-style text selection */
::selection {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

/*
========================================
TYPOGRAPHY EFFECTS (Juba Style)
========================================
*/
.text-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent-color);
    transition: color var(--transition-fast), -webkit-text-stroke var(--transition-fast);
}

.text-outline:hover {
    color: var(--accent-color);
}

/* Dynamic text colors for general elements */
.text-brand-accent { color: var(--accent-color); }
.border-brand-accent { border-color: var(--accent-color); }
.bg-brand-accent { background-color: var(--accent-color); }

/*
========================================
NAVBAR SCROLL STATE
========================================
*/
nav {
    transition: background-color var(--transition-fast), backdrop-filter var(--transition-fast), padding var(--transition-fast), border-color var(--transition-fast);
    border-bottom: 1px solid transparent;
}

body.is-scrolled nav {
    /* Uses CSS color-mix to create a semi-transparent background based on the current theme */
    background-color: color-mix(in srgb, var(--bg-color) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

/*
========================================
STICKY CARDS (For the Work Section)
========================================
*/
.project-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-medium), border-color var(--transition-medium);
}

/*
========================================
COMPUTER VISION CURSOR
========================================
*/
@media (pointer: fine) {
    body, a, button, .project-card, .github-link {
        cursor: none !important;
    }
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Lets clicks pass through */
    z-index: 9999;
    display: none;
    
    /* Inverts the cursor colors based on the background behind it */
    mix-blend-mode: difference;
    color: var(--accent-color);
}

@media (pointer: fine) {
    .custom-cursor {
        display: block;
    }
}

/* The Leader Dot (Slightly Larger) */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: var(--radius-circle);
    will-change: transform;
}

/* The Label (Follows the dot) */
.cursor-label {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    white-space: nowrap;
    will-change: transform, opacity;
    transition: opacity var(--transition-fast);
}

/* The Follower (Dynamic Bounding Box) */
.cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Default drifting size */
    width: 40px; 
    height: 40px;
    
    will-change: transform, width, height;
    transition: width var(--transition-fast), height var(--transition-fast); 
}

/* Dynamic CSS Brackets that scale to any height */
.cursor-bracket {
    width: 12px;
    height: 100%; /* Stretches to fill the follower's height */
    border: 2px solid var(--accent-color);
}

.cursor-bracket.left {
    border-right: none; /* Removes inner border to create a [ shape */
}

.cursor-bracket.right {
    border-left: none;  /* Removes inner border to create a ] shape */
}

/*
========================================
BREAKPOINT REFERENCE (for this project)
CSS custom properties can't be used inside
@media conditions, so these are just a guide
for the literal px values used below.

  sm  : 640px
  md  : 768px   <- used for nav/hero right now
  lg  : 1024px
  xl  : 1280px
========================================
*/

/*
========================================
GLOBAL LAYOUT
========================================
*/
.site {
    font-family: 'JetBrains Mono', monospace;
    overflow-x: hidden;
    position: relative;
}

/*
========================================
PARTICLE CANVAS
========================================
*/
.particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    pointer-events: none; /* Crucial: Lets you click links through the canvas */
    opacity: 0.8; /* Adjust for desired visibility */
}

/*
========================================
WEBGL PARTICLE CONTAINER
========================================
*/
#webgl-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    pointer-events: none;
}

#webgl-container canvas {
    display: block;
}

.main {
    position: relative;
    z-index: 10;
}

/*
========================================
NAVBAR
========================================
*/
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 50;
    color: var(--accent-color);
}

.navbar__brand {
    font-weight: bold;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-size: 1.125rem;
}

.navbar__links {
    display: none;
    gap: 2rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-items: center;
}

.navbar__link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.navbar__link:hover {
    color: var(--text-color);
}

.navbar__theme-toggle {
    margin-left: 1rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.navbar__theme-toggle:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
}

.navbar__link.is-active {
    color: var(--accent-color);
    position: relative;
}

.navbar__link.is-active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
}

.scroll-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--accent-color);
    width: 0%;
    will-change: width;
    z-index: 51;
}

@media (min-width: 768px) {
    .navbar__links {
        display: flex;
    }
}

/*
========================================
HERO
========================================
*/
.hero {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4.5rem 1.5rem 1.5rem;
}

.hero__prompt {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.hero__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: min(18vw, 18vh);
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--text-color);
    margin: 0;
}

.hero__meta {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.hero__description p {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

.hero__stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero__stat {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.hero__stat--last {
    border-bottom: none;
}

.hero__stat-value--accent {
    color: var(--accent-color);
}

@media (min-width: 768px) {
    .hero {
        padding: 5rem 3rem 0;
    }

    .hero__prompt {
        font-size: 1rem;
    }

    .hero__title {
        font-size: min(15vw, 21vh);
    }

    .hero__meta {
        grid-template-columns: 1fr 1fr;
    }

    .hero__description p {
        padding-right: 2rem;
    }
}

/*
========================================
WORK SECTION & TYPOGRAPHY
========================================
*/
.work {
    padding: 2rem 0; /* Reduced top padding */
    position: relative;
    /* IMPORTANT: No 'overflow: hidden' here, or sticky won't work */
}

.work__header-wrapper {
    position: sticky;
    top: 6rem;
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    z-index: 1;
    overflow: hidden;
}

.work-ticker {
    display: flex;
    white-space: nowrap;
    will-change: transform; 
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: min(20vw, 25vh); /* Scaled slightly to fit better on mobile */
    line-height: 0.8;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
    color: var(--accent-color);
    padding-right: 4rem;
}

/*
========================================
STICKY CARDS LAYOUT (SPLIT DESIGN)
========================================
*/
.cards-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1.5rem 20vh 1.5rem; 
    position: relative;
    z-index: 10; /* Ensures cards slide OVER the sticky ticker */
}

.project-card {
    position: sticky;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 2rem;
    border-radius: var(--radius-lg);
    
    display: grid;
    grid-template-columns: 1fr; /* Mobile first: stacked */
    gap: 2rem;
    
    box-shadow: 0 -15px 40px -20px rgba(0,0,0,0.9);
}

/* 
  Staggered sticky offsets so they stack beautifully 
  below the ticker as you scroll down 
*/
.project-card:nth-child(1) { top: 12rem; z-index: 11; }
.project-card:nth-child(2) { top: 13rem; z-index: 12; }
.project-card:nth-child(3) { top: 14rem; z-index: 13; }

/* 
  Left Side: Typography & Info 
*/
.project-card__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-card__meta-group {
    margin-bottom: 1rem;
}

.project-card__category {
    font-size: 1rem;
    color: var(--text-muted);
    font-style: italic; 
}

.project-card__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem); /* Responsive sizing for long titles */
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--accent-color);
    margin: 0 0 1.5rem 0;
    letter-spacing: -0.02em;
}

.project-card__desc {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    max-width: 95%;
}

.project-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.metric-tag {
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    border-radius: var(--radius-pill); 
    text-transform: uppercase;
}

.github-link {
    display: inline-block;
    color: var(--accent-color);
    font-size: 0.875rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    align-self: flex-start;
}

.github-link:hover {
    color: var(--text-color);
    border-bottom: 1px solid var(--text-color);
}

/* 
  Right Side: Visuals (Reduced Size)
*/
.project-card__right {
    display: flex;
    align-items: center;
}

.project-visual {
    width: 100%;
    height: 100%;
    min-height: 250px;
    background-color: color-mix(in srgb, var(--bg-color) 80%, var(--accent-color));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Ensure the image fills the container perfectly */
.project-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    filter: grayscale(100%); /* Keeps it matching the terminal vibe by default */
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
    will-change: transform, opacity, filter;
}

/* On hover, restore color, brightness, and slightly scale the image */
.project-card:hover .project-visual img {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05); /* Creates a smooth zoom effect */
}

.visual-placeholder-text {
    font-size: 0.75rem;
    color: var(--accent-color);
    opacity: 0.5;
    letter-spacing: 0.2em;
    transform: rotate(0deg); /* Made horizontal for better legibility on small visuals */
}

/* 
  Desktop Grid Split (60% Text / 40% Visual) 
*/
@media (min-width: 1024px) {
    .cards-container {
        padding: 0 3rem 20vh 3rem;
    }
    
    .project-card {
        grid-template-columns: 1fr 1fr;
        padding: 4rem;
        min-height: 75vh;
    }

    .project-card__title {
        font-size: clamp(2.5rem, 4vw, 4.5rem); 
    }
}

/*
========================================
ABOUT SECTION & GRID
========================================
*/
.about {
    padding: 0 0 8rem 0;
    min-height: 100vh;
    border-top: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.about__header-wrapper {
    position: relative;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 4rem;
    display: flex;
    z-index: 1;
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 0 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.scroll-ticker {
    display: flex;
    white-space: nowrap;
    will-change: transform; 
}

@media (min-width: 1024px) {
    .about__grid {
        grid-template-columns: 4fr 6fr; /* Left column smaller, right column larger */
        gap: 6rem;
        padding: 0 3rem;
    }
}

/*
========================================
ORBITAL RESUME BADGE
========================================
*/
.orbital-badge {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 3rem auto;
    transition: transform var(--transition-panel-slow), opacity var(--transition-slow);
    transform-origin: center top;
}

.orbital-badge__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.orbital-badge__icon {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-fast);
    letter-spacing: 0.1em;
}

.orbital-badge__icon svg {
    stroke: var(--accent-color);
    transition: stroke var(--transition-fast), transform var(--transition-fast);
}

.orbital-badge__icon:hover svg {
    stroke: var(--text-color);
    transform: translate(2px, -2px); /* Slight up-right movement on hover */
}

.orbital-badge__icon:hover {
    color: var(--text-color);
}

.orbital-badge__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: spin 15s linear infinite;
    pointer-events: none;
}

.orbital-badge__text text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    fill: var(--text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

.orbital-badge:hover .orbital-badge__text {
    animation-duration: 5s;
}

/*
========================================
SCROLL REVEAL BIO (NORMAL PARAGRAPH)
========================================
*/
.about__right {
    display: flex;
    align-items: center;
}

.scroll-bio-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.8rem); /* Responsive sizing */
    line-height: 1.6; /* More breathing room */
    font-weight: 400; /* Lighter weight for a cleaner look */
    letter-spacing: 0.04em; /* Slight tracking for uppercase */
    text-transform: uppercase; /* Forces the editorial look */
    max-width: 45ch; /* Keeps line lengths comfortable for reading */
    margin: 0;
}

@media (min-width: 1024px) {
    .scroll-bio-text {
        font-size: 1.5rem; /* Scales up slightly on desktop */
    }
}

.reveal-word {
    color: color-mix(in srgb, var(--text-color) 20%, transparent); /* Faded default state */
    transition: color var(--transition-medium);
}

.reveal-word.is-active {
    color: var(--text-color); /* Fills in with solid text color instead of accent */
}

/*
========================================
ABOUT BOTTOM ROW (TELEMETRY & LINKS)
========================================
*/
.about__bottom-row {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 100%;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 10;
}

@media (min-width: 1024px) {
    .about__bottom-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 3rem; /* Matches grid padding */
    }
}

/* Left: Telemetry */
.telemetry-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Center: System Status */
.system-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator {
    width: 6px;
    height: 6px;
    background-color: #10b981; /* Success Green */
    border-radius: var(--radius-circle);
    animation: blink 2s infinite ease-in-out;
}

/* Right: Connect Links */
.connect-links {
    display: flex;
    gap: 1.5rem;
}

.connect-link {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Controls the space between the icon and the slash */
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.connect-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    
    background-color: currentColor; 
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.github-icon {
    -webkit-mask-image: url('../assets/images/icons/github.svg');
    mask-image: url('../assets/images/icons/github.svg');
}

.linkedin-icon {
    -webkit-mask-image: url('../assets/images/icons/linkedin.svg');
    mask-image: url('../assets/images/icons/linkedin.svg');
}

.mail-icon {
    -webkit-mask-image: url('../assets/images/icons/email.svg');
    mask-image: url('../assets/images/icons/email.svg');
}

.connect-link:hover {
    color: var(--accent-color);
}

/*
========================================
EXPERIMENT LAB GRID
========================================
*/
.lab {
    padding: 0 0 8rem 0;
    min-height: 100vh;
    border-top: 1px solid var(--border-color);
    position: relative;
    overflow-x: hidden;
}

.lab__header-wrapper {
    position: relative;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 4rem;
    display: flex;
    z-index: 1;
}

.lab__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 0 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .lab__grid {
        grid-template-columns: 6fr 4fr; /* Terminal gets 60%, Menu gets 40% */
        gap: 6rem;
        padding: 0 3rem;
    }
}

/*
========================================
LAB TERMINAL & FULLSCREEN MODE
========================================
*/
.lab-terminal {
    height: 500px; /* Fixed height for dashboard feel */
    display: flex;
    flex-direction: column;
    transition: all var(--transition-panel-slow);
}

.lab-terminal .terminal__body {
    flex-grow: 1;
    overflow-y: auto; /* Allow scrolling inside terminal */
}

/* When the JS toggles fullscreen */
.lab-terminal.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background-color: var(--bg-color); /* Goes solid over the site */
}

/*
========================================
EXPERIMENT REGISTRY MENU
========================================
*/
.experiment-list-wrapper {
    max-height: 500px;
    position: relative;
    overflow: hidden;
    
    /* Creates the fade effect at the top (5%) and bottom (95%) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}

.experiment-list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    
    max-height: 500px; 
    overflow-y: auto;
    padding: 1.5rem 0 2rem 0;
    
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

.experiment-item {
    cursor: pointer;
    border-left: 2px solid var(--border-color);
    padding-left: 1.5rem;
    transition: border-color var(--transition-fast), opacity var(--transition-fast);
    opacity: 0.4;
    flex-shrink: 0;
}

.experiment-list::-webkit-scrollbar {
    display: none;
}

.experiment-item:hover, .experiment-item.is-active {
    border-left: 2px solid var(--accent-color);
    opacity: 1;
}

.exp-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--accent-color);
    display: block;
    margin-bottom: 0.5rem;
}

.exp-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
}

.exp-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

/*
========================================
TERMINAL WINDOW UI (Restored)
========================================
*/
.terminal {
    background-color: #0a0a0a !important; 
    border: 1px solid #333333 !important;
    border-radius: var(--radius-md);
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
}

.terminal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333333;
    background-color: #1a1a1a;
}

.terminal__controls {
    display: flex;
    gap: 0.5rem;
}

.terminal__controls span {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-circle);
    background-color: #444; /* Default dot color */
}

/* Optional: Make the dots look like macOS window controls */
.terminal__controls span:nth-child(1) { background-color: #ff5f56; }
.terminal__controls span:nth-child(2) { background-color: #ffbd2e; }
.terminal__controls span:nth-child(3) { background-color: #27c93f; }

.terminal__title {
    color: #888888;
    font-size: 0.75rem;
}

.terminal__toggle {
    background: transparent;
    border: 1px solid #444;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    color: #aaaaaa;
    font-family: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.terminal__toggle:hover {
    background: #333;
    color: #ffffff;
}

.terminal__body {
    padding: 1.5rem;
    color: #00ff41; /* Hacker green text */
    flex-grow: 1;
    overflow-y: auto;
}

.log-line {
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

/*
========================================
NATIVE FULLSCREEN LAYOUT (Edge-to-Edge)
========================================
*/
/* The Actions Wrapper */
.terminal__actions {
    display: flex;
    gap: 0.5rem;
}

/* Hide sidebar toggle in normal view */
.sidebar-arrow-toggle {
    display: none;
}

/* 1. Reset the grid into a blank canvas */
.lab__grid.is-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important; /* <--- This destroys the 1400px cap */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important; /* <--- Prevents grid columns from restricting width */
    background: #0a0a0a;
    overflow: hidden;
    z-index: 999999;
}

.lab__grid.is-fullscreen .sidebar-toggle {
    display: inline-block;
}

/* 2. Show the toggle button ONLY in fullscreen */
.lab__grid.is-fullscreen .sidebar-arrow-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Attach to the left edge of the sidebar */
    position: absolute;
    top: 50%;
    left: -48px;
    transform: translateY(-50%);
    
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    
    background-color: #1a1a1a;
    border: 1px solid #333333;
    color: #00ff41;
    
    cursor: pointer;
    z-index: 100001;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lab__grid.is-fullscreen .sidebar-arrow-toggle:hover {
    background-color: #333333;
    color: #ffffff;
}

/* Animate the arrow icon direction */
.lab__grid.is-fullscreen .sidebar-arrow-toggle svg {
    transition: transform var(--transition-panel);
    transform: rotate(0deg); 
}

.lab__grid.is-fullscreen.sidebar-open .sidebar-arrow-toggle svg {
    transform: rotate(180deg); 
}

/* 3. Force the terminal to fill the entire screen */
.lab__grid.is-fullscreen .lab__left {
    width: 100% !important; 
    height: 100%;
    margin: 0;
    transition: width var(--transition-panel); 
}

.lab__grid.is-fullscreen .lab-terminal {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0;
}


.lab__grid.is-fullscreen.sidebar-open .lab__left {
    width: calc(100% - 450px) !important;
}

/* 4. Convert the Experiment List into a sliding sidebar */
.lab__grid.is-fullscreen .lab__right {
    position: fixed;
    top: 0;
    right: 0;
    width: 450px;
    max-width: 90vw;
    height: 100vh;
    background-color: var(--bg-color); 
    border-left: 1px solid var(--border-color);
    padding: 2rem;
    z-index: 100000;
    transform: translateX(100%); 
    transition: transform var(--transition-panel);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.lab__grid.is-fullscreen .experiment-list-wrapper {
    max-height: calc(100vh - 4rem); 
}

/* 5. The Docked Sidebar State */
.lab__grid.is-fullscreen.sidebar-open .lab__right {
    transform: translateX(0);
}

@media (max-width: 500px) {
    .lab__grid.is-fullscreen.sidebar-open .lab__left,
    .lab__grid.is-fullscreen.sidebar-open .lab-terminal {
        width: 10% !important; 
    }
}

.cursor.is-fullscreen-active {
    z-index: 2147483647 !important; /* Max integer z-index */
    mix-blend-mode: normal !important; /* Prevents blend modes from making it invisible on black */
}

:fullscreen .navbar, 
.is-fullscreen .navbar {
    display: none !important;
}

/*
========================================
TRANSFORMING SOCIAL SIDEBAR (Updated)
========================================
*/
.floating-socials {
    position: fixed;
    bottom: 2.5rem; 
    right: 2rem;    
    display: flex;
    flex-direction: column; 
    gap: 1.5rem;
    z-index: 9000;
    transition: all var(--transition-panel);
    opacity: 1;
    transform: translateX(0);
}

/* Make the icons significantly larger */
.floating-socials .connect-icon {
    width: 24px;
    height: 24px;
}

.floating-socials .connect-text {
    display: none;
}

.floating-socials.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
}

/*
========================================
SYSTEM TOOLKIT GRID & CARDS
========================================
*/
.toolkit {
    padding: 0 0 8rem 0;
    border-top: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.toolkit__header-wrapper {
    position: relative;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 4rem;
    display: flex;
    z-index: 1;
}

.toolkit__container {
    padding: 0 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .toolkit__container {
        padding: 0 3rem;
    }
}

/* Tabs */
.toolkit__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
    justify-content: center;
}

.toolkit-tab-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-pill);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toolkit-tab-btn:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
}

.toolkit-tab-btn.is-active {
    background: var(--text-color);
    color: var(--bg-color);
    border-color: var(--text-color);
}

/* Responsive Grid */
.toolkit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* Spacious Cards (Reference Match) */
.toolkit-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.toolkit-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.toolkit-card img {
    width: 48px;
    height: 48px;
    margin-bottom: 1.5rem;
    /* Optional: If you want icons to adapt strictly to your theme */
    /* filter: grayscale(100%) opacity(0.8); */
    transition: filter var(--transition-fast);
}

.toolkit-card:hover img {
    filter: grayscale(0%) opacity(1);
}

.toolkit-card__name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color);
}

.toolkit-card__role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

/*
========================================
TOOLKIT MICRO-INTERACTIONS
========================================
*/
.toolkit-card {
    position: relative;
    overflow: hidden; /* Contains the spotlight strictly within the card */
}

/* Elevate text and images above the spotlight effect */
.toolkit-card img,
.toolkit-card__name,
.toolkit-card__role {
    position: relative;
    z-index: 10;
}

/* 1. The Dynamic Spotlight */
.toolkit-card::before {
    content: '';
    position: absolute;
    inset: 0;
    
    /* Generates a soft glow at the exact mouse coordinates */
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        color-mix(in srgb, var(--accent-color) 12%, transparent), 
        transparent 40%
    );
    opacity: 0;
    transition: opacity var(--transition-medium);
    z-index: 0;
    pointer-events: none;
}

.toolkit-card:hover::before {
    opacity: 1; /* Lights up when hovered */
}

/* 2. The Hardware Bracket Snap */
.toolkit-brackets {
    position: absolute;
    inset: 1.5rem; /* Creates a bounding box around the content */
    pointer-events: none;
    z-index: 20;
}

.bracket {
    position: absolute;
    width: 15px;
    height: 15px;
    border-color: var(--accent-color);
    border-style: solid;
    opacity: 0;
    transition: all var(--transition-spring); /* Spring-like easing */
}

/* Initial Expanded State (Pushed outward and invisible) */
.bracket-tl { top: -20px; left: -20px; border-width: 2px 0 0 2px; }
.bracket-tr { top: -20px; right: -20px; border-width: 2px 2px 0 0; }
.bracket-bl { bottom: -20px; left: -20px; border-width: 0 0 2px 2px; }
.bracket-br { bottom: -20px; right: -20px; border-width: 0 2px 2px 0; }

/* Hover Snapped State (Moves into place and becomes visible) */
.toolkit-card:hover .bracket {
    opacity: 1;
}
.toolkit-card:hover .bracket-tl { top: 0; left: 0; }
.toolkit-card:hover .bracket-tr { top: 0; right: 0; }
.toolkit-card:hover .bracket-bl { bottom: 0; left: 0; }
.toolkit-card:hover .bracket-br { bottom: 0; right: 0; }

/*
========================================
PROFESSIONAL ABOUT INTERFACE
========================================
*/
.about-interface {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.about-tab-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: color var(--transition-fast);
    position: relative;
}

.about-tab-btn:hover {
    color: var(--text-color);
}

.about-tab-btn.is-active {
    color: var(--accent-color);
}

.about-tab-btn.is-active::after {
    content: '';
    position: absolute;
    bottom: -0.6rem;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
}

/* Fixed Content Window for internal scrolling */
.about-content-window {
    height: 50vh; /* Keeps the screen fixed while content scrolls */
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.about-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
    overflow-y: auto; /* Allow internal scrolling */
    
    /* Hide scrollbars for clean look */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.about-pane::-webkit-scrollbar {
    display: none;
}

.about-pane.is-active {
    opacity: 1;
    pointer-events: auto;
}

.professional-bio {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
    color: var(--text-color);
}

/*
========================================
UNIFIED SCROLL SNAP (TIMELINE & CREDENTIALS)
========================================
*/
.timeline-snap-container,
.credentials-snap-container {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory; 
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    /* Adds blank scrolling runway so the first and last items can reach the center */
    padding: 25vh 0; 
}

.timeline-snap-container::-webkit-scrollbar,
.credentials-snap-container::-webkit-scrollbar {
    display: none;
}

.timeline-item {
    scroll-snap-align: center; /* Snaps to the center instead of the top */
    flex-shrink: 0;
    
    display: flex;
    flex-direction: column;
    justify-content: center; 
    
    /* Reduced padding to bring certificates and experiences closer together */
    padding: 2rem 0 2rem 3rem; 
    position: relative;

    /* Unfocused State (Faded) */
    opacity: 0.25;
    transition: opacity var(--transition-slow);
}

/* Focused State (Activated via JS Intersection Observer) */
.timeline-item.is-active {
    opacity: 1;
}

/* 1. The Continuous Vertical Line */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.5rem; 
    width: 2px;
    background-color: var(--border-color);
}

.timeline-item:first-child::before {
    top: 50%;
}
.timeline-item:last-child::before {
    bottom: 50%;
}

/* 2. The Timeline Node (Dot) */
.timeline-item::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.1rem; 
    width: 14px;
    height: 14px;
    
    /* Unfocused Node State (Dim and Hollow) */
    background-color: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-circle);
    box-shadow: none;
    transition: all var(--transition-medium);
}

/* Focused Node State (Glowing Accent Color) */
.timeline-item.is-active::after {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 15px var(--accent-color);
}

/* 3. Typography Formatting */
.timeline-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.timeline-role {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    text-transform: uppercase;
}

.timeline-company {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 2rem 0;
}

.timeline-desc {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 90%;
}

.timeline-desc li {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.6;
}

.timeline-desc li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-family: 'JetBrains Mono', monospace;
}

/* 4. Unified Button Styling */
.credential-verify-btn {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--accent-color);
    text-decoration: none;
    border: 1px solid var(--accent-color);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    text-transform: uppercase;
}

.credential-verify-btn:hover {
    background: var(--accent-color);
    color: var(--bg-color);
}

/*
========================================
SYSTEM FOOTER
========================================
*/
.site-footer {
    border-top: 1px solid var(--border-color);
    background-color: color-mix(in srgb, var(--bg-color) 95%, var(--accent-color));
    padding: 6rem 1.5rem 4rem 1.5rem;
    position: relative;
    z-index: 10;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: 1fr 2fr 1fr; /* Center column is twice as wide */
        gap: 2rem;
    }
}

/* Meta Data Columns (Left & Right) */
.footer__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
}

@media (min-width: 1024px) {
    .footer__meta--right {
        text-align: right;
        align-items: flex-end;
    }
}

.meta-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.meta-value {
    font-size: 1rem;
    color: var(--text-color);
}

.time-value {
    color: var(--accent-color);
}

/* Center Terminal Note */
.footer__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.terminal-note {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 600px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    /* Slight rotation for that organic "card" feel from your reference */
    transform: rotate(-1deg); 
    transition: transform var(--transition-fast);
}

.terminal-note:hover {
    transform: rotate(0deg) translateY(-5px);
}

.terminal-note__header {
    background-color: color-mix(in srgb, var(--bg-color) 60%, transparent);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.terminal-note__body {
    padding: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
}

.terminal-note__body p {
    margin: 0 0 0.5rem 0;
}

/* Social Keycaps */
.footer__socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.footer-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-xs);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all var(--transition-fast);
    /* Mimic mechanical keyboard keys */
    box-shadow: 0 4px 0 var(--border-color); 
}

.footer-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--border-color);
    color: var(--text-color);
    border-color: var(--text-color);
}

.footer-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--border-color);
}