/* Enhanced corruption effects for AVU-css */
/* An addon for AVU-CSS */

/* Base corruption layer */
:root {
  --glitch-color1: #ff0000;
  --glitch-color2: #0000ff;
  --glitch-color3: #00ff00;
  --corrupt-bg: rgba(255, 0, 0, 0.03);
}

body {
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--corrupt-bg);
  pointer-events: none;
  z-index: 9990;
  animation: fluctuate-bg 8s infinite;
}

@keyframes fluctuate-bg {
  0%, 100% { background-color: rgba(255, 0, 0, 0.03); }
  25% { background-color: rgba(0, 255, 0, 0.02); }
  50% { background-color: rgba(255, 0, 0, 0.05); }
  75% { background-color: rgba(0, 0, 255, 0.04); }
}

/* Enhanced glitch text effect */
.glitch-text {
  position: relative;
  display: inline-block;
  animation: severe-glitch 3s infinite;
  transform-origin: center;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, 0, 0, 0);
}

.glitch-text::before {
  left: -2px;
  text-shadow: 2px 0 var(--glitch-color1);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: 2px;
  text-shadow: -2px 0 var(--glitch-color2);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes severe-glitch {
  0%, 100% { transform: translate(0); }
  7% { transform: translate(-2px, 3px); }
  10% { transform: translate(-4px, -2px) skewX(3deg); }
  20% { transform: translate(0); }
  23% { transform: translate(3px, 1px) skewX(-2deg); }
  27% { transform: translate(0); }
  38% { transform: translate(1px, -4px); }
  40% { transform: translate(-3px, 2px); }
  50% { transform: translate(0); }
  62% { transform: translate(2px, -1px) skewX(1deg); }
  75% { transform: translate(0); }
  87% { transform: translate(-2px, 3px); }
  90% { transform: translate(3px, -6px); }
  95% { transform: translate(-3px, 1px); }
}

@keyframes glitch-anim-1 {
  0% { clip: rect(2px, 9999px, 12px, 0); }
  20% { clip: rect(52px, 9999px, 73px, 0); }
  40% { clip: rect(16px, 9999px, 100px, 0); }
  60% { clip: rect(87px, 9999px, 32px, 0); }
  80% { clip: rect(5px, 9999px, 53px, 0); }
  100% { clip: rect(25px, 9999px, 15px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(62px, 9999px, 78px, 0); }
  20% { clip: rect(3px, 9999px, 23px, 0); }
  40% { clip: rect(42px, 9999px, 14px, 0); }
  60% { clip: rect(92px, 9999px, 62px, 0); }
  80% { clip: rect(28px, 9999px, 36px, 0); }
  100% { clip: rect(99px, 9999px, 85px, 0); }
}

/* Multiple scan lines */
.screen-error {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    transparent 0px,
    rgba(0, 0, 0, 0.05) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 9999;
  animation: flicker 0.15s infinite alternate;
}

.screen-error::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 0, 0, 0.6);
  animation: scan 3s linear infinite;
  z-index: 10000;
}

.screen-error::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 255, 255, 0.4);
  animation: scan 4.5s linear infinite 1.5s;
  z-index: 10000;
}

@keyframes scan {
  0% { top: -10px; }
  100% { top: 100%; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.97; }
}

/* Screen tear effect */
.screen-tear {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
}

.screen-tear::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: black;
  animation: tear 10s infinite;
}

@keyframes tear {
  0%, 100% { top: -100px; }
  10% { top: 20%; }
  10.1% { top: 20.1%; }
  10.2% { top: -100px; }
  50% { top: -100px; }
  60% { top: 50%; }
  60.1% { top: 50.1%; }
  60.2% { top: -100px; }
  85% { top: 75%; }
  85.1% { top: 75.1%; }
  85.2% { top: -100px; }
}

/* Corrupted section enhancements */
.corrupted-section {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glitch-color1);
  margin-bottom: 20px;
  animation: border-glitch 5s infinite;
}

.corrupted-section::before {
  content: "[CORRUPTED DATA]";
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--glitch-color1);
  font-weight: bold;
  animation: blink 0.7s infinite;
  z-index: 100;
}

.corrupted-section::after {
  content: "[SYSTEM FAILURE]";
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: var(--glitch-color2);
  font-weight: bold;
  animation: blink 1.1s infinite 0.3s;
  z-index: 100;
}

