html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background-color: rgb(0, 0, 0);
    color: rgb(7, 98, 103);
    font-family: Courier, monospace; 
    padding: 20px; 
}

/* --- FOREGROUND ELEMENTS --- */
/* Forces these elements to sit closer to the camera than the floating GIF */
.title-container, 
.album-cover, 
.grid-square,
.info-panel {
    position: relative;
    z-index: 10; 
}

/* --- MAIN MENU (BOTTOM LEFT) --- */
/* --- MAIN MENU (BOTTOM LEFT, ALWAYS VISIBLE) --- */
.main-menu {
    display: flex;
    flex-direction: column; 
    gap: 12px;              
    
    /* 1. CHANGED TO FIXED: This glues it to the screen! */
    position: fixed; 
    bottom: 40px; 
    left: 20px;   
    
    /* 2. CRITICAL: High z-index keeps it layered on top of your portfolio grid */
    z-index: 100;  
}

.menu-link {
    font-family: Courier, monospace;
    font-size: 1.5rem;      
    color: #ffffff;         
    text-decoration: none;  
    text-align: left;
    width: fit-content;     
    
    transition: color 0.3s ease, transform 0.3s ease;
}

/* --- MENU HOVER EFFECT --- */
.menu-link:hover {
    color: rgb(7, 98, 103);       
    transform: translateX(10px);  
}

/* --- MOBILE RESPONSIVENESS FOR MAIN MENU --- */
@media (max-width: 1024px) {
    .main-menu {
        /* -- NEW: Translucent White (Frosted Glass) -- */
        background-color: rgba(255, 255, 255, 0.75); /* 75% white, 25% transparent */
        
        /* Optional: Add a backdrop blur for a cool modern effect */
        backdrop-filter: blur(5px); 
        -webkit-backdrop-filter: blur(5px); /* Safari support */
        padding: 15px 25px;        /* Adds space around the text */
        border-radius: 8px;        /* Softens the corners */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Optional: floats it off the background */
        
        /* Adjusts position slightly so it doesn't hug the edge too tightly on phones */
        bottom: 25px;
        left: 20px;
    }

    /* Force text and links to black inside the white box */
    .main-menu .menu-link {
        color: #000000 !important; 
    }

    /* Keep the teal hover/tap effect working inside the white box */
    .main-menu .menu-link:hover {
        color: rgb(7, 98, 103) !important;
    }
}

.opening-screen {
    position: relative; /* TRAPS the absolute backgrounds inside this section */
    width: 100%;
    min-height: 100vh;  /* Forces this section to be exactly 1 screen tall */
    overflow: hidden;   /* Stops shards from bleeding down into your portfolio */
}

.diagonal-background {
    position: absolute; /* Attaches to the page so it scrolls away naturally */
    left: 0;
    
    /* Pushes it down to the bottom area of your FIRST screen */
    top: 75vh; 
    
    width: 100vw;
    height: 15vh; /* Adjust your thickness here */
    
    background-color: rgb(5, 67, 70); 
    opacity: 95%;
    z-index: -10; 
}

/* --- EXTRA-LIGHT 3D MONOLITH LAYER --- */
/* --- EXTRA-LIGHT 3D MONOLITH LAYER --- */
#shatter-box {
    position: absolute; /* CHANGED FROM FIXED: Now it stays trapped in the opening screen! */
    top: 0;
    left: 0;
    width: 100%;        /* Use 100% instead of vw so it matches the container perfectly */
    height: 100%;       /* Use 100% instead of vh */
    z-index: -10;
    overflow: hidden;
    perspective: 1200px; 
}

/* THE SHARED 3D LAYER BEHAVIOR */
.shard-layer {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}

.shard-wrapper {
    position: absolute;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    /* Shadows removed here to save massive performance */
}

/* Only the large shards get shadows, saving 80% rendering power */
.hero-shard {
    filter: drop-shadow(0px 12px 24px rgba(0, 0, 0, 0.85));
}

.shard-content {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('Pictures/EmilDrawing.png'); 
    background-repeat: no-repeat;
    backface-visibility: hidden;
}


/* --- 1. HIDE THE DEFAULT BROWSER CURSOR --- */
body, a, button, .grid-square, .close-btn, .bio-trigger, .album-cover {
    cursor: none !important;
}

