:root {
    color-scheme: dark;
    font-size: 16px;
    --horizon: #050510;
    --depth: #120b2c;
    --accent: #3a0d6a;
    --neon-cyan: rgba(138, 201, 255, 0.85);
    --neon-violet: rgba(191, 120, 255, 0.76);
    --glow-soft: rgba(255, 255, 255, 0.45);
    --text-sheen: linear-gradient(120deg, #91e0ff 0%, #a891ff 34%, #ff80e0 68%, #d4b5ff 100%);
}

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", "Poppins", -apple-system, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(55% 55% at 18% 20%, rgba(118, 65, 255, 0.45) 0%, transparent 60%),
        radial-gradient(42% 38% at 82% 78%, rgba(255, 89, 209, 0.35) 0%, transparent 62%),
        linear-gradient(140deg, var(--horizon), var(--depth), var(--accent));
    background-size: 120% 120%;
    color: #f7f9ff;
    animation: background-shift 32s ease-in-out infinite;
    overflow: hidden;
}

.hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: min(92vw, 1080px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
    transform: translateY(18px);
    opacity: 0;
    transition: opacity 1600ms ease, transform 1600ms cubic-bezier(0.23, 1, 0.32, 1);
}

.wordmark {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: clamp(0.8rem, 2.5vw, 2.2rem);
    font-size: clamp(2.4rem, 6.5vw, 6.8rem);
    letter-spacing: clamp(0.18em, 0.55vw, 0.28em);
    text-transform: uppercase;
    font-weight: 200;
    line-height: 1;
    text-shadow:
        0 0 18px rgba(95, 150, 255, 0.28),
        0 0 42px rgba(210, 150, 255, 0.22),
        0 0 92px rgba(79, 28, 161, 0.48);
    will-change: filter;
    white-space: nowrap;
    transition: letter-spacing 1400ms ease, filter 1400ms ease;
}

.wordmark__simple {
    color: rgba(255, 255, 255, 0.45);
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 200;
    filter: drop-shadow(0 2px 18px rgba(145, 224, 255, 0.18));
    mix-blend-mode: screen;
}

.wordmark__complexity {
    position: relative;
    font-family: "Inter", "Poppins", sans-serif;
    font-weight: 300;
    background: var(--text-sheen);
    background-size: 220% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
        0 0 22px rgba(160, 215, 255, 0.45),
        0 0 54px rgba(137, 81, 255, 0.5),
        0 0 98px rgba(255, 120, 215, 0.42);
    animation:
        shimmer 14s ease-in-out infinite,
        pulse 12s ease-in-out infinite alternate;
    will-change: background-position, filter;
    transition: text-shadow 1400ms ease, filter 1400ms ease;
}

.wordmark__complexity::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transform: translateX(-20%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: sweep 9s ease-in-out infinite;
}

.gradient-field {
    position: fixed;
    inset: -20vmax;
    pointer-events: none;
    filter: blur(0.8px);
    z-index: -1;
}

.gradient-field__layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110vmax;
    height: 110vmax;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 50%;
    opacity: 0.28;
    will-change: transform, opacity;
    transition: opacity 1800ms ease;
}

.gradient-field__layer--one {
    background: radial-gradient(circle at 30% 30%, rgba(132, 177, 255, 0.55), transparent 68%);
    animation: drift-one 48s ease-in-out infinite alternate;
}

.gradient-field__layer--two {
    background: radial-gradient(circle at 60% 65%, rgba(255, 125, 215, 0.5), transparent 70%);
    animation: drift-two 62s ease-in-out infinite alternate;
}

.gradient-field__layer--three {
    background: radial-gradient(circle at 70% 30%, rgba(83, 255, 214, 0.35), transparent 65%);
    opacity: 0.18;
    animation: drift-three 54s ease-in-out infinite alternate;
}

.ready .hero {
    opacity: 1;
    transform: translateY(0);
}

.ready .gradient-field__layer {
    opacity: 0.42;
}

.ready .wordmark {
    filter: brightness(1.08);
}

.ready .wordmark__complexity::after {
    opacity: 1;
}

.wordmark--flare {
    letter-spacing: clamp(0.22em, 0.75vw, 0.32em);
    filter: brightness(1.15);
}

.wordmark--flare .wordmark__complexity {
    text-shadow:
        0 0 28px rgba(160, 215, 255, 0.6),
        0 0 72px rgba(137, 81, 255, 0.55),
        0 0 128px rgba(255, 120, 215, 0.5);
}

@keyframes background-shift {
    0% {
        background-position: 0% 50%, 0% 30%, 0 0;
    }
    50% {
        background-position: 80% 70%, 30% 80%, 100% 60%;
    }
    100% {
        background-position: 0% 50%, 0% 30%, 0 0;
    }
}

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

@keyframes pulse {
    0% {
        filter: drop-shadow(0 0 18px rgba(129, 210, 255, 0.3));
    }
    100% {
        filter: drop-shadow(0 0 28px rgba(255, 140, 225, 0.45));
    }
}

@keyframes sweep {
    0%,
    60% {
        opacity: 0;
        transform: translateX(-25%);
    }
    65% {
        opacity: 0.55;
        transform: translateX(0);
    }
    75% {
        opacity: 0;
        transform: translateX(25%);
    }
    100% {
        opacity: 0;
        transform: translateX(25%);
    }
}

@keyframes drift-one {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(1);
    }
    100% {
        transform: translate3d(-46%, -52%, 0) scale(1.08);
    }
}

@keyframes drift-two {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(1);
    }
    100% {
        transform: translate3d(-54%, -48%, 0) scale(1.1);
    }
}

@keyframes drift-three {
    0% {
        transform: translate3d(-50%, -50%, 0) scale(0.98);
    }
    100% {
        transform: translate3d(-48%, -49%, 0) scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
        background-size: cover;
    }

    .gradient-field__layer,
    .wordmark__complexity,
    .wordmark__complexity::after {
        animation: none;
        transition: none;
    }
}