/* Effetti glitch ESTREMI per la transizione al gioco */
@keyframes glitch-screen-extreme {
  0% {
    transform: translate(0) scale(1);
    filter: hue-rotate(0deg) contrast(1) brightness(1);
    clip-path: inset(0);
  }
  5% {
    transform: translate(-10px, 5px) scale(1.02);
    filter: hue-rotate(90deg) contrast(3) brightness(2) saturate(5);
    clip-path: inset(0 0 80% 0);
  }
  10% {
    transform: translate(15px, -8px) scale(0.98);
    filter: hue-rotate(180deg) contrast(5) brightness(0.5) invert(0.3);
    clip-path: inset(20% 0 60% 0);
  }
  15% {
    transform: translate(-20px, 12px) scale(1.05);
    filter: hue-rotate(270deg) contrast(2) brightness(3) saturate(0);
    clip-path: inset(40% 0 40% 0);
  }
  20% {
    transform: translate(25px, -15px) scale(0.95);
    filter: hue-rotate(360deg) contrast(8) brightness(0.2) invert(0.8);
    clip-path: inset(60% 0 20% 0);
  }
  25% {
    transform: translate(-30px, 20px) scale(1.1);
    filter: hue-rotate(45deg) contrast(1) brightness(4) saturate(10);
    clip-path: inset(80% 0 0 0);
  }
  30% {
    transform: translate(35px, -25px) scale(0.9);
    filter: hue-rotate(135deg) contrast(10) brightness(0.1) invert(1);
    clip-path: inset(0 0 0 80%);
  }
  40% {
    transform: translate(-40px, 30px) scale(1.15) skew(5deg);
    filter: hue-rotate(225deg) contrast(0.5) brightness(5) saturate(0.2);
    clip-path: inset(0 80% 0 0);
  }
  50% {
    transform: translate(45px, -35px) scale(0.85) skew(-10deg);
    filter: hue-rotate(315deg) contrast(15) brightness(0.05) invert(0.5);
    clip-path: inset(0 0 80% 0);
  }
  60% {
    transform: translate(-50px, 40px) scale(1.2) rotate(2deg);
    filter: hue-rotate(180deg) contrast(20) brightness(6) saturate(15);
    clip-path: inset(0 0 0 60%);
  }
  70% {
    transform: translate(55px, -45px) scale(0.8) rotate(-3deg);
    filter: hue-rotate(90deg) contrast(0.1) brightness(0.01) invert(0.9);
    clip-path: inset(60% 0 0 0);
  }
  80% {
    transform: translate(-60px, 50px) scale(1.25) skew(15deg);
    filter: hue-rotate(270deg) contrast(25) brightness(7) saturate(20);
    clip-path: inset(0 60% 0 0);
  }
  90% {
    transform: translate(65px, -55px) scale(0.75) rotate(5deg);
    filter: hue-rotate(0deg) contrast(30) brightness(0.001) invert(1);
    clip-path: inset(0 0 60% 0);
  }
  95% {
    transform: translate(-70px, 60px) scale(1.3) skew(-20deg);
    filter: hue-rotate(360deg) contrast(50) brightness(10) saturate(50);
    clip-path: inset(0 0 0 80%);
  }
  100% {
    transform: translate(0) scale(1);
    filter: hue-rotate(0deg) contrast(1) brightness(1);
    clip-path: inset(50% 50% 50% 50%);
  }
}

