/* Animation definitions */
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Apply to body of each page loaded for users who don't have it toggled off */
body {
    animation: fade-in 0.35s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
        opacity: 1;
    }
}

@keyframes rivian-expand-down {
    0% {
        /* CRITICAL: Must have 'round' or it clips to square */
        clip-path: inset(0 0 100% 0 round var(--radius-large));
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0 0 0 round var(--radius-large));
        opacity: 1;
    }
}

@keyframes rivian-collapse-up {
    0% {
        clip-path: inset(0 0 0 0 round var(--radius-large));
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        /* Stops 5rem from top */
        clip-path: inset(0 0 calc(100% - 5rem) 0 round var(--radius-large));
        opacity: 0;
    }
}