/* PopUp  */

.custom-popup {
    position:fixed;z-index:999999999999;background-color:var(--popup-background-color);left:calc(50% - 1rem);display:flex;align-items:center;justify-content:center;flex-direction:column;top:-100vh;border:0;overflow:hidden;border-radius:50%;width:0;height:0;padding:0;transition:background-color 1.5s ease-in-out;text-align:center;
    & > * {
        opacity:0;transition:opacity 1.5s ease-in-out;
    }
    & p {
        color:var(--popup-text-color);
        &.mentions-popup {
            font-style:italic;font-size:.8rem;margin-top:.5rem;
        }
    }
    &.active {
        &:not(.ontop) {
            animation:showPopup 1.5s ease-in-out forwards;left:calc(50% - 20vw);background-color:var(--popup-background-color);border-radius:var(--popup-border-radius);            box-shadow:#00000099 0px 0px 10px;
            &::after {
                content:'';position:absolute;background:var(--popup-background-color);width:100%;height:100%;top:0;left:0;z-index:-1;
            }
        }
        &:not(.close)::before {
            content:'';position:fixed;background:var(--popup-background-color);opacity:.95;width:100vw;height:100vh;top:0;left:0;z-index:-1;animation:opacityPopup 1.5s ease-in-out forwards;
        }
        &.ontop {
            & .close {
                animation:none;left:0;height:0;overflow:hidden;padding:0;
            }
            & .content-top {
                display:block;
            }
        }
        & > * {
            opacity:1;
        }
        & .content {
            display:block;margin-bottom:1rem;width:100%;
            & p, & ul {
                margin-bottom:.5rem;font-size:1rem;
            }
        }
        & .content-top {
            display:none;
        }
        &.close {
            animation:hidePopup 1.5s ease-in-out forwards;left:calc(50% - 1rem);
        }
    }
    & h2 {
        text-align:center;font-size:1.8rem;color:var(--popup-title-color);
        & em {
            font-size:inherit;font-style:normal;
            &.ontop {
                display:none;
            }
        }
        & > *:first-child {font-family:'DINPro', sans-serif;text-transform:none;margin-bottom:0;letter-spacing:0;}
    }
    &.ontop {
        position:relative;display:flex;top:0;height:10vh;background:var(--popup-background-color);flex-direction:row;width:100vw;border-radius:0;left:0;animation:none;gap:2rem;transition:height .5s ease-in-out;padding-inline:6vw;
        & h2 {
            text-align:left;max-width:fit-content;font-size:1.4rem;
            & em {
                &:not(.ontop) {
                    display:none;
                }
                &.ontop {
                    display:block;
                }
            }
        }
        & .countdown {
            margin:0;
        }
        & > * {
            transition-delay:.25s;
        }
        &::before, & img {
            display:none;
        }
        & .content {
            display:none;
        }
        & p {
            line-height:1;text-align:left;margin-inline:0;margin-bottom:0;
            &:not(.content-top), &.mentions-popup {
                display:none;
            }
        }
        & a {
            &.popup-close {
                font-size:1.3rem;width:1.5rem;height:1.5rem;right:1.5rem;top:.5rem;
            }
            &.popup-cta {
                margin-top:0;font-size:1rem;
            }
        }
        &:not(.active) {
            height:0;overflow:hidden;
        }
    }
    & span {
        display:block;font-size:50%;color:var(--popup-text-color);
    }
    & a {
        &.popup-cta {
            margin-bottom:0;background:var(--popup-cta-background-color);color:var(--popup-cta-text-color);border-radius:var(--popup-border-radius);padding:.5rem 2rem;line-height:1.2;text-transform:uppercase;font-size:1.2rem;font-weight:bold;margin-top:1rem;transition:all .25s ease-in-out;
            &:hover {
                background:var(--popup-cta-background-color-hover);
            }
        }
        &.popup-close {
            position:absolute;top:1rem;right:1rem;color:var(--popup-cta-text-color);font-size:1.6rem;transition:all .5s ease-in-out;transform-origin:50% 50%;line-height:1;background:var(--popup-cta-background-color);color:var(--popup-cta-text-color);border-radius:50%;aspect-ratio:1/1;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;padding-bottom:.25rem;
            &:hover {
                transform:rotate(360deg) scale(1.2);
            }
        }
    }
    & .countdown {
        display:flex;align-items:center;justify-content:flex-start;gap:.5rem;margin-bottom:1rem;
        & > div {
            display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;aspect-ratio:1/1;width:4rem;border-radius:50%;background:var(--popup-cta-background-color);color:var(--popup-text-color);font-size:1.6rem;line-height:1;font-weight:bold;
            &:empty {
                display:none;
            }
            span {
                color:var(--popup-text-color);font-size:40%;font-weight:normal;
            }
        }
    }
    & img {object-fit:cover;margin-bottom:1rem;max-height:45%;width:100%;max-width:100%;border-radius:var(--popup-border-radius);}
}

