/* Login slide animation and login/signup responsive rules.
   These at-rules live here so the CSS parser sees a real @keyframes / @media selector. */

@keyframes gg-feature-slide-animation {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    3% {
        opacity: 1;
        transform: translateY(0);
    }

    12% {
        opacity: 1;
        transform: translateY(0);
    }

    15% {
        opacity: 0;
        transform: translateY(-15px);
    }

    100% {
        opacity: 0;
        transform: translateY(-15px);
    }
}

@media (max-width: 900px) {
    .gg-login-card {
        flex-direction: column;
    }

    .gg-login-image {
        width: 100%;
        height: 330px;
    }

    .gg-login-panel {
        width: 100%;
        padding: 40px 45px 30px;
    }

    .gg-feature-slideshow {
        left: 25px;
        right: 25px;
        bottom: 25px;
        height: 215px;
    }

    .gg-feature-slide {
        padding: 23px 25px;
    }

    .gg-feature-slide h2 {
        font-size: 26px;
    }

    .gg-feature-slide p {
        font-size: 13px;
    }

    .gg-signup-card {
        flex-direction: column;
    }

    .gg-signup-image {
        width: 100%;
        height: 300px;
    }

    .gg-signup-panel {
        width: 100%;
        padding: 40px 35px;
    }

    .gg-signup-image-content {
        left: 35px;
        right: 35px;
        bottom: 30px;
    }

    .gg-signup-image-content h2 {
        font-size: 26px;
    }
}

@media (max-width: 550px) {
    .gg-login-page {
        padding: 12px;
    }

    .gg-login-card {
        border-radius: 12px;
    }

    .gg-login-image {
        height: 280px;
    }

    .gg-feature-slideshow {
        left: 15px;
        right: 15px;
        bottom: 15px;
        height: 190px;
    }

    .gg-feature-slide {
        padding: 20px;
    }

    .gg-feature-slide h2 {
        font-size: 23px;
    }

    .gg-feature-slide p {
        font-size: 12px;
        line-height: 1.5;
    }

    .gg-feature-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .gg-login-panel {
        padding: 30px 20px 25px;
    }

    .gg-login-title h3 {
        font-size: 27px;
    }

    .gg-partners-list {
        gap: 13px;
        font-size: 10px;
    }

    .gg-features {
        display: none;
    }

    .gg-signup-page {
        padding: 15px;
    }

    .gg-signup-image {
        height: 240px;
    }

    .gg-signup-panel {
        padding: 30px 20px;
    }

    .gg-signup-title h3 {
        font-size: 26px;
    }

    .gg-signup-partners-list {
        gap: 12px;
        font-size: 10px;
    }

    .gg-signup-features {
        display: none;
    }

    .gg-signup-powered-by {
        font-size: 9px;
    }
}