/* ── Neon flicker (hero text) ── */
@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0; }
}

@keyframes neon-flicker-outline {
    0%, 18%, 22%, 24%, 26%, 53%, 57%, 100% { opacity: 1; }
    19%, 25%, 54% { opacity: 0; }
}

#text-back {
    animation: neon-flicker 1.5s infinite alternate;
}

#text-front {
    animation: neon-flicker-outline 1.5s infinite alternate;
}

/* ── Boot overlay (glitch fade) ── */
#boot-overlay {
    position: fixed;
    inset: 0;
    background: var(--c-bg);
    z-index: var(--z-overlay);
    pointer-events: none;
}

#boot-overlay.dissolve {
    animation: boot-glitch 0.5s ease-out forwards;
}

@keyframes boot-glitch {
    0% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
    15% {
        opacity: 1;
        clip-path: inset(10% 0 30% 0);
    }
    25% {
        opacity: 0.8;
        clip-path: inset(40% 0 10% 0);
    }
    35% {
        opacity: 0.6;
        clip-path: inset(5% 0 60% 0);
    }
    50% {
        opacity: 0.4;
        clip-path: inset(70% 0 5% 0);
    }
    65% {
        opacity: 0.2;
        clip-path: inset(20% 0 50% 0);
    }
    80% {
        opacity: 0.1;
        clip-path: inset(0 0 80% 0);
    }
    100% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
    }
}

/* ── Mouvement réduit (réglage système) : ni flash néon, ni glitch, ni transitions ──
   Le JS (app.js) n'installe alors ni canvas glitch ni parallax : l'image du fragment reste visible. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    #skull-piece img { visibility: visible !important; }
}