details[open] > *:not(summary) {
    animation: sweep 0.35s ease-out forwards;
    will-change: transform, opacity;
    transform-origin: top;
}

@keyframes sweep {
    0% { opacity: 0; transform: translateY(-10px) scaleY(0.98); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

details .step-block,
details .calculation-block {
    opacity: 0;
}

details[open] .step-block,
details[open] .calculation-block {
    animation: slideInStep 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

details details:not([open]) .step-block,
details details:not([open]) .calculation-block {
    animation: none !important;
    opacity: 0;
}

@keyframes slideInStep {
    0% { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}

details[open] .step-block {
    animation: slideInStep 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--step-idx, 0) * 0.04s); 
}

details[open] .calculation-block {
    animation-delay: calc(var(--step-idx, 0) * 0.04s + 0.1s);
}

@media (prefers-reduced-motion: reduce) {
    details[open] > *:not(summary),
    details[open] .step-block,
    details[open] .calculation-block {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    details .step-block,
    details .calculation-block {
        opacity: 1;
    }
}