/* --- Global & Body Setup --- */
body {
    margin: 0;
    height: 100%; /* <-- ADD THIS LINE */
    font-family: 'VT323', monospace;
    font-optical-sizing: auto;
    overflow-x: hidden;
    line-height: 1.3333733333;
    letter-spacing: -.01em;
    background-color: #000; /* Fallback color */
    /* iOS safe area support */
    /* REMOVED - We handle this on a per-element basis */
    
    /* --- NEW: PREVENT PAGE SCROLL --- */
    overflow: hidden; /* This is the key! The page itself will not scroll. */
}

/* ======================================= */
/* --- Custom Scrollbar --- */
/* ======================================= */

/* --- For Firefox --- */
html {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent; /* thumb-color track-color */

    /* --- ADD THESE LINES --- */
    height: 100dvh; /* <-- FIX: Use dynamic viewport height */
    overflow: hidden;
}

/* --- For WebKit (Chrome, Safari, Edge) --- */
body::-webkit-scrollbar {
    width: 8px; /* Set the width of the scrollbar */
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scroll handle */
    border-radius: 4px; /* Rounded corners for the handle */
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #bbb; /* Lighter handle on hover */
}


/* --- 1. Fixed Content Styling --- */
#fixed-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* <-- FIX: Use dynamic viewport height */
    z-index: 100; /* Sits on top of everything */
    
    /* Center the main text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    color: white; /* Base color is white */
    
    /* This inverts the color of all children based on the background */
    mix-blend-mode: difference;

    /* Allows scrolling "through" the fixed overlay */
    pointer-events: none;

    /* This fix prevents the content from resizing */
    box-sizing: border-box;
}

/* --- Generic Link Styling (for all navs) --- */
[class*="nav-"] a,
[class*="footer-"] a {
    font-family: 'VT323', monospace;

    color: white; /* Base color - will be inverted by the parent's blend-mode */
    text-decoration: none;
    margin: 0 10px; /* Simplified margin */
    font-size: 1.1rem;
    text-transform: uppercase;
    line-height: 1.3333733333;
    font-weight: 400;
    letter-spacing: -.01em;
    /* Re-enable clicks just for the links */
    pointer-events: auto;
}

/* --- Position: Top-Left Menu --- */
.nav-left {
    position: absolute;
    top: calc(30px + env(safe-area-inset-top)); /* <-- FIX */
    right: 52%;
}

/* --- Position: Top-Right Menu --- */
.nav-right {
    position: absolute;
    top: calc(30px + env(safe-area-inset-top)); /* <-- FIX */
    left: 52%;
}

/* Hide mobile-only button on desktop */
#mobile-menu-btn {
    display: none;
}

/* --- Position: Center Logo --- */
.logo-center {
    position: absolute;
    top: calc(30px + env(safe-area-inset-top));  /* <-- FIX */
    left: 50%;
    transform: translateX(-50%); 
    pointer-events: auto; 
}
.logo-center svg {
    max-height: 24px; /* Keep the logo "small" */
    display: block; 
    width: auto; /* Ensure height is respected */
}

/* --- Position: Center Text --- */
.main-text h1 {
    font-size: 5rem;
    margin: 0;
    font-weight: 400;
    margin-bottom:-2.4rem;
}
.main-text p {
    font-size: 1.5rem;
    letter-spacing: 2px;
}

/* --- Position: Bottom-Left Menu --- */
.footer-left {
    position: absolute;
    bottom: calc(30px + env(safe-area-inset-bottom)); /* <-- FIX */
    left: calc(30px + env(safe-area-inset-left)); /* <-- FIX */
}
.footer-left a, .footer-right a {
    font-size: 0.9rem;
    margin: 0 8px;
}

/* --- Position: Bottom-Right Text --- */
.footer-right {
    position: absolute;
    bottom: calc(30px + env(safe-area-inset-bottom)); /* <-- FIX */
    right: calc(30px + env(safe-area-inset-right)); /* <-- FIX */
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}
.footer-right p {
    margin: 0;
    text-transform: uppercase;
}


/* ======================================= */
/* --- NEW: NATIVE SCROLL GALLERY --- */
/* ======================================= */
#image-gallery {
    position: fixed; /* Fix to viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full width */
    height: 100dvh; /* <-- FIX: Use dynamic viewport height */
    z-index: 1; /* Sits BEHIND fixed-content (z-index 100) */
    
    display: flex;
    flex-wrap: nowrap; /* Ensure images stay in one line */

    /* --- THIS IS THE NEW SCROLL LOGIC --- */
    overflow-x: auto; /* Enable native horizontal scroll */
    overflow-y: hidden; /* Disable vertical scroll */
    /* Custom scrollbar for gallery */
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

