/* ---------- Landing pages general styles ----------- */

.error-list {
    color: var(--toast-yellow);
}

.landing-page {
    background-color: var(--background-color-light);
    color: var(--text-color);
    min-height: 100dvh;
}

#lp-banner h1 {
    font-family: 'Contrail One', sans-serif;
    letter-spacing: -.1rem;
    line-height: .95;
    margin-bottom: 0;
}

/* Profiles */

#lp-profiles #profiles-for-guest {
    background: transparent !important;
    padding-bottom: 1.5rem;
}

/* On mobile, show profiles on two columns  */
@media screen and (max-width: 576px) {
    #lp-profiles .profile-cards {
        --profile-card-height: 16rem;
    }

    #lp-profiles .profile-cards .col {
        min-width: 50%;
    }
}

/* CTA button */

#lp-register  {
    bottom: 0;
    pointer-events: none;
    position: fixed;
    width:100%;
    z-index: 100;
}

#lp-register button {
    box-shadow: 0 .5rem 2rem black;
    margin: 0 auto;
    /* TODO: Refactor #signup-cta-modal-button to avoid duplication*/
    display: grid;
    gap: .5rem;
    align-items: center;
    grid-template-areas: "icon text";
    border-radius: 1rem 1rem 0 0;
    text-wrap: balance;
    font-size: 120%;
    pointer-events: auto;

    img {
        grid-area: icon;
    }

    span {
        grid-area: text;
    }
}

/* Register modal */

#register-modal {
    /* Style improvements to inputs */
    input:where(#email, #password) {
        height: 3rem;
    }
    h2 + div {
        margin-bottom: .5rem !important;
    }

    #why ul {
        text-align: left;
        width: fit-content;
        margin: 0 auto 1rem;
        padding: 0;
        list-style: none;
    }
}

/* ---------------------- LP 1 ------------------------ */

#lp-1 {

    /* Landing banner */

    #lp-banner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
        text-align: center;
        padding: .5rem;
        /* Display in the 16:9 ratio */
        width: 100%;
        height: 56vw;
    }

    #lp-banner > * {
        filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5))
    }

    #lp-banner img {
        width: 5rem;
    }

    #lp-banner h1 {
        font-size: 3.2rem;
        font-family: 'Contrail One', sans-serif;
        letter-spacing: -.1rem;
        line-height: .95;
        margin-bottom: 0;

        span {
            font-size: 4.5rem;
        }

        /* Force a linebreak */

        span::before {
            content: "\A";
            white-space: pre;
        }
    }

    @media screen and (min-width: 576px) {
        #lp-banner {
            height: 250px;
        }
    }

    @media screen and (min-width: 768px) {
        /* Text safe-area for tablet and desktop */
        #lp-banner h1 {
            max-width: 700px;
        }
    }

    @media screen and (min-width: 992px) {
        #lp-banner {
            height: 200px;
        }
    }
}

/* ------------------- LP A_1 A_2 --------------------- */

#lp-a-1, #lp-a-2, #lp-a-3 {
    display: flex;
    flex-direction: column;

    #lp-banner {
        text-align: center;
        padding: 1rem 1rem 8rem;
        margin-bottom: -8rem;
        background-size: 450px;
        background-position: center top;

        img {
            margin-bottom: .75rem;
            height: 2rem;
            width: auto;
        }

        h1 {
            font-size: 2.25rem;
            line-height: 1.2;
            text-wrap: balance;
        }
    }

    #lp-profiles {
        background: linear-gradient(0deg, rgb(0, 0, 0) 94%, rgba(0, 0, 0, 0) 100%);
        flex-grow: 1;
    }

    #lp-register {
        font-family: 'Contrail One', sans-serif;
    }
}

/* ------------------- LP B_1 B_2 --------------------- */

#lp-b-1, #lp-b-2, #lp-b-4 {
    background-size: 450px;
    background-position: center;
    display: flex;
    flex-direction: column;

    .carousel-item .photo-card,
    & ~ .modal .profile-modal-header-background-photo,
    & ~ .modal .photo-gallery img {
        filter: blur(.5rem)
    }

    #lp-banner {
        text-align: center;
        padding: 1rem 1rem 0;
    }

    #lp-profiles {
        flex-grow: 1;
    }

    #lp-register {
        font-family: 'Contrail One', sans-serif;
    }

    /* Registration modal styles */
    & ~ .modal {

        h1 {
            font-size: 2.25rem;
            line-height: 1.2;
            text-wrap: balance;
        }

        #registration-user-preferences {
            .error-list {
                display: none;
            }

            &.errors .error-list {
                display: block;
            }

            .btn-check {
                & + label {
                    background-color: var(--background-color) !important;

                    img {
                        filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, .4));
                    }
                }

                &:checked + label {
                    background-color: var(--primary-color) !important;
                }
            }
        }
    }
}


