/* ===============================

   CONFIGURAZIONE CRT

   =============================== */



:root {

  /* Colore di sfondo del CRT (quasi nero con un filo di verde) */

  --crt-bg: #031003;



  /* Colore del fosforo acceso (verde IBM classico) */

  --crt-phosphor: #48ff7b;



  /* Intensità del bagliore esterno e interno */

  --crt-glow-outer: 0.6;

  --crt-glow-inner: 0.85;



  /* Altezza e opacità delle scanlines */

  --crt-scanline-size: 5px;

  --crt-scanline-alpha: 0.63;



  /* Parametri dello sfarfallio */

  --crt-flicker-strength: 0.1;

  --crt-flicker-speed: 5s;



  /* Parametri della barra di refresh */

  --crt-refresh-speed: 5s;

  --crt-refresh-alpha: 0.11;



  /* Aberrazione cromatica (sdoppiamento RGB) */

  --crt-aberration: 0.7px;



  /* Vignettatura e curvatura angoli */

  --crt-vignette: 0.35;

  --crt-corner-curve: 22px;



  /* Grana/rumore */

  --crt-noise-amount: 0.015;



  /* Font stile terminale IBM */

  --crt-font: ui-monospace, "IBM Plex Mono", monospace;

  --crt-font-size: 12px;

  --crt-line-height: 1.25;



  /* Padding interno del contenitore */

  --crt-padding: 10px;

}



/* ===============================

   CONTENITORE CRT

   =============================== */



.crt {

  position: relative;

  display: block;

  padding: var(--crt-padding);



  background: var(--crt-bg);

  color: var(--crt-phosphor);



  font-family: var(--crt-font);

  font-size: var(--crt-font-size);

  line-height: var(--crt-line-height);



  border-radius: var(--crt-corner-curve);

  overflow: hidden;



  /* Glow con fallback per browser che non supportano color-mix */

  box-shadow:

    0 0 calc(18px * var(--crt-glow-outer)) rgba(72,255,123,0.45),

    inset 0 0 calc(22px * var(--crt-glow-inner)) rgba(72,255,123,0.35);



  /* Glow moderno con color-mix (se supportato) */

  @supports (color-mix(in srgb, red 50%, blue)) {

    box-shadow:

      0 0 calc(18px * var(--crt-glow-outer)) color-mix(in srgb, var(--crt-phosphor) 45%, transparent),

      inset 0 0 calc(22px * var(--crt-glow-inner)) color-mix(in srgb, var(--crt-phosphor) 35%, transparent);

  }



  /* Animazione flicker */

  animation: crt-flicker var(--crt-flicker-speed) infinite linear;

}



/* Glow del testo */

.crt, .crt * {

  text-shadow:

    0 0 1px rgba(72,201,111,0.25),

    0 0 6px rgba(72,255,123,0.25);

}



/* ===============================

   SCANLINES + VIGNETTA

   =============================== */



.crt::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;



  background:

    radial-gradient(

      circle at 50% 50%,

      rgba(0,0,0,0) calc(60% - (20% * var(--crt-vignette))),

      rgba(0,0,0,0.15) calc(75% - (10% * var(--crt-vignette))),

      rgba(0,0,0,0.35) 100%

    ),

    repeating-linear-gradient(

      to right,

      rgba(0,0,0,0) 0,

      rgba(0,0,0,0) calc(var(--crt-scanline-size) - 1px),

      rgba(0,0,0,var(--crt-scanline-alpha)) var(--crt-scanline-size)

    );



  mix-blend-mode: multiply;

}



/* ===============================

   BARRA DI REFRESH

   =============================== */



.crt::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;



  background: linear-gradient(

    180deg,

    rgba(255,255,255,0) 0%,

    rgba(255,255,255,var(--crt-refresh-alpha)) 50%,

    rgba(255,255,255,0) 100%

  );



  animation: crt-refresh var(--crt-refresh-speed) linear infinite;

}



/* ===============================

   GRANA / RUMORE

   =============================== */



.crt-noise {

  position: absolute;

  inset: -100px; /* Estende oltre il contenitore per effetto */

  pointer-events: none;



  background-image:

    radial-gradient(rgba(255,255,255,var(--crt-noise-amount)) 1px, transparent 1px);

  background-size: 3px 3px;

  opacity: 0.6;

  mix-blend-mode: overlay;



  animation: crt-noise 40s linear infinite;

}



/* ===============================

   ABERRAZIONE CROMATICA

   =============================== */



.crt .rgb-split {

  position: relative;

  isolation: isolate;

}



.crt .rgb-split::before,

.crt .rgb-split::after {

  content: attr(data-text); /* Assicurati che l'elemento abbia data-text */

  position: absolute;

  inset: 0;

  pointer-events: none;

}



.crt .rgb-split::before {

  color: #ff0040; /* Rosso */

  transform: translateX(calc(var(--crt-aberration) * -1));

  mix-blend-mode: screen;

  opacity: 0.65;

}



.crt .rgb-split::after {

  color: #00c2ff; /* Blu */

  transform: translateX(var(--crt-aberration));

  mix-blend-mode: screen;

  opacity: 0.65;

}



/* ===============================

   ACCESSIBILITÀ

   =============================== */



@media (prefers-reduced-motion: reduce) {

  .crt, .crt::before, .crt::after, .crt-noise {

    animation: none !important;

    filter: none !important;

  }

}



/* ===============================

   TEMI RAPIDI

   =============================== */



.crt--green  { --crt-phosphor: #48ff7b; }

.crt--amber  { --crt-phosphor: #ffb000; }

.crt--white  { --crt-phosphor: #eaffff; }



/* ===============================

   ANIMAZIONI

   =============================== */



@keyframes crt-flicker {

  0%, 100% { filter: brightness(1); }

  50% { filter: brightness(calc(1 + var(--crt-flicker-strength))); }

}



@keyframes crt-refresh {

  0%   { transform: translateY(-100%); }

  100% { transform: translateY(200%); }

}



@keyframes crt-noise {

  0%   { transform: translate3d(0, 0, 0); }

  50%  { transform: translate3d(-10px, 6px, 0); }

  100% { transform: translate3d(0, 0, 0); }

}