/* OVERLAY TRANSIZIONE CRT */
.crt-transition{
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;

  /* base: schermo nero */
  background: #000;

  opacity: 0;
  visibility: hidden;
}

/* Quando è attivo */
.crt-transition.is-off,
.crt-transition.is-on{
  opacity: 1;
  visibility: visible;
}

/* 1) LAYER ANIMATO: flash + “line collapse” */
.crt-transition::before{
  content:"";
  position: absolute;
  inset: 0;
  transform-origin: center;
  opacity: 0;

  /* “luce” visibile */
  background: rgba(255,255,255,0.85);
  filter: blur(0.6px);
}

/* OFF: flash + collasso in linea */
.crt-transition.is-off::before{
  animation: crtOff 520ms ease-in forwards;
}

/* ON: linea -> pieno + svanisce */
.crt-transition.is-on::before{
  animation: crtOn 520ms ease-out forwards;
}

@keyframes crtOff{
  0%   { opacity: 0; transform: scaleY(1); }
  12%  { opacity: 1; transform: scaleY(1); }       /* flash */
  55%  { opacity: .35; transform: scaleY(0.06); }  /* quasi linea */
  100% { opacity: 0; transform: scaleY(0); }       /* linea sparisce */
}

@keyframes crtOn{
  0%   { opacity: 0; transform: scaleY(0); }
  25%  { opacity: 1; transform: scaleY(0.08); }    /* linea “accende” */
  100% { opacity: 0; transform: scaleY(1); }       /* pieno e svanisce */
}

/* 2) LAYER CRT: scanlines + noise + vignette (solo quando attivo) */
.crt-transition::after{
  content:"";
  position: absolute;
  inset: 0;

  background:
    /* scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      rgba(0,0,0,0) 3px
    ),
    /* vignetta */
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,0.55) 100%
    );

  opacity: 0;
  mix-blend-mode: overlay;
  animation: none;
}

/* attivo: mostra CRT + noise “vibrato” */
.crt-transition.is-off::after,
.crt-transition.is-on::after{
  opacity: 0.55;
  animation: crtNoise 140ms steps(2, end) infinite;
}

/* noise: micro-variazioni (leggere) */
@keyframes crtNoise{
  0%   { transform: translate(0,0); filter: contrast(1.05); }
  25%  { transform: translate(-1px,1px); filter: contrast(1.10); }
  50%  { transform: translate(1px,-1px); filter: contrast(1.06); }
  75%  { transform: translate(-1px,-1px); filter: contrast(1.12); }
  100% { transform: translate(0,0); filter: contrast(1.05); }
}