/* =====================================================
   Estilos para la pantalla 3D interactiva
====================================================== */

.screen3d-container {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  /* border-radius: 1rem; */
  overflow: hidden;
  position: relative;
  /* Sombra multicapa para efecto más dramático */

}

.screen3d-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Contenedor para la pantalla 3D */
#hero-screen-container {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  /* overflow: hidden; */
  border-radius: 300px;
  /* Efecto de resplandor mejorado alrededor del contenedor */
  box-shadow: 
    0 0 30px rgba(22, 152, 176, 0.5),      /* Resplandor cercano intenso */
    0 0 60px rgba(22, 152, 176, 0.3),      /* Resplandor medio */
    0 0 100px rgba(22, 152, 176, 0.1);     /* Resplandor amplio sutil */
  /* Añadir un borde brillante pero sutil */
  border: 0px solid rgba(22, 152, 176, 0.5);
}

/* Efecto de brillo alrededor de la pantalla con rotación */
#hero-screen-container::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 300px;
  background: linear-gradient(45deg, 
    rgba(22, 152, 176, 0) 0%,
    rgba(22, 152, 176, 0.1) 20%, 
    rgba(22, 152, 176, 0.5) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(22, 152, 176, 0.5) 60%,
    rgba(22, 152, 176, 0.1) 80%,
    rgba(22, 152, 176, 0) 100%
  );
  background-size: 300% 300%;
  pointer-events: none;
  z-index: -1; /* Colocarlo por detrás del contenido */
  animation: borderRotate 8s linear infinite;
  opacity: 0.2; /* Reducir opacidad para que sea menos intrusivo */
}

/* Efecto de brillo interior */
#hero-screen-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100px;
  box-shadow: 0 0 15px rgba(22, 152, 176, 0.2) inset;
  pointer-events: none;
  z-index: -1; /* Colocarlo por detrás del contenido */
}

/* Animación para la rotación del borde brillante */
@keyframes borderRotate {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 300% 0%;
  }
}

/* Contenedor de partículas */
.particle-container {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  pointer-events: none;
  overflow: visible;
  perspective: 800px;
  transform-style: preserve-3d;
  /* Importante: quitamos el z-index para permitir que las partículas pasen por detrás */
}

/* Estilos para el núcleo atómico */
.nucleus {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 152, 176, 0.9) 0%, rgba(22, 152, 176, 0.7) 50%, rgba(22, 152, 176, 0.5) 100%);
  box-shadow: 0 0 30px rgba(22, 152, 176, 0.8), 0 0 50px rgba(22, 152, 176, 0.4);
  z-index: 2;
  animation: nucleusPulse 4s infinite ease-in-out;
}

.nucleus-inner {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(22, 152, 176, 0.9) 70%);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8) inset;
  animation: nucleusInnerRotate 8s infinite linear;
}

/* Animación para el pulso del núcleo */
@keyframes nucleusPulse {
  0% {
    box-shadow: 0 0 30px rgba(22, 152, 176, 0.8), 0 0 50px rgba(22, 152, 176, 0.4);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(22, 152, 176, 0.9), 0 0 60px rgba(22, 152, 176, 0.6);
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    box-shadow: 0 0 30px rgba(22, 152, 176, 0.8), 0 0 50px rgba(22, 152, 176, 0.4);
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Animación para la rotación del núcleo interno */
@keyframes nucleusInnerRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Estilos base para las partículas (electrones) */
.particle {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 152, 176, 0.9) 0%, rgba(22, 152, 176, 0) 70%);
  pointer-events: none;
  box-shadow: 0 0 20px rgba(22, 152, 176, 0.7), 0 0 30px rgba(22, 152, 176, 0.4) inset;
  opacity: 0.8;
  /* Posición inicial en el centro para la animación orbital */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Efecto de estela para los electrones */
  filter: blur(1px);
}

/* Estilos para las imágenes dentro de las partículas (electrones) */
.particle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: rotateImage 5s linear infinite;
  opacity: 0.9;
  filter: drop-shadow(0 0 5px rgba(22, 152, 176, 0.8));
}

