
.AppProAd {
    padding: 0 0 2rem;
    position: fixed;
    right: 50%;
    bottom: 0;
    animation-play-state: running;
    z-index: 100000000;
    transform-origin: center bottom;

    opacity: 0;
    transform: translate(50%, 100%) scale(.75);

    /* animation-play-state: paused; */
    /* animation-delay: 5s; */
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.AppProAd.open {
    animation-name: AppProAd--animation--open;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-duration: .5s;
}

.AppProAd.close {
    animation-name: AppProAd--animation--close;
    animation-duration: .3s;
}

@keyframes AppProAd--animation--open {
    0% {
        opacity: 0;
        transform: translate(50%, 100%) scale(.75);
    }

    100% {
        opacity: 1;
        transform: translate(50%, 0%) scale(1);
    }
}

@keyframes AppProAd--animation--close {
    0% {
        opacity: 1;
        transform: translate(50%, 0%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(50%, 100%) scale(.75);
    }
}

.AppProAd--inner {
    padding: 2rem;
    box-shadow: rgb(0 0 0 / 50%) 0.5rem 0.5rem 3rem;
    background-color: rgb(155, 81, 224);
    background-image: linear-gradient(135deg, rgb(73, 39, 168) 0%, transparent 100%), repeating-linear-gradient(-40deg, transparent, transparent 20px, rgba(73, 39, 168, 0.1) 20px, rgba(73, 39, 168, 0.1) 40px);
    color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 100px;
    border-radius: 5px;

    transition: all .3s;
}

.AppProAd--inner:hover,
.AppProAd--inner:focus-within {
    /* padding: 3rem; */
    transform: scale(1.02);
}

.AppProAd--h2 {
    font-size: 1.5rem;
    line-height: 1em;
    color: #fff;
    margin: 0;
}

.AppProAd--coming-soon {
    font-size: 1rem;
    line-height: 1.5em;
}

.AppProAd--close {
    background: transparent;
    border: 0;
    position: absolute;
    right: .5rem;
    top: .5rem;
    padding: 0;
    margin: 0;
    color: inherit;
    opacity: .5;
    cursor: pointer;
    transition: all .3s;
}

.AppProAd--close:hover,
.AppProAd--close:focus-visible {
    opacity: 1;
}
