.welcome-page [data-welcome-reveal][data-reveal-state="pending"] {
    opacity: 0;
    translate: 0 32px;
    scale: .975;
}

.welcome-page [data-welcome-reveal][data-reveal-state="entering"] {
    animation: welcome-card-enter .75s cubic-bezier(.16, 1, .3, 1) var(--welcome-reveal-delay, 0ms) both;
}

@keyframes welcome-card-enter {
    from { opacity: 0; translate: 0 32px; scale: .975; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

.welcome-page .welcome-workflow__card {
    transition: transform .3s ease, box-shadow .3s ease;
}

.welcome-page .welcome-workflow__card:has(.welcome-workflow__details[open]) {
    box-shadow: 0 12px 32px #07544314;
}

.welcome-page .welcome-workflow__details summary > svg {
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.welcome-page .welcome-workflow__details[data-workflow-state="closing"] summary > svg {
    transform: rotate(0);
}

.welcome-page .welcome-workflow__details[data-workflow-state="closing"] .welcome-workflow__toggle-more {
    display: inline;
}

.welcome-page .welcome-workflow__details[data-workflow-state="closing"] .welcome-workflow__toggle-less {
    display: none;
}

.welcome-page .welcome-workflow__details[data-workflow-state="opening"] .welcome-workflow__detail-body {
    animation: welcome-workflow-detail-enter .32s ease both;
}

@keyframes welcome-workflow-detail-enter {
    from { opacity: 0; translate: 0 -8px; }
    to { opacity: 1; translate: 0 0; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .welcome-page .welcome-workflow__card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px #07544314;
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-page [data-welcome-reveal] {
        opacity: 1;
        translate: none;
        scale: none;
        animation: none;
    }
}