/* --- Global Styles & Variables --- */
:root {
    /* Light Theme (Existing) */
    --color-bg: #f0f0f0;
    --color-bg-alt: #e0e0e0;
    --color-text: #333333;
    --color-text-light: #555555;
    --color-primary-accent: #eec510;
    --color-secondary-accent: #FF003C;
    --color-tertiary-accent: #00A8A8;
    --color-border: #aaaaaa;
    --color-border-dark: #333333;
    --color-panel-bg: #ffffff;
    --color-dark-element: #222222; /* e.g., Headings in light mode */
    --color-sunmun-element: #222222;
    --color-ca-buttons: #2e2e2e;
    --color-ca-buttons-hover: #f0f0f0;

    --panel-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15);
    --inset-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1); 

    --noise-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");    --noise-opacity: 0.03; /* Opacity for light theme */

    --font-heading: 'Orbitron', sans-serif;
    --font-subheading: 'Russo One', sans-serif;
    --font-body: 'Exo 2', sans-serif;
    --transition-speed: 0.2s;
}

body.dark-theme {
    --color-bg: #1f1f1f; /* Dark background */
    --color-bg-alt: #2a2a2a; /* Slightly lighter dark */
    --color-text: #d1d1d1; /* Light grey text */
    --color-text-light: #a0a0a0; /* Medium grey secondary text */
    /*--color-primary-accent: #FCEE0A;

    /* Accents (Yellow, Red, Teal) remain the same - they pop on dark! */
    --color-border: #4a4a4a; /* Darker border */
    --color-border-dark: #686868; /* Lighter dark border */
    --color-panel-bg: #2e2e2e; /* Dark panel background */
    --color-dark-element: #f5f5f5; /* Was black, now light for headings */
    --color-sunmun-element: #2e2e2e; /* White for sun and moon icons */
    --color-ca-buttons: #2e2e2e;
    --color-ca-buttons-hover: #2e2e2e;

    /* Shadows might need slight adjustment on dark, increase intensity slightly */
    --panel-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
    --inset-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4);

    --noise-opacity: 0.04; /* Slightly more visible noise for dark */
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg); /* Apply the theme background color */
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative; /* Needed for pseudo-element positioning */
    min-height: 100vh; /* Ensure body covers viewport */
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; /* Smooth theme transition */
}

/* Noise Overlay using Pseudo-element */
body::before {
    content: "";
    position: fixed; /* Fixed position to cover viewport */
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background-image: var(--noise-texture);
    opacity: var(--noise-opacity);
    pointer-events: none; /* Allow clicks through */
    z-index: -1; /* Place it behind all content */
    transition: opacity var(--transition-speed) ease; /* Smooth opacity transition */
}

/* --- Remove or comment out the old #theme-toggle styles --- */

/* --- New Stylized Theme Switch Styles --- */
.theme-switch {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 1.5rem auto; /* Keep spacing */
    vertical-align: middle; /* Align with nav links */
    user-select: none; /* Prevent text selection */
}

/* Hide the actual checkbox */
.theme-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* The track of the slider */
.theme-switch .slider {
    display: block;
    width: 60px; /* Width of the track */
    height: 28px; /* Height of the track */
    background-color: color-mix(in srgb, var(--color-border) 60%, transparent); /* Semi-transparent border color for track */
    border: 1px solid var(--color-border-dark);
    border-radius: 3px; /* Sharp rectangle */
    position: relative;
    transition: background-color var(--transition-speed) ease;
    box-shadow: var(--inset-shadow); /* Inset look */
}

/* The knob that slides */
.theme-switch .knob {
    position: absolute;
    content: '';
    height: 22px; /* Slightly smaller than track height */
    width: 26px; /* Width of the knob */
    left: 2px; /* Initial position padding */
    bottom: 2px; /* Initial position padding */
    background-color: var(--color-primary-accent); /* Yellow knob */
    border: 1px solid color-mix(in srgb, var(--color-dark-element) 80%, transparent); /* Dark border around knob */
    border-radius: 2px; /* Sharp knob */
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), background-color var(--transition-speed) ease; /* Smooth slide */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* Slight raise */
    display: flex; /* For centering icon */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide inactive icon */
}

