@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');

body {
    margin: 0;
    overflow: hidden;
    background-color: #0d001a; 
    background-image: radial-gradient(#200440 1px, transparent 0);
    background-size: 20px 20px;
    
    color: #fff; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    cursor: pointer; /* Change cursor to hint interaction */
    
    animation: backgroundGlow 15s infinite alternate ease-in-out;
}

@keyframes backgroundGlow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.container {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4); 
    padding: 30px 50px;
    border-radius: 10px;
    border: 2px solid #ff0077; 
    box-shadow: 0 0 15px #ff0077, 0 0 25px #ff0077, inset 0 0 10px #ff0077; 
    animation: borderPulse 4s infinite linear;
    transition: transform 0.1s ease-out; /* Smooth movement when mouse moves */
}

@keyframes borderPulse {
    0% { border-color: #ff0077; box-shadow: 0 0 15px #ff0077; }
    50% { border-color: #00ffaa; box-shadow: 0 0 25px #00ffaa, 0 0 40px #00ffaa; }
    100% { border-color: #ff0077; box-shadow: 0 0 15px #ff0077; }
}


.enigmatic-text {
    font-family: 'Monoton', cursive; 
    font-size: 4em; 
    letter-spacing: 5px;
    
    /* Default Neon Text Glow Effect */
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff0077, 
        0 0 30px #ff0077,
        0 0 40px #00ffaa, 
        0 0 50px #00ffaa;
        
    animation: neonFlicker 1.5s infinite alternate;
    transition: all 0.2s ease-out; /* Smooth transition for hover/click effects */
}

/* --- INTERACTIVE STATES --- */

/* 1. Hover Effect: Brighten the glow when the user hovers over the text */
.enigmatic-text:hover {
    text-shadow: 
        0 0 5px #fff,
        0 0 15px #fff, /* Brighter inner white */
        0 0 30px #ff0077, /* Stronger pink */
        0 0 50px #ff0077,
        0 0 60px #00ffaa, /* Stronger cyan */
        0 0 80px #00ffaa;
}

/* 2. Clicked Reaction: Instant, temporary color flash/switch */
.enigmatic-text.clicked-reaction {
    color: #000; /* Black core to make the glow stand out more */
    text-shadow: 
        0 0 5px #00ffaa,
        0 0 10px #00ffaa,
        0 0 30px #ffff00, /* Flash to Yellow */
        0 0 50px #ffff00,
        0 0 60px #ff00ff, /* Outer Flash to Purple */
        0 0 80px #ff00ff;
    transform: scale(1.03); /* Subtle jump */
}

/* Remove flicker animation during the immediate reaction for clarity */
.enigmatic-text.clicked-reaction {
    animation: none;
}

@keyframes neonFlicker {
    0% { opacity: 1; text-shadow: 0 0 20px #ff0077; }
    10% { opacity: 0.95; }
    20% { opacity: 1; }
    80% { opacity: 0.96; }
    90% { opacity: 1; text-shadow: 0 0 20px #ff0077, 0 0 50px #00ffaa; }
    100% { opacity: 1; }
}