#image-gallery::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* Height for horizontal scrollbar */
}
#image-gallery::-webkit-scrollbar-track {
    background: transparent;
}
#image-gallery::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}
#image-gallery::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

#image-gallery img {
    height: 100dvh; /* <-- FIX: Use dynamic viewport height */
    width: auto; 
    border-left: 0.25px solid #000;
    pointer-events: none; /* Disables click/drag/save on the image itself */
    
    /* Add smooth scroll snapping */
}

/* This is the invisible layer to block right-clicks */
#gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* <-- FIX: Use dynamic viewport height */
    z-index: 2; /* Sits just on top of the gallery (z-index: 1) */
    background: transparent; /* Makes it invisible */
}

/* --- The scroll-spacer is NO LONGER NEEDED --- */
#scroll-spacer {
    display: none;
}

/* ======================================= */
/* --- Body Scroll Lock Utility --- */
/* ======================================= */
/* This is only for the MOBILE menu now */
.body-no-scroll {
    overflow: hidden;
    padding-right: var(--scrollbar-width);
}

/* This will be toggled on #fixed-content */
.fixed-content-padded {
    padding-right: var(--scrollbar-width);
}

/* ===== UPDATED NAV SHIFT FIX ===== */

.fixed-content-padded .nav-left {
    transform: translateX(calc(var(--scrollbar-width) / -2));
}
.fixed-content-padded .nav-right {
    transform: translateX(calc(var(--scrollbar-width) / -2)); /* <-- BUG FIX */
}

/* This rule was redundant and buggy, so it's removed */
.fixed-content-padded #image-gallery {
    /* transform: translateX(calc(var(--scrollbar-width) / 0)); */
    transform: none;
}

.fixed-content-padded .logo-center {
    transform: translateX(calc(-50% - var(--scrollbar-width) / 2));
}

/* ======================================= */
/* --- Mobile Slide-Over Menu (UPDATED) --- */
/* ======================================= */
/* In Website/style.css */
#mobile-slide-menu {
    position: fixed;
    top: 0;
    /* Start off-screen to the right */
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: #000; /* Solid black background */
    z-index: 200; /* On top of #fixed-content */
    transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    /* UPDATED: Pushes nav to top, footer to bottom */
    /* justify-content: flex-start; <-- OLD */
    justify-content: space-between; /* <-- NEW */
    
    /* UPDATED: Removed side padding, kept vertical */
    /* padding: 100px 30px 30px 30px; <-- OLD */
    padding: 100px 0 30px 0; /* <-- NEW */
    box-sizing: border-box;
    
    /* UPDATED: iOS safe area support */
    /* padding-top: calc(45px + env(safe-area-inset-top)); <-- OLD */
    padding-top: calc(69px + env(safe-area-inset-top)); /* <-- NEW (matches top padding) */
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
    /* padding-left: calc(30px + env(safe-area-inset-left)); <-- OLD */
    /* padding-right: calc(30px + env(safe-area-inset-right)); <-- OLD */
    padding-left: 0;  /* <-- NEW */
    padding-right: 0; /* <-- NEW */
}

/* Active state: slide into view */
#mobile-slide-menu.active {
    right: 0;
}

/* Close button styles */
#menu-close-btn {
    position: absolute;
    top: calc(15px + env(safe-area-inset-top));
    right: calc(15px + env(safe-area-inset-right));
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.3333733333;
    letter-spacing: -.01em;
}

/* In Website/style.css */
#mobile-slide-menu > nav {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    overflow: auto; /* This allows scrolling */

    /* --- NEW --- */
    box-sizing: border-box;
    margin-bottom:20px;
    padding-bottom: 20px; /* Breathing room above footer */
    /* Add back the padding we removed from the parent */
    padding-left: calc(30px + env(safe-area-inset-left));
    padding-right: calc(30px + env(safe-area-inset-right));
}
/* UPDATED: Smaller font and margin */
#mobile-slide-menu > nav a {
    color: white;
    font-size: 1.24rem; /* Smaller links */
    margin: 12px 0; /* Tighter margin */
    text-decoration: none;
    text-transform: uppercase;
}

