*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: "Outfit", system-ui, sans-serif;
    background: radial-gradient(
            ellipse 80% 60% at 50% 0%,
            rgba(99, 102, 241, 0.25),
            transparent 70%
        ),
        radial-gradient(
            ellipse 60% 50% at 80% 100%,
            rgba(236, 72, 153, 0.15),
            transparent 60%
        ),
        #0f0f14;
    color: #f4f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome {
    text-align: center;
    padding: 2rem;
    animation: fade-in 1s ease-out both;
}

.welcome__title {
    display: inline-block;
    font-size: clamp(3.5rem, 12vw, 7rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    padding-inline: 0.02em 0.08em;
    overflow: visible;
    background: linear-gradient(
        135deg,
        #e0e7ff 0%,
        #a5b4fc 35%,
        #818cf8 55%,
        #f472b6 85%,
        #fbcfe8 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 6s ease-in-out infinite;
}

.welcome__subtitle {
    margin-top: 1.25rem;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 244, 248, 0.45);
    animation: fade-in 1s ease-out 0.35s both;
}

@keyframes shimmer {
    0%,
    100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}