/* Icon Styling inside Knob */
.theme-switch .knob .icon-container {
    position: absolute;
    font-size: 14px; /* Size of icon */
    color: var(--color-sunmun-element); /* Dark icon on yellow knob */
    transition: opacity 0.2s ease-in-out, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Position icons - Moon visible by default (light mode) */
.theme-switch .knob .sun-icon {
    opacity: 0; /* Hidden initially */
    transform: translateY(10px);
}
.theme-switch .knob .moon-icon {
    opacity: 1; /* Visible initially */
    transform: translateY(0);
}


/* --- Slider behavior when checkbox is checked (Dark Mode Active) --- */

/* Move the knob to the right */
.theme-switch input:checked + .slider .knob {
    transform: translateX(27px); /* Width_of_track - Width_of_knob - (Left_padding * 2) = 60 - 26 - 4 = 30 */
}

/* Change track background slightly */
/* body.dark-theme .theme-switch .slider { Optional: change track color too if needed */
    /* background-color: var(--color-border); */
/* } */

/* Swap icon visibility when checked (Dark Mode) */
.theme-switch input:checked + .slider .knob .sun-icon {
    opacity: 1; /* Show Sun */
    transform: translateY(0);
}
.theme-switch input:checked + .slider .knob .moon-icon {
    opacity: 0; /* Hide Moon */
    transform: translateY(-10px);
}


/* --- Optional Focus State --- */
.theme-switch input:focus-visible + .slider {
    outline: 2px solid var(--color-primary-accent);
    outline-offset: 2px;
}
.theme-switch input:focus + .slider { /* Fallback for browsers not supporting focus-visible */
     outline: 2px solid var(--color-primary-accent);
     outline-offset: 2px;
}

.hamburger-menu {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 1rem; /* Adjust spacing as needed */
    z-index: 1001; /* Ensure it's above header content */
}

.hamburger-menu .hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--color-text); /* Use theme variable */
    transition: all 0.3s ease-in-out;
}

/* Hide moon icon in dark mode */
body.dark-theme #theme-toggle .fa-moon {
     opacity: 0;
     transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
}
/* Show sun icon in dark mode */
body.dark-theme #theme-toggle .fa-sun {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--color-dark-element); /* Dark headings */
}

h1 { font-family: var(--font-heading); font-size: 3.5rem; color: var(--color-dark-element); } /* Main headline dark */
h2.section-title { font-family: var(--font-subheading); font-size: 2.5rem; color: var(--color-dark-element); text-align: center; margin-bottom: 3rem; text-transform: uppercase; letter-spacing: 1px; }
h3 { font-family: var(--font-subheading); font-size: 1.5rem; color: var(--color-primary-accent); } /* Use accent for H3 */

p { margin-bottom: 1rem; color: var(--color-text-light); } /* Slightly lighter text for paragraphs */
a { color: var(--color-tertiary-accent); text-decoration: none; transition: color var(--transition-speed) ease; }
a:hover { color: var(--color-secondary-accent); } /* Red hover for links */

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

section {
    padding: 6rem 2rem;
    /* Use borders or background changes for separation */
     border-bottom: 2px solid var(--color-border); /* Thicker, solid border */
     background-color: inherit; /* Inherit body background by default */
     position: relative; /* Needed for potential pseudo-elements */
}
/*section:nth-of-type(odd) {
     /* Optional: Alternate background for sections */
     /* background-color: var(--color-bg-alt); */
     /* background-image: var(--noise-texture); */
/*} */
section:last-of-type { border-bottom: none; }


/* --- Header & Navigation --- */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent light */
    background-color: var(--color-panel-bg); /* Use panel bg for header */    backdrop-filter: blur(4px);
    padding: 1rem 2rem;
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease; /* Smooth header transition */
}

#main-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

#main-header .logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-dark-element); /* Dark logo text */
    font-weight: bold;
    position: relative;
}

#main-header .logo a {
    color: var(--color-text); /* Dark nav text */

}

#main-header .logo a:hover {
    color: var(--color-primary-accent); /* Yellow hover */
    text-decoration: none; /* Remove underline on hover */
}