/* In Website/style.css */
.slide-menu-footer {
    /* UPDATED: Removed absolute positioning */
    /* position: absolute; <-- OLD */
    /* bottom: calc(30px + env(safe-area-inset-bottom)); <-- OLD */
    /* left: 50%; <-- OLD */
    /* transform: translateX(-50%); <-- OLD */
    text-align: center;
    width: 100%;
    
    /* UPDATED: Padding values */
    /* padding: 0 calc(20px + env(safe-area-inset-left)) 0 calc(20px + env(safe-area-inset-right)); <-- OLD */
    padding-left: calc(30px + env(safe-area-inset-left));  /* <-- NEW */
    padding-right: calc(30px + env(safe-area-inset-right)); /* <-- NEW */
    box-sizing: border-box;

    /* --- NEW --- */
    flex-shrink: 0; /* Prevents footer from shrinking */
}
.slide-menu-footer nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 10px;
}

.slide-menu-footer nav a {
    color: white;
    font-size: 0.9rem;
    margin: 0 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.slide-menu-footer p {
    font-size: 0.9rem;
    color: #888; /* Dim text for copyright */
    margin: 0;
    text-transform: none; /* Ensure it's not uppercase */
}


/* ======================================= */
/* --- MOBILE - Vertical Scroll --- */
/* ======================================= */

/* THIS BLOCK IS CORRECT AND UNCHANGED (IT WORKS FOR PORTRAIT) */
@media (max-width: 768px) {

    /* Keep the header inverting, but remove text shadow */
    #fixed-content {
        text-shadow: none;
    }
    
    /* --- Mobile Header Layout --- */

    /* Hide the main text on mobile */
    .main-text {
        display: none;
    }

    /* Keep the top-left nav, but move it and show ONLY 'Home' */
    .nav-left {
        top: calc(15px + env(safe-area-inset-top));
        right:unset;
        left: calc(15px + env(safe-area-inset-left));
    }
    .fixed-content-padded .nav-left {
        transform:none;
    }
    .nav-left a {
        font-size: 1rem;
        margin: 0;
    }
    /* Hide all links *except* the first one ("Home") */
    .nav-left a:not(:first-child) {
        display: none;
    }

    /* Show the logo and resize it */
    .logo-center {
        display: block;
        top: calc(15px + env(safe-area-inset-top));
    }
    .logo-center svg {
        max-height: 24px;
    }

    /* Show the top-right nav and show ONLY the 'Menu' button */
    .nav-right {
        display: block;
        left:unset;
        top: calc(15px + env(safe-area-inset-top));
        right: calc(15px + env(safe-area-inset-right));
    }
    .nav-right a.hide-on-mobile {
        display: none;
    }
    /* Show the mobile menu button */
    #mobile-menu-btn {
        display: block;
        font-size: 1rem;
    }

    /* Hide the footers on mobile */
    .footer-left,
    .footer-right {
        display: none;
    }
    
/* --- Mobile Image Gallery Layout --- */
#image-gallery {
    /* Still fixed to the viewport */
    position: fixed; 

    /* --- NEW: Pin to viewport edges --- */
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0; /* Replaces height: 100% */

    /* But now, images stack vertically */
    flex-direction: column; 
    flex-wrap: nowrap; /* Prevent wrapping */

    /* --- NEW: NATIVE MOBILE SCROLL --- */
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: auto; /* Enable vertical scroll */

    /* --- NEW: Internal padding for safe areas --- */
    box-sizing: border-box;
    /* Pushes content down from under the header (54px + safe area) */
    padding-top: calc(env(safe-area-inset-top)); 
    /* Adds space at the bottom for the home bar */
    padding-bottom: env(54px + safe-area-inset-bottom);
}

    #image-gallery img {
        width: 100%; /* Image is full width */
        height: auto; /* Height is automatic */
        border-left: none;
        border-bottom: 0.25px solid #000;
        
        /* Snap to the top of the image */
    }
    
    #gallery-overlay {
        display: none; /* No overlay on mobile, it interferes */
    }
    
    #scroll-spacer {
        display: none;
    }
}
/* END OF MOBILE-SPECIFIC STYLES */


/* ======================================= */
/* --- UPDATED: Page Transition Overlay --- */
/* ======================================= */

