/* PopUp  */

.custom-popup {
    position:fixed;z-index:999;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;text-align:center;
    & > * {
        opacity:0;transition:opacity 1.5s ease-in-out;
    }
    & video {
        max-width:100%;margin-bottom:1rem;border-radius:var(--popup-border-radius);
    }
    & a.play {
        position:relative;display:flex;width:100%;flex:0;align-items:center;justify-content:center;max-height:calc(100% - 5rem);
        & video {
            max-width:100%;max-height:100%;border-radius:var(--popup-border-radius);
        }
        & i {
            position:absolute;font-size:6rem;color:white;top:calc(50% - 48px);left:calc(50% - 48px);
            animation:animPlayWait 6s ease-in-out infinite forwards;
        }
        &:hover i {
            font-size:6rem;top:calc(50% - 48px);left:calc(50% - 48px);animation:animPlay 2s ease-in-out infinite forwards
        }
    }

    & p {
        color:var(--popup-text-color);
        &.mentions-popup {
            font-style:italic;font-size:.8rem;margin-top:.5rem;
        }
    }
    & ul {
        ::marker {
            color:var(--popup-title-color);
        }
    }
    &.active {
        &:not(.ontop) {
            top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;background:none;border-radius:0;
            & .popup-container {
                animation:showPopup .5s ease-in-out forwards;top:0;left:0;transform:scale(0);animation-delay:1s;
                display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:auto;border-radius:var(--popup-border-radius);background-color:var(--popup-background-color);box-shadow:#00000099 0px 0px 10px;max-width:50%;max-height:70%;padding:2rem;position:relative;box-sizing:content-box;
            }
            &::after {
                content:'';position:fixed;background:var(--popup-background-color);width:100%;height:100%;top:0;left:0;z-index:-1;display:none;
            }
            &[data-video-only="true"] {
                & .popup-container {
                    max-width:80%;max-height:80%;
                    & .content, & .popup-cta {
                        display:none;
                    }
                }
            }
        }
        &:not(.close)::before {
            content:'';position:fixed;background:var(--popup-cta-background-color-hover);opacity:0;width:100vw;height:100vh;top:0;left:0;z-index:-1;animation:opacityPopup 1.5s ease-in-out forwards;
        }
        &.ontop {
            transition:none;
            & .popup-container {
                animation:none;top:0;left:0;transform:none;animation-delay:0;box-shadow:none;background:none;flex-direction:row;gap:2rem;max-width:none;max-height:none;padding:0;display:flex;align-items:center;justify-content:space-between;width:100%;
                & a.popup-cta {
                    background:var(--popup-cta-text-color);color:white;
                    &:hover, &:focus {
                        background:white;color:var(--popup-cta-background-color);
                    }
                }
            }
            & .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.4rem;color:var(--popup-title-color);margin-bottom:1rem;margin-top:1rem;
        & em {
            font-size:inherit;font-style:normal;
            &.ontop {
                display:none;
            }
        }
        & span {
            font-size:70%;
        }
        & > *: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-cta-background-color);flex-direction:row;width:100%;border-radius:0;left:0;animation:none;gap:2rem;transition:none;padding-inline:6vw;align-items:center;justify-content:space-between;
        & h2 {
            text-align:left;max-width:fit-content;font-size:1.1rem;margin:0;color:white;
            & span {
                font-size:90%;
            }
            & em {
                &:not(.ontop) {
                    display:none;
                }
                &.ontop {
                    display:block;
                }
            }
        }
        & .countdown {
            margin:0;
        }
        & > * {
            transition-delay:.25s;color:white;
        }
        & video, & [data-video] {
            display:none;
        }
        &::before, & img {
            display:none;
        }
        & .content {
            display:none;
        }
        & p {
            line-height:1;text-align:left;margin-inline:0;margin-bottom:0;color:white;
            &: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;background:white;
            }
            &.popup-cta {
                margin-top:0;font-size:.8rem;background:white;color:var(--popup-cta-background-color);
                &:hover {
                    background:var(--popup-cta-background-color-hover);color:white;
                }
            }
        }
        &: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:1rem;font-weight:bold;margin-top:1rem;transition:all .25s ease-in-out;text-decoration:none;
            &:hover {
                background:var(--popup-cta-background-color-hover);color:var(--popup-background-color);
            }
        }
        &.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;cursor:pointer;
            &: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% {transform:scale(0);top:0;left:0;}
    50% {transform:scale(1.1);}
    100% {transform:scale(1);}
}
@keyframes opacityPopup {
    0% {opacity:0;}
    100% {opacity:.95;}
}
@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);}
}


@keyframes animPlayWait {
    0% {
        font-size: 6rem;
        top: calc(50% - 48px);
        left: calc(50% - 48px)
    }

    10% {
        font-size: 10rem;
        top: calc(50% - 80px);
        left: calc(50% - 80px)
    }

    15% {
        font-size: 4rem;
        top: calc(50% - 32px);
        left: calc(50% - 32px)
    }

    20% {
        font-size: 10rem;
        top: calc(50% - 80px);
        left: calc(50% - 80px)
    }

    25% {
        font-size: 6rem;
        top: calc(50% - 48px);
        left: calc(50% - 48px)
    }
}

@keyframes animPlay {
    0% {
        font-size: 6rem;
        top: calc(50% - 48px);
        left: calc(50% - 48px)
    }

    25% {
        font-size: 10rem;
        top: calc(50% - 80px);
        left: calc(50% - 80px)
    }

    50% {
        font-size: 4rem;
        top: calc(50% - 32px);
        left: calc(50% - 32px)
    }

    75% {
        font-size: 10rem;
        top: calc(50% - 80px);
        left: calc(50% - 80px)
    }

    100% {
        font-size: 6rem;
        top: calc(50% - 48px);
        left: calc(50% - 48px)
    }
}

@media screen and (max-width:1600px) and (min-height:500px) and (orientation:landscape) {
    @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 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 {
        justify-content:flex-start;overflow:auto;
        &.active {
            padding:1rem;
            &.ontop {
                & .popup-container {
                    flex-direction:column;gap:.5rem;max-width:none;max-height:none;padding:.5rem 2rem 0;
                    & a {
                        &.popup-cta {
                            white-space:normal;
                        }
                    }
                }
            }
        }
        &.ontop {
            flex-direction:column;height:fit-content;gap:1rem;padding:2rem 0;
            &.close {
                padding:0;
            }
            & h2 {text-align:center;}
            & a {
                &.popup-cta {
                    white-space:normal;
                }
            }
        }
        & h2 {
            font-size:1rem;margin-top:2rem;
            & span {
                font-size:90%;
            }
        }
    }
    @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 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);}
    }
}