/* Glitch v2 — plus nerveux, plus propre */
.glitch{
  position: relative;
  display: inline-block;
  line-height: 1;                  /* évite les décalages verticals */
  --gap: 2px;                      /* intensité de décalage */
  --skew: 4deg;                    /* skew max du texte */
  --dur: 3s;                     /* durée principale */
  --c1: #f90f3347;                   /* canal 1 (rouge/rose) */
  --c2: #00ffbf42;                   /* canal 2 (cyan) */
  animation:
    glitch-skew var(--dur) ease-in-out infinite alternate,
    glitch-flash calc(var(--dur) * 1.5) steps(1,end) infinite;
  will-change: transform, opacity;
  margin-bottom: -3px;
}

/* Canal principal — rien à faire, sert de base */

/* Canaux décalés (R et C) en overlay */
.glitch::before,
.glitch::after{
  content: attr(title);
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  /* bandes horizontales façon TV */
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 6px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 6px);
}

/* Rouge/rose (haut/bas alterné) */
.glitch::before{
  color: var(--c1);
  mix-blend-mode: screen;
  animation: glitch-shift-1 calc(var(--dur) * .7) steps(1,end) infinite;
}

/* Cyan (patron différent pour casser la symétrie) */
.glitch::after{
  color: var(--c2);
  mix-blend-mode: screen;
  animation: glitch-shift-2 var(--dur) steps(1,end) infinite;
  /* inverse la phase des bandes pour plus de bruit visuel */
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 3px, #000 3px 6px);
  mask-image: repeating-linear-gradient(to bottom, transparent 0 3px, #000 3px 6px);
}

/* Skew doux du texte “central” */
@keyframes glitch-skew{
  0%   { transform: skew(0); }
  50%  { transform: skew(var(--skew)); }
  100% { transform: skew(0); }
}

/* Micro “flash” irrégulier (évite la monotonie) */
@keyframes glitch-flash{
  0%, 100% { opacity: 1; }
  32%      { opacity: .96; }
  33%      { opacity: 1; }
  66%      { opacity: .92; }
  67%      { opacity: 1; }
}

/* Décalage saccadé pseudo-aléatoire — canal 1 */
@keyframes glitch-shift-1{
  0%   { transform: translate(0,0); }
  5%   { transform: translate(var(--gap), -1px); }
  10%  { transform: translate(calc(var(--gap) * -1), 1px); }
  15%  { transform: translate(calc(var(--gap) * 3), 0); }
  20%  { transform: translate(calc(var(--gap) * -2), 0); }
  25%  { transform: translate(calc(var(--gap) * 2), 1px); }
  30%  { transform: translate(calc(var(--gap) * -1), -1px); }
  35%  { transform: translate(calc(var(--gap) * 4), 2px); }
  40%  { transform: translate(calc(var(--gap) * -3), -1px); }
  45%  { transform: translate(var(--gap), 1px); }
  50%  { transform: translate(0,0); }
  55%  { transform: translate(calc(var(--gap) * -2), 1px); }
  60%  { transform: translate(calc(var(--gap) * 2), -1px); }
  65%  { transform: translate(calc(var(--gap) * -4), 0); }
  70%  { transform: translate(calc(var(--gap) * 3), 2px); }
  75%  { transform: translate(calc(var(--gap) * -2), -1px); }
  80%  { transform: translate(calc(var(--gap) * 2), 1px); }
  85%  { transform: translate(calc(var(--gap) * -1), 0); }
  90%  { transform: translate(var(--gap), -1px); }
  95%  { transform: translate(calc(var(--gap) * -1), 1px); }
  100% { transform: translate(0,0); }
}

/* Décalage saccadé pseudo-aléatoire — canal 2 */
@keyframes glitch-shift-2{
  0%   { transform: translate(0,0); }
  6%   { transform: translate(calc(var(--gap) * -1), 1px) skew(-1deg); }
  12%  { transform: translate(calc(var(--gap) * 2), -1px) skew(1deg); }
  18%  { transform: translate(calc(var(--gap) * -3), 0); }
  24%  { transform: translate(var(--gap), -2px); }
  30%  { transform: translate(calc(var(--gap) * -2), 1px); }
  36%  { transform: translate(calc(var(--gap) * 3), 0); }
  42%  { transform: translate(calc(var(--gap) * -1), -1px); }
  48%  { transform: translate(calc(var(--gap) * 2), 2px); }
  54%  { transform: translate(calc(var(--gap) * -4), -1px); }
  60%  { transform: translate(0,0); }
  66%  { transform: translate(calc(var(--gap) * 3), 1px); }
  72%  { transform: translate(calc(var(--gap) * -2), 0) skew(2deg); }
  78%  { transform: translate(var(--gap), -1px); }
  84%  { transform: translate(calc(var(--gap) * -3), 2px); }
  90%  { transform: translate(calc(var(--gap) * 2), -1px); }
  96%  { transform: translate(calc(var(--gap) * -1), 0); }
  100% { transform: translate(0,0); }
}

/* Fallback si mix-blend-mode indisponible (ex: vieux Edge) */
@supports not (mix-blend-mode: screen){
  .glitch::before,
  .glitch::after{ mix-blend-mode: normal; }
  .glitch::before{ text-shadow: 1px 0 var(--c1); }
  .glitch::after{ text-shadow: -1px 0 var(--c2); }
}

/* Accessibilité / confort */
@media (prefers-reduced-motion: reduce){
  .glitch,
  .glitch::before,
  .glitch::after{ animation: none !important; }
}