@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

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

body{
  background:#000;
  min-height:100vh;
  overflow:hidden;
  font-family:'VT323', monospace;
  color:#00ff66;
  position:relative;
  padding:clamp(20px, 6vw, 60px) clamp(16px, 5vw, 40px);
}

/* 🎥 VIDEO DE FONDO */
#introVideo{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  background:#000;
}

/* 🌑 CAPA OSCURA */
#videoOverlay{
  position:fixed;
  inset:0;
  background:#000;
  opacity:1;
  z-index:2;
  pointer-events:none;
  transition:opacity 2s ease;
}

/* 🔥 TERMINAL */
.terminal{
  position:relative;
  z-index:4;
  width:100%;
  max-width:100%;
  font-size:clamp(16px, 4.5vw, 28px);
  line-height:1.4;
  opacity:0;
  transition:opacity 0.6s ease;

  text-shadow:
    0 0 3px #00ff66,
    0 0 8px rgba(0,255,102,0.8),
    0 0 16px rgba(0,255,102,0.6),
    0 0 28px rgba(0,255,102,0.35);

  filter:brightness(1.2) contrast(1.15);
}

#text{
  display:inline;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

#cursor{
  display:inline-block;
  width:12px;
  height:22px;
  background:#00ff66;
  margin-left:6px;
  vertical-align:middle;
  animation:blink 0.9s infinite;
  box-shadow:
    0 0 4px #00ff66,
    0 0 10px rgba(0,255,102,0.8),
    0 0 18px rgba(0,255,102,0.5);
}

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

/* MATRIX OVERLAY */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity:0.15;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
  background:rgba(0,255,100,0.03);
  animation:flicker 3s infinite;
}

@keyframes flicker{
  0%{opacity:0.04;}
  5%{opacity:0.08;}
  10%{opacity:0.03;}
  20%{opacity:0.06;}
  50%{opacity:0.04;}
  80%{opacity:0.07;}
  100%{opacity:0.04;}
}

/* 🔥 START SCREEN */
#startScreen{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  z-index:9999;
  opacity:0;
  animation:fadeInStart 1.2s ease forwards;
  transition:opacity 0.6s ease;
}

@keyframes fadeInStart{
  to{ opacity:1; }
}

/* 🔥 BOTÓN */
#startBtn{
  position:relative;
  overflow:hidden;
  font-family:'VT323', monospace;
  font-size:clamp(28px, 5vw, 52px);
  color:#00ff66;
  background:transparent;
  border:2px solid #00ff66;
  padding:14px 38px;
  cursor:pointer;
  letter-spacing:3px;
  text-transform:uppercase;

  opacity:0;
  transform:translateY(10px);

  animation:
    btnFade 1.2s ease forwards,
    glowFlicker 2.5s infinite,
    floatY 3s ease-in-out infinite;

  animation-delay:0.4s, 1.6s, 1.6s;

  text-shadow:
    0 0 6px #00ff66,
    0 0 14px rgba(0,255,102,0.8),
    0 0 26px rgba(0,255,102,0.45);

  box-shadow:
    0 0 8px rgba(0,255,102,0.6),
    0 0 18px rgba(0,255,102,0.25),
    inset 0 0 8px rgba(0,255,102,0.15);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    text-shadow 0.25s ease;
}

@keyframes btnFade{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes glowFlicker{
  0%,100%{
    opacity:1;
    box-shadow:
      0 0 8px rgba(0,255,102,0.6),
      0 0 18px rgba(0,255,102,0.25),
      inset 0 0 8px rgba(0,255,102,0.15);
  }

  5%{ opacity:0.7; }
  10%{ opacity:1; }
  15%{ opacity:0.6; }
  20%{ opacity:1; }
  50%{ opacity:0.85; }
  80%{ opacity:1; }
}

@keyframes floatY{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
  100%{ transform:translateY(0); }
}

/* ✨ TEXTO SCRAMBLE */
.start-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.02em;
}

.scramble-letter{
  display:inline-block;
  min-width:0.62em;
  text-align:center;
}