/* ------------------- LP C_1 C_2 --------------------- */

#lp-c-1, #lp-c-2 {
    background-size: 450px;
    background-position: center;
    display: flex;
    flex-direction: column;

    .carousel-item .photo-card,
    & ~ .modal .profile-modal-header-background-photo,
    & ~ .modal .photo-gallery img {
        filter: blur(.5rem);
    }

    #lp-banner {
        text-align: center;
        padding: 1rem;
    }

    #lp-profiles {
        flex-grow: 1;
    }

    #lp-register {
        font-family: 'Contrail One', sans-serif;
    }
}

/* Remove blur when filters are applied */
#lp-c-1.filters-applied,
#lp-c-2.filters-applied {
    .carousel-item .photo-card,
    & ~ .modal .profile-modal-header-background-photo,
    & ~ .modal .photo-gallery img {
        filter: none !important;
    }
}


#lp-c-1 ~ .modal .modal-dialog,
#lp-c-2 ~ .modal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* ==================== LANDING PREFERENCES MODAL ==================== */

.landing-preferences-modal {
    background-color: white;
    background-image: var(--paper-bg);
    background-repeat: repeat;
    background-size: auto;
    padding: 3rem 2rem;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 8rem rgba(0, 0, 0, 0.5);
}

.landing-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 600px;
}

.landing-logo-container {
    padding: 1rem 2rem;
    margin-bottom: 3rem;
}

.landing-question-title {
    font-family: 'Contrail One', 'Comic Sans MS', cursive, sans-serif;
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
    line-height: 1.2;
    text-wrap: balance;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 3.5rem;
    animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Selection wrapper */
.landing-selection-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 300px;
    margin: 0 auto;
    overflow: visible;
}

.landing-selection-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top center;
}

/* Option button - main styles */
.landing-option-btn {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    zoom: 0.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.landing-option-btn:hover:not(.not-selected) {
    transform: translateY(-8px) rotate(-3deg);
}

.landing-option-btn:active,
.landing-option-btn.active {
    transform: translateY(3px) rotate(1deg);
}

.landing-option-btn svg {
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease;
}

/* OR divider */
.landing-or-divider {
    font-family: 'Contrail One', 'Comic Sans MS', cursive, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #000;
    padding: 0 0.5rem;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

/* ==================== CHECKBOX INDICATOR ==================== */

.landing-check-icon {
    width: 32px;
    height: 32px;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.landing-option-btn.selected .landing-check-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    animation: checkBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkBounce {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ==================== SELECTION STATES ==================== */

/* Selected button */
.landing-option-btn.selected {
    animation: selectedPulse 0.5s ease;
}

.landing-option-btn.selected svg {
    filter: drop-shadow(0 0 15px rgba(255, 100, 100, 0.4));
    animation: selectedGlow 1.5s ease-in-out infinite;
}

@keyframes selectedPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes selectedGlow {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(255, 100, 100, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(255, 100, 100, 0.6));
    }
}

/* Not selected button */
.not-selected {
    opacity: 0.1;
    filter: grayscale(80%);
    transition: all 0.5s ease;
}

.landing-option-btn.not-selected {
    pointer-events: none;
}

/* ==================== TWO-QUESTION ANIMATION ==================== */

/* Shrink first container */
.landing-selection-container.shrink {
    transform: scale(0.35) translateY(-20px);
    opacity: 0.8;
    filter: grayscale(50%);
    pointer-events: none;
    animation: pulseShrink 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes pulseShrink {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    40% {
        transform: scale(0.9) translateY(-5px);
        opacity: 0.95;
    }
    100% {
        transform: scale(0.35) translateY(-20px);
        opacity: 0.8;
    }
}

/* Second container - hidden initially */
.landing-selection-container.second-selection {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
    pointer-events: none;
}

/* Show second container */
.landing-selection-container.second-selection.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    margin-top: 80px;
    pointer-events: all;
    animation: slideUpBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes slideUpBounce {
    0% {
        opacity: 0;
        transform: translateY(120px) scale(0.7);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-15px) scale(1.08);
    }
    70% {
        transform: translateY(5px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Enhanced hover for second container */
.landing-selection-container.second-selection.show .landing-option-btn:hover {
    transform: translateY(-12px) rotate(-5deg) scale(1.08);
}

.landing-selection-container.second-selection.show .landing-option-btn:active,
.landing-selection-container.second-selection.show .landing-option-btn.active {
    transform: translateY(5px) rotate(2deg) scale(0.95);
}

/* ==================== ANIMATIONS ==================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== RESPONSIVE ==================== */

@media screen and (max-width: 576px) {
    .landing-preferences-modal {
        padding: 2rem 1.5rem;
    }

    .landing-logo-container {
        padding: 0.75rem 1.5rem;
        margin-bottom: 2rem;
    }

    .landing-question-title {
        font-size: 2rem;
    }

    .landing-selection-wrapper {
        height: 260px;
    }

    .landing-selection-container {
        gap: 0.75rem;
    }

    .landing-selection-container.shrink {
        transform: scale(0.4) translateY(-15px);
    }

    .landing-or-divider {
        font-size: 1.75rem;
        padding: 0 0.25rem;
    }

    .landing-check-icon {
        width: 28px;
        height: 28px;
    }
}

/* ==================== PERFORMANCE ==================== */

.landing-option-btn,
.landing-selection-container {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

#register-modal.b_2_1-register {
    background-image: var(--paper-bg);
}

/* ==================== LANDING TWO SIDES (B_2_4) ==================== */

#two-sides-container {
    min-height: 70vh;
}

#left-side-register > div,
#right-side-profiles section {
    background: transparent !important;
}

#lp-profiles #profiles-for-guest {
    background: transparent !important;
    padding-bottom: 1.5rem;
}

#register-content.landing-two-sides-content {
    color: var(--text-color);
}

#register-content.landing-two-sides-content h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    text-wrap: balance;
}

#register-content.landing-two-sides-content .badge.text-bg-dark {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 992px) {
    #two-sides-container {
        flex-direction: column;
    }

    #left-side-register {
        margin-bottom: 2rem;
    }

    #register-content.landing-two-sides-content {
        padding: 1.5rem;
    }

    #register-content.landing-two-sides-content h1 {
        font-size: 1.75rem;
    }
}