#page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* <-- FIX: Use dynamic viewport height */
    background-color: #000; /* Solid black background */
    z-index: 300; /* On top of mobile menu (z-index: 200) */
    
    /* Start off-screen at the bottom */
    transform: translateY(100%); 
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the whole block vertically */
    align-items: center; /* Center children horizontally */
    padding: 5vh 0; /* Add vertical padding */
    box-sizing: border-box;
    color: white;
    
    /* Hide it from pointer events by default */
    pointer-events: none;
    
    /* iOS safe area support (This is correct) */
    padding-top: calc(5vh + env(safe-area-inset-top));
    padding-bottom: calc(5vh + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

#page-transition-overlay.active {
    transform: translateY(0); /* Slide into view */
    pointer-events: auto; /* Make it interactive when active */
}

/* This is the fixed title */
#page-transition-overlay > h2 {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.3333733333;
    letter-spacing: .044em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent title from shrinking */
}

/* This is the 100% width scrollable container */
.transition-content {
    width: 100%;
    max-height: 75vh; /* Use max-height to be responsive */
    overflow-y: auto; /* Make this part scrollable */
    box-sizing: border-box;
    font-size: 1.04rem;
    line-height: 1.6;
    margin-top: 1.5rem; /* Space from title */
    
    /* Flex settings to center the text wrapper */
    display: flex;
    justify-content: center;
    /* UPDATED: Add Firefox scrollbar styles */
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

/* This new wrapper has the max-width and centers the text */
.transition-text-wrapper {
    width: 100%;
    max-width: 1000px; /* Max-width constraint for text */
    text-align: left; /* Text-aligned */
    text-transform: uppercase;
    padding: 0 20px; /* Padding for the text */
    box-sizing: border-box;
}

/* UPDATED: Scrollbar styles to match body */
.transition-content::-webkit-scrollbar {
    width: 8px;
}
.transition-content::-webkit-scrollbar-track {
    background: transparent; /* Match body scrollbar */
}
.transition-content::-webkit-scrollbar-thumb {
    background-color: #888; /* Match body scrollbar */
    border-radius: 4px; /* Match body scrollbar */
}
.transition-content::-webkit-scrollbar-thumb:hover {
    background-color: #bbb; /* Match body scrollbar */
}

/* This is the close button */
#transition-close-btn {
    position: static; /* No longer absolute */
    transform: none; /* No longer transformed */
    
    color: white;
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    pointer-events: auto; /* Ensure it's clickable */
    letter-spacing: .05em;
    
    margin-top: 1.5rem; /* Space between content and button */
    flex-shrink: 0; /* Prevent button from shrinking */
}

/* ======================================= */
/* --- NEW: Connect Page Overlay --- */
/* ======================================= */

/* Base styles copied from #page-transition-overlay */
#connect-page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* <-- FIX: Use dynamic viewport height */
    z-index: 300; /* Same as about overlay */
    transform: translateY(100%); /* Start at bottom */
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5vh 0;
    box-sizing: border-box;
    pointer-events: none;

    /* --- USER REQUESTED CHANGES --- */
    background-color: #fff; /* White background */
    color: #000; /* Black text */
    
    /* iOS safe area support (This is correct) */
    padding-top: calc(5vh + env(safe-area-inset-top));
    padding-bottom: calc(5vh + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

#connect-page-overlay.active {
    transform: translateY(0); /* Slide into view */
    pointer-events: auto; /* Make interactive */
}

/* Style the h2 inside (copied from #page-transition-overlay > h2) */
#connect-page-overlay > h2 {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.3333733333;
    letter-spacing: .044em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    color: #000; /* Ensure it's black */
}

/* Style the .transition-content (copied) */
#connect-page-overlay .transition-content {
    width: 100%;
    max-height: 75vh;
    overflow-y: auto;
    box-sizing: border-box;
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    flex-direction: column;

    /* Scrollbar styles for light background */
    scrollbar-width: thin;
    scrollbar-color: #aaa #f1f1f1; 
}

#connect-page-overlay .transition-content::-webkit-scrollbar {
    width: 8px;
}
#connect-page-overlay .transition-content::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light track */
}
#connect-page-overlay .transition-content::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Darker handle */
    border-radius: 4px;
}
#connect-page-overlay .transition-content::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* Darker on hover */
}

/* --- Styles for connect links (from connect/index.html) --- */
.connect-links {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 1rem; /* Space between items */
    width: 100%;
    max-width: 600px; /* Constrain the width */
    margin: 0 auto; /* Center the grid */
    padding: 0 20px; /* Add padding for mobile */
    box-sizing: border-box;
}

