:root {
    --bg-color: #030308;
    --text-color: #ffffff;
    --glow-blue: rgba(120, 180, 255, 0.82);
    --glow-purple: rgba(180, 100, 255, 0.48);
    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; min-width: 0; min-height: 0; }
body { overflow: hidden; background: var(--bg-color); font-family: var(--font-family); }

#starfield {
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1;
    display: block; pointer-events: none;
}

.stage {
    position: fixed; inset: 0; z-index: 10; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    padding: clamp(8px, 3vw, 40px); overflow: visible;
}

.floating-text-container {
    position: relative; width: max-content; max-width: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: visible;
    --responsive-font-size: clamp(1.35rem, 10vw, 7.5rem);
}

.word-space {
    display: inline-block;
    flex: 0 0 clamp(1rem, 5vw, 3.5rem);
    width: clamp(1rem, 5vw, 3.5rem);
    min-width: clamp(1rem, 5vw, 3.5rem);
    height: 1px;
}

.letter-wrapper {
    position: relative; display: inline-flex; flex: 0 0 auto;
    align-items: center; justify-content: center;
    padding: 0 clamp(1px, 0.35vw, 4px); cursor: default; overflow: visible;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.letter-inner {
    display: inline-block;
    font-size: var(--responsive-font-size);
    font-weight: 900; line-height: 0.95; color: var(--text-color);
    letter-spacing: clamp(0.01em, 0.5vw, 0.05em);
    text-transform: uppercase;
    text-shadow:
        0 0 7px rgba(255, 255, 255, 0.90),
        0 0 16px var(--glow-blue),
        0 0 32px var(--glow-blue),
        0 0 52px var(--glow-purple);
    animation-name: floatAnimation;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    will-change: transform, text-shadow;
}

@keyframes floatAnimation {
    0% { transform: translateY(var(--float-min-y, -12px)) rotate(var(--float-rot-min, -1deg)); }
    100% { transform: translateY(var(--float-max-y, 12px)) rotate(var(--float-rot-max, 1deg)); }
}

.letter-wrapper.active .letter-inner {
    text-shadow:
        0 0 8px rgba(255, 255, 255, 1),
        0 0 18px rgba(130, 210, 255, 1),
        0 0 38px rgba(200, 120, 255, 0.9),
        0 0 58px rgba(140, 90, 255, 0.68);
}

@media (max-width: 420px) {
    .stage { padding: 6px; }
    .floating-text-container { --responsive-font-size: clamp(1.25rem, 9.4vw, 3rem); }
    .word-space {
        flex-basis: clamp(0.75rem, 4.5vw, 1.5rem);
        width: clamp(0.75rem, 4.5vw, 1.5rem);
        min-width: clamp(0.75rem, 4.5vw, 1.5rem);
    }
    .letter-wrapper { padding-left: 1px; padding-right: 1px; }
}

@media (max-width: 340px) {
    .floating-text-container { --responsive-font-size: clamp(1.1rem, 8.8vw, 2.5rem); }
    .word-space { flex-basis: 0.75rem; width: 0.75rem; min-width: 0.75rem; }
}

/* KOMETY */
.comet {
    position: fixed;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 5px #fff,
        0 0 12px rgba(255,255,255,.95),
        0 0 25px rgba(190,220,255,.85),
        0 0 42px rgba(150,190,255,.45);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    will-change: transform, opacity;
}

.comet::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 10px;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: right center;
    border-radius: 999px;
    background: linear-gradient(to left, rgba(255,255,255,.55), rgba(190,220,255,.22), transparent);
    filter: blur(5px);
}

.comet::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 3px;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: right center;
    border-radius: 999px;
    background: linear-gradient(to left, rgba(255,255,255,.95), rgba(220,235,255,.45), transparent);
    filter: blur(1px);
}

@media (prefers-reduced-motion: reduce) {
    .letter-inner { animation: none; }
    .letter-wrapper { transition: none; }
    .comet { display: none; }
}