/**
 * EFFETS VISUELS CRT (ÉCRAN À TUBE CATHODIQUE)
 * 
 * Ce fichier contient les animations et effets qui simulent
 * l'apparence d'un ancien écran CRT (moniteur à tube cathodique).
 *
 * Les effets incluent:
 * - Scintillement (flicker): variation aléatoire de la luminosité
 * - Ombre de texte (textShadow): simulation de l'aberration chromatique
 * - Lignes de balayage (scanlines): lignes horizontales transparentes
 */

/* Animation de scintillement - simule les variations de luminosité d'un vieux moniteur */
@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
/* 
 * Animation d'ombre de texte - simule l'aberration chromatique des moniteurs CRT
 * Les vieux moniteurs créaient souvent une légère séparation des couleurs aux bords du texte
 * Cette animation fait varier légèrement cette séparation pour simuler l'instabilité
 */
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
/**
 * Effet de lignes de balayage (scanlines)
 * 
 * Cette classe ajoute une surcouche au-dessus de tout le contenu qui simule:
 * 1. Les lignes de balayage horizontales (première répétition de dégradé)
 * 2. Une légère distorsion des couleurs (seconde répétition de dégradé)
 * 
 * L'élément est en position fixe pour couvrir tout l'écran et
 * utilise pointer-events: none pour laisser les clics passer à travers.
 */
.crt::after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: 
    /* Lignes de balayage horizontales */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.1) 2px,
      rgba(0, 0, 0, 0.1) 3px
    ),
    /* Légère distorsion des couleurs */
    repeating-linear-gradient(
      90deg,
      rgba(0, 255, 65, 0.03) 0px,
      rgba(255, 0, 65, 0.03) 1px,
      rgba(65, 0, 255, 0.03) 2px
    );
  z-index: 1000;
  pointer-events: none;
  opacity: 1;
  animation: flicker 0.15s infinite;
}
/**
 * Effet de bombement d'écran
 * 
 * Ce pseudo-élément simule la courbure des anciens écrans CRT
 * en créant un léger assombrissement sur les bords de l'écran.
 */
.crt::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.1) 100%);
  z-index: 999;
  pointer-events: none;
}

/* Effet d'ombre de texte appliqué à tous les textes dans .crt */
.crt {
  animation: textShadow 1.6s infinite;
}

/**
 * Variables CSS pour les thèmes CRT
 * 
 * Ces variables définissent le thème par défaut (vert)
 * et sont remplacées par JavaScript selon le thème choisi
 */
:root {
    --crt-background-color: #001100;  /* Fond noir-verdâtre */
    --crt-text-color: #00ff41;        /* Texte vert phosphorescent */
    --crt-link-color: #ffff00;        /* Liens en jaune */
    --crt-subtitle-color: #00cc33;    /* Sous-titres en vert plus doux */
}

/**
 * Styles de base pour le mode CRT
 * 
 * Ces classes appliquent les couleurs de base du thème CRT
 * aux éléments principaux. Ces styles sont complémentaires à ceux
 * dans style.css et s'appliquent quand la classe .crt-mode est présente.
 */
.crt-mode {
    background: var(--crt-background-color);
    color: var(--crt-text-color);
}

.crt-mode a {
    color: var(--crt-link-color);
}

.crt-mode h2 {
    color: var(--crt-subtitle-color);
}