/* --- 2. THE CUSTOM DOT --- */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: #fff; 
    border-radius: 50%;
    
    /* CRITICAL: This stops the custom cursor from physically blocking your clicks! */
    pointer-events: none; 
    z-index: 9999; /* Forces it to hover above absolutely everything on the page */
    
    /* Smoothly animates the shape change, but leaves movement raw for zero lag */
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, border 0.2s ease;
    
    /* The chameleon effect: inverts against light backgrounds */
    mix-blend-mode: difference; 
}

/* --- 3. THE HOVER STATE (The Expanding Ring) --- */
#custom-cursor.hover-active {
    width: 45px;
    height: 45px;
    background-color: transparent;
    border: 1.5px solid #fff; 
}


/* CARGO FLOATING ELEMENT */
#floating-gif {
    position: fixed;
    display: block;
    width: 3.5vw; 
    height: auto;
    max-width: 65px;
    min-width: 35px;
    
    pointer-events: auto; 
    z-index: 100;         
    cursor: pointer;
    opacity: 0;

    /* 1. Initializes the Holy Grail physics engine */
    translate: 0px 0px; 
    scale: 1;

    /* 2. THE UNBREAKABLE SPIN (12s is a nice, slow original speed) 
       By using the independent 'rotate' property, it never collides with scales/translates! */
    animation: cargoSpin 12s linear infinite;
}

#floating-gif:hover {
    filter: brightness(1.2);
}

@keyframes cargoSpin {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

/* 1. THE FORCE-SHRINK CONTAINER */
/* 1. THE RIGID TITLE CONTAINER */
.title-container {
    display: inline-block; 
    position: relative;    /* CRITICAL: Becomes the structural anchor for the absolute roles */
    width: max-content;    /* FORCES the container to look ONLY at the width of your name */
    text-align: left;      
    box-sizing: border-box;
    
    /* SAFETY BUFFER: Since the roles are now absolute, we add a margin here 
       to prevent the "EmilDrawing" image below from sliding up and overlapping them */
    margin-bottom: 60px;   
}

h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 10vw; 
    text-transform: uppercase;
    letter-spacing: -4px;
    margin: 0; 
    line-height: 0.9; 
    white-space: nowrap;   
    display: block;    
    opacity: 95%;    /* Dictates the absolute width of the parent container */
}

/* 2. THE ABSOLUTE ROLES FLEXBOX */
.roles {
    position: absolute;    /* MAGIC TRICK: Pulls the roles out of the width calculation */
    left: 12px;
    top: 100%;             /* Places it flawlessly right beneath the H1 box */
    width: 100%;           /* Forces the row to match the exact pixel width of "Emil Sana" */
    
    font-size: 1.7vw;      /* MADE IT SMALLER: More elegant, editorial font scale */
    display: flex; 
    flex-wrap: nowrap;     /* Keeps all roles strictly locked onto one single line */
    justify-content: space-between; /* Flushes first word to the 'E' and last word to the '.' */
    gap: 5px; 
    margin-top: 10px;      
}

.role {
    display: inline-block;
    white-space: nowrap;
    animation: shufflePositions 4s infinite step-end;
}

/* We give each word a slightly different timing so they don't move in a boring unison */
.role:nth-child(1) { animation-delay: 0s; }
.role:nth-child(2) { animation-delay: 1.3s; }
.role:nth-child(3) { animation-delay: 2.6s; }

@keyframes shufflePositions {
    0% { order: 1; opacity: 1; }
    33% { order: 2; opacity: 0.8; }
    66% { order: 3; opacity: 1; }
    100% { order: 1; opacity: 0.9; }
}

.image-row {
    display: flex;
    align-items: flex-start;      /* MAGIC LINE: Vertically aligns the centers of both images perfectly in line */
    justify-content: space-between; /* Pushes the drawing left and the album cover completely right */
    width: 100%;
    box-sizing: border-box;
    padding-right: 15%;        /* Tasteful safety margin so the album doesn't clip the edge of the monitor */
    margin-top: 40px;         /* Breathing room below your title and roles */
}

.emil-drawing {
    width: 25vw;  
    height: auto; 
    object-fit: contain;
    flex-shrink: 0;    /* Scales with the window, just like your text */
    margin-left: 5%; /* Pushed to the right to create an asymmetrical layout */
    max-width: 600px;         /* Hard ceiling so it doesn't get massive on giant desktop screens */
    min-width: 150px; 
    
    /* This makes it black and white to match your site's aesthetic */
    filter: grayscale(100%) contrast(150%);
    
    /* A little transparency can make it feel more like a ghost in the machine */
    opacity: 0.7;
}

