@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap');

.morph-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 40;
    text-align: center;
    pointer-events: none;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    mix-blend-mode: difference;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: none;
}

.morph-container {
    font-size: clamp(4rem, 20vw, 12rem);
    font-weight: 700;
    filter: url(#threshold);
    user-select: none;
    line-height: 1.2;
}

.word-rotator {
    position: relative;
    height: 1.2em;
    width: 100%;
    min-width: 14ch;
    display: flex;
    justify-content: center;
    align-items: center;
}

.word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    white-space: nowrap;
    animation: rotate-words 9s infinite ease-in-out;
}

.word:nth-child(1) { animation-delay: 0s; }
.word:nth-child(2) { animation-delay: 4s; }

@keyframes rotate-words {
    0% {
        opacity: 0;
        filter: blur(20px);
        transform: translate(-50%, -50%) scale(0.8);
    }
    5% {
        opacity: 0.5;
        filter: blur(10px);
    }
    15%, 35% {
        opacity: 1;
        filter: blur(0px);
        transform: translate(-50%, -50%) scale(1);
    }
    45% {
        opacity: 0.5;
        filter: blur(10px);
    }
    50%, 100% {
        opacity: 0;
        filter: blur(20px);
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.filters {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}