@media (min-width: 992px) {
    #left-side-register {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #register-content.landing-two-sides-content {
        max-width: 500px;
        width: 100%;
    }
}

#lp-b-2-3 {
    background-size: 450px;
    background-position: center;
    display: flex;
    flex-direction: column;

    .carousel-item .photo-card,
    & ~ .modal .profile-modal-header-background-photo,
    & ~ .modal .photo-gallery img {
        filter: blur(.5rem)
    }

    #lp-banner {
        text-align: center;
        padding: 1rem 1rem 0;
    }

    #lp-profiles {
        flex-grow: 1;
    }

    #lp-register {
        font-family: 'Contrail One', sans-serif;
    }

    /* Registration modal styles */
    & ~ .modal {

        h1 {
            font-size: 2.25rem;
            line-height: 1.2;
            text-wrap: balance;
        }

        #registration-user-preferences {
            .error-list {
                display: none;
            }

            &.errors .error-list {
                display: block;
            }

            .btn-check {
                & + label {
                    background-color: var(--background-color) !important;

                    img {
                        filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, .4));
                    }
                }

                &:checked + label {
                    background-color: var(--primary-color) !important;
                }
            }
        }
    }
}

/* ------------------- LP D_1, D_2, D_3, D_1_1, D_2_1  --------------------- */

#lp-d-1, #lp-d-2, #lp-d-3, #lp-d-1-1, #lp-d-2-1 {
    background-size: 450px;
    background-position: center;
    display: flex;
    flex-direction: column;

    .carousel-item .photo-card,
    & ~ .modal .profile-modal-header-background-photo,
    & ~ .modal .photo-gallery img {
        filter: blur(.5rem)
    }

    #lp-banner {
        text-align: center;
        padding: 1rem 1rem 0;
    }

    #lp-profiles {
        flex-grow: 1;
    }

    #lp-register {
        font-family: 'Contrail One', sans-serif;
    }

    /* Registration modal styles */
    & ~ .modal {

        h1 {
            font-size: 2.25rem;
            line-height: 1.2;
            text-wrap: balance;
        }

        #registration-user-preferences {
            .error-list {
                display: none;
            }

            &.errors .error-list {
                display: block;
            }

            .btn-check {
                & + label {
                    background-color: var(--background-color) !important;

                    img {
                        filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, .4));
                    }
                }

                &:checked + label {
                    background-color: var(--primary-color) !important;
                }
            }
        }
    }
}

/* ------------------- Two Clicks Modal (D_1, D_2) --------------------- */

.two-clicks-modal {
    position: relative;
    overflow: hidden;
}

.two-clicks-modal .two-clicks-stage-1,
.two-clicks-modal .two-clicks-stage-2 {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Stage 1: visible by default */
.two-clicks-modal .two-clicks-stage-1 {
    opacity: 1;
    transform: translateY(0);
}

/* Stage 2: hidden by default */
.two-clicks-modal .two-clicks-stage-2 {
    opacity: 0;
    transform: translateY(20px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* When stage 2 is active: hide stage 1 */
.two-clicks-modal.stage-2-active .two-clicks-stage-1 {
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

/* When stage 2 is active: show stage 2 */
.two-clicks-modal.stage-2-active .two-clicks-stage-2 {
    opacity: 1;
    transform: translateY(0);
    max-height: none;
    pointer-events: auto;
}