.site-intro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at 70% 40%, #30226b80, transparent 60%), linear-gradient(100deg, #0c1022 22%, #090f30 80%);
    pointer-events: none;
    animation: intro-exit 2.8s ease-in-out forwards;
}
.intro-name {
    color: #f0f1f7;
    font: 300 clamp(36px, 8vw, 62px)/1.15 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -.055em;
    white-space: nowrap;
    animation: intro-name-fade 2.8s ease-in-out both;
}
@keyframes intro-name-fade {
    0% { opacity: 0; }
    28%, 57% { opacity: 1; }
    82%, 100% { opacity: 0; }
}
@keyframes intro-exit {
    0%, 76% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .site-intro { animation-duration: .5s; }
    .intro-name { animation: none; }
}