.connect-links a {
    font-size: 1.2rem;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 1.25rem;
    border: 1px solid #000;
    text-align: center;
    transition: all 0.2s ease;
}

.connect-links a:hover {
    background-color: #000;
    color: #fff;
}

/* Make the last item (LinkedIn) span both columns if it's the 5th item */
.connect-links a:last-child:nth-child(odd) {
    grid-column: span 2;
}

/* Stack columns on mobile */
@media (max-width: 768px) {
    #connect-page-overlay .transition-content {
        justify-content: flex-start;
    }
    .connect-links {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    
    /* Remove the span on mobile */
    .connect-links a:last-child:nth-child(odd) {
        grid-column: span 1;
    }
}

/* Style the close button (copied from #transition-close-btn) */
#connect-close-btn {
    position: static;
    transform: none;
    color: #000; /* Black text */
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    pointer-events: auto;
    letter-spacing: .05em;
    margin-top: 1.5rem;
    flex-shrink: 0;
}

/* ======================================= */
/* --- NEW: Skills Page Overlay --- */
/* ======================================= */

/* Base styles copied from #page-transition-overlay */
#skills-page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* <-- FIX: Use dynamic viewport height */
    background-color: #000; /* Black background */
    z-index: 300; /* On top of mobile menu */
    transform: translateY(100%); /* Start at bottom */
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the whole block vertically */
    align-items: center; /* Center children horizontally */
    padding: 5vh 0; /* Add vertical padding */
    box-sizing: border-box;
    color: white;
    pointer-events: none;
    
    /* iOS safe area support (This is correct) */
    padding-top: calc(5vh + env(safe-area-inset-top));
    padding-bottom: calc(5vh + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

#skills-page-overlay.active {
    transform: translateY(0); /* Slide into view */
    pointer-events: auto; /* Make it interactive when active */
}

/* Title style copied from #page-transition-overlay > h2 */
#skills-page-overlay > h2 {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.3333733333;
    letter-spacing: .044em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent title from shrinking */
}

/* Copied from #page-transition-overlay .transition-content */
#skills-page-overlay .transition-content {
    width: 100%;
    max-height: 75vh; /* Use max-height to be responsive */
    overflow-y: auto; /* Make this part scrollable */
    box-sizing: border-box;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 1.5rem; /* Space from title */
    display: flex;
    justify-content: center;
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

#skills-page-overlay .transition-content::-webkit-scrollbar {
    width: 8px;
}
#skills-page-overlay .transition-content::-webkit-scrollbar-track {
    background: transparent;
}
#skills-page-overlay .transition-content::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}
#skills-page-overlay .transition-content::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

/* Close button copied from #transition-close-btn */
#skills-close-btn {
    position: static;
    transform: none;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    pointer-events: auto;
    letter-spacing: .05em;
    margin-top: 1.5rem;
    flex-shrink: 0;
}

/* --- Skills List Styles (from skills/index.html) --- */
/* We target it inside the overlay */
.skills-list {
    list-style: none; /* Remove bullets */
    padding-left: 0; /* Remove default indent */
    margin: 0;
    width: 100%; /* Ensure it uses the wrapper's width */
    
    /* 2-column grid for desktop */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5em 2em; /* 0.5em row-gap, 2em column-gap */
    text-align: center; 
    text-transform: uppercase;
}

.skills-list li {
    font-size: 1rem; /* Slightly smaller text */
    margin-bottom: 0; /* Handled by grid-gap */
}

/* Media query for mobile (scoped to the overlay) */
@media (max-width: 768px) {
    .skills-list {
        /* 1-column on mobile */
        grid-template-columns: 1fr;
        text-align: center; /* Center text on mobile */
        grid-gap: 0.5em; /* Only row-gap needed */
    }
}


/* --- NEW: Email Links Section --- */
.connect-emails {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 1rem; /* Space between items */
    width: 100%;
    max-width: 600px; /* Constrain the width */
    margin: 2rem auto 0 auto; /* Space above, and center */
}

.email-column {
    text-align: center;
}

.email-column p {
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .044em;
    margin: 0 0 0.5rem 0;
    color: #000;
}

.email-column a {
    font-size: 1.04rem;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .05em;
    word-break: break-all; /* Prevent overflow */
}

