/* ════════════════════════════════════════════════════════════
   VHS LOADER — O Fantástico Laboratório
   ════════════════════════════════════════════════════════════ */

#vhs-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #030408;
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  color: #f7fbff;
  cursor: wait;
  user-select: none;
}

/* TV desligando */
#vhs-loader.is-exiting {
  animation: vhsTvOff 0.55s ease-in forwards;
  pointer-events: none;
}

@keyframes vhsTvOff {
  0%   { transform: scaleY(1)     scaleX(1);   filter: brightness(1);  opacity: 1; }
  25%  { transform: scaleY(0.012) scaleX(1);   filter: brightness(5);  opacity: 1; }
  60%  { transform: scaleY(0.012) scaleX(1.6); filter: brightness(12); opacity: 1; }
  85%  { transform: scaleY(0.012) scaleX(2.2); filter: brightness(20); opacity: 1; }
  100% { transform: scaleY(0)     scaleX(3);   filter: brightness(30); opacity: 0; }
}

/* ── Ruído de canvas ───────────────────────────────────────── */
#vhs-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ── Scanlines animadas ────────────────────────────────────── */
.vhs-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent       0px,
    transparent       2px,
    rgba(0,0,0,0.16)  2px,
    rgba(0,0,0,0.16)  4px
  );
  pointer-events: none;
  z-index: 2;
  animation: vhsScanMove 12s linear infinite;
}

@keyframes vhsScanMove {
  from { background-position: 0 0; }
  to   { background-position: 0 80px; }
}

/* ── Banda de tracking (distorção horizontal) ──────────────── */
.vhs-hband {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent                      0%,
    rgba(255,255,255,0.14)          20%,
    rgba(0,244,255,0.09)            50%,
    rgba(255,42,191,0.06)           75%,
    transparent                    100%
  );
  pointer-events: none;
  z-index: 3;
  animation: vhsTracking 5.4s ease-in-out infinite;
}

@keyframes vhsTracking {
  0%          { top: -5%;   opacity: 0; }
  5%          {             opacity: 0.9; }
  90%         {             opacity: 0.5; }
  100%        { top: 108%;  opacity: 0; }
}

/* Segunda banda de tracking (offset) */
.vhs-hband2 {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
  z-index: 3;
  animation: vhsTracking 5.4s ease-in-out infinite 2.7s;
}

/* ── Vinheta ───────────────────────────────────────────────── */
#vhs-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 80% at 50% 50%,
    transparent          35%,
    rgba(0,0,0,0.55)     80%,
    rgba(0,0,0,0.88)    100%
  );
  pointer-events: none;
  z-index: 4;
}

/* ── Cantos UI — estilo HUD de videocassete ─────────────────── */
.vhs-corner {
  position: absolute;
  padding: 14px 18px;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 6;
  opacity: 0.72;
}
.vhs-corner--tl { top: 0; left: 0; }
.vhs-corner--tr { top: 0; right: 0; }
.vhs-corner--bl { bottom: 0; left: 0;  color: rgba(247,251,255,0.38); }
.vhs-corner--br { bottom: 0; right: 0; color: rgba(247,251,255,0.38); }

/* ● REC piscando */
.vhs-rec {
  color: #ff3030;
  text-shadow: 0 0 10px rgba(255,48,48,0.8);
  animation: vhsRecBlink 1.1s steps(1) infinite;
}

@keyframes vhsRecBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Timecode */
.vhs-timecode {
  color: rgba(247,251,255,0.65);
  font-size: 12px;
  letter-spacing: 0.14em;
}

