#root {
    --t-logo-settle: 1.05s;
    --t-tagline: 1.5s;
    --t-skills: 1.85s;
    --t-terminal: 2.5s;
    --t-type: 2.95s;
    --t-thanks: 3.6s;
    --t-share: 3.95s;
    --t-end: 4.6s;
}

.intro-hold #root *,
.intro-hold #root *::before {
    animation-play-state: paused !important;
}

.intro .wordmark {
    animation:
            logoSettle 0.9s var(--ease-glide) var(--t-logo-settle) backwards,
            logoEnter 1s var(--ease-out) backwards;
}

@keyframes logoEnter {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + 24px)) scale(var(--s, 1));
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s, 1));
    }
}

@keyframes logoSettle {
    from { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s, 1)); }
}

.intro .tagline {
    animation: taglineWipe 0.8s var(--ease-out) var(--t-tagline) backwards;
}

@keyframes taglineWipe {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

.intro .skills {
    animation: capsuleOpen 0.8s var(--ease-out) var(--t-skills) backwards;
}

.intro .skill {
    animation: skillIn 0.55s var(--ease-out) calc(var(--t-skills) + 0.25s + var(--i) * 0.06s) backwards;
}

@keyframes capsuleOpen {
    from {
        opacity: 0;
        clip-path: inset(0 50% round 99em);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 round 99em);
    }
}

@keyframes skillIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.6);
    }
}

.intro #terminal {
    animation: panelMorph 0.8s var(--ease-out) var(--t-terminal) backwards;
}

@keyframes panelMorph {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
}

.intro #thanks .letter {
    animation: letterPop 0.6s var(--ease-out) calc(var(--t-thanks) + var(--i) * 0.03s) backwards;
}

@keyframes letterPop {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.intro #share a {
    animation: shareEnter 0.7s var(--ease-out) calc(var(--t-share) + var(--i) * 0.08s) backwards;
}

@keyframes shareEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}