body {
    background-color: #1a1a1a;
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    text-align: center;
    position: relative;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        0deg,
        rgba(20, 20, 20, 0) 0%,
        rgba(20, 20, 20, 0) 49%,
        rgba(40, 40, 40, 0.6) 50%,
        rgba(20, 20, 20, 0) 51%,
        rgba(20, 20, 20, 0) 100%
    );
    background-size: 100% 4px;
    opacity: 0.15;
    animation: scanlines 60s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 100vh; }
}

.container {
    padding: 20px;
    position: relative;
    z-index: 1;
}

.glitch-text {
    font-size: 3.5rem;
    color: #ffffff;
    text-shadow:
        0 0 5px #00ffff,
        0 0 10px #00ffff,
        0 0 15px #00ffff;
    margin-bottom: 10px;
    font-weight: 700;
    animation: pulse-glow 2s infinite alternate, main-text-flicker 10s infinite steps(1, end);
}

@keyframes main-text-flicker {
    0%, 100% { opacity: 1; transform: skewX(0deg); }
    48% { opacity: 1; transform: skewX(0deg); }
    48.5% { opacity: 0.7; transform: skewX(-0.5deg); text-shadow: 0 0 8px #ff00ff, 0 0 15px #ff00ff; }
    49% { opacity: 1; transform: skewX(0.5deg); }
    49.5% { opacity: 0.8; transform: skewX(0deg); text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; }
    50% { opacity: 1; transform: skewX(0deg); }
    78% { opacity: 1; transform: skewX(0deg); }
    78.3% { opacity: 0.6; transform: skewX(0.3deg); text-shadow: 0 0 6px #00ff00, 0 0 12px #00ff00; }
    78.6% { opacity: 1; transform: skewX(-0.3deg); }
    79% { opacity: 1; transform: skewX(0deg); text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; }
}

@keyframes pulse-glow {
    from {
        text-shadow:
            0 0 5px #00ffff,
            0 0 10px #00ffff,
            0 0 15px #00ffff,
            0 0 20px #007777;
    }
    to {
        text-shadow:
            0 0 8px #00ffff,
            0 0 18px #00ffff,
            0 0 28px #00ffff,
            0 0 35px #005555;
    }
}

/* STILE PER .redacted - Testo disturbato e randomizzato */
.redacted {
    display: inline-block;
    position: relative;
    color: #c0c0c0;
    text-shadow: 0 0 3px #5555ff, 0 0 5px #ff5555;
    overflow: hidden; /* Nasconde parti degli pseudo-elementi che potrebbero eccedere */
    padding: 0 0.1em; /* Leggero padding laterale per evitare tagli sui glifi più esterni */

    /* REGOLE PER LA LARGHEZZA FISSA */
    width: 6.5em; /* Larghezza fissa. Stimata per "CENSORED" (8 caratteri).
                   Questo valore è relativo alla font-size corrente dell'elemento .redacted.
                   Potrebbe essere necessario aggiustarlo (es. 4.8em, 5.2em)
                   in base alla larghezza effettiva del testo "CENSORED" con il font Orbitron. */
    text-align: left; /* Allinea il testo randomizzato a sinistra all'interno del box a larghezza fissa. */
    white-space: pre; /* Mantiene gli spazi (inclusi quelli multipli e i non-breaking spaces da JS)
                         e impedisce al testo di andare a capo, aiutando a mantenere la larghezza. */
    vertical-align: bottom; /* Allinea la baseline dello span con quella del testo circostante.
                                 Potrebbe essere necessario 'middle' o un aggiustamento con 'top'
                                 a seconda dell'effetto desiderato con il font Orbitron. */

    animation: redacted-text-tremble 0.2s infinite linear alternate;
}

@keyframes redacted-text-tremble {
    0% { transform: translate(0,0) skewX(0deg); opacity: 0.9; }
    25% { transform: translate(-1px, 1px) skewX(-0.2deg); opacity: 1; }
    50% { transform: translate(1px, -1px) skewX(0.2deg); opacity: 0.85; }
    75% { transform: translate(0.5px, 0.5px) skewX(0.1deg); opacity: 0.95; }
    100% { transform: translate(0,0) skewX(0deg); opacity: 0.9; }
}

.redacted::before,
.redacted::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.redacted::before {
    background: linear-gradient(0deg, transparent 48%, rgba(255, 0, 0, 0.7) 49%, rgba(0, 255, 255, 0.7) 50%, transparent 51%);
    background-size: 100% 5px;
    opacity: 0.3;
    animation: glitch-lines 0.8s steps(1,end) infinite;
    z-index: 2;
}

@keyframes glitch-lines {
    0% { transform: translateX(0); clip-path: inset(0% 0% 0% 0%); }
    10% { transform: translateX(-5px); clip-path: inset(10% 20% 30% 5%); }
    20% { transform: translateX(5px); background: linear-gradient(0deg, transparent 48%, rgba(0, 255, 0, 0.6) 49%, rgba(255, 0, 255, 0.6) 50%, transparent 51%); clip-path: inset(40% 10% 20% 15%);}
    30% { transform: translateX(-3px); clip-path: inset(5% 30% 50% 2%); }
    40% { transform: translateX(3px); background: linear-gradient(0deg, transparent 48%, rgba(255, 255, 0, 0.5) 49%, rgba(0, 0, 255, 0.5) 50%, transparent 51%); clip-path: inset(25% 5% 10% 25%);}
    50% { transform: translateX(0); clip-path: inset(0% 0% 0% 0%); opacity: 0.2; }
    60% { transform: translateX(2px); clip-path: inset(15% 25% 35% 10%); opacity: 0.4;}
    70% { transform: translateX(-2px); background: linear-gradient(0deg, transparent 48%, rgba(0, 255, 255, 0.7) 49%, rgba(255, 0, 0, 0.7) 50%, transparent 51%); clip-path: inset(33% 8% 22% 18%);}
    80% { transform: translateX(4px); clip-path: inset(50% 12% 5% 20%); opacity: 0.25;}
    90% { transform: translateX(-4px); background: linear-gradient(0deg, transparent 48%, rgba(255, 0, 255, 0.6) 49%, rgba(0, 255, 0, 0.6) 50%, transparent 51%); clip-path: inset(20% 18% 40% 11%);}
    100% { transform: translateX(0); clip-path: inset(0% 0% 0% 0%); opacity: 0.3;}
}

.redacted::after {
    background:
        repeating-linear-gradient(45deg, rgba(200,200,200,0.05), rgba(200,200,200,0.05) 1px, transparent 1px, transparent 5px),
        repeating-linear-gradient(-45deg, rgba(50,50,50,0.1), rgba(50,50,50,0.1) 1px, transparent 1px, transparent 5px);
    opacity: 0;
    animation: static-noise 0.3s steps(2,end) infinite;
    z-index: 3;
}

@keyframes static-noise {
    0% { opacity: 0.1; clip-path: inset(5% 50% 80% 10%); }
    10% { opacity: 0.3; clip-path: inset(70% 10% 10% 60%); }
    20% { opacity: 0.05; clip-path: inset(30% 80% 50% 5%); }
    30% { opacity: 0.4; clip-path: inset(55% 20% 20% 50%); }
    40% { opacity: 0.15; clip-path: inset(10% 60% 70% 20%); }
    50% { opacity: 0.35; clip-path: inset(80% 5% 5% 70%); }
    60% { opacity: 0.1; clip-path: inset(40% 70% 45% 15%); }
    70% { opacity: 0.25; clip-path: inset(60% 15% 15% 55%); }
    80% { opacity: 0.08; clip-path: inset(20% 40% 65% 30%); }
    90% { opacity: 0.45; clip-path: inset(75% 30% 8% 40%); }
    100% { opacity: 0.12; clip-path: inset(45% 55% 30% 25%); }
}

.sub-text {
    font-size: 1.8rem;
    color: #00ffff;
    text-shadow:
        0 0 3px #ffffff,
        0 0 5px #ffffff;
    letter-spacing: 1.5px;
    margin-top: 20px;
    font-weight: 400;
    animation: pulse-glow-sub 2.2s infinite alternate;
}

@keyframes pulse-glow-sub {
    from {
        text-shadow:
            0 0 3px #ffffff,
            0 0 5px #ffffff,
            0 0 8px #007777;
        opacity: 0.9;
    }
    to {
        text-shadow:
            0 0 5px #ffffff,
            0 0 8px #ffffff,
            0 0 12px #005555;
        opacity: 1;
    }
}

/* Media query per schermi più piccoli */
@media (max-width: 768px) {
    .glitch-text { font-size: 2.5rem; }
    /* La larghezza di .redacted in 'em' si adatterà automaticamente
       alla nuova dimensione del font di .glitch-text se .redacted
       eredita la font-size o ha una font-size relativa.
       Se .redacted ha una font-size fissa, potresti doverla aggiustare qui. */
    .sub-text { font-size: 1.3rem; }
}

@media (max-width: 480px) {
    .glitch-text { font-size: 1.8rem; }
    .sub-text { font-size: 1rem; }
}