/* ==========================================================================
   DVD SCREENSAVER 1:1 - TELA CHEIA CRT ANALÓGICA
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  color: #fff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: crosshair;
}

/* ==========================================
   TELA DO TUBO DE VIDRO CRT
   ========================================== */
.crt-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Fundo fosfórico vivo e profundo de TV analógica */
  background: radial-gradient(circle at 50% 50%, #0c1834 0%, #060d1e 50%, #02040a 85%, #000103 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Canvas da Física do DVD */
#dvdCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================
   OSD NO CANTO ESQUERDO SUPERIOR (AV CLÁSSICO DE TV CRT)
   ========================================== */
.crt-osd-av {
  position: fixed;
  top: 32px;
  left: 38px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  z-index: 100;
  pointer-events: none;
  font-family: 'Montserrat', sans-serif;
  /* Totalmente clean, sólido, semitransparente, sem brilhos nem sombras */
  text-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* A inscrição AV com estética de OSD de TV analógica */
.osd-label {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(60, 255, 120, 0.55); /* Verde fosforescente clássico de OSD */
  text-transform: uppercase;
}

/* Números de Toques e Cantos limpos e semitransparentes */
.osd-num {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
}

.osd-num.corner-num {
  color: rgba(255, 230, 0, 0.55);
}

/* ==========================================
   CAMADAS DE EFEITO DO TUBO CRT
   ========================================== */
.crt-shaders {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

/* Linhas de varredura clássicas (Scanlines) */
.crt-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 24, 40, 0) 50%, 
    rgba(0, 0, 0, 0.35) 50%
  );
  background-size: 100% 3px;
  opacity: 0.82;
}

/* Reflexo sutil de luz ambiente no vidro da TV */
.crt-glass-reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 75% 20%, 
    rgba(255, 255, 255, 0.035) 0%, 
    rgba(180, 210, 255, 0.012) 30%, 
    transparent 65%
  );
}

/* Vinheta suave nos cantos (Barrel Distortion do tubo convexo) */
.crt-barrel-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 
    inset 0 0 60px rgba(0, 0, 0, 0.6),
    inset 0 0 140px rgba(0, 0, 0, 0.75),
    inset 0 0 260px rgba(0, 0, 0, 0.9);
}

/* Curvatura de vidro nos cantos sem borda preta sólida que corta o logo */
.crt-tube-corners {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
}


/* ==========================================
   ANIMAÇÃO ESTILO ABERTURA HBO / LIGAR CRT (1ª VEZ)
   ========================================== */
.hbo-crt-intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  pointer-events: none;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Fade out suave, cadenciado e lento (3.6s) */
  transition: opacity 3.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hbo-crt-intro.fade-out {
  opacity: 0;
}

.hbo-crt-intro.hidden {
  display: none !important;
}

#introNoiseCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.95;
}

/* Feixe de elétrons acendendo em linha horizontal e abrindo suavemente */
.crt-beam-flash {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  background: #fff;
  pointer-events: none;
  opacity: 0;
}

.crt-beam-flash.active {
  animation: hboBeamExpandSlow 1.1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes hboBeamExpandSlow {
  0% {
    transform: translateY(-50%) scale(1, 0.003);
    opacity: 0;
    filter: brightness(25);
  }
  20% {
    transform: translateY(-50%) scale(1, 0.006);
    opacity: 1;
    filter: brightness(18);
  }
  50% {
    transform: translateY(-50%) scale(1, 0.02);
    opacity: 1;
    filter: brightness(8);
  }
  80% {
    transform: translateY(-50%) scale(1, 1);
    opacity: 0.85;
  }
  100% {
    transform: translateY(-50%) scale(1, 1);
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .crt-osd-av {
    top: 20px;
    left: 24px;
    gap: 12px;
  }
  .osd-label {
    font-size: 16px;
  }
  .osd-num {
    font-size: 15px;
  }
}