/* Animación orbital para cada partícula */
/* Animaciones de electrones orbitando - Órbitas más grandes */
.particle1 {
  animation: orbit1 30s linear infinite;
  width: 30px;
  height: 30px;
  z-index: 3;
}

.particle2 {
  animation: orbit2 38s linear infinite reverse;
  width: 28px;
  height: 28px;
  z-index: 2;
}

.particle3 {
  animation: orbit3 33s linear infinite;
  width: 32px;
  height: 32px;
  z-index: 3;
}

.particle4 {
  animation: orbit4 30s linear infinite;
  width: 20px;
  height: 20px;
}

.particle5 {
  animation: orbit5 42s linear infinite;
  animation-delay: -15s;
  z-index: 3; /* Por encima al inicio */
}

.particle6 {
  animation: orbit6 27s linear infinite;
  animation-delay: -3s;
  z-index: -1; /* Por detrás al inicio */
}

/* Animaciones para la rotación de las imágenes */
@keyframes rotateImage {
  0% {
    transform: rotate(0deg) scale(0.9);
    filter: brightness(0.9);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
    filter: brightness(1.2);
  }
  100% {
    transform: rotate(360deg) scale(0.9);
    filter: brightness(0.9);
  }
}

/* Animaciones de órbitas electrónicas */
@keyframes orbit1 {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg) rotateX(60deg) rotateY(0deg) translateX(250px) rotateY(0deg);
    box-shadow: 0 0 20px rgba(22, 152, 176, 0.9), 0 0 30px rgba(22, 152, 176, 0.6) inset;
    filter: blur(0px);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg) rotateX(60deg) rotateY(0deg) translateX(250px) rotateY(0deg);
    box-shadow: 0 0 25px rgba(22, 152, 176, 0.7), 0 0 20px rgba(22, 152, 176, 0.8) inset;
    filter: blur(0.5px);
  }
}

@keyframes orbit2 {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg) rotateX(30deg) rotateY(45deg) translateX(300px) rotateY(0deg);
    box-shadow: 0 0 18px rgba(22, 152, 176, 0.8), 0 0 25px rgba(22, 152, 176, 0.5) inset;
    filter: blur(0.5px);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg) rotateX(30deg) rotateY(45deg) translateX(300px) rotateY(0deg);
    box-shadow: 0 0 22px rgba(22, 152, 176, 0.6), 0 0 18px rgba(22, 152, 176, 0.7) inset;
    filter: blur(0.3px);
  }
}

@keyframes orbit3 {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg) rotateX(-15deg) rotateY(30deg) translateX(350px) rotateY(0deg);
    box-shadow: 0 0 22px rgba(22, 152, 176, 0.7), 0 0 28px rgba(22, 152, 176, 0.4) inset;
    filter: blur(0.3px);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg) rotateX(-15deg) rotateY(30deg) translateX(350px) rotateY(0deg);
    box-shadow: 0 0 18px rgba(22, 152, 176, 0.9), 0 0 22px rgba(22, 152, 176, 0.5) inset;
    filter: blur(0.5px);
  }
}

@keyframes orbit4 {
  0%, 25%, 50%, 75%, 100% {
    transform: translate(-50%, -50%) rotateZ(0deg) rotateX(-20deg) rotateY(80deg) translateX(200px) rotateY(0deg);
    box-shadow: 0 0 20px rgba(22, 152, 176, 0.9), 0 0 30px rgba(22, 152, 176, 0.6) inset;
    filter: blur(0px);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg) rotateX(-20deg) rotateY(80deg) translateX(200px) rotate(-360deg);
    box-shadow: 0 0 20px rgba(22, 152, 176, 0.9), 0 0 30px rgba(22, 152, 176, 0.6) inset;
    filter: blur(0px);
  }
}

