/* soon.css - NOIR GLITCH EDITION */

.soon-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background: radial-gradient(circle at center, #111 0%, #000 100%);
}

.glitch-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.glitch {
    position: relative;
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff; /* Bianco puro */
    letter-spacing: 8px; /* Aumentato per enfasi */
    z-index: 1;
    text-transform: uppercase;
    /* Rimosso bagliore ciano, aggiunto sdoppiamento netto grigio */
    text-shadow: 3px 3px 0px #333;
    animation: noirPulse 1.5s infinite steps(1);
}

.sub-text {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #666; /* Grigio spento */
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: monospace;
}

/* Animazione Brutalista (Sfarfallio e Skew) */
@keyframes noirPulse {
    0% { 
        opacity: 1; 
        transform: skew(0deg); 
        text-shadow: 2px 2px 0px #333;
    }
    10% { 
        opacity: 0.5; 
        transform: skew(5deg); 
        text-shadow: -2px -2px 0px #fff;
    }
    12% { 
        opacity: 1; 
        transform: skew(0deg); 
        text-shadow: 2px 2px 0px #333;
    }
    50% { 
        opacity: 0.8; 
        filter: blur(1px);
    }
    90% { 
        opacity: 1; 
        transform: scale(1.02);
        text-shadow: 4px 0px 0px #222;
    }
    100% { 
        opacity: 1; 
        transform: skew(0deg); 
    }
}

/* Effetto disturbo aggiuntivo opzionale sul testo */
.glitch::before {
    content: "COMING SOON";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background: #000;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim {
    0% { clip: rect(10px, 9999px, 20px, 0); }
    20% { clip: rect(40px, 9999px, 50px, 0); }
    40% { clip: rect(80px, 9999px, 90px, 0); }
    60% { clip: rect(30px, 9999px, 40px, 0); }
    80% { clip: rect(60px, 9999px, 70px, 0); }
    100% { clip: rect(15px, 9999px, 25px, 0); }
}