/* ✨ BRILLO HOVER */
#startBtn::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-35%;
  width:22%;
  height:140%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 20%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.08) 80%,
    transparent 100%
  );
  transform:skewX(-22deg);
  opacity:0;
  pointer-events:none;
}

#startBtn:hover{
  background:rgba(0,255,102,0.08);
  transform:scale(1.05);

  text-shadow:
    0 0 8px #00ff66,
    0 0 18px rgba(0,255,102,0.9),
    0 0 34px rgba(0,255,102,0.55);

  box-shadow:
    0 0 14px rgba(0,255,102,0.85),
    0 0 34px rgba(0,255,102,0.42),
    inset 0 0 12px rgba(0,255,102,0.22);
}

#startBtn:hover::before{
  opacity:1;
  animation:shineSweep 0.9s ease forwards;
}

@keyframes shineSweep{
  0%{ left:-35%; }
  100%{ left:115%; }
}

/* FLASH BLANCO */
#white-flash{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:8;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at center, #ffffff 0%, #ffffff 0%, rgba(255,255,255,0) 60%);
  transition:opacity 0.2s ease;
}

@keyframes flashExpand{
  0%{
    background:radial-gradient(circle at center, #ffffff 0%, rgba(255,255,255,0) 0%);
  }
  50%{
    background:radial-gradient(circle at center, #ffffff 40%, rgba(255,255,255,0) 60%);
  }
  100%{
    background:radial-gradient(circle at center, #ffffff 100%, rgba(255,255,255,0) 100%);
  }
}

/* MATRIX FINAL */
#matrix{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:6;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.2s ease;
}

/* CARD FINAL */
.card{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -46%);
  z-index:7;
  background:rgba(10,10,10,0.85);
  border:1px solid rgba(0,255,100,0.25);
  border-radius:20px;
  padding:50px 40px;
  text-align:center;
  max-width:650px;
  width:min(650px, calc(100% - 28px));
  box-shadow:0 0 40px rgba(0,255,100,0.2);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity 1.2s ease, transform 1.2s ease;
}

/* LOGO */
.logo{
  font-size:32px;
  font-weight:bold;
  margin-bottom:10px;
  color:#00ff41;
}

/* TITLE */
.card h1{
  font-size:42px;
  margin-bottom:10px;
  color:#fff;
}

.card h1 span{
  color:#00ff41;
  text-shadow:
    0 0 5px #00ff41,
    0 0 10px #00ff41,
    0 0 20px #00ff41;
}

.card p{
  color:#ccc;
  margin-bottom:20px;
}

/* LINEA */
.line{
  width:120px;
  height:3px;
  background:#00ff41;
  margin:20px auto;
  box-shadow:0 0 10px #00ff41;
}

/* COUNTDOWN */
.countdown{
  display:flex;
  justify-content:center;
  gap:15px;
  margin-bottom:25px;
  flex-wrap:wrap;
}

.time{
  background:#0b0b0b;
  padding:15px 20px;
  border-radius:10px;
  border:1px solid #00ff41;
  min-width:90px;
}

.time strong{
  display:block;
  font-size:24px;
  color:#00ff41;
}

.time span{
  font-size:12px;
  color:#aaa;
}

/* BUTTON FINAL */
.btn{
  display:inline-block;
  padding:12px 25px;
  background:#00ff41;
  color:#000;
  border-radius:8px;
  font-weight:bold;
  text-decoration:none;
  transition:0.3s;
  animation:pulse 2s infinite;
}

.btn:hover{
  transform:scale(1.05);
}

@keyframes pulse{
  0%{
    box-shadow:0 0 0 0 rgba(0,255,65,0.7);
  }
  70%{
    box-shadow:0 0 0 15px rgba(0,255,65,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(0,255,65,0);
  }
}

/* MOBILE */
@media (max-width: 600px){
  body{
    padding-top:40px;
  }

  .terminal{
    font-size:clamp(16px, 5vw, 22px);
    line-height:1.35;
  }

  #cursor{
    width:10px;
    height:18px;
    margin-left:4px;
  }
}