/* ============================================================
   Home — distorsione "segnale analogico instabile"
   Ispirato a analog_glitch: aberrazione cromatica RGB, scanline,
   rumore fractal, micro-slice. L'ingresso "sintonizza" il segnale
   (blur -> nitido); poi, qualche secondo dopo il load, partono
   dei disturbi periodici (classe .glitch-hit applicata da home.js).
   Scope: solo il contenuto della home (.divMainHome).
   ============================================================ */

/* ---- Ingresso: fade-in morbido e lento ---- */
@keyframes lwSignalOn {
    0%   { opacity: 0; filter: blur(3px); }
    35%  { opacity: 0.35; filter: blur(1.5px); }
    100% { opacity: 1; filter: blur(0); }
}

.divMainHome main {
    animation: lwSignalOn 3.2s ease-in-out both;
}

/* ---- Overlay: scanline + rumore sull'intera home ---- */
.divMainHome::before,
.divMainHome::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}

.divMainHome::before {
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0px,
        rgba(0, 0, 0, 0.05) 1px,
        transparent 2px,
        transparent 4px
    );
    mix-blend-mode: multiply;
    opacity: 0.35;
}

.divMainHome::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ---- Sorgenti del segnale: sfasamento immediato, rientro morbido ---- */
.divMainHome .logoHome,
.divMainHome .divTxtHome1,
.divMainHome .divTxtHome2,
.divMainHome .divTxtHome3,
.divMainHome .svg-orbit {
    transition: transform 0.28s cubic-bezier(.2, .7, .3, 1),
                text-shadow 0.28s ease,
                filter 0.28s ease;
    will-change: transform, filter;
}

/* ============================================================
   HIT — perdita di sincronismo (aberrazione cromatica RGB marcata)
   Durante l'hit lo sfasamento e' istantaneo (no transizione),
   al rilascio rientra morbido.
   ============================================================ */

.divMainHome.glitch-hit .logoHome,
.divMainHome.glitch-hit .divTxtHome1,
.divMainHome.glitch-hit .divTxtHome2,
.divMainHome.glitch-hit .divTxtHome3,
.divMainHome.glitch-hit .svg-orbit {
    transition: none;
}

.divMainHome.glitch-hit::after { opacity: 0.3; }
.divMainHome.glitch-hit main { filter: brightness(1.06) contrast(1.05); }

/* Testo 1 — sfasa a sinistra, split R/ciano via text-shadow, slice alto */
.divMainHome.glitch-hit .divTxtHome1 {
    transform: translate(-4px, 1px);
    text-shadow: -4px 0 rgba(255, 0, 64, 0.9), 4px 0 rgba(0, 224, 255, 0.9);
    clip-path: inset(16% 0 34% 0);
}

/* Testo 2 — sfasa a destra, canali invertiti, slice centrale */
.divMainHome.glitch-hit .divTxtHome2 {
    transform: translate(4px, -1px);
    text-shadow: 4px 0 rgba(255, 0, 64, 0.9), -4px 0 rgba(0, 224, 255, 0.9);
    clip-path: inset(45% 0 11% 0);
}

/* Paragrafo — split più contenuto */
.divMainHome.glitch-hit .divTxtHome3 {
    transform: translate(-3px, 1px);
    text-shadow: -3px 0 rgba(255, 0, 64, 0.85), 3px 0 rgba(0, 224, 255, 0.85);
}

/* Logo (PNG) — ghost RGB via drop-shadow a raggio 0 */
.divMainHome.glitch-hit .logoHome {
    transform: translate(3px, -1px) scaleX(1.01);
    filter: drop-shadow(-5px 0 0 rgba(255, 0, 64, 0.85))
            drop-shadow(5px 0 0 rgba(0, 224, 255, 0.85))
            blur(0.3px);
}

/* Orbit SVG — skew + ghost RGB */
.divMainHome.glitch-hit .svg-orbit {
    transform: translate(-3px, 0) skewX(0.5deg);
    filter: drop-shadow(-4px 0 0 rgba(255, 0, 64, 0.7))
            drop-shadow(4px 0 0 rgba(0, 224, 255, 0.7));
}

/* ---- Variante "strong": disturbo più marcato ---- */
.divMainHome.glitch-hit.glitch-strong main { filter: brightness(1.1) contrast(1.08); }

.divMainHome.glitch-hit.glitch-strong .logoHome {
    transform: translate(-8px, 1px) scaleX(1.025);
    filter: drop-shadow(-8px 0 0 rgba(255, 0, 64, 0.9))
            drop-shadow(8px 0 0 rgba(0, 224, 255, 0.9))
            blur(0.4px);
}
.divMainHome.glitch-hit.glitch-strong .divTxtHome1 {
    transform: translate(9px, -2px);
    text-shadow: -7px 0 rgba(255, 0, 64, 0.95), 7px 0 rgba(0, 224, 255, 0.95);
    clip-path: inset(4% 0 42% 0);
}
.divMainHome.glitch-hit.glitch-strong .divTxtHome2 {
    transform: translate(-10px, 2px);
    text-shadow: 7px 0 rgba(255, 0, 64, 0.95), -7px 0 rgba(0, 224, 255, 0.95);
    clip-path: inset(53% 0 5% 0);
}
.divMainHome.glitch-hit.glitch-strong .divTxtHome3 {
    transform: translate(7px, -2px);
    text-shadow: -6px 0 rgba(255, 0, 64, 0.9), 6px 0 rgba(0, 224, 255, 0.9);
}
.divMainHome.glitch-hit.glitch-strong .svg-orbit {
    transform: translate(5px, 0) skewX(-0.8deg);
    filter: drop-shadow(-7px 0 0 rgba(255, 0, 64, 0.8))
            drop-shadow(7px 0 0 rgba(0, 224, 255, 0.8));
}

/* ---- Rispetto delle preferenze di movimento ridotto ---- */
@media (prefers-reduced-motion: reduce) {
    .divMainHome main { animation: none; }

    .divMainHome.glitch-hit main,
    .divMainHome.glitch-hit .logoHome,
    .divMainHome.glitch-hit .divTxtHome1,
    .divMainHome.glitch-hit .divTxtHome2,
    .divMainHome.glitch-hit .divTxtHome3,
    .divMainHome.glitch-hit .svg-orbit {
        transform: none;
        filter: none;
        text-shadow: none;
        clip-path: none;
    }

    .divMainHome::before { opacity: 0.15; }
    .divMainHome::after { display: none; }
}