.album-cover {
    display: block;
    width: 20vw;              
    max-width: 600px;         
    min-width: 150px;         
    background-color: #0d0d0d; 
    margin-top: 300px;
    
    /* --- NEW FLAT STYLE --- */
    /* A thin frame using your exact title color */
    border: 1px solid rgb(7, 98, 103); 
    
    /* Simple transition for the new hover effect */
    transition: filter 0.3s ease, border-color 0.3s ease;

    /* =========================================
       THE 3D VAULT (Commented out for safekeeping)
       =========================================
       border: 2px solid #1c1c1c; 
       transform: perspective(1000px) rotateY(-25deg) rotateX(2deg);
       box-shadow: 25px 30px 40px rgba(0, 0, 0, 0.85);
       transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease; 
    ========================================= */
}

/* --- THE HOVER ANIMATION --- */
.album-cover:hover {
    /* NEW: A subtle flat hover effect (makes it pop slightly) */
    filter: brightness(1.2);
    border: 1px solid rgb(15, 140, 145); /* Slightly brighter teal on hover */

    /* =========================================
       THE 3D HOVER VAULT (Commented out)
       =========================================
       transform: perspective(1000px) rotateY(-15deg) rotateX(0deg);
       box-shadow: 10px 15px 25px rgba(0, 0, 0, 0.95);
    ========================================= */
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- THE FLOATING ALBUM PROMO --- */
.album-promo-box {
    position: absolute;
    z-index: 15; 
    
    bottom: 22vh;      /* Matches voidY: 45 */
    right: 10vw;    /* Matches voidX: 75 (because 100 - 75 = 25) */
    transform: translate(50%, 50%); 

    display: flex;
    flex-direction: column;
    align-items: center; 
    
    /* Removed background, padding, and borders! */
    background: transparent; 
    text-decoration: none;
}

.promo-album-cover {
    width: 300px;  
    height: 300px; 
    object-fit: cover;
    margin-bottom: 20px; 

    border: 1px solid rgba(255, 255, 255, 0.4);
    /* Optional: add a slight shadow so it pops off the background */
    box-shadow: 0px 10px 40px rgba(0,0,0,0.8);
}

.promo-album-text {
    font-family: Courier, monospace;
    font-size: 1.5rem; 
    color: #ffffff;
    letter-spacing: 4px; 
    margin: 0;
}





/* --- PORTFOLIO SECTION --- */

/* --- EXPANDING ACCORDION GRID --- */
/* --- TASTEFUL, CENTERED PORTFOLIO GRID --- */
.portfolio-wrapper {
    position: relative;
    z-index: 10;
    scroll-margin-top: 5vh;
}

.portfolio-grid {
    display: grid;
    
    /* 1. FORCE EXACTLY 5 COLUMNS PER ROW */
    grid-template-columns: repeat(5, 1fr); 
    
    /* 2. THE TASTEFUL CORE CENTERING */
    max-width: 75vw; 
    margin: 10px auto 100px auto; 
    gap: 2px; /* Restored your original tight cinematic gap! */
    padding: 0 30px; 
    width: 100%;
    box-sizing: border-box;
}

/* 3. MOBILE SAFETY NET */
@media (max-width: 1000px) {
    .portfolio-grid {
        grid-template-columns: repeat(4, 1fr); 
    }
}
@media (max-width: 700px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr); 
        max-width: 60vw;
        margin: 150px auto;
    }
}
@media (max-width: 400px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }
}

/* --- THE UPGRADED GRID SQUARE --- */
.grid-square {
    position: relative;    
    width: 100%;
    aspect-ratio: 1 / 1; /* Locks it to a perfect square */
    background-color: #111;
    cursor: pointer;
    overflow: hidden; /* Clips the image and color perfectly */
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* THE TEAL TINT OVERLAY */
.grid-square::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 67, 70, 0.3); 
    pointer-events: none; 
    transition: background-color 0.3s ease; 
}

/* --- THE HOVER INTERACTION --- */
.grid-square:hover {
    transform: scale(0.98);
    filter: brightness(1.2);
}