@keyframes pixel-dissolve-extreme {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 1;
    filter: none;
  }
  10% {
    clip-path: polygon(5% 0%, 95% 5%, 90% 100%, 10% 95%);
    opacity: 0.9;
    filter: contrast(2) saturate(3);
  }
  20% {
    clip-path: polygon(15% 10%, 85% 15%, 80% 90%, 20% 85%);
    opacity: 0.8;
    filter: contrast(5) brightness(2) hue-rotate(90deg);
  }
  30% {
    clip-path: polygon(25% 20%, 75% 25%, 70% 80%, 30% 75%);
    opacity: 0.7;
    filter: contrast(8) brightness(0.5) hue-rotate(180deg) invert(0.3);
  }
  40% {
    clip-path: polygon(35% 30%, 65% 35%, 60% 70%, 40% 65%);
    opacity: 0.6;
    filter: contrast(12) brightness(3) hue-rotate(270deg) saturate(0);
  }
  50% {
    clip-path: polygon(45% 40%, 55% 45%, 50% 60%, 50% 55%);
    opacity: 0.4;
    filter: contrast(20) brightness(0.1) hue-rotate(360deg) invert(0.8);
  }
  60% {
    clip-path: polygon(48% 45%, 52% 48%, 50% 55%, 50% 52%);
    opacity: 0.3;
    filter: contrast(30) brightness(5) hue-rotate(45deg) saturate(10);
  }
  70% {
    clip-path: polygon(49% 48%, 51% 49%, 50% 52%, 50% 51%);
    opacity: 0.2;
    filter: contrast(50) brightness(0.01) hue-rotate(135deg) invert(1);
  }
  80% {
    clip-path: polygon(49.5% 49%, 50.5% 49.5%, 50% 51%, 50% 50.5%);
    opacity: 0.1;
    filter: contrast(100) brightness(10) hue-rotate(225deg) saturate(20);
  }
  90% {
    clip-path: polygon(49.8% 49.5%, 50.2% 49.8%, 50% 50.5%, 50% 50.2%);
    opacity: 0.05;
    filter: contrast(200) brightness(0.001) hue-rotate(315deg) invert(0.5);
  }
  100% {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0;
    filter: contrast(500) brightness(20) saturate(50);
  }
}

/* Screen Tear Effect */
@keyframes screen-tear {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-50px) scaleX(1.1); }
  20% { transform: translateX(30px) scaleX(0.9); }
  30% { transform: translateX(-80px) scaleX(1.2); }
  40% { transform: translateX(60px) scaleX(0.8); }
  50% { transform: translateX(-100px) scaleX(1.3); }
  60% { transform: translateX(90px) scaleX(0.7); }
  70% { transform: translateX(-120px) scaleX(1.4); }
  80% { transform: translateX(110px) scaleX(0.6); }
  90% { transform: translateX(-150px) scaleX(1.5); }
}

/* Datamoshing Effect */
@keyframes datamosh {
  0% { 
    filter: contrast(1) brightness(1);
    transform: scale(1);
  }
  25% { 
    filter: contrast(10) brightness(0.1) hue-rotate(90deg);
    transform: scale(1.1) skew(5deg);
  }
  50% { 
    filter: contrast(0.1) brightness(5) hue-rotate(180deg) invert(0.5);
    transform: scale(0.9) skew(-10deg) rotate(2deg);
  }
  75% { 
    filter: contrast(20) brightness(0.05) hue-rotate(270deg) saturate(0);
    transform: scale(1.2) skew(15deg) rotate(-3deg);
  }
  100% { 
    filter: contrast(50) brightness(10) hue-rotate(360deg) invert(1);
    transform: scale(0.8) skew(-20deg) rotate(5deg);
  }
}

/* Matrix Rain Effect */
@keyframes matrix-rain {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

@keyframes static-noise {
  0%, 100% {
    background-position: 0 0;
  }
  10% {
    background-position: -5% -10%;
  }
  20% {
    background-position: -15% 5%;
  }
  30% {
    background-position: 7% -25%;
  }
  40% {
    background-position: -5% 25%;
  }
  50% {
    background-position: -15% 10%;
  }
  60% {
    background-position: 15% 0%;
  }
  70% {
    background-position: 0% 15%;
  }
  80% {
    background-position: -10% -10%;
  }
  90% {
    background-position: 10% 5%;
  }
}

.glitch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255, 0, 255, 0.03) 2px,
      rgba(255, 0, 255, 0.03) 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 255, 0.03) 2px,
      rgba(0, 255, 255, 0.03) 4px
    );
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: static-noise 0.1s infinite;
}

.glitch-overlay.active {
  opacity: 1;
}

.glitch-transition {
  animation: glitch-screen-extreme 1s ease-in-out;
}

.pixel-dissolve {
  animation: pixel-dissolve-extreme 1.5s ease-in-out forwards;
}

.screen-tear {
  animation: screen-tear 0.3s ease-in-out infinite;
}

