/* --- Reset & Base --- */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    /* Hide scrollbars depending on axis to prevent double scrolling triggers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    background-color: black;
}

/* Hide scrollbar visuals but allow scrolling */
body::-webkit-scrollbar {
    display: none;
}

/* --- Typography --- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Background Image Logic --- */

/* The container ensures the image is positioned correctly 
   relative to the document flow 
*/
.background-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.bg-image {
    display: block;
}

/* DESKTOP / LANDSCAPE (Wide screens)
   - Image matches viewport width (100vw).
   - Image height scales naturally.
   - If height > viewport, vertical scroll occurs.
*/
@media (min-aspect-ratio: 1/1) {
    .bg-image {
        width: 100vw;
        height: auto;
    }
    
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* MOBILE / PORTRAIT (Tall/Narrow screens)
   - Image matches viewport height (100vh).
   - Image width scales naturally.
   - If width > viewport, horizontal scroll occurs.
*/
@media (max-aspect-ratio: 1/1) {
    .bg-image {
        height: 100vh;
        width: auto;
        max-width: none; /* Override any defaults to allow overflow */
    }
    
    body {
        overflow-y: hidden;
        overflow-x: auto;
    }
}

/* --- Fixed Overlay UI --- */
.overlay {
    position: fixed;
    bottom: 0;
    z-index: 10;
    background-color: #000000; /* Fully black & opaque */
    padding: 24px 32px; /* Spacing inside the black box */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Desktop Positioning: Bottom Left */
@media (min-width: 768px) {
    .overlay {
        left: 0;
        align-items: flex-start;
        border-top-right-radius: 4px; /* Optional subtle hard corner polish */
    }
    
    .main-logo {
        height: 60px; /* Adjust based on actual logo file resolution */
        width: auto;
    }
}

/* Mobile Positioning: Middle Bottom */
@media (max-width: 767px) {
    .overlay {
        left: 50%;
        transform: translateX(-50%);
        align-items: center;
        width: auto; /* Hug content */
        min-width: 200px;
        padding: 20px 24px;
    }

    .main-logo {
        height: 45px; /* Slightly smaller on mobile */
        width: auto;
    }
}

/* --- Logo & Link Styling --- */

.main-logo {
    display: block;
    /* Ensure image renders crisply */
    image-rendering: -webkit-optimize-contrast; 
}

.spotify-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    transition: opacity 0.2s ease;
}

.spotify-link:hover {
    opacity: 0.8;
}

.spotify-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* Gradient Text Logic */
.spotify-text {
    font-weight: 700; /* Bold Inter */
    font-size: 1.125rem; /* ~18px */
    /*line-height: 1;*/
    
    /* The Gradient */
    background: linear-gradient(90deg, #FE4900 0%, #FFE300 100%);
    
    /* Clip background to text */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Make text transparent so background shows through */
    color: transparent;
    
    /* Fallback color if gradients fail */
    -webkit-text-fill-color: transparent;
}