/* Estilos optimizados para el efecto Matrix en el hero - Con corrección fullscreen para móviles */
#hero {
  /* Mantenemos las propiedades que no entran en conflicto */
  overflow: hidden;
  background: #000813 !important; /* Forzamos el fondo sólido con !important para dispositivos móviles */
  width: 100%;
  height: 100vh;
  position: relative;
}

/* Sobrescribimos el pseudo-elemento :before para hacerlo compatible */
#hero:before {
  display: none; /* Desactivamos el overlay original */
}

/* Ajustamos .hero-container para integrar ambos estilos */
.hero-container {
  position: absolute; /* Mantenemos la posición absoluta del estilo consolidado */
  bottom: 0px;
  top: 0;
  left: 0;
  right: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: left;
  padding: 0 15px;
  z-index: 5; /* Aumentamos el z-index para que esté por encima de todos los efectos */
}

/* Elementos del efecto Matrix */
.tech-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, #00ff8850, transparent);
  height: 1px;
  width: 100%;
  animation: scanLine 4s linear infinite; /* Reducimos la frecuencia de animación */
  z-index: 1;
}

.matrix-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  font-family: monospace;
  font-size: 14px;
  color: #00ff88;
  z-index: 1;
  pointer-events: none; /* Aseguramos que no bloquee interacciones */
}

.tech-border {
  position: absolute;
  border: 2px solid #00ff8830;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  top: -20px;
  left: -20px;
  animation: borderRotate 15s linear infinite; /* Reducimos la frecuencia de animación */
  z-index: 1;
}

.circuit-line {
  position: absolute;
  background: #00ff8820;
  transform-origin: left;
  z-index: 1;
}

.gpu-grid {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 2px;
  opacity: 0.3;
  z-index: 1;
}

.gpu-cell {
  background: #00ff88;
  animation: gpuPulse 3s infinite; /* Reducimos la frecuencia de animación */
}

/* Mejoras para el texto del hero con el nuevo fondo */
#hero h1, #hero h2 {
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
  position: relative;
  z-index: 5;
}

#hero h1 {
  animation: revealText 1.5s forwards;
}

#hero h2 {
  animation: revealText 1.5s 0.5s forwards;
}

#hero .btn-get-started {
  position: relative;
  z-index: 5;
  animation: revealText 1.5s 1s forwards;
}

/* Animaciones optimizadas */
@keyframes scanLine {
  0% { transform: translateY(0); opacity: 0; }
  50% { opacity: 0.5; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes borderRotate {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  25% { clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); }
  50% { clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); }
  75% { clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes gpuPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

@keyframes revealText {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Media queries para mejorar el rendimiento en dispositivos móviles */
@media (max-width: 768px) {
  /* Aseguramos que el fondo se mantenga en móviles */
  #hero {
    background: #000813 !important;
  }
  
  /* Mantenemos visibles los elementos básicos del efecto Matrix */
  .matrix-bg, .tech-line, .tech-border {
    display: block !important;
    visibility: visible !important;
  }
  
  /* CORRECCIÓN: Aseguramos que el .matrix-bg ocupe todo el espacio disponible */
  .matrix-bg {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    position: absolute !important;
    opacity: 0.15 !important;
    font-size: 10px !important; /* Caracteres más pequeños en móvil */
  }
  
  /* Ajustamos la hero-container para móviles */
  .hero-container {
    width: 100% !important;
    right: 0 !important; /* Corregimos el right: 30px; que podría estar causando problemas */
    padding: 0 15px !important;
  }
  
  /* Reducir complejidad pero manteniendo el efecto */
  .gpu-grid {
    width: 100px;
    height: 100px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    right: 10px; /* Mejor posicionamiento en móviles */
    top: 30%; /* Ajustamos la posición vertical */
  }
  
  /* Aplicar animaciones más ligeras */
  .tech-border {
    animation-duration: 20s;
    width: 100% !important; /* Aseguramos que cubra todo el ancho */
    height: 100% !important; /* Aseguramos que cubra todo el alto */
    top: 0 !important;
    left: 0 !important;
  }
  
  .gpu-cell {
    animation-duration: 4s;
  }
  
  /* Ajustamos las líneas de circuito para que se vean mejor en móviles */
  .circuit-line {
    opacity: 0.3 !important;
  }
}