.grid-square:hover::after {
    background-color: rgba(5, 67, 70, 0); 
}

/* --- THE IMAGE --- */
.tile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block; 
}

/* --- THE SEO MAGIC (Visually Hidden) --- */
/* This is the only new thing! It hides the text from humans but shows it to Google */
.tile-info {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 1. THE MAIN PANEL CONTAINER --- */
.info-panel {
    grid-column: 1 / -1; 
    display: flex;
    flex-direction: row; 
    gap: 10px;             
    
    background-color: #0a0a0a;
    padding: 5px;         
    border: 1px solid #222;
    margin: 10px 0 10px 0; 
    
    position: relative; 
    animation: panelSlideDown 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

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

/* --- 2. THE IMAGE (Restored to full color) --- */
.info-panel-img {
    width: 35%;           
    max-width: 350px;     
    object-fit: cover;
    border: 1px solid #1c1c1c;
}

/* --- 3. THE TEXT & TYPOGRAPHY --- */
.info-panel-text {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    width: 65%;
}

.info-panel-text h2 {
    color: rgb(7, 98, 103); 
    font-size: 2rem;       
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.info-panel-text p {
    color: #ccc;
    font-size: 1rem;       
    line-height: 1.5;
    margin: 0;
}

/* --- 4. THE CLOSE BUTTON --- */
.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;       
    color: #555;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 10px;
    cursor: pointer;
}

.close-btn:hover {
    color: #fff;
    transform: scale(1.15); 
}

/* --- 5. MOBILE RESPONSIVENESS --- */
/* --- 5. MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .info-panel {
        flex-direction: column;
        padding: 20px;
        gap: 15px; 
    }
    
    .info-panel-img {
        /* Force both width and height to use the exact same screen measurement */
        width: 45vw !important; 
        height: 45vw !important; 
        
        /* Cap them at the exact same pixel size so it stays square on larger phones */
        max-width: 200px !important;
        max-height: 200px !important;
        
        object-fit: cover !important;
        flex-shrink: 0 !important;
        
    }
    
    .info-panel-text {
        width: 100%;
    }
    
    .info-panel-text h2 {
        font-size: 1.6rem;
    }
}

