@keyframes banner-intro-bg {
    from { background-color: #7ECABD; }
    to   { background-color: #F6F0E2; }
}

@keyframes banner-logo1-exit {
    from { transform: translateY(40%) scale(1); opacity: 1; }
    to   { transform: translateY(-90%) scale(0.4); opacity: 0; }
}

@keyframes banner-logo2-enter {
    from { transform: translateY(5%); opacity: 0; }
    to   { transform: translateY(-48%); opacity: 1; }
}

@keyframes banner-actions-enter {
    from { bottom: 0px; opacity: 0; }
    to   { bottom: 48px; opacity: 1; }
}
@keyframes banner-cloud-enter {
    from { bottom: -8.47%; }
    to   { bottom: 0%; }
}

[data-component-id="avchildcare:home_banner"] {

    display: flex;
    flex-direction: column;
    align-items: center;
    height: 778px;
    background: var(--background-alternate);
    position: relative;
    overflow: clip;
    animation: banner-intro-bg 1.1s ease-in-out 0.5s both;

    & .home-banner__media {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    & .home-banner__logo--1 {
        animation: banner-logo1-exit 0.6s ease-in 0.5s both;
    }

    & .home-banner__logo--2 {
        animation: banner-logo2-enter 0.7s ease-out 1.6s both;
    }

    & .home-banner__cloud {
        position: absolute;
        bottom: 0%;
        & img {
            filter: drop-shadow(0px -7.60203px 32px rgba(12, 12, 13, 0.1)) drop-shadow(0px -1.90051px 4px rgba(12, 12, 13, 0.05));
        }
        animation: banner-cloud-enter 0.5s ease-out 1.1s both;
    }

    & .home-banner__actions {
        position: absolute;
        z-index: 10;
        bottom: 0;
        animation: banner-actions-enter 0.5s ease-out 1.6s both;
    }

    @media (min-width: 768px) {
        height: 678px;
        & .home-banner__media {
            flex-direction: row;
            align-items: center;
        }
    }
}