/* Content is visible by default. Only the running script can enable entrances. */
.vr-motion-pending {
    opacity: 0;
    transform: translateY(30px);
}
.vr-motion-pending.vr-hero-enter { transform: translateY(20px); }
.vr-motion-running:is(.vr-reveal, .vr-hero-enter) {
    transition: opacity 600ms ease, transform 600ms ease, box-shadow 600ms ease;
    transition-delay: var(--vr-motion-delay, 0ms);
}
.vr-motion-running:not(.vr-motion-pending) { opacity: 1; transform: translateY(0); }
.vr-motion-card {
    position: relative;
    transition: box-shadow 400ms cubic-bezier(.16, 1, .3, 1), translate 400ms cubic-bezier(.16, 1, .3, 1), border-color 200ms ease;
}
/* Lift only cards that contain something to click; a static card that reacts to hover promises an action it can't take. */
.vr-motion-card:has(a[href]):focus-within {
    box-shadow: 0 20px 40px var(--primary-trans-10, rgba(26, 58, 92, .1));
    border-color: color-mix(in oklab, var(--secondary) 45%, var(--vr-home-border, #dbe4ec));
}
@media (hover: hover) {
    .vr-motion-card:has(a[href]):hover {
        box-shadow: 0 20px 40px var(--primary-trans-10, rgba(26, 58, 92, .1));
        border-color: color-mix(in oklab, var(--secondary) 45%, var(--vr-home-border, #dbe4ec));
        translate: 0 -3px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .vr-motion-pending, .vr-motion-running:is(.vr-reveal, .vr-hero-enter) { opacity: 1; transform: none; transition: none; }
    .vr-motion-card { transition: none; translate: none !important; }
}