/* ------------------------------------------------ */
/* PROJECTS SECTION                                 */
/* ------------------------------------------------ */
.portfolio-section {
    width: 200vw;
    margin-left: -50vw;
    height: auto;
    min-height: 100vh;
    border-top-left-radius: 100vw 25vh;
    border-top-right-radius: 100vw 25vh;
    background-color: #000000;
    position: relative;
    z-index: 50;
    margin-top: -30vh;
    padding-top: 10px;
    /* Visible at the bottom of the landing page, centered in the dome */
    padding-bottom: 35vh;
    overflow: visible;
    /* Ensures the sticky wrapper works without restrictions */
}

.portfolio-sticky-wrapper {
    position: relative;
    left: 0;
    width: 200vw;
    /* Retains the same section width to maintain centering */
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    padding-top: 0px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.scroll-down-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 144px;
    /* Duplicated to double size */
    height: 144px;
    /* Fixed physical height to avoid strange rendering collapses */
    margin-bottom: 10px;
    margin-top: 0px;
    animation: bounce-arrow 2s infinite ease-in-out;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent !important;
    position: relative;
    z-index: 110 !important;

    /* Premium smooth scroll transition using transform and opacity */
    transform: scale(calc(1 - var(--scroll-progress))) translateY(calc(var(--scroll-progress) * -20px));
    opacity: calc(1 - (var(--scroll-progress) * 1.5));
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

@keyframes bounce-arrow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

.vertical-arrow {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #fff;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.portfolio-title {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: 0.15rem;
    color: var(--color-yellow);
    text-transform: uppercase;
    margin-bottom: 25px;
    margin-top: 4vh;
    padding: 0.4em 1em;
    text-align: center;
    position: relative;
    z-index: 100;
    width: 100%;
    opacity: 1;
    transform: none !important;
    transition: opacity 0.5s ease;
    pointer-events: auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.portfolio-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 640px);
    height: 130%;
    background: radial-gradient(ellipse at center, rgba(11, 10, 8, 0.7) 0%, rgba(11, 10, 8, 0.3) 60%, rgba(11, 10, 8, 0) 80%);
    z-index: -1;
    pointer-events: none;
}

.portfolio-title.visible {
    opacity: 1;
    transform: none !important;
    pointer-events: auto;
}

.album-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: calc(65px + (100px * var(--scroll-progress)));
    /* Compact at the start to peek the cover, spaced out when scrolling */
    transition: margin-top 0.1s ease-out;
}



