.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-slow) var(--ease-out-expo),
        transform var(--duration-slow) var(--ease-out-expo);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.trace {
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: trace-in 1.7s var(--ease-out-expo) forwards;
}

.trace-two {
    animation-delay: 0.22s;
}

.trace-three {
    animation-delay: 0.42s;
}

.node {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: node-in 0.42s var(--ease-out-expo) forwards;
}

.node-a,
.node-c,
.node-e {
    animation-delay: 0.6s;
}

.node-b,
.node-d,
.node-f {
    animation-delay: 0.9s;
}

.case-file__body,
.stack-panel__body {
    animation: content-in var(--duration-base) var(--ease-out-expo);
}

@keyframes trace-in {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes node-in {
    from {
        opacity: 0;
        transform: scale(0.75);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes content-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .trace {
        stroke-dashoffset: 0;
    }

    .node {
        opacity: 1;
    }
}