#main-header nav ul {
    list-style: none;
    display: flex;
}

#main-header nav ul li {
    margin-left: 2rem;
}

#main-header nav ul li a {
    font-family: var(--font-subheading);
    color: var(--color-text); /* Dark nav text */
    padding-bottom: 0.3rem;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-speed), border-color var(--transition-speed);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

#main-header nav ul li a:hover,
#main-header nav ul li a.active {
    color: var(--color-primary-accent); /* Yellow hover/active */
    border-bottom-color: var(--color-primary-accent);
}

/* --- Hero Section --- */
#hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--color-bg); /* Ensure base background */
    background-image: var(--noise-texture); /* Add noise */
    position: relative;
    border-bottom: none;
    padding-top: 80px;}

#hero .hero-content {
    max-width: 800px;
    z-index: 2;
}


#hero .avatar-image {
    width: 50%;
    height: 50%;
    display: block;
    object-fit: cover;
    position: relative; /* Ensures it's part of the stacking context */
    z-index: 0; /* Ensure image is above frame but below pseudo-elements */
    margin: 0 auto 2rem auto; /* Center image */
}

#hero .headline { font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--color-dark-element); }
#hero .tagline { font-size: 1.5rem; color: var(--color-primary-accent); font-family: var(--font-subheading); margin-bottom: 1.5rem; font-weight: bold; }
#hero .statement { font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem auto; color: var(--color-text); }

/* Button Style - Solid Panel */
.cta-button, .submit-button, .portfolio-link {
    display: inline-block;
    background-color: var(--color-primary-accent); /* Yellow background */
    color: var(--color-ca-buttons); /* Dark text */
    padding: 0.8rem 2rem;
    font-family: var(--font-subheading);
    font-size: 1.1rem;
    border: 2px solid var(--color-primary-accent); /* Border same as bg */
    border-radius: 3px; /* Sharp corners */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* Simple shadow */
}

.cta-button:hover, .submit-button:hover, .portfolio-link:hover {
    background-color: var(--color-ca-buttons-hover); /* Dark background on hover */
    color: var(--color-tertiary-accent); /* Yellow text on hover */
    border-color: var(--color-ca-buttons-hover);
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 4px 4px 8px rgba(0,0,0,0.25);
}
.portfolio-link { /* Smaller portfolio link */
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.portfolio-link i { margin-left: 0.5em; }


/* --- About Section --- */
#about {
    background-color: var(--color-bg-alt); /* Alternate background */
    background-image: var(--noise-texture);
    max-width: 100%; /* Allow full width */
    /* Remove centered box style from previous version */
    /* border-radius: 0;
    margin-top: 0;
    box-shadow: none; */
    border-top: 2px solid var(--color-border); /* Ensure top border separation */
}

#about .about-content {
    max-width: 800px; /* Limit text width for readability */
    margin: 0 auto;
    text-align: left; /* Left align text */
}
#about h2.section-title { text-align: left; } /* Align section title left */

/* --- Skills Section --- */
#skills { background-color: var(--color-bg); background-image: var(--noise-texture); }

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider items */
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.skill-item {
    background-color: var(--color-panel-bg); /* White/light panel */
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px; /* Slightly rounded corners */
    text-align: left; /* Align content left */
    box-shadow: var(--panel-shadow);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed);
}

.skill-item:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary-accent); /* Yellow border on hover */
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
}

.skill-item .skill-icon {
    font-size: 2rem; /* Slightly smaller icon */
    color: var(--color-secondary-accent); /* Red icon */
    margin-bottom: 1rem;
    /* display: block; */ /* Keep inline if text is beside it */
    float: left; /* Float icon left */
    margin-right: 1rem;
    line-height: 1.5; /* Align icon better with text */
}

.skill-item h3 {
    margin-bottom: 0.3rem;
    font-size: 1.2rem;
    color: var(--color-dark-element); /* Dark skill title */
    /* Clear float */
     /* overflow: hidden;  */
}
.skill-item p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: 0;
    /* Clear float */
     overflow: hidden;
}

/* --- Portfolio Section --- */
#portfolio { background-color: var(--color-bg-alt); background-image: var(--noise-texture); }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Larger items */
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio-item {
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--panel-shadow);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex; /* Flex layout for better control */
    flex-direction: column;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25);
}