@keyframes orbit5 {
  0% {
    transform: translate(-50%, -50%) rotateY(0deg) translateX(220px) translateY(20px) scale(1);
    opacity: 0.8;
    z-index: 3; /* Por encima */
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg) translateX(220px) translateY(20px) rotate(-90deg) scale(1.1);
    opacity: 0.9;
    z-index: 3; /* Por encima */
  }
  /* Punto de cambio: pasa por detrás */
  25.1% {
    z-index: -1; /* Por detrás */
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) translateX(220px) translateY(20px) rotate(-180deg) scale(1.2);
    opacity: 0.7;
    z-index: -1; /* Por detrás */
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg) translateX(220px) translateY(20px) rotate(-270deg) scale(1.1);
    opacity: 0.8;
    z-index: -1; /* Por detrás */
  }
  /* Punto de cambio: vuelve a estar por encima */
  75.1% {
    z-index: 3; /* Por encima */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(220px) translateY(20px) rotate(-360deg) scale(1);
    opacity: 0.8;
    z-index: 3; /* Por encima */
  }
}

@keyframes orbit6 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(190px) translateY(-25px) rotate(0deg) scale(0.9);
    opacity: 0.6;
    z-index: -1; /* Por detrás */
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg) translateX(190px) translateY(-25px) rotate(-90deg) scale(0.8);
    opacity: 0.7;
    z-index: -1; /* Por detrás */
  }
  /* Punto de cambio: pasa por encima */
  25.1% {
    z-index: 3; /* Por encima */
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) translateX(190px) translateY(-25px) rotate(-180deg) scale(0.7);
    opacity: 0.8;
    z-index: 3; /* Por encima */
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg) translateX(190px) translateY(-25px) rotate(-270deg) scale(0.8);
    opacity: 0.7;
    z-index: 3; /* Por encima */
  }
  /* Punto de cambio: vuelve a estar por detrás */
  75.1% {
    z-index: -1; /* Por detrás */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(190px) translateY(-25px) rotate(-360deg) scale(0.9);
    opacity: 0.6;
    z-index: -1; /* Por detrás */
  }
}

/* Animación para las partículas brillantes */
@keyframes particleGlow {
  0% {
    opacity: 0.4;
    transform: rotate(0deg);
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.5;
    transform: rotate(360deg);
  }
}

/* Imagen de respaldo por si falla la carga 3D */
.fallback-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  display: none; /* Oculta por defecto, se muestra si falla la carga 3D */
}

/* Línea de escaneo */
.scan-line {
  position: absolute;
  top: 0;
  left: 2.5%;
  width: 95%;
  height: 3px;
  background: linear-gradient(to right, 
    rgba(22, 152, 176, 0.1) 0%,
    rgba(22, 152, 176, 0.9) 20%, 
    rgba(255, 255, 255, 0.95) 50%,
    rgba(22, 152, 176, 0.9) 80%,
    rgba(22, 152, 176, 0.1) 100%);
  box-shadow: 0 0 10px rgba(22, 152, 176, 0.8);
  z-index: 10;
  pointer-events: none;
  opacity: 0.8;
  transform: translateY(0);
  animation: scanAnimation 4s infinite ease-in-out;
}

/* Efecto de brillo para la línea de escaneo */
.scan-glow {
  position: absolute;
  top: -5px;
  left: 2.5%;
  width: 95%;
  height: 13px;
  background: radial-gradient(ellipse at center, 
    rgba(22, 152, 176, 0.6) 0%, 
    rgba(22, 152, 176, 0) 70%);
  z-index: 9;
  pointer-events: none;
  opacity: 0.5;
  transform: translateY(0);
  animation: scanAnimation 4s infinite ease-in-out;
}

/* Animación de escaneo */
@keyframes scanAnimation {
  0% { transform: translateY(0%); }
  50% { transform: translateY(calc(100% - 3px)); }
  100% { transform: translateY(0%); }
}

/* Mostrar imagen de respaldo si hay error en la carga 3D */
.screen3d-error .fallback-img {
  display: block;
}

/* Ocultar canvas si hay error */
.screen3d-error canvas {
  display: none;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  .screen3d-container,
  #hero-screen-container {
    aspect-ratio: 16 / 10;
  }
}