/* ============================================
   MOBILE STYLES - COMPLETELY ISOLATED
   Only affects screens 768px and below
   Desktop remains 100% untouched
============================================ */

/* ============================================
   MOBILE NAVIGATION - TWO-STAGE REVEAL
   Isolated mobile-only navigation system
============================================ */


/* ========== BASE MOBILE NAV STRUCTURE ========== */

/* Hide mobile nav on desktop */
.mobile-navbar {
    display: none;
}

/* Show mobile nav ONLY on mobile devices */
@media only screen and (max-width: 768px) {
    
    /* Hide desktop navigation on mobile */
    .navbar {
        display: none !important;
    }
    
    .mobile-navbar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1000;
        padding: 0px;
        pointer-events: none;
        background: transparent; /* Keep transparent - shadow only on brand */
    }
    
    /* Foggy backdrop that appears when links reveal */
    .mobile-navbar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.7) 0%,     /* Lighter center */
            rgba(0, 0, 0, 0.5) 40%,
            rgba(0, 0, 0, 0.3) 70%,
            rgba(0, 0, 0, 0.1) 100%
        );
        backdrop-filter: blur(4px); /* Less blur */
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        transition: opacity 2s ease-out;
        pointer-events: none;
        z-index: -1; /* Behind the nav items */
    }
    
    /* Fade in the backdrop when links are revealed */
    .mobile-navbar.links-revealed::before {
        opacity: 1;
    }
    /* ========== MOBILE BRAND (Always Visible) ========== */
    
    .mobile-brand-container {
        width: 100%;
        text-align: center;
        padding: 15px 0 30px 0;
        pointer-events: auto;
        position: relative;
        
        /* Desktop-style gradient shadow behind brand */
        background: linear-gradient(to bottom, 
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.8) 40%,
            rgba(0, 0, 0, 0.5) 70%,
            rgba(0, 0, 0, 0) 100%);
        
        /* Extend shadow slightly below brand */
        padding-bottom: 40px;
    }
    
    .mobile-brand {
        font-family: "Ysabeau Infant", sans-serif;
        font-size: 36px;
        font-weight: 100;
        color: white !important;
        opacity: 0.8;
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        transition: opacity 0.3s ease;
    }
    
    .mobile-brand:active {
        opacity: 0.6;
    }
    
    /* ========== MOBILE NAV LIST ========== */
    
    .mobile-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        padding-top: 15vh; /* Start positioning from here */
    }
    
    /* ========== UNIVERSAL MOBILE POSITIONS ========== */
    /* This is where "about me" sits and where ALL selected links move to */
    :root {
        --first-position: 5vh; /* Universal target position from top - closer to brand */
        --nav-spacing: 70px; /* Spacing between nav links */
        --content-start: 30vh; /* Universal starting position for ALL section content on mobile */
    }
    
    /* ========== MOBILE NAV ITEMS - HOME SPOTS ========== */
    
    .m-nav-item {
        opacity: 0;
        pointer-events: none;
        transition: opacity 1s ease-out, transform 1s ease-out;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Define HOME SPOT for each link - cascading from FIRST POSITION */
    .m-nav-item[data-section="about"] {
        top: var(--first-position); /* about me's HOME SPOT = FIRST POSITION */
        --home-spot: var(--first-position);
        --distance-to-first: 0px; /* Already at first position */
    }
    
    .m-nav-item[data-section="resume"] {
        top: calc(var(--first-position) + var(--nav-spacing)); /* 1 spacing below about */
        --home-spot: calc(var(--first-position) + var(--nav-spacing));
        --distance-to-first: calc(-1 * var(--nav-spacing));
    }
    
    .m-nav-item[data-section="portfolio"] {
        top: calc(var(--first-position) + (var(--nav-spacing) * 2)); /* 2 spacings below about */
        --home-spot: calc(var(--first-position) + (var(--nav-spacing) * 2));
        --distance-to-first: calc(-2 * var(--nav-spacing));
    }
    
    .m-nav-item[data-section="extra"] {
        top: calc(var(--first-position) + (var(--nav-spacing) * 3)); /* 3 spacings below about */
        --home-spot: calc(var(--first-position) + (var(--nav-spacing) * 3));
        --distance-to-first: calc(-3 * var(--nav-spacing));
    }
    
    .m-nav-item[data-section="connect"] {
        top: calc(var(--first-position) + (var(--nav-spacing) * 4)); /* 4 spacings below about */
        --home-spot: calc(var(--first-position) + (var(--nav-spacing) * 4));
        --distance-to-first: calc(-4 * var(--nav-spacing));
    }
    
    /* ========== NAV ITEM STATES ========== */
    
    /* Portfolio item starts hidden */
    .m-nav-item.m-portfolio {
        opacity: 0;
    }
    
    /* Visible state - at HOME SPOT */
    .m-nav-item.m-visible,
    .m-nav-item.m-revealed {
        opacity: 1 !important;
        transform: translateX(-50%) !important; /* Stay at HOME SPOT */
        pointer-events: auto !important;
        transition: opacity 1s ease-out, transform 1s ease-out !important;
    }

    /* Collapsing state - fade out and stay at HOME SPOT */
    .m-nav-item.m-collapsing {
        opacity: 0 !important;
        transform: translateX(-50%) translateY(var(--distance-to-first)) !important; /* Move to FIRST POSITION */
        transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
        pointer-events: none !important;
    }
    
    /* Active state - at FIRST POSITION */
    .m-nav-item.m-active {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(var(--distance-to-first)) !important; /* Move to FIRST POSITION */
        transition: opacity 1s ease-out, transform 1s ease-out !important;
        pointer-events: auto !important;
    }
    
    /* ========== MOBILE NAV LINKS ========== */
    


    .m-nav-link {
        font-family: "Poppins", sans-serif !important;
        font-size: 18px !important;
        font-weight: 300 !important;
        color: white !important;
        opacity: 0.85 !important;
        text-decoration: none !important;
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8) !important;
        padding: 10px 20px;
        display: inline-block;
        cursor: pointer;
        transition: opacity 0.3s ease, transform 0.2s ease;
    }
    
   
    
    
    
    /* ========== ACTIVE STATE (when navigated) ========== */
    
    .m-nav-link.m-active {
        opacity: 1;
        text-shadow: 
            0px 1px 2px rgba(0, 0, 0, 0.8),
            0 0 8px rgba(255, 255, 255, 0.4),
            0 0 16px rgba(255, 255, 255, 0.2);
    }
    
    /* ========== CONTENT ADJUSTMENTS ========== */
    
    /* Adjust main content padding for mobile nav */
    .content-container {
        padding-top: 90px; /* Account for fixed mobile nav */
    }
    
    /* Ensure background image shows through */
    .bg-image {
        z-index: -1;
    }
}