.portfolio-item img {
    aspect-ratio: 16 / 9; /* Widescreen aspect ratio */
    object-fit: cover;
    border-bottom: 1px solid var(--color-border); /* Separator line */
    /* Remove hover opacity */
    /* transition: none; */
}
/* .portfolio-item:hover img {
    opacity: 1;
} */

.portfolio-item .portfolio-info {
    padding: 1.5rem;
    flex-grow: 1; /* Allow info to fill space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push link to bottom */
}

.portfolio-item h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--color-dark-element); }
.portfolio-item p { font-size: 0.9rem; margin-bottom: 1rem; color: var(--color-text-light); }
.portfolio-link { margin-top: auto; } /* Push link to bottom */


/* --- Experience Section --- */
#experience { background-color: var(--color-bg); background-image: var(--noise-texture); }

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* The Timeline Line - Darker, solid */
.timeline::before {
    content: '';
    position: absolute;
    width: 3px;
    background-color: var(--color-border-dark); /* Dark grey line */
    /* box-shadow: none; Remove glow */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
    z-index: 0;
}

/* Timeline Item Container */
.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* Timeline Item Marker - Solid Square/Circle */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 12px; /* Slightly smaller marker */
    height: 12px;
    right: -8px; /* Position on the line */
    background-color: var(--color-primary-accent); /* Yellow marker */
    border: 2px solid var(--color-dark-element); /* Dark border */
    /* box-shadow: none; */
    top: 25px;
    border-radius: 2px; /* Make it square-ish */
    /* border-radius: 50%; Make it circle */
    z-index: 2;
}

/* Positioning Items Left and Right */
.timeline-item:nth-child(odd) { left: 0; }
.timeline-item:nth-child(even) { left: 50%; }
.timeline-item:nth-child(even)::after { left: -7px; }

/* Remove Arrow */
.timeline-item::before { display: none; }

/* Content Box - Panel style */
.timeline-content {
    padding: 1.5rem;
    background-color: var(--color-panel-bg); /* Panel background */
    position: relative;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    box-shadow: var(--panel-shadow);
}
.timeline-item:nth-child(odd) .timeline-content { text-align: left; } /* Align text normally */
.timeline-item:nth-child(even) .timeline-content { text-align: left; }

.timeline-content h3 { color: var(--color-dark-element); font-size: 1.3rem; margin-bottom: 0.3rem; }
.timeline-company { display: block; font-size: 1rem; color: var(--color-tertiary-accent); margin-bottom: 0.2rem; font-style: normal; font-weight: bold; }
.timeline-date { display: block; font-size: 0.9rem; opacity: 0.8; margin-bottom: 0.8rem; color: var(--color-text-light); }
.timeline-content p { font-size: 0.95rem; margin-bottom: 0; color: var(--color-text); }

/* --- Contact Section --- */
#contact { background-color: var(--color-bg-alt); background-image: var(--noise-texture); }

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: flex-start; /* Align items top */
}

.contact-info { flex: 1; min-width: 280px; }
#contact-form { flex: 1.5; min-width: 300px; }

.contact-info p { margin-bottom: 1rem; font-size: 1.1rem; color: var(--color-text); }

.email-link {
    display: inline-block;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: var(--color-dark-element); /* Dark email link */
    word-break: break-all;
    font-weight: bold;
}
.email-link:hover { color: var(--color-tertiary-accent); } /* Yellow hover */
.email-link i { margin-right: 0.5em; color: var(--color-secondary-accent); } /* Red icon */

.social-links a {
    color: var(--color-text-light); /* Lighter grey icons */
    font-size: 1.8rem; /* Slightly smaller */
    margin-right: 1.5rem;
    transition: color var(--transition-speed), transform var(--transition-speed);
}
.social-links a:hover {
    color: var(--color-primary-accent); /* Yellow hover */
    transform: scale(1.1);
}

#contact-form h3 { color: var(--color-dark-element); margin-bottom: 1.5rem; }