.datamosh {
  animation: datamosh 0.8s ease-in-out forwards;
}

/* Console Boot Overlay */
.console-boot {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000 !important;
  background-color: #000 !important;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: clamp(12px, 3.4vw, 16px);
  padding: 12px;
  box-sizing: border-box;
  z-index: 10000;
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.35;
}

.console-boot.active {
  display: block;
}

.boot-text {
  white-space: pre-wrap;
  line-height: 1.3;
  max-width: 92vw;
  margin: 0 auto;
  text-align: left;
}

/* Stile specifico per le righe ASCII VESSANO - font più piccolo */
.boot-text .ascii-art {
  font-size: clamp(8px, 2.2vw, 11px) !important;
  line-height: 1.1 !important;
  display: block;
}

@media (max-width: 768px) {
  .console-boot {
    font-size: clamp(12px, 3.8vw, 16px);
    padding: 12px;
  }
  .boot-text {
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .console-boot {
    font-size: clamp(12px, 4vw, 18px);
    padding: 10px;
  }
  .boot-text {
    line-height: 1.4;
  }
}

@media (max-width: 360px) {
  .console-boot {
    font-size: clamp(11px, 4.4vw, 18px);
  }
}

@keyframes typing {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.7; }
}

/* Matrix Rain Overlay */
.matrix-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    linear-gradient(0deg, 
      transparent 0%, 
      rgba(0, 255, 0, 0.1) 50%, 
      transparent 100%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 255, 0, 0.03) 0px,
      transparent 2px,
      transparent 4px,
      rgba(0, 255, 0, 0.03) 6px
    );
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: matrix-rain 0.1s linear infinite;
}

.matrix-overlay.active {
  opacity: 1;
}

/* Corrupted Pixels */
.corrupted-pixels {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 0, 255, 0.8) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.8) 1px, transparent 1px),
    radial-gradient(circle at 40% 60%, rgba(255, 255, 0, 0.8) 1px, transparent 1px),
    radial-gradient(circle at 60% 20%, rgba(255, 0, 0, 0.8) 1px, transparent 1px),
    radial-gradient(circle at 10% 80%, rgba(0, 255, 0, 0.8) 1px, transparent 1px);
  background-size: 50px 50px, 30px 30px, 70px 70px, 40px 40px, 60px 60px;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  animation: pixel-corruption 0.05s infinite;
}

.corrupted-pixels.active {
  opacity: 1;
}

@keyframes pixel-corruption {
  0% { 
    background-position: 0 0, 10px 10px, 20px 20px, 30px 30px, 40px 40px;
    filter: hue-rotate(0deg);
  }
  25% { 
    background-position: -5px 5px, 15px -5px, 25px 15px, 35px -10px, 45px 20px;
    filter: hue-rotate(90deg);
  }
  50% { 
    background-position: 10px -10px, -10px 20px, -15px -5px, 25px 25px, -20px -15px;
    filter: hue-rotate(180deg);
  }
  75% { 
    background-position: -15px 15px, 25px -15px, 35px 35px, -25px 5px, 55px -25px;
    filter: hue-rotate(270deg);
  }
  100% { 
    background-position: 20px -20px, -20px 30px, -30px -20px, 40px 40px, -40px -30px;
    filter: hue-rotate(360deg);
  }
}

/* Effetto scanlines */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scanlines.active {
  opacity: 1;
}

/* Effetto RGB split */
.rgb-split {
  position: relative;
}

.rgb-split::before,
.rgb-split::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  mix-blend-mode: screen;
}

.rgb-split::before {
  background: rgba(255, 0, 0, 0.8);
  transform: translate(-2px, 0);
  animation: rgb-shift-red 0.1s infinite;
}

.rgb-split::after {
  background: rgba(0, 255, 255, 0.8);
  transform: translate(2px, 0);
  animation: rgb-shift-cyan 0.1s infinite;
}

@keyframes rgb-shift-red {
  0%, 100% { transform: translate(-2px, 0); }
  50% { transform: translate(-4px, -1px); }
}

@keyframes rgb-shift-cyan {
  0%, 100% { transform: translate(2px, 0); }
  50% { transform: translate(4px, 1px); }
}

