/* Bruit statique permanent, plus prononcé et visible façon signal dégradé */
.static-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:staticShift 0.15s steps(2) infinite;
}

@keyframes staticShift{
  0%{transform:translate(0,0);}
  100%{transform:translate(-3%,2%);}
}

/* Scanlines plus marquées, façon écran cathodique en mauvais état */
.static-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0.22) 0px, transparent 1px, transparent 3px);
  opacity:0.5;
}

/* Sursaut de "perte de signal" : le calque de base devient nettement visible
   et se teinte rouge/cyan (channel split) le temps du burst. */
.static-overlay.burst{
  mix-blend-mode:difference;
}
.static-overlay.burst::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(180deg, rgba(255,0,60,0.35) 0px, transparent 2px, transparent 5px);
  transform:translateX(4px);
  mix-blend-mode:screen;
}
.static-overlay.burst::after{
  background:repeating-linear-gradient(180deg, rgba(0,255,255,0.3) 0px, transparent 2px, transparent 5px);
  transform:translateX(-4px);
  mix-blend-mode:screen;
  opacity:1;
}

/* Bandes de déchirure générées par JS pendant un burst : chaque bande est
   un morceau d'écran qui saute horizontalement, comme un signal qui saccade. */
.glitch-bar{
  position:fixed;
  left:0;
  width:100%;
  z-index:9998;
  pointer-events:none;
  mix-blend-mode:difference;
}

/* Effet glitch appliqué ponctuellement à un élément (image, titre...) par JS —
   décalage et séparation des couleurs beaucoup plus marqués. */
.glitching{
  position:relative;
  animation:glitchJump 0.45s steps(5) 1;
}
.glitching::before,
.glitching::after{
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  mix-blend-mode:screen;
  pointer-events:none;
}
.glitching::before{
  clip-path:polygon(0 8%, 100% 8%, 100% 32%, 0 32%);
  transform:translate(10px, 0);
  filter:hue-rotate(-60deg) saturate(5) brightness(1.3);
  animation:glitchSliceA 0.45s steps(3) 1;
}
.glitching::after{
  clip-path:polygon(0 55%, 100% 55%, 100% 82%, 0 82%);
  transform:translate(-10px, 0);
  filter:hue-rotate(60deg) saturate(5) brightness(1.3);
  animation:glitchSliceB 0.45s steps(3) 1;
}

@keyframes glitchJump{
  0%{transform:translate(0,0);}
  20%{transform:translate(-8px, 3px);}
  40%{transform:translate(9px, -4px);}
  60%{transform:translate(-6px, 2px);}
  80%{transform:translate(5px,0);}
  100%{transform:translate(0,0);}
}
@keyframes glitchSliceA{
  0%{transform:translate(10px,0);}
  33%{transform:translate(-14px,0);}
  66%{transform:translate(8px,0);}
  100%{transform:translate(0,0);}
}
@keyframes glitchSliceB{
  0%{transform:translate(-10px,0);}
  33%{transform:translate(14px,0);}
  66%{transform:translate(-8px,0);}
  100%{transform:translate(0,0);}
}

/* Désalignement de section plus net, comme une image qui saute physiquement */
.jitter{
  animation:sectionJitter 0.5s steps(6) 1;
}
@keyframes sectionJitter{
  0%{transform:translate(0,0) rotate(0deg);}
  16%{transform:translate(4px,-3px) rotate(-0.4deg);}
  33%{transform:translate(-5px,3px) rotate(0.5deg);}
  50%{transform:translate(3px,-2px) rotate(-0.3deg);}
  66%{transform:translate(-3px,1px) rotate(0.2deg);}
  83%{transform:translate(2px,0) rotate(-0.1deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}

@media (prefers-reduced-motion: reduce){
  .static-overlay{animation:none; opacity:0.015 !important;}
  .static-overlay::after, .static-overlay::before{display:none;}
  .glitching, .glitching::before, .glitching::after{animation:none;}
  .jitter{animation:none;}
  .glitch-bar{display:none;}
}

.static-overlay.intensity-off{display:none;}
.static-overlay.intensity-low{opacity:0.05;}
.static-overlay.intensity-medium{opacity:0.09;}
.static-overlay.intensity-high{opacity:0.16;}

.static-overlay.intensity-low.burst{opacity:0.3;}
.static-overlay.intensity-medium.burst{opacity:0.4;}
.static-overlay.intensity-high.burst{opacity:0.55;}

/* fragments de texte façon logs système, dispersés sur le site */
.terminal-fragment{
  font-family:'Courier New', Courier, monospace;
  font-size:10px;
  letter-spacing:0.05em;
  color:var(--acier-clair);
  opacity:0.4;
  pointer-events:none;
  user-select:none;
}
.terminal-fragment-hero{
  position:absolute;
  bottom:24px;
  left:24px;
  z-index:2;
}
.terminal-fragment-inline{
  margin-left:14px;
  vertical-align:middle;
}
@media (max-width:640px){
  .terminal-fragment-hero{display:none;}
}