/* PopUp Animation */
@keyframes showPopup {
    0% {top:-100vh;left:calc(50% - 1rem);}
    50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
    60% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
    70% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
    100% {top:calc(50% - 45vh);width:40vw;height:90vh;left:calc(50% - 20vw);padding:1rem 3rem;border-radius:var(--popup-border-radius);border-width:1rem;}
}
@keyframes opacityPopup {
    0% {opacity:0;}
    100% {opacity:.75;}
}
@keyframes hidePopup {
    0% {top:calc(50% - 45vh);width:40vw;height:90vh;left:calc(50% - 20vw);padding:1rem 3rem;border-radius:var(--popup-border-radius);border-width:1rem;}
    30% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
    40% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
    50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
    100% {top:-100vh;left:calc(50% - 1rem);}
}

@media screen and (max-width:1600px) and (min-height:500px) and (orientation:landscape) {
    @keyframes showPopup {
        0% {top:-100vh;left:calc(50% - 1rem);}
        50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
        60% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
        70% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
        100% {top:calc(50% - 40vh);width:40vw;height:80vh;left:calc(50% - 20vw);padding:2rem 3rem;border-radius:var(--popup-border-radius);border-width:1rem;}
    }
    @keyframes hidePopup {
        0% {top:calc(50% - 40vh);width:40vw;height:80vh;left:calc(50% - 20vw);padding:2rem 3rem;border-radius:var(--popup-border-radius);border-width:1rem;}
        30% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
        40% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
        50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
        100% {top:-100vh;left:calc(50% - 1rem);}
    }
}
@media screen and (orientation:portrait) {
    @keyframes showPopup {
        0% {top:-100vh;left:calc(50% - 1rem);}
        50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
        60% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
        70% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
        100% {top:calc(50% - 40vh);width:60vw;height:80vh;left:calc(50% - 30vw);padding:2rem 3rem;border-radius:var(--popup-border-radius);border-width:1rem;}
    }
    @keyframes hidePopup {
        0% {top:calc(50% - 40vh);width:60vw;height:80vh;left:calc(50% - 30vw);padding:2rem 3rem;border-radius:var(--popup-border-radius);border-width:1rem;}
        30% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
        40% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
        50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
        100% {top:-100vh;left:calc(50% - 1rem);}
    }
}
@media screen and (max-width:640px) {
    .custom-popup {
        &.active {padding:1rem;}
        &.ontop {
            flex-direction:column;height:fit-content;gap:1rem;padding:2rem 0;
            & h2 {text-align:center;}
        }
        & h2 {font-size:1.6rem;}
    }
    @keyframes showPopup {
        0% {top:-100vh;left:calc(50% - 1rem);}
        50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
        60% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
        70% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
        100% {top:calc(50% - 40vh);width:90vw;height:80vh;left:calc(50% - 45vw);padding:1rem;border-radius:var(--popup-border-radius);border-width:1rem;}
    }
    @keyframes hidePopup {
        0% {top:calc(50% - 40vh);width:90vw;height:80vh;left:calc(50% - 45vw);padding:1rem;border-radius:var(--popup-border-radius);border-width:1rem;}
        30% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
        40% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
        50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
        100% {top:-100vh;left:calc(50% - 1rem);}
    }
}
@media screen and (max-height:500px) and (orientation:landscape) {
    .custom-popup {
        &.active {justify-content:flex-start;overflow-y:auto;}
        & a.button {min-height:2rem;}
    }
    @keyframes showPopup {
        0% {top:-100vh;left:calc(50% - 1rem);}
        50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
        60% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
        70% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
        100% {top:calc(50% - 40vh);width:80vw;height:80vh;left:calc(50% - 40vw);padding:1rem;border-radius:0;border-width:1rem;}
    }
    @keyframes hidePopup {
        0% {top:calc(50% - 40vh);width:80vw;height:80vh;left:calc(50% - 40vw);padding:1rem;border-radius:0;border-width:1rem;}
        30% {top:calc(50% - 1rem);width:0;height:0;left:calc(50% - 1rem);padding:0;border-radius:50%;border-width:2rem;}
        40% {top:calc(50% - 5rem);width:0;height:0;left:calc(50% - 1rem);padding:0;}
        50% {top:calc(50% - 1rem);left:calc(50% - 1rem);}
        100% {top:-100vh;left:calc(50% - 1rem);}
    }
}