/* Entire section is fullscreen */
.page-section.no-padding {
    padding: 0 !important;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Carousel background images */
.carousel-images {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.carousel-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.carousel-image.active {
    opacity: 1;
}

/* Music player OVERLAY at bottom */
.carousel-music-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    padding: 0px;
    box-sizing: border-box;
}

/* Rest of your styles (unchanged) */
.carousel-title {
    font-family: 'Satisfy', cursive;
    font-size: 5rem;
    font-weight: bold;
    color: white;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 30%;
    left: 20%;
    transform: translateX(-50%);
    white-space: nowrap;
    animation: fadeDrift 12s linear infinite;
    opacity: 0;
}

.carousel-caption {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    bottom: 25%;
    left: 20%;
    transform: translateX(-50%);
    animation: fadeDriftCaption 20s linear infinite;
    opacity: 0;
}

@keyframes fadeDrift {
    0% { opacity: 0; transform: translateX(-50%); }
    10% { opacity: 1; }
    70% { opacity: 1; transform: translateX(-65%); }
    90% { opacity: 0; transform: translateX(-70%); }
    100% { opacity: 0; transform: translateX(-50%); }
}

@keyframes fadeDriftCaption {
    0% { opacity: 0; transform: translateX(-50%); }
    10% { opacity: 1; }
    70% { opacity: 1; transform: translateX(-60%); }
    90% { opacity: 0; transform: translateX(-65%); }
    100% { opacity: 0; transform: translateX(-50%); }
}

/* Music Player Styles */
.music-item.featured-track {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}




.waveform-container,
.waveform-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.comment-form {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.comment-input {
    flex-grow: 1;
    padding: 8px;
}

.comment-submit {
    padding: 8px 12px;
}

.featured-badge {
    color: gold;
    margin-left: 10px;
}












@media (max-width: 768px) {

    .carousel-image[data-mobile-preset="centered"] {
        --mobile-title-size: 2.5rem;
        --mobile-title-bottom: 45%;
        --mobile-caption-size: 1rem;
        --mobile-caption-bottom: 38%;
    }

    .carousel-image[data-mobile-preset="higher"] {
        --mobile-title-size: 2.8rem;
        --mobile-title-bottom: 55%;
        --mobile-caption-size: 1.1rem;
        --mobile-caption-bottom: 48%;
    }

    .carousel-image[data-mobile-preset="lower"] {
        --mobile-title-size: 2.6rem;
        --mobile-title-bottom: 32%;
        --mobile-caption-size: 1rem;
        --mobile-caption-bottom: 26%;
    }

    .carousel-image[data-mobile-preset="compact"] {
        --mobile-title-size: 2.1rem;
        --mobile-title-bottom: 50%;
        --mobile-caption-size: 0.9rem;
        --mobile-caption-bottom: 44%;
    }





    .carousel-image[data-mobile-preset="way-higher"] {
        --mobile-title-size: 2.9rem;
        --mobile-title-bottom: 65%;
        --mobile-caption-size: 1.15rem;
        --mobile-caption-bottom: 58%;
    }

    .carousel-image[data-mobile-preset="ultra-higher"] {
        --mobile-title-size: 3.1rem;
        --mobile-title-bottom: 72%;
        --mobile-caption-size: 1.2rem;
        --mobile-caption-bottom: 65%;
    }

    .carousel-image[data-mobile-preset="way-lower"] {
        --mobile-title-size: 2.6rem;
        --mobile-title-bottom: 22%;
        --mobile-caption-size: 1rem;
        --mobile-caption-bottom: 16%;
    }

    .carousel-image[data-mobile-preset="ultra-lower"] {
        --mobile-title-size: 2.4rem;
        --mobile-title-bottom: 16%;
        --mobile-caption-size: 0.95rem;
        --mobile-caption-bottom: 10%;
    }





}



/* ===============================
   MOBILE REFINEMENTS
   =============================== */
@media (max-width: 768px) {

    .carousel-container {
        height: 100svh;
    }

    .carousel-title {
        font-size: var(--mobile-title-size, 2.5rem);
        bottom: var(--mobile-title-bottom, 45%);
        left: 50%;
        transform: translateX(-50%);
        white-space: normal;
        text-align: center;
        max-width: 90%;
        animation: fadeCenter 10s linear infinite;
    }

    .carousel-caption {
        font-size: var(--mobile-caption-size, 1rem);
        bottom: var(--mobile-caption-bottom, 38%);
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        max-width: 85%;
        animation: fadeCenterCaption 14s linear infinite;
    }

    .carousel-music-overlay {
        padding: 10px 12px;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.9),
            rgba(0, 0, 0, 0.5),
            transparent
        );
    }

    .song-title {
        font-size: 0.95rem;
    }

    .artist-name {
        font-size: 0.8rem;
        opacity: 0.85;
    }

    .featured-badge {
        font-size: 0.75rem;
    }
}






@keyframes fadeCenter {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeCenterCaption {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}