@media only screen and (max-width: 768px) {
    
    /* ========== GLOBAL MOBILE RESETS ========== */
    
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Ensure touch-friendly tap targets */
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* ========== NAVIGATION MOBILE ========== */
    
    /* Compact header for mobile */
    .navbar-brand {
        font-size: 40px !important; /* Down from 90px */
        text-align: center;
        width: 100%;
        padding: 10px 0;
    }
    
    /* Hide desktop nav for now - we'll handle this differently */
    #navbar-content {
        display: none !important;
    }
    
    /* ========== CONTENT SECTIONS ========== */
    
    /* Remove excessive padding/margins */
    .content-container {
        padding: 0 !important;
    }
    
    .main-content {
        padding: 60px 15px 20px !important; /* Top padding for fixed nav */
    }
    
    /* ========== ANIMATIONS ========== */
    
   /* Disable heavy animations on mobile - EXCEPT nav collapse */
   *:not(.m-nav-item) {
       animation-duration: 0.3s !important; /* Speed up all animations except nav */
   }
       
    /* Disable parallax and complex transitions */
    .bg-image {
        position: fixed !important; /* Keep it simple */
        transform: none !important;
    }
    
    /* ========== SECTION-SPECIFIC ========== */
    
    /* About Section Mobile */
    #about-section .row {
        flex-direction: column !important;
    }
    
    #about-section .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* ========== RESUME SECTION MOBILE - CUSTOM 2-COLUMN LAYOUT ========== */
    
    /* Hide desktop resume content */
    #resume-section .containers,
    #resume-section .skills-container {
        display: none !important;
    }
    
    /* Override main content padding for resume section */
    #resume-section .main-content {
        padding-top: 0 !important; /* NO top padding - let cells stretch to top! */
        padding-left: 0 !important; /* Full width! */
        padding-right: 0 !important; /* Full width! */
    }
    
    /* Mobile-specific resume container - 2 COLUMNS */
    #resume-section .mobile-resume-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* Column L and Column R - equal width */
        gap: 0; /* No gap - full width! */
        width: 100vw; /* Full viewport width! */
        padding: 0 42px 20px 0; /* NO top padding - stretch it out! */
        margin: 0;
        box-sizing: border-box;
        position: relative; /* For the line positioning */
    }
    
    /* Vertical line between columns - starts just below Skills title */
    #resume-section .mobile-resume-content::before {
        content: '';
        position: absolute;
        top: calc(250px + 250px + 250px + 100px); /* After L1, L2, L3 cells + space below Skills title */
        left: calc(50% - 21px); /* Center accounting for right padding offset */
        transform: translateX(-50%);
        width: 1px;
        height: calc(100% - 250px - 250px - 250px - 100px); /* Extend to bottom */
        background-color: white;
        opacity: 0.8;
        box-shadow: 
            0px 0px 5px rgba(255, 255, 255, 0.3),
            0px 0px 10px rgba(255, 255, 255, 0.2);
        z-index: 1;
    }
    
    /* Show mobile resume content on desktop hide (handled by inline style override below) */
    
    /* Column L (Left) */
    #resume-section .mobile-resume-column-L {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Space between containers */
    }
    
    /* Column R (Right) */
    #resume-section .mobile-resume-column-R {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Space between containers */
    }
    
    /* Flexible containers within columns */
    #resume-section .resume-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;
        /* Flexible - will expand based on content */
        min-height: 150px; /* Default for cells 4-5 */
    }
    
    /* Stretch the first 3 rows (L1-3, R1-3) to fill the space! */
    #resume-section .resume-cell[data-cell="L1"],
    #resume-section .resume-cell[data-cell="L2"],
    #resume-section .resume-cell[data-cell="L3"],
    #resume-section .resume-cell[data-cell="R1"],
    #resume-section .resume-cell[data-cell="R2"],
    #resume-section .resume-cell[data-cell="R3"] {
        min-height: 250px; /* Stretch them out much more! */
        padding: 20px 10px; /* More vertical padding for breathing room */
    }
    
    /* L1: Left-aligned PacSun logo - EXACTLY like desktop */
    #resume-section .resume-cell[data-cell="L1"] {
        align-items: flex-start; /* Left align */
        justify-content: flex-start; /* Push to top too */
        padding-left: 0; /* Furthest left! */
    }
    
    /* L2: Left-aligned text content - ICEBERG FLOAT! */
    #resume-section .resume-cell[data-cell="L2"] {
        align-items: flex-start; /* Left align */
        justify-content: space-between; /* Spread from top to bottom! */
        padding-left: 0; /* Furthest left! */
        text-align: left; /* Text aligned left */
        transform: translateY(-80px); /* Float up like an iceberg! */
    }
    
    .pacsun-img-mobile {
        position: relative;
        display: inline-block;
        width: 100px !important;
    }
    
    .pacsun-img-mobile img {
        display: block;
        width: 100px !important;
        height: auto !important;
        position: relative;
        z-index: 1;
    }
    
    /* Black box with thin white border - matches desktop */
    .pacsun-img-mobile::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% + 45px);
        height: calc(100% + 10px);
        background-color: black;
        border: 0.25px solid white; /* Thin border like desktop! */
        border-radius: 1px;
        z-index: -1;
    }
    
    /* R1: Right-aligned text content - ICEBERG FLOAT! */
    #resume-section .resume-cell[data-cell="R1"] {
        align-items: flex-end; /* Right align */
        justify-content: space-between; /* Spread from top to bottom! */
        padding-right: 0; /* Furthest right! */
        text-align: right; /* Text aligned right */
        transform: translateY(-80px); /* Float up like an iceberg! */
    }
    
    /* Reset all text-line and text-lines styling for mobile */
    #resume-section .text-line,
    #resume-section .text-lines {
        all: unset; /* Remove ALL inherited styles */
        display: block; /* Keep block behavior */
        
        /* Add back specific properties */
        color: white;
        font-family: 'Ysabeau Infant', sans-serif;
        opacity: 1;
        text-shadow: 
            0px 0px 10px rgba(0, 0, 0, 1),
            0px 0px 10px rgba(0, 0, 0, 1),
            0px 0px 10px rgba(0, 0, 0, 1),
            0px 0px 10px rgba(0, 0, 0, 1),
            0px 0px 10px rgba(0, 0, 0, 1),
            0px 0px 10px rgba(0, 0, 0, 1);
        
        /* Keep animation properties */
        transform: translateY(20px);
        transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    }
    
    /* text-line specific (underline for job titles) */
    #resume-section .text-line {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    
    /* R2: Right-aligned Brooklyn Brewery logo - EXACTLY like desktop */
    #resume-section .resume-cell[data-cell="R2"] {
        align-items: flex-end; /* Right align */
        justify-content: flex-start; /* Push to top too */
        padding-right: 0; /* Furthest right! */
    }
    
    /* R3: Right-aligned text content - ICEBERG FLOAT! */
    #resume-section .resume-cell[data-cell="R3"] {
        align-items: flex-end; /* Right align */
        justify-content: space-between; /* Spread from top to bottom! */
        padding-right: 0; /* Furthest right! */
        text-align: right; /* Text aligned right */
        transform: translateY(-80px); /* Float up like an iceberg! */
    }
    
    /* L5 and R4: Stretch wayyyy down for 10 evenly spaced text lines! */
    #resume-section .resume-cell[data-cell="L5"],
    #resume-section .resume-cell[data-cell="R4"] {
        min-height: 600px; /* Stretch wayyyy down! */
        padding: 20px 10px; /* More vertical padding */
    }
    
    /* L5: Left-aligned skill items */
    #resume-section .resume-cell[data-cell="L5"] {
        align-items: flex-start; /* Left align */
        justify-content: space-between; /* Evenly space 10 items! */
        padding-left: 0; /* Furthest left! */
        position: relative; /* For horizontal line positioning */
        transform-style: preserve-3d; /* Enable 3D space for perpendicular lines */
        perspective: 1000px; /* Perspective for 3D depth */
        
        /* Point B coordinates for horizontal lines */
        --point-b-x: -80%; /* 80% left from center (Point A) */
        --point-b-y: 0; /* Same vertical level as Point A */
        --point-b-z: 0; /* Same depth as Point A */
        
        /* Point B coordinates for perpendicular lines (going into Z) */
        --point-b-perp-x: 0; /* No horizontal movement */
        --point-b-perp-y: 0; /* Same vertical level */
        --point-b-perp-z: -80%; /* Going back into screen (same distance as horizontal lines go left) */
    }
    
    /* Static lines removed - only orbiting lines remain */
    
    /* Individual orbiting lines - each can have independent styling/timing */
    .orbit-line {
        position: absolute;
        right: 0; /* Point A: x=0, y=0, z=0 (at vertical center line) */
        width: calc(var(--point-b-perp-z) * -1); /* Distance to Point B in Z-space */
        height: 1px; /* Individual line thickness */
        background: rgba(255, 255, 255, 0.4);
        transform-origin: right center; /* Rotate from Point A (vertical line) */
        animation: slowOrbitV2 30s linear infinite !important; /* 30 seconds per rotation */
        opacity: 0.5;
        pointer-events: none;
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    }
    
    /* Red dot at Point B for debugging */
    .orbit-line::after {
        content: '';
        position: absolute;
        left: 0; /* At Point B (left end of line) */
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 50%;
        box-shadow: 0 0 10px red;
        z-index: 100;
    }
    
    /* Position each line at its Y coordinate with staggered animation delays (like a round!) */
    .orbit-line[data-line="1"] { 
        top: calc(-100px + (600px / 9) * 0); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: 0s !important;
    }
    .orbit-line[data-line="2"] { 
        top: calc(-100px + (600px / 9) * 1); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: -27s !important; /* Negative delay = start partway through */
    }
    .orbit-line[data-line="3"] { 
        top: calc(-100px + (600px / 9) * 2); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: -24s !important;
    }
    .orbit-line[data-line="4"] { 
        top: calc(-100px + (600px / 9) * 3); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: -21s !important;
    }
    .orbit-line[data-line="5"] { 
        top: calc(-100px + (600px / 9) * 4); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: -18s !important;
    }
    .orbit-line[data-line="6"] { 
        top: calc(-100px + (600px / 9) * 5); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: -15s !important;
    }
    .orbit-line[data-line="7"] { 
        top: calc(-100px + (600px / 9) * 6); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: -12s !important;
    }
    .orbit-line[data-line="8"] { 
        top: calc(-100px + (600px / 9) * 7); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: -9s !important;
    }
    .orbit-line[data-line="9"] { 
        top: calc(-100px + (600px / 9) * 8); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: -6s !important;
    }
    .orbit-line[data-line="10"] { 
        top: calc(-100px + (600px / 9) * 9); 
        animation: slowOrbitV2 30s linear infinite !important;
        animation-delay: -3s !important;
    }
    
    /* Animation: SUPER SLOW orbit - 5 minutes per rotation */
    @keyframes slowOrbitV2 {
        0% {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(360deg);
        }
    }
    
    /* R4: Right-aligned certification items */
    #resume-section .resume-cell[data-cell="R4"] {
        align-items: flex-end; /* Right align */
        justify-content: space-between; /* Evenly space 10 items! */
        padding-right: 0; /* Furthest right! */
        position: relative;
        transform-style: preserve-3d; /* Enable 3D space */
        perspective: 1000px; /* Perspective for 3D depth */
        
        /* Point B coordinates for perpendicular lines (going into Z - RIGHT SIDE) */
        --point-b-cert-x: 0; /* No horizontal movement */
        --point-b-cert-y: 0; /* Same vertical level */
        --point-b-cert-z: -80%; /* Going back into screen */
    }
    
    /* Certification orbiting lines - MIRRORED on right side (inverse direction) */
    .orbit-line-cert {
        position: absolute;
        left: 0; /* Point A: MIRRORED - at left edge of R4 (right side of vertical line) */
        width: calc(var(--point-b-cert-z) * -1); /* Distance to Point B in Z-space */
        height: 1px; /* Individual line thickness */
        background: rgba(255, 255, 255, 0.4);
        transform-origin: left center; /* Rotate from Point A on RIGHT side */
        animation: inverseOrbit 30s linear infinite !important; /* INVERSE animation */
        opacity: 0.5;
        pointer-events: none;
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    }
    
    /* Blue dot at Point B for certifications debugging (blue to distinguish from counter lines) */
    .orbit-line-cert::after {
        content: '';
        position: absolute;
        right: 0; /* At Point B (right end of line) */
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: blue;
        border-radius: 50%;
        box-shadow: 0 0 10px blue;
        z-index: 100;
    }
    
    /* Position each cert line with staggered delays - SHIFTED DOWN significantly */
    .orbit-line-cert[data-line="1"] { 
        top: calc(-100px + (600px / 9) * 0 + 200px); /* Shifted down 200px */
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: 0s !important;
    }
    .orbit-line-cert[data-line="2"] { 
        top: calc(-100px + (600px / 9) * 1 + 200px); 
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: -27s !important;
    }
    .orbit-line-cert[data-line="3"] { 
        top: calc(-100px + (600px / 9) * 2 + 200px); 
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: -24s !important;
    }
    .orbit-line-cert[data-line="4"] { 
        top: calc(-100px + (600px / 9) * 3 + 200px); 
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: -21s !important;
    }
    .orbit-line-cert[data-line="5"] { 
        top: calc(-100px + (600px / 9) * 4 + 200px); 
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: -18s !important;
    }
    .orbit-line-cert[data-line="6"] { 
        top: calc(-100px + (600px / 9) * 5 + 200px); 
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: -15s !important;
    }
    .orbit-line-cert[data-line="7"] { 
        top: calc(-100px + (600px / 9) * 6 + 200px); 
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: -12s !important;
    }
    .orbit-line-cert[data-line="8"] { 
        top: calc(-100px + (600px / 9) * 7 + 200px); 
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: -9s !important;
    }
    .orbit-line-cert[data-line="9"] { 
        top: calc(-100px + (600px / 9) * 8 + 200px); 
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: -6s !important;
    }
    .orbit-line-cert[data-line="10"] { 
        top: calc(-100px + (600px / 9) * 9 + 200px); 
        animation: inverseOrbit 30s linear infinite !important;
        animation-delay: -3s !important;
    }
    
    /* INVERSE Animation: Orbits OPPOSITE direction (360deg to 0deg = clockwise) */
    @keyframes inverseOrbit {
        0% {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(-360deg); /* Negative = opposite direction! */
        }
    }
    
    /* R5: Right-aligned Certifications title */
    #resume-section .resume-cell[data-cell="R5"] {
        align-items: flex-end; /* Right align */
        justify-content: flex-start; /* Push to top */
        padding-right: 0; /* Furthest right! */
    }
    
    /* Make Certifications title visible on mobile */
    #resume-section .resume-cell[data-cell="R5"] .skills-title {
        color: white;
        font-family: 'Ysabeau Infant', sans-serif;
        font-size: 1.4em;
        opacity: 1 !important; /* Override animation */
        transform: none !important; /* Override animation */
        margin-bottom: 0; /* Remove extra margin */
        text-align: right; /* Right align text */
    }
    
    .brooklyn-img-mobile {
        position: relative;
        display: inline-block;
        width: 100px !important;
    }
    
    .brooklyn-img-mobile img {
        display: block;
        width: 100px !important;
        height: auto !important;
        position: relative;
        z-index: 1;
    }
    
    /* Circular black background - matches desktop */
    .brooklyn-img-mobile::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background-color: black;
        border-radius: 50%; /* Circular! */
        z-index: -1;
    }
    
    /* L3: Left-aligned BU logo - EXACTLY like desktop */
    #resume-section .resume-cell[data-cell="L3"] {
        align-items: flex-start; /* Left align */
        justify-content: flex-start; /* Push to top too */
        padding-left: 0; /* Furthest left! */
    }
    
    /* L4: Left-aligned Skills title */
    #resume-section .resume-cell[data-cell="L4"] {
        align-items: flex-start; /* Left align */
        justify-content: flex-start; /* Push to top */
        padding-left: 0; /* Furthest left! */
    }
    
    /* Make Skills title visible on mobile */
    #resume-section .resume-cell[data-cell="L4"] .skills-title {
        color: white;
        font-family: 'Ysabeau Infant', sans-serif;
        font-size: 1.4em;
        opacity: 1 !important; /* Override animation */
        transform: none !important; /* Override animation */
        margin-bottom: 0; /* Remove extra margin */
    }
    
    .bu-img-mobile {
        width: 100px !important;
        height: auto !important;
        max-width: none !important;
    }
    
    /* Portfolio Section Mobile */
    .portfolio-grid {
        grid-template-columns: 1fr !important; /* Single column */
        gap: 20px !important;
        padding: 20px !important;
    }
    
    /* Extra Section Mobile */
    #masonry-gallery {
        column-count: 1 !important; /* Single column masonry */
    }
    
    /* Connect Section Mobile */
    .connect-container {
        flex-direction: column !important;
    }
    
    .connect-column {
        width: 100% !important;
    }
    
    /* ========== PERFORMANCE OPTIMIZATIONS ========== */
    
    /* Disable hover effects on mobile */
    @media (hover: none) {
        .nav-item:hover,
        .portfolio-block:hover,
        .masonry-brick:hover {
            transform: none !important;
        }
    }
    
    /* Reduce shadows and effects */
    * {
        box-shadow: none !important;
    }
}