/* --- OUTBOUND PROJECT LINKS --- */
.project-link {
    display: inline-block;
    color: rgb(7, 98, 103); /* Your signature teal */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.project-link:hover {
    color: #fff; /* Highlights to pure white on hover */
}

/* --- DIVIDER FOR MULTIPLE LINKS --- */
.link-divider {
    color: #555; /* A subtle grey so it doesn't distract from the teal links */
    font-size: 0.9rem;
}

/* --- MUSIC SECTION --- */
/* --- LISTEN SECTION --- */
/* --- LISTEN SECTION (Full Screen Framing) --- */
.listen-section {
    display: flex;
    justify-content: center;
    align-items: center;
    
    min-height: 100vh; /* Forces the section to be exactly one screen tall */
    width: 100%;
    
    position: relative;
    z-index: 10;
}


/* --- PLAYLIST SIZING --- */
.playlist-container {
    width: 100%;
    max-width: 600px; /* Locks the maximum width to Disco's 480px */
    padding: 0 20px;
    box-sizing: border-box;
}

.playlist-container iframe {
    width: 100%;
    
    /* THE FIX: Hardcode the exact height so it never collapses */
    height: 600px; 
    
    border: none;
    background: transparent; 
}

/* --- LISTEN SIDE MENU --- */
.listen-side-menu {
    position: absolute;
    z-index: 20;
    
    /* Adjust these to exactly mirror your main menu's spacing */
    bottom: 40px; 
    right: 10px; 
    
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Flushes text neatly to the right edge */
    gap: 15px; 

    
}

/* --- LISTEN MENU LINKS --- */
.listen-menu-link {
    font-family: Courier, monospace;
    font-size: 1.5rem; /* Matches your main menu */
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 2px;

    transition: color 0.3s ease, transform 0.3s ease;
}

.listen-menu-link:hover {
   
    color: rgb(7, 98, 103);       
    transform: translateX(-10px);  
}



/* --- SMOOTH SCROLLING MAGIC --- */
html {
    scroll-behavior: smooth; 
}

/* --- BIO SECTION --- */
/* --- BIO SECTION --- */
/* --- 1. MAIN BIO SECTION (Stacks vertically) --- */
.bio-section {
    display: flex;
    flex-direction: column; /* Stacks the text/image block ON TOP of the logo */
    align-items: center;
    justify-content: center;
    
    max-width: 75vw; 
    margin: 30vh auto 20vh auto; 
    min-height: 100vh;
    
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

/* --- 2. THE COLUMNS (Forces side-by-side layout) --- */
.bio-columns {
    display: flex;
    flex-direction: row; /* Locks text left, image right */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 60px;
}

/* --- 3. TEXT COLUMN (Left) --- */
.bio-text {
    flex: 1;
    max-width: 55%;
}

.bio-text h2 {
    color: rgb(7, 98, 103);
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 20px;
}

.bio-text p {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify; /* Adds a clean, editorial feel to the paragraph text */
}

/* --- 4. IMAGE COLUMN (Right) --- */
.bio-image {
    flex: 1;
    max-width: 35%;
    display: flex;
    justify-content: flex-end; /* Pushes image flush to the right edge */
}

.bio-image img {
    width: 100%;
    height: auto;
    max-width: 400px;
    filter: grayscale(100%) contrast(150%);
    opacity: 0.7;
}

/* --- 5. SOCIAL LOGO (Centered at bottom) --- */
.bio-social-container {
    display: flex;
    
    /* THE FIX: Flushes the logo exactly to the left edge of the container */
    justify-content: flex-start; 
    
    width: 100%;
    margin-top: 60px; 
    padding-bottom: 60px; 
}

.bio-ig-link {
    display: inline-block;
}

.ig-logo-png {
    /* INCREASED SIZE: Bumped from 35px to 45px */
    width: 45px;  
    height: auto;
    
    filter: invert(100%); 
    transition: transform 0.3s ease, opacity 0.3s ease; 
}

.bio-ig-link:hover .ig-logo-png {
    transform: scale(1.1); 
    opacity: 0.7;          
}

/* --- 6. MOBILE RESPONSIVENESS --- */
@media (max-width: 900px) {
    .bio-columns {
        flex-direction: column-reverse; /* Stacks text under image on phones */
        text-align: center;
        gap: 40px;
    }
    
    .bio-text, .bio-image {
        max-width: 100%;
    }
    
    .bio-image {
        justify-content: center;
    }
}
/* --- CONTACT SECTION --- */
.contact-section {
    display: flex;
    justify-content: center;
    align-items: center;
    
    min-height: 100vh; /* Forces the section to be exactly one screen tall */
    width: 100%;
    
    position: relative;
    z-index: 10;
}

/* --- THE EMAIL LINK --- */
.contact-email {
    font-family: Courier, monospace;
    font-size: 2.8rem;        /* Nice and bold in the center of the screen */
    color: #ffffff;
    text-decoration: none;  /* Removes the default hyperlink underline */
    letter-spacing: 4px;
    
    transition: color 0.3s ease, transform 0.3s ease;
}

.contact-email:hover {
    color: rgb(7, 98, 103); /* Your signature teal */
    transform: scale(1.05); /* Slight "pop" forward when you hover over it */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 1024px) {
    .contact-email {
        font-size: 1.8rem;  /* Shrinks the email so it doesn't break on phones */
    }
}

/* --- FULL CREDITS SECTION (Perfectly Centered) --- */
/* --- 1. THE OUTER SECTION (Handles the Centering) --- */
.credits-section {
    width: 90vw;
    height: 100vh; /* Locks it to exactly one screen tall */
    margin: 0 auto; 
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* Mathematically centers it vertically */
    
    padding-bottom: 15vh; /* Nudges the block up slightly */
    box-sizing: border-box;
    
    position: relative;
    z-index: 10;
}

.credits-section h2 {
    color: rgb(7, 98, 103);
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: left;
}

/* --- 2. THE INNER WRAPPER (Handles the 4 Columns) --- */
.credits-wall {
    max-height: 60vh; /* Caps the height to force wrapping */
    
    column-count: 4; 
    column-gap: 50px; 
    
    /* Removed the generic hover effect from here! */
}

/* --- 3. THE CATEGORY HEADERS --- */
.credits-category {
    color: rgb(7, 98, 103); /* Matched to your h2 */
    font-size: 0.85rem;
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Stops a category title from being left alone at the bottom of a column */
    break-after: avoid; 
}

/* --- 4. THE LISTS & HOVER EFFECT --- */
.credits-list {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px 0; /* Space before the next category */
}

.credits-list li {
    color: #777; /* Your original default color */
    font-size: 0.75rem; /* Your original size */
    line-height: 1.4; 
    margin-bottom: 5px;
    
    /* Stops a single credit from splitting across two columns */
    break-inside: avoid; 
    
    cursor: default;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* THE NEW PER-LINE HOVER EFFECT */
.credits-list li:hover {
    color: #fff; /* Snaps to full white */
    transform: translateX(3px); /* Subtle nudge right */
}



.back-to-top {
    position: fixed;
    top: 30px;   /* Anchors to the top */
    right: 30px; /* Anchors to the right */
    
    color: #ffffff;
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
}

.back-to-top.visible {
    opacity: 0.4;
    pointer-events: auto;
}

@media (hover: hover) {
    .back-to-top:hover {
        opacity: 1;
        transform: translateY(-3px); 
    }
}

.back-to-top svg {
    width: 28px;
    height: 28px;
}

/* ==========================================
   THE MASTER MOBILE OVERRIDE (Max 1024px)
   ========================================== */
@media (max-width: 1024px) {
    
    /* 1. TYPOGRAPHY & TITLE 
       10vw is way too small on a narrow phone screen. We bump it up and adjust the absolute roles. */
   body {
        padding: 10px !important; /* Reclaim screen space on narrow phones */
    }
    
    .title-container {
        display: block !important; /* Force it to take up the full row */
        width: 100% !important;    /* Stretch it across the entire screen */
        margin-bottom: 80px; 
    }

    h1 {
        /* 15vw is the exact sweet spot for 9 letters ("Emil Sana") to span 100% of a screen */
        font-size: 15vw !important; 
        letter-spacing: -1px !important;
        text-align: center !important; /* Center the name perfectly */
        width: 100% !important;
    }
    
    .roles {
        width: 100% !important; /* Stretch exactly as wide as the screen/h1 */
        left: 0 !important;     /* Reset left alignment */
        
        /* Font size bump to make the roles punchy and readable */
        font-size: 4vw !important;
        
        /* Add slight padding so the roles don't hit the absolute edges of the glass */
        padding: 0 10px !important; 
        box-sizing: border-box !important;
    }
    
   /* 2. THE FLOATING ALBUM PROMO (Pinned Bottom-Right & Shrink) */
.album-promo-box {
    position: absolute !important;
    
    /* THE FIX: Pull it much lower, near your fixed leftside menu */
    bottom: 90px !important; /* Adjust this to sit vertically flush with your menu */
    
    /* Pinned to the right edge */
    right: 20px !important; 
    left: auto !important; 
    
    transform: none !important;
    margin-top: 0 !important;
    

    
    /* Right-aligns the small text under the cover */
    align-items: flex-end !important; 
}

.promo-album-cover {
    /* Miniaturized mobile footprint */
    width: 120px !important;  /* Was 150px, now significantly smaller */
    height: 120px !important;
    margin-bottom: 5px !important; /* Tighter spacing */
}

.promo-album-text {
    /* Dense, graphic micro-text style */
    font-size: 0.6rem !important; /* Very small but readable */
    letter-spacing: 1px !important;
    text-align: right !important;
    color: rgba(255, 255, 255, 0.7) !important; /* Slightly dimmer white for hierarchy */
}
    
    /* 3. MAIN NAVIGATION MENU
       It is currently absolute bottom-left, which overlaps mobile content. We turn it into a sticky footer or bump it up. */
    .main-menu {
        bottom: 20px;
        left: 20px;
        gap: 8px;
    }
    .menu-link {
        font-size: 1.2rem;
    }
/* --- MOBILE RESPONSIVENESS FOR LISTEN SECTION --- */
@media (max-width: 1024px) {
    .listen-section {
        display: flex !important;
        flex-direction: column !important; 
        justify-content: flex-start !important; /* Pushes player to the top */
        padding-top: 20px !important; 
        min-height: 100vh !important; /* Forces the section to fill the screen, leaving empty space below */
        scroll-margin-top: 0px !important;
    }

 @media (max-width: 767px) {
    .playlist-container iframe {
        height: 400px !important; /* Shrinks player only on phones */
    }
}

    /* Fix the menu to sit right under the player */
    .listen-side-menu {
        position: relative !important;  /* Overrides the absolute positioning */
        bottom: auto !important; 
        right: auto !important;
        
        /* Pushes the menu box to the right side of the screen */
        align-self: flex-end !important; 
        align-items: flex-end !important; 
        
        margin-top: 20px !important; /* Small gap directly under the player */
        gap: 10px !important; 
    }

    .listen-menu-link {
        font-size: 0.85rem !important; 
        text-align: right !important;
    }
}
    /* 5. BIO SECTION STACKING 
       Overrides the side-by-side flexbox to stack vertically */
    .bio-columns {
        flex-direction: column;
        text-align: left;
        gap: 40px;
    }
    .bio-text, .bio-image {
        max-width: 100%;
    }
    .bio-image {
        justify-content: center;
        margin-left: 0; /* Removes the asymmetrical push */
    }
    .bio-image img {
        width: 80%; /* Slightly smaller so it doesn't dominate the screen */
    }
    
    /* Center the Instagram logo perfectly under the stacked text/image */
    .bio-social-container {
        justify-content: center;
        margin-top: 40px;
    }

    .bio-text h2 {
        font-size: 1.5rem !important; /* Scales down the 'about.' header */
        margin-bottom: 15px !important;
    }
    
    .bio-text p {
        font-size: 0.8rem !important; /* Drops the paragraph text down */
        line-height: 1.4 !important;  /* Tightens the spacing between lines */
        padding: 0 !important;   /* Adds a tiny bit of breathing room on the edges */
        text-align: justify !important;
    }
    
  /* 6. CONTACT SECTION (Forced to one line) */
    .contact-email {
        /* Scales dynamically with the screen so it always fits perfectly */
        font-size: 5vw !important; 
        
        /* The magic rule that absolutely prevents it from wrapping to a second line */
        white-space: nowrap !important; 
        
        /* Cancels out the previous breaking rule */
        word-break: normal !important; 
        
        text-align: center !important;
        padding: 0 !important; 
    }

    /* 7. CUSTOM CURSOR OFF
       Mobile devices do not have mice. We must completely hide the custom cursor, 
       otherwise it will glitch out and stick to the last place they tapped their finger. */
    #custom-cursor {
        display: none !important;
    }
    
    /* Restore the default pointer for links just in case */
    body, a, button, .grid-square, .close-btn, .bio-trigger, .album-cover {
        cursor: auto !important;
    }

  .portfolio-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* Forces 3 columns */
        max-width: 95vw !important; /* Removes the 60vw squeeze */
        margin: 50px auto !important; 
        padding: 0 10px !important; 
        gap: 8px !important; /* Tightens the gap so the squares can be larger */
    }

/* 7. CREDITS SECTION MOBILE OVERRIDE (Dense 2-Column Micro-Text) */
@media (max-width: 1024px) {
    
    /* The Outer Section: Keeping your massive 300px cushion */
    .credits-section {
        width: 100% !important; 
        max-width: 95% !important; 
        margin: 0 auto !important;
        box-sizing: border-box;
        
        height: auto !important; 
        min-height: min-content !important; 
        max-height: none !important; 
        
        padding-bottom: 300px !important; 
        
        /* Ensures the content starts at the top, not mathematically centered */
        justify-content: flex-start !important; 
        padding-top: 50px !important;
    }

    /* Keep the title sized correctly */
    .credits-section h2 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }

    /* The Columns: Keeping your 2-column layout and balance rules */
    .credits-wall {
        column-count: 2 !important; 
        column-gap: 15px !important;
        
        height: auto !important; 
        max-height: none !important; 
        display: block !important;
        overflow: visible !important; 
        
        column-fill: balance !important;
        word-break: normal !important; 
        overflow-wrap: break-word !important;
    }

    /* NEW: Scale the category headers to fit the columns */
    .credits-category {
        font-size: 0.65rem !important;
        margin-top: 15px !important;
        margin-bottom: 8px !important;
        
        /* Stop a title from being stranded at the bottom of a column */
        break-after: avoid !important; 
    }
    
    .credits-list {
        margin: 0 0 15px 0 !important; /* Space between categories */
    }

    /* THE KILLER FIX: Apply your break-avoid and tiny font size to the list items */
    .credits-list li {
        font-size: 0.55rem !important; /* Your exact micro-text size */
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
        
        /* Stops individual credits from being sliced in half across columns */
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}
}