/* Effetto digital corruption */
.digital-corruption {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    linear-gradient(45deg, 
      rgba(255, 0, 255, 0.1) 0%, 
      transparent 25%, 
      rgba(0, 255, 255, 0.1) 50%, 
      transparent 75%, 
      rgba(255, 255, 0, 0.1) 100%
    );
  pointer-events: none;
  z-index: 9997;
  opacity: 0;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.digital-corruption.active {
  opacity: 1;
  transform: scale(1);
  animation: corruption-flicker 0.1s infinite;
}

@keyframes corruption-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Cinematic Matrix Rain Effect */
.cinematic-matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    radial-gradient(ellipse at center, rgba(0, 255, 0, 0.3) 0%, transparent 70%),
    repeating-linear-gradient(
      0deg,
      rgba(0, 255, 0, 0.8) 0px,
      rgba(0, 255, 0, 0.4) 1px,
      transparent 2px,
      transparent 4px,
      rgba(0, 255, 0, 0.6) 5px,
      transparent 6px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 255, 0, 0.2) 0px,
      transparent 1px,
      transparent 3px,
      rgba(0, 255, 0, 0.4) 4px
    );
  background-size: 100% 100%, 20px 20px, 15px 15px;
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  animation: matrix-cascade 0.8s ease-in-out;
}

.cinematic-matrix.active {
  opacity: 1;
}

@keyframes matrix-cascade {
  0% {
    opacity: 0;
    background-position: 0 -100vh, 0 0, 0 0;
    filter: brightness(0.5) contrast(1.5);
  }
  25% {
    opacity: 0.7;
    background-position: 0 -50vh, -10px 10px, 5px -5px;
    filter: brightness(1.2) contrast(2);
  }
  50% {
    opacity: 1;
    background-position: 0 0, -20px 20px, 10px -10px;
    filter: brightness(1.5) contrast(2.5) hue-rotate(30deg);
  }
  75% {
    opacity: 0.8;
    background-position: 0 50vh, -30px 30px, 15px -15px;
    filter: brightness(1) contrast(2) hue-rotate(60deg);
  }
  100% {
    opacity: 0.3;
    background-position: 0 100vh, -40px 40px, 20px -20px;
    filter: brightness(0.8) contrast(1.5) hue-rotate(90deg);
  }
}

/* Cinematic Screen Corruption */
.cinematic-corruption {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 0, 255, 0.9) 2px, transparent 3px),
    radial-gradient(circle at 75% 75%, rgba(0, 255, 255, 0.9) 2px, transparent 3px),
    radial-gradient(circle at 50% 10%, rgba(255, 255, 0, 0.8) 1px, transparent 2px),
    radial-gradient(circle at 10% 90%, rgba(255, 0, 0, 0.8) 2px, transparent 3px),
    radial-gradient(circle at 90% 50%, rgba(0, 255, 0, 0.8) 1px, transparent 2px),
    linear-gradient(45deg, 
      rgba(255, 0, 255, 0.1) 0%, 
      transparent 20%, 
      rgba(0, 255, 255, 0.1) 40%, 
      transparent 60%, 
      rgba(255, 255, 0, 0.1) 80%, 
      transparent 100%
    );
  background-size: 80px 80px, 60px 60px, 100px 100px, 70px 70px, 90px 90px, 100% 100%;
  pointer-events: none;
  z-index: 99997;
  opacity: 0;
  animation: corruption-storm 1.2s ease-in-out;
}

.cinematic-corruption.active {
  opacity: 1;
}