.email-column a:hover {
    text-decoration: underline;
}

/* Stack email columns on mobile */
@media (max-width: 768px) {
    .connect-emails {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}
/* --- End of New Styles --- */

/* ======================================= */
/* --- Page Transition Loader --- */
/* ======================================= */

#page-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;

    /* --- NEW ANIMATION STYLES --- */
    background-color: #000; /* 1. Black background */
    background-image:
        /* 2. Black dots (to match bg) */
conic-gradient(#1a1a1a 25%, transparent 0 50%, #1a1a1a 0 75%, transparent 0),        /* 3. White/Grey shapes */
        conic-gradient(at 1em 1em, transparent 270deg, #fff 270deg),
        conic-gradient(at 1em 1em, transparent 270deg, #ffffffa4 270deg),
        conic-gradient(at 1em 1em, transparent 270deg, #ffffff8a 270deg),
        conic-gradient(at 1em 1em, transparent 270deg, #ffffff45 270deg);
    background-size: 1em 1em, 4em 4em, 4em 4em, 4em 4em, 4em 4em;
    animation: bpx 12s infinite, bpy 12s -3.75s infinite;
    
    /* --- FADE-OUT STYLES (Unchanged) --- */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    transition-delay: 0s; /* Reset to 0, no shatter delay needed */
}

/* This class will be added by JS to hide the loader */
#page-loader-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Allow clicks to pass through */
    transition-delay: 0s; /* Reset to 0 */
}/* --- New CodePen Loader Keyframes --- */

@keyframes bpx {
  0%, 7.5%, 100% { background-position-x: 0, 0, 1em, 2em, 3em; }
  12.5%, 20% { background-position-x: 0, 1em, 0, 3em, 2em; }
  25%, 32.5% { background-position-x: 0, -1em, -2em, 5em, 4em; }
  37.5%, 45% { background-position-x: 0, 1em, -4em, 7em, 2em; }
  50%, 57.5% { background-position-x: 0, -2em, -5em, 8em, 5em; }
  62.5%, 70% { background-position-x: 0, -3em, -4em, 7em, 6em; }
  75%, 82.5% { background-position-x: 0, -1em, -2em, 5em, 4em; }
  87.5%, 95% { background-position-x: 0, -3em, 0, 3em, 6em; }
}

@keyframes bpy {
  0%, 7.5%, 100% { background-position-y: 0, 0, 1em, 2em, 3em; }
  12.5%, 20% { background-position-y: 0, 1em, 0, 3em, 2em; }
  25%, 32.5% { background-position-y: 0, -1em, -2em, 5em, 4em; }
  37.5%, 45% { background-position-y: 0, 1em, -4em, 7em, 2em; }
  50%, 57.5% { background-position-y: 0, -2em, -5em, 8em, 5em; }
  62.5%, 70% { background-position-y: 0, -3em, -4em, 7em, 6em; }
  75%, 82.5% { background-position-y: 0, -1em, -2em, 5em, 4em; }
  87.5%, 95% { background-position-y: 0, -3em, 0, 3em, 6em; }
}/* In Website/style.css */

/* ... (at the end of the file, or grouped with other scrollbar styles) ... */

.page-content-wrapper {
    /* Sizing and Positioning */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* Use dynamic viewport height */
    
    /* Scrolling */
    overflow-y: auto; /* Enable vertical scroll */
    overflow-x: hidden; /* Disable horizontal scroll */
    
    /* Layering (sits behind #fixed-content) */
    z-index: 1; 
}

/* --- Custom Scrollbar for New Wrapper --- */

/* In Website/style.css */

/* --- Custom Scrollbar for New Wrapper --- */

/* Firefox */
.page-content-wrapper,
#mobile-slide-menu > nav { /* <-- ADDED */
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

/* WebKit (Chrome, Safari, Edge) */
.page-content-wrapper::-webkit-scrollbar,
#mobile-slide-menu > nav::-webkit-scrollbar { /* <-- ADDED */
    width: 8px;
}
.page-content-wrapper::-webkit-scrollbar-track,
#mobile-slide-menu > nav::-webkit-scrollbar-track { /* <-- ADDED */
    background: transparent;
}
.page-content-wrapper::-webkit-scrollbar-thumb,
#mobile-slide-menu > nav::-webkit-scrollbar-thumb { /* <-- ADDED */
    background-color: #888;
    border-radius: 4px;
}
.page-content-wrapper::-webkit-scrollbar-thumb:hover,
#mobile-slide-menu > nav::-webkit-scrollbar-thumb:hover { /* <-- ADDED */
    background-color: #bbb;
}

