.header-slide::before {
    background:
        linear-gradient(
            180deg,
            rgba(1, 1, 1, 0) 50%,
            rgba(1, 1, 1, 0.005) 55.89%,
            rgba(1, 1, 1, 0.01) 60.69%,
            rgba(1, 1, 1, 0.025) 64.56%,
            rgba(1, 1, 1, 0.04) 67.67%,
            rgba(1, 1, 1, 0.065) 70.19%,
            rgba(1, 1, 1, 0.09) 72.28%,
            rgba(1, 1, 1, 0.115) 74.12%,
            rgba(1, 1, 1, 0.145) 75.88%,
            rgba(1, 1, 1, 0.175) 77.72%,
            rgba(1, 1, 1, 0.205) 79.81%,
            rgba(1, 1, 1, 0.235) 82.33%,
            rgba(1, 1, 1, 0.265) 85.44%,
            rgba(1, 1, 1, 0.295) 89.31%,
            rgba(1, 1, 1, 0.325) 94.11%,
            rgba(1, 1, 1, 0.35) 100%
        ),
        linear-gradient(
            290.34deg,
            rgba(1, 1, 1, 0) 18.39%,
            rgba(1, 1, 1, 0.45) 100%
        );
}

#astra-hero .astra-hero__backdrop {
    background:
        linear-gradient(180deg, rgba(1, 1, 1, 0.28) 0%, rgba(1, 1, 1, 0.08) 44%, rgba(1, 1, 1, 0.42) 100%),
        linear-gradient(90deg, rgba(1, 1, 1, 0.42) 0%, rgba(1, 1, 1, 0.08) 52%, rgba(1, 1, 1, 0.2) 100%);
}

#astra-hero .astra-hero__logo {
    opacity: 0;
    transform: translateY(1rem) scale(0.96);
    animation: astra-hero-fade-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}

#astra-hero .astra-hero__tagline {
    opacity: 0;
    transform: translateY(0.75rem);
    animation: astra-hero-fade-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 430ms forwards;
}

@keyframes astra-hero-fade-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #astra-hero .astra-hero__logo,
    #astra-hero .astra-hero__tagline {
        opacity: 1;
        transform: none;
        animation: none;
    }
}