@keyframes border-glitch {
  0%, 100% { border-color: var(--glitch-color1); }
  25% { border-color: var(--glitch-color2); }
  50% { border-color: var(--glitch-color3); }
  75% { border-color: #ff00ff; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Corrupted images */
img {
  position: relative;
  transition: filter 0.3s;
}

img:hover {
  filter: hue-rotate(180deg) saturate(200%) contrast(150%);
  animation: img-corrupt 2s infinite;
}

@keyframes img-corrupt {
  0%, 100% { filter: hue-rotate(180deg) saturate(200%) contrast(150%); }
  25% { filter: hue-rotate(90deg) saturate(300%) contrast(120%) brightness(1.2); }
  50% { filter: hue-rotate(270deg) saturate(100%) contrast(200%) brightness(0.8); }
  75% { filter: invert(80%) hue-rotate(30deg) contrast(150%); }
}

/* Random text corruption */
p, h1, h2, h3, h4, button {
  position: relative;
}

p::after, h1::after, h2::after, h3::after, h4::after, button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
  animation: text-corrupt 10s infinite;
}

@keyframes text-corrupt {
  0%, 95%, 100% { background: transparent; }
  96% { background: rgba(255, 0, 0, 0.2); }
  97% { background: rgba(0, 255, 255, 0.2); }
  98% { background: rgba(255, 255, 0, 0.2); }
}

/* Digital noise effect */
.digital-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: 9997;
  animation: noise-intensity 8s infinite;
}

@keyframes noise-intensity {
  0%, 100% { opacity: 0.02; }
  50% { opacity: 0.04; }
}

/* Random offset elements */
.random-offset {
  position: relative;
  animation: random-move 3s infinite;
}

@keyframes random-move {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(2px, -2px); }
  20% { transform: translate(-1px, 1px); }
  30% { transform: translate(3px, 0px); }
  40% { transform: translate(0px, 2px); }
  50% { transform: translate(-3px, -1px); }
  60% { transform: translate(0px, 3px); }
  70% { transform: translate(-2px, 0px); }
  80% { transform: translate(1px, -3px); }
  90% { transform: translate(-1px, -1px); }
}

/* Error messages that randomly appear */
body::after {
  content: "ERR0R_D3T3CT3D";
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff0000;
  color: #ffffff;
  font-family: monospace;
  padding: 5px 15px;
  font-size: 14px;
  border-radius: 0 0 5px 5px;
  animation: error-message 15s infinite;
  z-index: 10001;
}

@keyframes error-message {
  0%, 95%, 100% { top: -100px; }
  96%, 99% { top: 0; }
}

/* Terminal glitch */
.terminal {
  position: relative;
  overflow: hidden;
}

.terminal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, rgba(0, 255, 0, 0.1), transparent);
  animation: terminal-scan 3s linear infinite;
  pointer-events: none;
}

@keyframes terminal-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* Broken button styles */
button {
  overflow: hidden;
  position: relative;
}

button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
  animation: button-glitch 8s infinite;
}

@keyframes button-glitch {
  0%, 100% { left: -100%; }
  50%, 50.1% { left: 100%; }
}

/* Additional corruption classes */
.misaligned {
  display: inline-block;
  transform: skew(-5deg, 1deg);
}

.scrambled-text {
  font-family: monospace;
  letter-spacing: -1px;
}

.data-loss {
  position: relative;
}

.data-loss::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.3) 10px,
    transparent 10px,
    transparent 20px
  );
}

.vhs-effect {
  position: relative;
  display: inline-block;
  color: #fff;
  text-shadow: 
    0.06em 0 0 rgba(255, 0, 0, 0.75),
    -0.05em 0 0 rgba(0, 255, 255, 0.75);
}

.binary-corrupt::after {
  content: "PLEASE SEND HELP";
  position: absolute;
  font-size: 0.5em;
  opacity: 0.5;
  top: 0;
  right: 0;
}

/* Low end mode */

/* À ajouter dans assets/css/style.css */
.low-end-mode {
  position: sticky;
  bottom: 0;
  width: 100%;
  margin-top: auto;
  border-top: 1px solid #00ff00;
  background-color: #000000;
}


.low-end-button {
    padding: 8px 16px;
    background-color: #000000;
    color: #00ff00;
    border: 1px solid #00ff00;
    cursor: pointer;
    font-family: 'MonaspaceKrypton-Regular', monospace;
    font-size: 14px;
    transition: all 0.3s;
    width: 100%;
}

.low-end-button:hover {
    background-color: #202020;
}

.low-end-button.active {
    background-color: #00ff00;
    color: #000000;
}

/* Ajustement pour la barre de navigation en mode mobile */
@media screen and (max-width: 768px) {
    wiki-nav.active .low-end-mode {
        display: block;
    }
}