/* ----------------------------------------------------
        --- 2. ADD STYLES FOR THE CUSTOM PLAYER ---
        ----------------------------------------------------
        */
        
        /* 1. The main player container */
        .custom-player-container {
            position: relative;
            width: 100%;
            /* 16:9 Aspect Ratio (height / width) */
            padding-bottom: 56.25%; 
            height: 0;
            background-color: #000;
            overflow: hidden;
            border: 2px solid #333; /* Border from mockup */
            box-sizing: border-box;
        }

        /* 2. The YouTube iframe itself */
        #youtube-player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* 3. The controls bar (NOW ANIMATED) */
        .custom-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            display: flex;
align-items: flex-end; /* <-- CHANGED TO 'flex-end' */
            
            /* DEFAULT (PAUSED) STATE: Compact */
            padding: 0;
            gap: 0;
            background-color: transparent;
            border-top: 1px solid transparent;

            /* Make it visible by default */
            opacity: 1;
            visibility: visible;
            
            /* Animate all property changes */
            transition: all 0.3s ease-in-out;
        }

        /* 4. Base styles for buttons */
        .control-btn {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            height: 20px; /* Height is constant */
            
            /* DEFAULT (PAUSED) STATE: Hidden */
            width: 0px;
            opacity: 0;
            visibility: hidden;
            margin: 0;

            /* Animate all property changes */
            transition: all 0.3s ease-in-out;
        }
        
       /* --- NEW: Style for the control SVGs --- */
        .control-btn svg {
            display: block;
            width: 14px;
            height: 14px;
        }

        /* 5. Play/Pause Button Styles (MODIFIED) */
        #custom-play-pause .icon-play {
            /* SVG is shown by default */
        }
        #custom-play-pause .icon-pause {
            display: none; /* Hidden by default */
        }
        
        /* When player is 'playing', show pause icon */
        .custom-player-container.playing #custom-play-pause .icon-play {
            display: none;
        }
        .custom-player-container.playing #custom-play-pause .icon-pause {
            display: block;
        }

        /* 6. Progress Bar Styles (Unchanged) */
        .progress-bar-container {
            flex-grow: 1;
            background-color: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            height: 3px; 
            transition: height 0.3s ease-in-out;
        }
        .progress-bar-fill {
            height: 100%;
            width: 0%;
            background-color: #ffffff;
            transition: width 0.1s linear;
            box-sizing: border-box;
        }

        /* 7. Fullscreen Button Styles (MODIFIED) */
        #custom-fullscreen svg {
            /* Make fullscreen icon slightly larger */
            width: 16px;
            height: 16px;
        }

        .icon-fullscreen-exit {
            display: none; /* Hide exit icon by default */
        }

        /* NEW: Logic to toggle fullscreen icons */
        .custom-player-container.is-fullscreen .icon-fullscreen-enter {
            display: none;
        }
        .custom-player-container.is-fullscreen .icon-fullscreen-exit {
            display: block;
        }
        /* --- NEW: STYLES FOR FULL CONTROLS WHEN PLAYING --- */
        
        /* When playing, expand the control bar */
        .custom-player-container.playing .custom-controls {
            background-color: #fff;
            mix-blend-mode: difference;
            align-items: center; /* <-- CHANGED TO 'flex-end' */

            border-top: 1px solid #555;
            padding: 8px 10px;
            gap: 10px;
        }

        /* When playing, show the buttons */
        .custom-player-container.playing .control-btn {
            width: 20px;
            opacity: 1;
            visibility: visible;
        }

        /* When playing, make the progress bar thicker */
        .custom-player-container.playing .progress-bar-container {
            height: 5px;

        }
         .custom-player-container.playing          .progress-bar-fill {
            height: 100%;
            width: 0%; /* Starts at 0, updated by JS */
            background-color: #ffffff;
            /* Add a small transition for smooth updates */
            transition: width 0.1s linear;
            box-sizing: border-box; /* <-- ADD THIS LINE */
            mix-blend-mode: difference;
         }
         /* This class hides the controls *only when playing* and inactive */
.custom-player-container.playing.controls-hidden .custom-controls {
    opacity: 0;
    visibility: hidden;
}