/* ============================================
   MOBILE STYLES - COMPLETELY ISOLATED
   Only affects screens 768px and below
============================================ */

@media only screen and (max-width: 768px) {
    
    /* Duplicate positioning rules removed - now handled in main nav section above */

} /* End of @media */

/* ============================================
   MOBILE ABOUT SECTION LAYOUT
   Simple top-to-bottom: Photo → Title → Text
============================================ */

@media only screen and (max-width: 768px) {
    
    /* ========== RESET THE ENTIRE SECTION ========== */
    
    #about-section {
        position: relative !important;
        padding-top: 100px !important; /* Space for repositioned elements */
    }
    
    #about-section .container {
        padding: 20px 15px !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* ========== STEP 1: POSITION IMAGE AT TOP ========== */
    
    /* Pull image out of its container and position at top */
    #about-section .about-left-content {
        position: absolute !important;
        top: -120px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 180px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
    }
    
    #about-section .cut_out-container {
        width: 180px !important;
        height: 180px !important;
        margin: 0 !important;
    }
    
    #about-section .content-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* ========== STEP 2: POSITION TITLE BELOW IMAGE ========== */
    
    #about-section .about-title {
        position: absolute !important;
        top: -40px !important; /* 20px + 180px image + 20px gap */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        font-size: 28px !important;
        word-spacing: 8px !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 15px !important;
        line-height: 1.2 !important;
        z-index: 10 !important;
    }
    
    /* ========== STEP 3: POSITION TEXT BELOW TITLE ========== */
    
    #about-section .about-text-content {
        margin-top: 320px !important; /* Push down below image + title */
        width: 100% !important;
        padding: 0 15px !important;
    }
    
    #about-section .about-text-flow {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important; /* Full viewport height */
    }
    
    /* All paragraphs centered and stacked */
    #about-section .intro-paragraph,
    #about-section .flow-paragraph,
    #about-section .main-paragraph,
    #about-section .personality-paragraph,
    #about-section .closing-paragraph {
        width: 90% !important;
        max-width: 100% !important;
        text-align: center !important;
        position: relative !important;
        top: -320px !important; /* Remove the -320px positioning */
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        transform: none !important;
    }
    
    /* Remove desktop flow styling */
    #about-section .flow-right,
    #about-section .flow-center {
        text-align: center !important;
        transform: none !important;
    }
    
    /* ========== HIDE DESKTOP DECORATIONS ========== */
    
    #about-section .about-title::before,
    #about-section .about-title::after,
    #about-section .about-text-content::before,
    #about-section .about-text-content::after {
        display: none !important;
    }
    
} /* End @media */

