/* ===== BASE ===== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ===== BODY ===== */

body{

  background:#111;

  color:#ccc;

  font-family:'Cormorant Garamond', serif;

  display:flex;

  align-items:center;

  justify-content:center;

  height:100vh;

  position:relative;

  overflow:hidden;

  animation:
    vhsMove 6s infinite,
    screenWarp 8s infinite ease-in-out,
    flickerScreen 4s infinite;
}

/* ===== FONDO ===== */

body::before{

  content:"";

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:
    linear-gradient(
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.35)
    ),

    url('../imagen/ab82a77008198b3e5b8fe197bfae249e.jpg');

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  opacity:0.35;

  filter:
    grayscale(100%)
    contrast(120%)
    brightness(0.8);

  z-index:-2;
}

/* ===== VHS LINES ===== */

body::after{

  content:"";

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 3px
    );

  pointer-events:none;

  z-index:-1;
}

/* ===== LINKS GLOBALES ===== */

a,
a:visited,
a:active{

  color:inherit;

  text-decoration:none;
}

/* ===== CONTENEDOR ===== */

.container{

  max-width:600px;

  width:100%;

  text-align:center;

  border:1px solid rgba(255,255,255,0.08);

  padding:60px 40px;

  background:rgba(17,17,17,0.9);

  backdrop-filter:blur(2px);
}

/* ===== TITULO ===== */

.title{

  font-family:'Inconsolata', monospace;

  font-size:2.5em;

  letter-spacing:3px;

  margin-bottom:30px;

  color:#bbb;

  position:relative;

  display:inline-block;

  animation:glitchMain 3s infinite;
}

/* ===== CAPAS GLITCH ===== */

.title::before,
.title::after{

  content:attr(data-text);

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  pointer-events:none;
}

/* ===== CAPA BLANCA ===== */

.title::before{

  left:-2px;

  color:#fff;

  opacity:0.2;
}

/* ===== CAPA ROJA ===== */

.title::after{

  left:2px;

  color:#5a0000;

  opacity:0.3;
}

/* ===== GLITCH ===== */

@keyframes glitchMain{

  0%{
    transform:translate(0);
  }

  20%{
    transform:translate(-2px,1px);
  }

  40%{
    transform:translate(2px,-1px);
  }

  60%{
    transform:translate(-1px,0);
  }

  80%{
    transform:translate(1px,1px);
  }

  100%{
    transform:translate(0);
  }
}

/* ===== WARNING ===== */

#warning .title{

  color:#6b0000;

  animation:warningGlitch 1.2s infinite;
}

/* ===== WARNING GLITCH ===== */

@keyframes warningGlitch{

  0%{
    transform:translate(0);
  }

  25%{
    transform:translate(-3px,2px);
  }

  50%{
    transform:translate(3px,-2px);
  }

  75%{
    transform:translate(-2px,1px);
  }

  100%{
    transform:translate(0);
  }
}

/* ===== SHAKE ===== */

#warning .title:hover{

  animation:warningShake 0.15s infinite;
}

/* ===== SHAKE ANIMATION ===== */

@keyframes warningShake{

  0%{
    transform:translate(0);
  }

  25%{
    transform:translate(-2px,1px);
  }

  50%{
    transform:translate(2px,-1px);
  }

  75%{
    transform:translate(-1px,2px);
  }

  100%{
    transform:translate(1px,-1px);
  }
}

/* ===== TEXTO ===== */

.text{

  font-size:0.9rem;

  margin-bottom:30px;

  color:#aaa;

  line-height:1.5;

  animation:flicker 3s infinite;
}

/* ===== FLICKER ===== */

@keyframes flicker{

  0%,100%{
    opacity:1;
  }

  50%{
    opacity:0.4;
  }
}

/* ===== BOTÓN ===== */

.enter-btn{

  border:1px solid rgba(255,255,255,0.2);

  padding:12px 25px;

  color:#ccc;

  font-family:'Inconsolata', monospace;

  letter-spacing:2px;

  cursor:pointer;

  transition:0.3s;
}

/* ===== BOTÓN HOVER ===== */

.enter-btn:hover{

  color:#fff;

  border-color:#5a0000;

  background:rgba(255,255,255,0.05);
}

/* ===== MENU ===== */

.menu{

  display:flex;

  flex-direction:column;

  gap:15px;
}

/* ===== MENU LINKS ===== */

.menu a{

  border:1px solid rgba(255,255,255,0.1);

  padding:12px;

  color:#ccc;

  font-family:'Inconsolata', monospace;

  letter-spacing:2px;

  transition:0.3s;
}

/* ===== MENU HOVER ===== */

.menu a:hover{

  color:#fff;

  border-color:#5a0000;

  background:rgba(255,255,255,0.05);
}

/* ===== FOOTER ===== */

.footer{

  margin-top:40px;

  font-size:0.65rem;

  opacity:0.25;

  font-family:'Inconsolata', monospace;
}

/* ===== LEGAL WARNING ===== */

.legal-warning{

  margin-top:22px;

  font-size:0.62rem;

  opacity:0.28;

  font-family:'Inconsolata', monospace;

  letter-spacing:1px;

  line-height:1.6;
}

/* ===== LEGAL LINKS ===== */

.legal-warning a,
.legal-warning a:visited,
.legal-warning a:active{

  color:#666;

  transition:0.3s;
}

/* ===== LEGAL HOVER ===== */

.legal-warning a:hover{

  color:#aaa;
}

/* ===== OCULTO ===== */

.hidden{
  display:none;
}

/* ===== VHS MOVE ===== */

@keyframes vhsMove{

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

  50%{
    transform:translate(1px,-1px);
  }

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

/* ===== SCREEN WARP ===== */

@keyframes screenWarp{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.002);
  }

  100%{
    transform:scale(1);
  }
}

/* ===== SCREEN FLICKER ===== */

@keyframes flickerScreen{

  0%,100%{
    opacity:1;
  }

  50%{
    opacity:0.98;
  }
}

/* ===== EFECTO ENTER ===== */

.glitch-screen{

  animation:screenBreak 0.6s steps(6) forwards;
}

/* ===== SCREEN BREAK ===== */

@keyframes screenBreak{

  0%{
    transform:translate(0);
    filter:brightness(1);
  }

  50%{
    transform:translate(10px,-5px);
    filter:contrast(2);
  }

  100%{
    transform:translate(0);
    filter:brightness(0);
  }
}