@keyframes sgc-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes sgc-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes sgc-scale-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

:where(a, button, .swiper-pagination-bullet) {
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

:where(.hero__vacancies, .hero__button, .careers__button):hover,
:where(.hero__vacancies, .hero__button, .careers__button):focus-visible {
    transform: translateY(-2px);
}

:where(.hero__vacancies, .hero__button, .careers__button):active {
    transform: translateY(0);
}

.hero {
    animation: sgc-fade-in 0.7s ease both;
}

.hero__logo,
.hero__vacancies {
    animation: sgc-fade-up 0.65s ease both;
}

.hero__vacancies {
    animation-delay: 0.08s;
}

.hero__title,
.hero__text,
.hero__button {
    animation: sgc-fade-up 0.75s ease both;
}

.hero__title {
    animation-delay: 0.15s;
}

.hero__text {
    animation-delay: 0.25s;
}

.hero__button {
    animation-delay: 0.35s;
}

.social__image,
.social__card-image,
.careers__image {
    transition: transform 0.45s ease, filter 0.45s ease;
}

.social__image:hover,
.social__card:hover .social__card-image {
    transform: scale(1.02);
}

.social__card,
.perks__card,
.footer__col {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social__card:hover,
.perks__card:hover {
    transform: translateY(-6px);
}

.perks__icon {
    transition: transform 0.3s ease;
}

.perks__card:hover .perks__icon {
    transform: scale(1.06);
}

.quotes__slide {
    animation: sgc-scale-in 0.5s ease both;
}

.footer__link,
.footer__bottom-link,
.footer__social-link {
    transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.footer__link:hover,
.footer__bottom-link:hover,
.footer__social-link:hover {
    opacity: 0.75;
}

.footer__social-link:hover {
    transform: translateY(-2px);
}

@supports (animation-timeline: view()) {
    .intro,
    .social,
    .quotes,
    .perks,
    .careers,
    .footer {
        animation: sgc-fade-up both;
        animation-timeline: view();
        animation-range: entry 10% cover 30%;
    }

    .social__image,
    .social__content,
    .social__card,
    .perks__head,
    .perks__card,
    .careers__content,
    .careers__image,
    .footer__social-inner,
    .footer__col,
    .footer__bottom-inner {
        animation: sgc-fade-up both;
        animation-timeline: view();
        animation-range: entry 5% cover 28%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}