body, html { background: #000; overflow: hidden; margin: 0; padding: 0; height: 100%; width: 100%; cursor: none; }
#scene { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

#text-container {
    font-family: 'Teko', sans-serif;
    font-size: 18vw;
    text-transform: uppercase;
    color: #fff;
    transform-style: preserve-3d;
}

.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
}

.enter .char {
    animation: enter-anim 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

@keyframes enter-anim { to { opacity: 1; transform: translateY(0); } }

.animate .char {
    animation-name: main-sequence;
    animation-duration: 10s; /* Adjusted for a faster loop after reveal */
    animation-iteration-count: infinite;
}

@keyframes main-sequence {
    0% { transform: scale(1); text-shadow: none; opacity: 1; }

    /* 0-4s: The Stare */
    10% { transform: scale(1.05); text-shadow: 0 0 10px #fff, 0 0 20px #ff00ff; }
    25% { transform: scale(1) skewX(15deg); }
    40% { transform: scale(1.05) skewX(-15deg); text-shadow: 0 0 10px #fff, 0 0 20px #00ffff; }
    
    /* 4-8s: The Chaos */
    50% { transform: scale(1.1) rotate(5deg); }
    65% { transform: scale(0.9) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(0deg); text-shadow: 0 0 30px red; }

    /* 8-10s: The Collapse */
    90% { transform: scale(0.1) rotate(360deg); opacity: 1; }
    99% { transform: scale(0); opacity: 0; }
    100% { transform: scale(0); opacity: 0; } /* Ensure it stays hidden before loop */
}