.form-group { margin-bottom: 1.5rem; }

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-subheading);
    color: var(--color-text); /* Regular text color */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    background-color: var(--color-panel-bg); /* Light input background */
    border: 1px solid var(--color-border); /* Standard border */
    border-radius: 3px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    box-shadow: var(--inset-shadow); /* Subtle inset look */
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary-accent); /* Yellow border on focus */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-accent) 30%, transparent), var(--inset-shadow); /* Use color-mix for transparent glow */}

.form-group textarea { resize: vertical; min-height: 120px; }

/* Submit Button uses shared style */

/* --- Footer --- */
#main-footer {
    text-align: center;
    padding: 2rem;
    margin-top: 3rem;
    font-size: 0.9rem;
    color: var(--color-text-light);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-alt); /* Match alt background */
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
    html { font-size: 15px; }
    h1 { font-size: 2.5rem; }
    h2.section-title { font-size: 2rem; margin-bottom: 2rem; }
    section { padding: 4rem 1rem; }

    #main-header { padding: 0.8rem 1rem; }
    /* Keep header layout horizontal longer if possible */
    /* #main-header nav { flex-direction: column; align-items: center; } */
    #main-header .logo { order: 1; }

    #main-header nav { 
        margin-left: 1rem; 
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
    } /* Reduce spacing */

    #main-header .theme-switcher { 
        order: 2;
        display: inline-block; /* Keep it inline with hamburger */
        margin-left: auto; /* Align to right */
        margin-right: 0.5rem; /* Add some space from hamburger */
     }

    .hamburger-menu {
        display: block; /* Show hamburger on mobile */
        order: 3; /* Place it after logo and nav links container if needed */
        margin-left: 0; /* Reset margin */
    }

    #main-header nav ul#nav-links {
        display: none; /* Hide nav links by default */
        position: fixed; /* Or absolute, depending on desired effect */
        top: 0; /* Start from top */
        left: 0;
        width: 100%;
        height: 100vh; /* Full viewport height */
        background-color: var(--color-panel-bg); /* Use panel background */
        flex-direction: column;
        justify-content: center; /* Center links vertically */
        align-items: center;
        padding-top: 60px; /* Account for header height */
        z-index: 1000; /* Below hamburger but above content */
        overflow-y: auto; /* Allow scrolling if links overflow */
        transition: transform 0.3s ease-out; /* Smooth slide-in (optional) */
        transform: translateX(100%); /* Start off-screen */
    }

    #main-header nav ul#nav-links.nav-open {
        display: flex; /* Show when open */
        transform: translateX(0); /* Slide in */
    }

    #main-header nav ul#nav-links li {
        margin: 1.5rem 0; /* Space out mobile links */
        margin-left: 0; /* Reset desktop margin */
    }

    #main-header nav ul#nav-links li a {
        font-size: 1.2rem; /* Larger font for mobile menu */
        /* Ensure hover/active styles work */
        border-bottom: none; /* Remove desktop underline */
    }
    #main-header nav ul#nav-links li a:hover,
    #main-header nav ul#nav-links li a.active {
         color: var(--color-primary-accent); /* Keep hover/active highlight */
         border-bottom: none;
    }


    /* Hamburger animation to 'X' when open */
    .hamburger-menu.active .hamburger-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-menu.active .hamburger-bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active .hamburger-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Hide theme toggle inside closed mobile nav */
     #main-header nav ul#nav-links li .theme-switch {
        /* Styles to ensure it looks ok in the vertical mobile list */
        margin-top: 1rem;
    }

    #hero { 
        padding-top: 100px;
    }
    #hero .hero-content {padding-top: 1rem; }
    #hero .avatar { width: 120px; height: 120px; }

    #about h2.section-title { text-align: center; } /* Center title on mobile */
    #about .about-content { text-align: center; } /* Center text on mobile */


    .skills-grid { grid-template-columns: 1fr; gap: 1rem; } /* Single column */
    .skill-item .skill-icon { float: none; display: block; margin: 0 auto 1rem auto; text-align: center; }
    .skill-item { text-align: center; }

    .portfolio-grid { grid-template-columns: 1fr; gap: 1.5rem; }

    /* Timeline adjustments for smaller screens - stack items */
    .timeline::before { /* Adjust the main line position */
        left: 20px; /* Move line to the left (adjust value as needed) */
        margin-left: 0; /* Remove centering margin */
    }

    .timeline-item::after { /* Adjust marker position relative to new line */
        left: 14px; /* Should match line pos - half marker width - border */
        /* (Value from your existing CSS seems okay, just ensure consistency) */
    }

    /* Hide the pointer arrows on mobile */
    .timeline-item::before {
        display: none;
    }

    /* Ensure item padding accommodates the line/marker */
    .timeline-item {
        width: 100%;
        padding-left: 50px; /* Adjust if needed based on line/marker pos */
        padding-right: 15px;
        margin-bottom: 2rem; /* Add some space between stacked items */
    }
     /* Ensure text aligns left */
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        text-align: left;
    }

    .contact-container { flex-direction: column; gap: 2rem; }
    .contact-info, #contact-form { min-width: unset; width: 100%; }

    .theme-switch {
        display: inline-block; /* Keep it inline with hamburger */
    }
}