/* ── Conteúdo central ──────────────────────────────────────── */
.vhs-main {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

/* Logo com aberração cromática + glitch */
.vhs-logo {
  width: min(260px, 56vw);
  height: auto;
  display: block;
  animation: vhsLogoGlitch 0.14s steps(1) infinite;
}

@keyframes vhsLogoGlitch {
  0%, 90% {
    filter:
      drop-shadow( 3px 0   0 rgba(255,  0, 80, 0.52))
      drop-shadow(-3px 0   0 rgba(  0,220,255, 0.52))
      brightness(1.1);
    transform: translate(0, 0) skewX(0deg);
  }
  91% {
    filter:
      drop-shadow( 7px 0   0 rgba(255,  0, 80, 0.95))
      drop-shadow(-7px 0   0 rgba(  0,220,255, 0.95))
      brightness(1.5);
    transform: translate(-5px, 0) skewX(-2deg);
  }
  92% {
    filter:
      drop-shadow(-6px 0   0 rgba(255,  0, 80, 0.95))
      drop-shadow( 6px 0   0 rgba(  0,220,255, 0.95))
      brightness(1.7);
    transform: translate( 4px, 2px) skewX( 1.5deg);
  }
  93% {
    filter:
      drop-shadow( 2px 0   0 rgba(255,  0, 80, 0.6))
      drop-shadow(-2px 0   0 rgba(  0,220,255, 0.6))
      brightness(1.2);
    transform: translate(-1px, 0) skewX(-0.5deg);
  }
  94%, 100% {
    filter:
      drop-shadow( 3px 0   0 rgba(255,  0, 80, 0.52))
      drop-shadow(-3px 0   0 rgba(  0,220,255, 0.52))
      brightness(1.1);
    transform: translate(0, 0) skewX(0deg);
  }
}

/* Nome do filme */
.vhs-tagline {
  margin: 24px 0 0;
  font-size: clamp(10px, 2.2vw, 14px);
  letter-spacing: 0.32em;
  font-weight: 700;
  color: rgba(247,251,255,0.78);
  text-shadow:
    0 0 18px rgba(0,244,255,0.55),
    0 0 40px rgba(0,244,255,0.2);
  animation: vhsFlicker 6s ease-in-out infinite;
}

/* Subtítulo */
.vhs-subtitle {
  margin: 6px 0 0;
  font-size: clamp(8px, 1.5vw, 11px);
  letter-spacing: 0.22em;
  color: rgba(247,251,255,0.32);
}

@keyframes vhsFlicker {
  0%, 94%, 100% { opacity: 0.78; }
  95%           { opacity: 0.25; }
  96%           { opacity: 0.88; }
  97%           { opacity: 0.18; }
  98%           { opacity: 0.82; }
}

/* ── Barra de progresso ────────────────────────────────────── */
.vhs-progress-wrap {
  margin-top: 38px;
  width: min(300px, 64vw);
  height: 3px;
  background: rgba(247,251,255,0.1);
  position: relative;
  overflow: hidden;
}

/* Grade pontilhada atrás da barra */
.vhs-progress-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 3px,
    transparent             3px, transparent            8px
  );
}

#vhs-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #39ff14, rgba(0,244,255,0.92));
  box-shadow:
    0 0 10px rgba(57,255,20,0.9),
    0 0 22px rgba(0,244,255,0.5);
  transition: width 0.28s ease;
  position: relative;
  z-index: 1;
}

/* Brilho na ponta da barra */
#vhs-bar::after {
  content: '';
  position: absolute;
  right: 0; top: -2px; bottom: -2px;
  width: 6px;
  background: white;
  box-shadow: 0 0 8px 3px rgba(57,255,20,1), 0 0 18px 6px rgba(0,244,255,0.7);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#vhs-bar.is-active::after { opacity: 1; }

/* Label de porcentagem */
.vhs-pct {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(247,251,255,0.48);
  animation: vhsFlicker 6s ease-in-out infinite 0.4s;
}

/* ── Fade-in do loader ao aparecer ─────────────────────────── */
#vhs-loader {
  animation: vhsFadeIn 0.3s ease forwards;
}

@keyframes vhsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Reduce motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #vhs-loader,
  .vhs-logo,
  .vhs-scanlines,
  .vhs-hband,
  .vhs-hband2 {
    animation: none !important;
  }
  .vhs-logo {
    filter: brightness(1.1);
  }
  #vhs-loader.is-exiting {
    animation: vhsFadeOut 0.3s ease forwards !important;
  }
  @keyframes vhsFadeOut {
    to { opacity: 0; }
  }
}