@media only screen and (max-width: 768px) {
    
    /* Override main content padding for mobile - use universal content-start */
    .main-content {
        padding-top: var(--content-start) !important; /* Universal content position */
    }
    
    /* Override the section padding for mobile-only version */
    #about-section {
        padding-top: 0px !important; /* Remove the 100px padding */
    }
    
    /* Hide the entire desktop about section content */
    #about-section .container {
        display: none !important;
    }
    
    /* Show mobile-only simple version */
    #about-section .mobile-about-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        min-height: 100vh !important;
        padding: 20px !important;
        padding-top: 0vh !important; /* About section specific - starts right at top */
        text-align: center !important;
    }
    
    #about-section .mobile-about-content h1 {
        font-size: 28px !important;
        margin-bottom: 30px !important;
        word-spacing: 8px !important;
        color: white !important;
    }
    
    #about-section .mobile-about-content img {
        width: 180px !important;
        height: 180px !important;
        border-radius: 50% !important;
        margin-bottom: 30px !important;
        object-fit: cover !important;
    }
    
    #about-section .mobile-about-content p {
        font-family: 'Ysabeau Infant', sans-serif !important;
        font-size: 1rem !important;
        color: white !important;
        width: 90% !important;
        max-width: 500px !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.6 !important;
        text-shadow: 
            0px 0px 8px rgba(0, 0, 0, 1),
            0px 0px 12px rgba(0, 0, 0, 0.8),
            1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    }
    
    #about-section .mobile-about-content .highlight-text {
        font-style: italic !important;
        font-weight: 600 !important;
        text-shadow: 
            0px 0px 12px rgba(255, 255, 255, 0.3),
            0px 0px 8px rgba(0, 0, 0, 1) !important;
    }
    

    
} /* End @media */

/* ============================================
   HUB & SPOKE: Work with existing nav structure
   ============================================ */

/* ========== ISLAND MODE: Only show current page's link ========== */

/* Hide all links when on content page */
.mobile-navbar.on-island .m-nav-item {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease-out;
}

/* Show ONLY the current page's link at FIRST POSITION */
.mobile-navbar.on-island .m-nav-item.m-current {
    opacity: 1 !important;
    pointer-events: all !important;
    transform: translateX(-50%) translateY(var(--distance-to-first)) !important; /* At FIRST POSITION */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Bottom-to-top glide animation (reuses existing structure) */
.m-nav-item.m-glide {
    animation: glideDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

@keyframes glideDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bottom-to-top cascade delays */
.m-nav-item[data-section="connect"].m-glide { animation-delay: 0ms; }
.m-nav-item[data-section="extra"].m-glide { animation-delay: 150ms; }
.m-nav-item[data-section="portfolio"].m-glide { animation-delay: 300ms; }
.m-nav-item[data-section="resume"].m-glide { animation-delay: 450ms; }
.m-nav-item[data-section="about"].m-glide { animation-delay: 600ms; }