/* --- Fade-in Animation on Scroll (No Changes Needed) --- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Glitch Animation Styles */

.layers {
    position: relative; /* Ensures pseudo-elements are positioned correctly */
    z-index: 2; /* Make sure headline is above other elements if needed */
}
  
.layers::before,
.layers::after {
    content: attr(data-text); /* Use text from data-text attribute */
    position: absolute;
    width: 100%; /* Match width of the headline */
    top: 0; /* Align with the original text */
    left: 0;
    z-index: -1; /* Place layers behind the main text */
    /* Inherit font styles from parent (.headline) */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    /* Add any other inherited styles if needed */
}
  
/* Style the pseudo-element layers */
.layers::before {
    /* Adjust top/left for offset */
    top: 6px;
    left: 10px;
    color: var(--color-primary-accent); /* Use theme variable (Pink/Red) */
}
  
.layers::after {
    /* Adjust top/left for offset */
    top: 3px;
    left: -5px;
    color: var(--color-tertiary-accent); /* Use theme variable (Cyan/Teal) */
}
  
  /* Apply animations to the pseudo-elements */
.glitch::before {
      /* Apply multiple animations */
      /* You can adjust timings or remove animations you don't want */
    animation:
        paths 5s step-end infinite,
        opacity 5s step-end infinite,
        font 8s step-end infinite,
        movement 10s step-end infinite;
}
  
.glitch::after {
      /* Apply multiple animations */
      /* You can adjust timings or remove animations you don't want */
    animation:
        paths 5s step-end infinite,
        opacity 5s step-end infinite,
        font 7s step-end infinite,
        movement 8s step-end infinite;
}
  
.single-path {
    clip-path: polygon(
        0% 12%,
        53% 12%,
        53% 26%,
        25% 26%,
        25% 86%,
        31% 86%,
        31% 0%,
        53% 0%,
        53% 84%,
        92% 84%,
        92% 82%,
        70% 82%,
        70% 29%,
        78% 29%,
        78% 65%,
        69% 65%,
        69% 66%,
        77% 66%,
        77% 45%,
        85% 45%,
        85% 26%,
        97% 26%,
        97% 28%,
        84% 28%,
        84% 34%,
        54% 34%,
        54% 89%,
        30% 89%,
        30% 58%,
        83% 58%,
        83% 5%,
        68% 5%,
        68% 36%,
        62% 36%,
        62% 1%,
        12% 1%,
        12% 34%,
        60% 34%,
        60% 57%,
        98% 57%,
        98% 83%,
        1% 83%,
        1% 53%,
        91% 53%,
        91% 84%,
        8% 84%,
        8% 83%,
        4% 83%
    );
}

.paths {
    animation: paths 5s step-end infinite;
}
  
  /* --- Keyframes (Copy ALL of these) --- */
  