@keyframes corruption-storm {
  0% {
    opacity: 0;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    filter: brightness(1) contrast(1) hue-rotate(0deg) saturate(1);
    transform: scale(1);
  }
  15% {
    opacity: 0.8;
    background-position: -20px 20px, 30px -30px, -40px 40px, 50px -50px, -60px 60px, 0 0;
    filter: brightness(1.5) contrast(2) hue-rotate(90deg) saturate(2);
    transform: scale(1.02);
  }
  30% {
    opacity: 1;
    background-position: 40px -40px, -60px 60px, 80px -80px, -100px 100px, 120px -120px, 0 0;
    filter: brightness(2) contrast(3) hue-rotate(180deg) saturate(3);
    transform: scale(0.98);
  }
  45% {
    opacity: 0.9;
    background-position: -80px 80px, 100px -100px, -120px 120px, 140px -140px, -160px 160px, 0 0;
    filter: brightness(1.8) contrast(2.5) hue-rotate(270deg) saturate(2.5);
    transform: scale(1.01);
  }
  60% {
    opacity: 0.7;
    background-position: 160px -160px, -180px 180px, 200px -200px, -220px 220px, 240px -240px, 0 0;
    filter: brightness(1.3) contrast(2) hue-rotate(360deg) saturate(2);
    transform: scale(0.99);
  }
  75% {
    opacity: 0.5;
    background-position: -240px 240px, 260px -260px, -280px 280px, 300px -300px, -320px 320px, 0 0;
    filter: brightness(1) contrast(1.5) hue-rotate(450deg) saturate(1.5);
    transform: scale(1);
  }
  90% {
    opacity: 0.3;
    background-position: 320px -320px, -340px 340px, 360px -360px, -380px 380px, 400px -400px, 0 0;
    filter: brightness(0.8) contrast(1.2) hue-rotate(540deg) saturate(1.2);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    background-position: -400px 400px, 420px -420px, -440px 440px, 460px -460px, -480px 480px, 0 0;
    filter: brightness(0.5) contrast(1) hue-rotate(630deg) saturate(1);
    transform: scale(1);
  }
}

/* Cinematic Digital Noise */
.cinematic-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    repeating-conic-gradient(from 0deg at 50% 50%, 
      rgba(255, 255, 255, 0.1) 0deg, 
      transparent 2deg, 
      rgba(255, 0, 255, 0.1) 4deg, 
      transparent 6deg, 
      rgba(0, 255, 255, 0.1) 8deg, 
      transparent 10deg
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.05) 3px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.03) 0px,
      transparent 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.03) 4px
    );
  background-size: 200px 200px, 10px 10px, 15px 15px;
  pointer-events: none;
  z-index: 99996;
  opacity: 0;
  animation: digital-storm 0.6s ease-in-out;
}

.cinematic-noise.active {
  opacity: 1;
}

@keyframes digital-storm {
  0% {
    opacity: 0;
    background-position: 0 0, 0 0, 0 0;
    filter: brightness(1) contrast(1);
  }
  20% {
    opacity: 0.6;
    background-position: 50px -50px, -5px 5px, 7px -7px;
    filter: brightness(1.3) contrast(1.5);
  }
  40% {
    opacity: 1;
    background-position: -100px 100px, 10px -10px, -14px 14px;
    filter: brightness(1.6) contrast(2);
  }
  60% {
    opacity: 0.8;
    background-position: 150px -150px, -15px 15px, 21px -21px;
    filter: brightness(1.4) contrast(1.8);
  }
  80% {
    opacity: 0.4;
    background-position: -200px 200px, 20px -20px, -28px 28px;
    filter: brightness(1.1) contrast(1.3);
  }
  100% {
    opacity: 0;
    background-position: 250px -250px, -25px 25px, 35px -35px;
    filter: brightness(0.8) contrast(1);
  }
}

/* Glitch Flicker Animation for Boot Screen */
@keyframes glitch-flicker {
  0%, 100% {
    opacity: 1;
    transform: translate(0, 0);
  }
  10% {
    opacity: 0.8;
    transform: translate(-1px, 1px);
  }
  20% {
    opacity: 1;
    transform: translate(1px, -1px);
  }
  30% {
    opacity: 0.9;
    transform: translate(-1px, -1px);
  }
  40% {
    opacity: 1;
    transform: translate(1px, 1px);
  }
  50% {
    opacity: 0.7;
    transform: translate(-2px, 0);
  }
  60% {
    opacity: 1;
    transform: translate(2px, 0);
  }
  70% {
    opacity: 0.9;
    transform: translate(0, -2px);
  }
  80% {
    opacity: 1;
    transform: translate(0, 2px);
  }
  90% {
    opacity: 0.8;
    transform: translate(-1px, 0);
  }
}