/* Effet glitch du titre : deux copies en décalage chromatique (magenta/cyan),
   découpées en fines bandes qui apparaissent par brèves salves aléatoires.
   Pur CSS, la classe est posée par le template si l'effet est activé
   (variable GLITCH). La copie des textes utilise data-text="{{ brand }}"
   sur le <h1>. Invisible la plupart du temps (clip-path: inset(0 0 100% 0)),
   une salve = 1 à 3 bandes très fines sur 1-2 % du cycle. */

.glitch {
    position: relative;
}

/* Sans néon actif, on reproduit la mise en forme de base du titre. */
.glitch:not(.neon) {
    margin: 0;
    padding: 0 0.4em;
    font-weight: 700;
    font-size: clamp(2.2rem, 11vw, 7.5rem);
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    color: #fdf6ff;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    clip-path: inset(0);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    opacity: 0.5;
    mix-blend-mode: screen;
}

.glitch::before {
    color: #ff2bd6;
    animation: glitch-a 4.7s infinite linear;
}

.glitch::after {
    color: #29fff0;
    animation: glitch-b 3.8s infinite linear;
}

@keyframes glitch-a {
    0%   { clip-path: inset(0 0 100% 0); transform: none; }
    4%   { clip-path: inset(18% 0 76% 0); transform: translate(2px, 0); }
    5.5% { clip-path: inset(0 0 100% 0); transform: none; }
    20%  { clip-path: inset(0 0 100% 0); transform: none; }
    21%  { clip-path: inset(55% 0 38% 0); transform: translate(-2px, 1px); }
    22.5%{ clip-path: inset(0 0 100% 0); transform: none; }
    38%  { clip-path: inset(0 0 100% 0); transform: none; }
    39%  { clip-path: inset(30% 0 62% 0); transform: translate(1px, -1px); }
    40%  { clip-path: inset(72% 0 20% 0); transform: translate(-1px, 0); }
    42%  { clip-path: inset(0 0 100% 0); transform: none; }
    58%  { clip-path: inset(0 0 100% 0); transform: none; }
    59%  { clip-path: inset(8% 0 86% 0); transform: translate(2px, 0); }
    60.5%{ clip-path: inset(0 0 100% 0); transform: none; }
    80%  { clip-path: inset(0 0 100% 0); transform: none; }
    81%  { clip-path: inset(48% 0 44% 0); transform: translate(-2px, 1px); }
    82%  { clip-path: inset(0 0 100% 0); transform: none; }
    100% { clip-path: inset(0 0 100% 0); transform: none; }
}

@keyframes glitch-b {
    0%   { clip-path: inset(0 0 100% 0); transform: none; }
    7%   { clip-path: inset(60% 0 30% 0); transform: translate(-2px, 0); }
    8.5% { clip-path: inset(0 0 100% 0); transform: none; }
    26%  { clip-path: inset(0 0 100% 0); transform: none; }
    27%  { clip-path: inset(10% 0 84% 0); transform: translate(2px, 1px); }
    28%  { clip-path: inset(0 0 100% 0); transform: none; }
    45%  { clip-path: inset(0 0 100% 0); transform: none; }
    46%  { clip-path: inset(40% 0 52% 0); transform: translate(-1px, -1px); }
    47%  { clip-path: inset(82% 0 8% 0); transform: translate(1px, 0); }
    49%  { clip-path: inset(0 0 100% 0); transform: none; }
    66%  { clip-path: inset(0 0 100% 0); transform: none; }
    67%  { clip-path: inset(25% 0 68% 0); transform: translate(2px, 0); }
    68.5%{ clip-path: inset(0 0 100% 0); transform: none; }
    88%  { clip-path: inset(0 0 100% 0); transform: none; }
    89%  { clip-path: inset(70% 0 20% 0); transform: translate(-2px, 1px); }
    90%  { clip-path: inset(0 0 100% 0); transform: none; }
    100% { clip-path: inset(0 0 100% 0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .glitch::before,
    .glitch::after {
        display: none;
    }
}