@keyframes paths {
0% {
    clip-path: polygon(
    0% 43%,
    83% 43%,
    83% 22%,
    23% 22%,
    23% 24%,
    91% 24%,
    91% 26%,
    18% 26%,
    18% 83%,
    29% 83%,
    29% 17%,
    41% 17%,
    41% 39%,
    18% 39%,
    18% 82%,
    54% 82%,
    54% 88%,
    19% 88%,
    19% 4%,
    39% 4%,
    39% 14%,
    76% 14%,
    76% 52%,
    23% 52%,
    23% 35%,
    19% 35%,
    19% 8%,
    36% 8%,
    36% 31%,
    73% 31%,
    73% 16%,
    1% 16%,
    1% 56%,
    50% 56%,
    50% 8%
    );
}

5% {
    clip-path: polygon(
    0% 29%,
    44% 29%,
    44% 83%,
    94% 83%,
    94% 56%,
    11% 56%,
    11% 64%,
    94% 64%,
    94% 70%,
    88% 70%,
    88% 32%,
    18% 32%,
    18% 96%,
    10% 96%,
    10% 62%,
    9% 62%,
    9% 84%,
    68% 84%,
    68% 50%,
    52% 50%,
    52% 55%,
    35% 55%,
    35% 87%,
    25% 87%,
    25% 39%,
    15% 39%,
    15% 88%,
    52% 88%
    );
}

30% {
    clip-path: polygon(
    0% 53%,
    93% 53%,
    93% 62%,
    68% 62%,
    68% 37%,
    97% 37%,
    97% 89%,
    13% 89%,
    13% 45%,
    51% 45%,
    51% 88%,
    17% 88%,
    17% 54%,
    81% 54%,
    81% 75%,
    79% 75%,
    79% 76%,
    38% 76%,
    38% 28%,
    61% 28%,
    61% 12%,
    55% 12%,
    55% 62%,
    68% 62%,
    68% 51%,
    0% 51%,
    0% 92%,
    63% 92%,
    63% 4%,
    65% 4%
    );
}

45% {
    clip-path: polygon(
    0% 33%,
    2% 33%,
    2% 69%,
    58% 69%,
    58% 94%,
    55% 94%,
    55% 25%,
    33% 25%,
    33% 85%,
    16% 85%,
    16% 19%,
    5% 19%,
    5% 20%,
    79% 20%,
    79% 96%,
    93% 96%,
    93% 50%,
    5% 50%,
    5% 74%,
    55% 74%,
    55% 57%,
    96% 57%,
    96% 59%,
    87% 59%,
    87% 65%,
    82% 65%,
    82% 39%,
    63% 39%,
    63% 92%,
    4% 92%,
    4% 36%,
    24% 36%,
    24% 70%,
    1% 70%,
    1% 43%,
    15% 43%,
    15% 28%,
    23% 28%,
    23% 71%,
    90% 71%,
    90% 86%,
    97% 86%,
    97% 1%,
    60% 1%,
    60% 67%,
    71% 67%,
    71% 91%,
    17% 91%,
    17% 14%,
    39% 14%,
    39% 30%,
    58% 30%,
    58% 11%,
    52% 11%,
    52% 83%,
    68% 83%
    );
}

76% {
    clip-path: polygon(
    0% 26%,
    15% 26%,
    15% 73%,
    72% 73%,
    72% 70%,
    77% 70%,
    77% 75%,
    8% 75%,
    8% 42%,
    4% 42%,
    4% 61%,
    17% 61%,
    17% 12%,
    26% 12%,
    26% 63%,
    73% 63%,
    73% 43%,
    90% 43%,
    90% 67%,
    50% 67%,
    50% 41%,
    42% 41%,
    42% 46%,
    50% 46%,
    50% 84%,
    96% 84%,
    96% 78%,
    49% 78%,
    49% 25%,
    63% 25%,
    63% 14%
    );
}

90% {
    clip-path: polygon(
    0% 41%,
    13% 41%,
    13% 6%,
    87% 6%,
    87% 93%,
    10% 93%,
    10% 13%,
    89% 13%,
    89% 6%,
    3% 6%,
    3% 8%,
    16% 8%,
    16% 79%,
    0% 79%,
    0% 99%,
    92% 99%,
    92% 90%,
    5% 90%,
    5% 60%,
    0% 60%,
    0% 48%,
    89% 48%,
    89% 13%,
    80% 13%,
    80% 43%,
    95% 43%,
    95% 19%,
    80% 19%,
    80% 85%,
    38% 85%,
    38% 62%
    );
}

1%,
7%,
33%,
47%,
78%,
93% {
    clip-path: none;
}
}