.album-cover {
    width: 80vw;
    max-width: 400px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    position: relative;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.album-cover.slide-out-up {
    animation: slide-out-up 0.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

.album-cover.slide-in-down {
    animation: slide-in-down 0.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

.album-description {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    /* Larger text */
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    text-align: justify;
    /* Premium justified */
    text-transform: uppercase;
    /* Uppercase */
    letter-spacing: 0.05em;
    /* Sublime spacing */
    max-width: 400px;
    /* Width identical to the album cover */
    margin: 0.8rem auto -0.4rem;
    /* Tight and balanced adjustment */
    padding: 0 15px;
    box-sizing: border-box;
    z-index: 5;
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* No text-shadow by minimalist requirement */
}

@keyframes slide-out-up {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translateY(-120%) scale(0.85);
        opacity: 0;
        filter: blur(5px);
    }
}

@keyframes slide-in-down {
    0% {
        transform: translateY(100px) scale(0.85);
        opacity: 0;
        filter: blur(5px);
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* Media query for mobile devices and narrow resolutions */
@media (max-width: 900px) {
    .portfolio-section {
        margin-top: -30vh !important;
        /* Rises nicely to show the dome top on landing */
        padding-top: 10px !important;
        /* Keeps the text centered inside the visible part of the dome on mobile landing */
        padding-bottom: 30vh !important;
        /* Rises higher on mobile to show the arrow, title, and album cover */
        border-top-left-radius: 100vw 15vh !important;
        /* Flatter premium curve */
        border-top-right-radius: 100vw 15vh !important;
        z-index: 90 !important;
        /* Let closed side panels (z-index: 101) stack on top */
        height: auto !important;
    }

    .portfolio-sticky-wrapper {
        z-index: 90 !important;
        /* Sit behind the side panels to match layered depth */
    }

    .scroll-down-btn {
        margin-top: 0px !important;
        width: 60px !important;
        /* Duplicated to double size on mobile */
        height: 60px !important;
        /* Fixed physical height to avoid strange rendering collapses */
        margin-bottom: 15px !important;
        transform: scale(calc(1 - var(--scroll-progress))) translateY(calc(var(--scroll-progress) * -10px)) !important;
        opacity: calc(1 - (var(--scroll-progress) * 1.5)) !important;
    }

    .portfolio-title {
        position: relative !important;
        top: auto !important;
        /* Immediately below the header on mobile */
        z-index: 100 !important;
        font-size: clamp(1.2rem, 6.5vw, 1.8rem) !important;
        margin-top: 4vh !important;
        margin-bottom: 20px !important;
        padding: 0 10px !important;
        width: 100vw !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: ellipsis !important;
        transition: opacity 0.5s ease;

        /* Fix Blink flex-sticky collapse bug */
        height: auto !important;
        min-height: 1.2em !important;
    }

    .album-container {
        margin-top: calc(10px + (15px * var(--scroll-progress))) !important;
        /* Higher up on mobile to free space below */
        gap: 0.6rem !important;
        /* Premium ultra-compact spacing */
    }

    .player-instagram-wrapper {
        max-width: 180px !important;
        /* Reduced to 180px width and ~135px height to fit perfectly */
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .album-description {
        font-size: 0.8rem !important;
        /* Compact, elegant and minimalist */
        line-height: 1.4 !important;
        text-align: justify !important;
        /* Premium justification */
        text-transform: uppercase !important;
        /* Minimalist uppercase */
        letter-spacing: 0.04em !important;
        max-width: 80vw !important;
        /* Width identical to the album cover (80vw) */
        margin: 0.3rem auto -0.4rem !important;
        /* Perfect balance of reduced margins */
        text-shadow: none !important;
        /* No shadow for a completely flat and minimalist look */
    }
}

/* ------------------------------------------------ */
/* FLOATING CONTACT BUTTON (WHATSAPP)               */
/* ------------------------------------------------ */
.contact-whatsapp-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    z-index: 999999;
    /* On top of everything */
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
    /* Keep the mask perfectly circular */
    /* Fixed white background: the dove (img-contact) is reduced below but
       the background circle must always remain the same size. */
    background-color: #ffffff;

    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    -webkit-tap-highlight-color: transparent !important;
}

.contact-whatsapp-btn>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    clip-path: circle(0% at 50% 50%);
    will-change: clip-path, opacity;
    opacity: 0;
    box-sizing: border-box;
}

/* Default stacking order (bottom → top) inside the circular button */
.contact-whatsapp-btn .img-contact {
    z-index: 1;
}

.contact-whatsapp-btn .text-w-b {
    z-index: 2;
}

.contact-whatsapp-btn .img-micro {
    z-index: 3;
}

.contact-whatsapp-btn .text-b-w {
    z-index: 4;
}

.contact-whatsapp-btn img {
    object-fit: cover;
    display: block;
}

.contact-whatsapp-btn .text-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-main), sans-serif;
    font-weight: 900;
    font-size: 15px;
    line-height: 1.0;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    padding: 0;
}

.contact-whatsapp-btn .text-contact span {
    display: block;
}

.contact-whatsapp-btn .text-w-b {
    background-color: #000000;
    color: #ffffff;
}

.contact-whatsapp-btn .text-b-w {
    background-color: #ffffff;
    color: #000000;
}

/* Active states driven by classes on button */
.contact-whatsapp-btn.show-dove .img-contact {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
    z-index: 10 !important;
}

.contact-whatsapp-btn.show-micro .img-micro {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
}

.contact-whatsapp-btn.show-text-wb .text-w-b {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
}

.contact-whatsapp-btn.show-text-bw .text-b-w {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
    z-index: 10 !important;
}

.contact-whatsapp-btn.top-dove .img-contact {
    z-index: 15 !important;
}

.contact-whatsapp-btn.top-text .text-b-w {
    z-index: 15 !important;
}

/* Color inversion of contact dove for white background */
.contact-whatsapp-btn .img-contact {
    filter: invert(1) !important;
    /* Reduced dove (75%), centered; the white background of the PNG (inverted
       black) blends with the background color of the button, so the white
       circle does not shrink together with the dove. */
    width: 75% !important;
    height: 75% !important;
    top: 12.5% !important;
    left: 12.5% !important;
}

.contact-whatsapp-btn:hover {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.contact-whatsapp-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

@media (max-width: 900px) {
    .contact-whatsapp-btn {
        width: 70px !important;
        height: 70px !important;
        bottom: 20px;
        right: 20px;
    }

    .contact-whatsapp-btn .text-contact {
        font-size: 13px !important;
    }
}

/* ------------------------------------------------ */
/* FLOATING INSTAGRAM BUTTON                        */
/* ------------------------------------------------ */
.instagram-float-btn {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    z-index: 999999;
    /* Por encima de todo */
    cursor: pointer;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0.3s ease;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;

    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    -webkit-tap-highlight-color: transparent !important;
}

.instagram-float-btn svg {
    width: 36px;
    height: 36px;
    transition: transform 0.3s ease;
    display: block;
}

.instagram-float-btn:hover {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    color: #000000;
}

.instagram-float-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

@media (max-width: 900px) {
    .instagram-float-btn {
        width: 70px !important;
        height: 70px !important;
        bottom: 20px;
        left: 20px;
    }

    .instagram-float-btn svg {
        width: 30px !important;
        height: 30px !important;
    }
}




/* ------------------------------------------------ */
/* INSTAGRAM BUTTON (CONTACT SECTION)               */
/* ------------------------------------------------ */
.instagram-btn-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 15;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.instagram-btn-container.hide-down {
    transform: translateY(280px) scale(0.7) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.instagram-btn {
    display: block;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent !important;
}

.instagram-circle {
    width: 90px;
    height: 90px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.instagram-icon {
    width: 40px;
    height: 40px;
    stroke: #050505;
    transition: stroke 0.3s ease;
}

.instagram-circle:hover {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

@media (max-width: 899px) {
    .instagram-circle {
        width: 60px;
        height: 60px;
    }

    .instagram-icon {
        width: 28px;
        height: 28px;
    }
}

/* ------------------------------------------------ */
/* PREMIUM HORIZONTAL ALBUMS SLIDER                 */
/* ------------------------------------------------ */
.albums-slider-container {
    width: 100vw;
    max-width: 100%;
    /* overflow-x: auto forces overflow-y to also be "auto" (it cannot remain
       "visible" if the other axis is not), so the golden glow of
       .album-card.active (box-shadow with blur) was clipped in a hard line
       right at the edge of this box. Vertical padding is added to give room
       to the blur before reaching the edge, and it is compensated with negative
       margin so that the card and everything that follows on the page doesn't
       move a single pixel from where it was. */
    padding-top: 90px;
    padding-bottom: 50px;
    margin-top: calc(4vh - 70px);
    /* Raised to leave room */
    margin-bottom: -90px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    cursor: grab;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 100;
}

.albums-slider-container.active {
    cursor: grabbing;
}

.albums-slider-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.albums-slider-track {
    display: flex;
    gap: 40px;
    padding: 40px;
    /* Reduced so the carousel occupies the full width and starts aligned to the left */
    align-items: center;
}

.album-card {
    flex: 0 0 280px;
    width: 280px;
    height: 280px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    border: none;
    background-color: #111111;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.5s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}

.album-card:hover {
    transform: scale(1.03);
}

.album-card.active {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(254, 202, 87, 0.35), 0 0 30px rgba(255, 255, 255, 0.1);
}

.album-card img.album-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}


@media (max-width: 900px) {
    .albums-slider-container {
        margin-top: 3vh;
    }

    .album-card {
        flex: 0 0 220px;
        width: 220px;
        height: 220px;
    }

    .album-card.active {
        transform: scale(1.05);
    }
}

/* ------------------------------------------------ */
/* PORTFOLIO INTRO DESIGN                           */
/* ------------------------------------------------ */
.portfolio-intro {
    font-family: var(--font-main), sans-serif;
    color: #ffffff;
    text-align: center;
    width: calc(35vw + (55vw * var(--scroll-progress)));
    max-width: calc(35vw + (600px * var(--scroll-progress)));
    margin: 0 auto 6vh auto;
    position: relative;
    z-index: 10;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    transition: visibility 0s, opacity 0.3s ease;
}

.portfolio-intro p {
    font-size: clamp(1.2rem, 2.2vw, 1.65rem);
    /* Substantially increased for premium readability */
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.04em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    margin-bottom: 2.2rem;
    /* Separation of paragraphs/line breaks */
    text-transform: none;
    color: #ffffff;
}

.portfolio-intro p:last-child {
    margin-bottom: 0;
}

.portfolio-intro-collapsed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease-out;
}

.portfolio-intro.expanded .portfolio-intro-collapsed {
    max-height: 1000px;
    opacity: 1;
}

.portfolio-intro.expanded #intro-ellipsis {
    display: none;
}

.intro-toggle-link {
    color: var(--color-yellow);
    cursor: pointer;
    font-weight: 500;
    transition: text-shadow 0.3s ease, color 0.3s ease;
    display: inline;
}

.intro-toggle-link:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(254, 202, 87, 0.6);
}

@media (max-width: 900px) {
    .portfolio-intro {
        margin: 0 auto 4vh auto;
        width: calc(45vw + (45vw * var(--scroll-progress)));
        max-width: 90vw;
    }

    .portfolio-intro p {
        font-size: 1.15rem !important;
        /* Larger on responsive mobile */
        line-height: 1.6;
        margin-bottom: 1.6rem;
    }
}

/* ------------------------------------------------ */
/* ACKNOWLEDGEMENTS SECTION                         */
/* ------------------------------------------------ */
.portfolio-thanks-section {
    width: 200vw;
    margin: 12vh auto 4vh auto;
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    z-index: 60;
}

.thanks-title {
    font-family: var(--font-main);
    font-weight: 300;
    font-size: clamp(1.3rem, 2.5vw, 1.85rem);
    letter-spacing: 0.15em;
    color: var(--color-yellow);
    text-transform: uppercase;
    margin-bottom: 4rem;
    text-align: center;
    width: 90vw;
    max-width: 1000px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.thanks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
    width: 90vw;
    max-width: 1000px;
    margin: 0 auto;
}

.thanks-item {
    font-family: var(--font-main), sans-serif;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {
    .thanks-item:hover {
        color: var(--color-yellow);
        transform: translateY(-3px);
    }
}

@media (max-width: 900px) {
    .portfolio-thanks-section {
        margin: 8vh auto 2vh auto;
        padding-bottom: 3rem;
    }

    .thanks-title {
        margin-bottom: 2.5rem;
        font-size: 1.15rem;
    }

    .thanks-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }

    .thanks-item {
        font-size: 0.95rem;
    }
}