.movement {
/* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
position: relative;
animation: movement 8s step-end infinite;
}

@keyframes movement {
0% {
    top: 0px;
    left: -20px;
}

15% {
    top: 10px;
    left: 10px;
}

60% {
    top: 5px;
    left: -10px;
}

75% {
    top: -5px;
    left: 20px;
}

100% {
    top: 10px;
    left: 5px;
}
}

.opacity {
animation: opacity 5s step-end infinite;
}

@keyframes opacity {
0% {
    opacity: 0.1;
}

5% {
    opacity: 0.7;
}

30% {
    opacity: 0.4;
}

45% {
    opacity: 0.6;
}

76% {
    opacity: 0.4;
}

90% {
    opacity: 0.8;
}

1%,
7%,
33%,
47%,
78%,
93% {
    opacity: 0;
}
}

.font {
animation: font 7s step-end infinite;
}

@keyframes font {
0% {
    font-weight: 100;
    color: var(--color-primary-accent);
    filter: blur(3px);
}

20% {
    font-weight: 500;
    color: var(--color-tertiary-accent);
    filter: blur(0);
}

50% {
    font-weight: 300;
    color: var(--color-secondary-accent);
    filter: blur(2px);
}

60% {
    font-weight: 700;
    color: var(--color-tertiary-accent);
    filter: blur(0);
}

90% {
    font-weight: 500;
    color: var(--color-primary-accent);
    filter: blur(6px);
}
}


/* Base Sticky Window Styles */
.sticky-window {
    position: fixed;
    bottom: 5px; /* Attach directly to the bottom */
    right: 5px;
    width: 280px; /* Expanded width */
    background-color: var(--color-bg);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden; /* Important to hide content when height changes */
    height: auto; /* Default: height determined by content */
    max-height: 500px; /* Limit expanded height */
    opacity: 1;
    visibility: visible;

    transition: max-height 0.8s ease-in-out; /* Focus transition here */
    /*
    transition: bottom 0.4s ease-in-out,
                max-height 0.4s ease-in-out,
                width 0.4s ease-in-out, 
                opacity 0.3s ease-in-out; /* Optional fade effect */

}

/* Header (The 'Tab' part) */
.sticky-window-header {
    height: 40px;
    background-color: var(--color-bg-alt);
    padding: 10px 15px;
    cursor: pointer;
    display: flex; /* Use flexbox to align title and icon */
    justify-content: space-between; /* Puts title left, icon right */
    align-items: center;
    user-select: none;
}

.sticky-window-header h3 {
    margin: 0;
    font-size: 1.1em;
}

.sticky-window-header .toggle-icon {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1;
}

/* Content Area (Collapsible) */
.sticky-window-content {
    padding: 15px;
    /* Smooth transition for appearing/disappearing */
    opacity: 1;
    visibility: visible;
    max-height: calc(500px - 45px); /* Adjust based on header height */
    overflow: hidden;
    
    transition: opacity 0.8s ease-in-out,
                max-height 0.8s ease-in-out,
                padding 0.8s ease-in-out;
}

/* --- Minimized State --- */
.sticky-window.minimized {
    max-height: 41px; /* Adjust to fit only the header's height + border */
    width: 280px; /* Make the tab narrower */
/* Transition properties remain the same */
}

.sticky-window.minimized .sticky-window-content {
    opacity: 0;
    padding: 15px 15px; /* Remove vertical padding */
    max-height: 0; /* Collapse height */
}

/* Optional: Change icon when minimized */
.sticky-window.minimized .toggle-icon::before {
    content: '+'; /* Change to a plus or caret up */
    /* Hide the original underscore if needed, or just let CSS replace content */
}
.sticky-window:not(.minimized) .toggle-icon::before {
    content: '_'; /* Ensure underscore shows when expanded */
}

/* Basic styling for content inside the window (example) */
.sticky-window-content p {
margin-bottom: 10px;
font-size: 0.9em;
line-height: 1.4;
}

.sticky-window-content a {
color: var(--color-tertiary-accent);
text-decoration: none;
}

.sticky-window-content a:hover {
text-decoration: underline;
}