/* =========================================
   ANIMACIÓN PSEUDO-3D HERO RENDER
========================================= */

/* 1. ESCENARIO PRINCIPAL CON PERSPECTIVA 3D */
.logo-stage {
  position: relative;
  width: 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  cursor: none; /* Mantén el cursor personalizado de tu web */
}

/* 2. HALO AMBIENTAL REACTIVO (AURORA GLOW) */
.logo-ambient-glow {
  position: absolute;
  width: 70%;
  height: 70%;
  background: radial-gradient(
    circle,
    rgba(255, 94, 0, 0.28) 0%,
    /* Ajustado a tu naranja primario */ rgba(112, 0, 255, 0.1) 40%,
    /* Ajustado a tu morado secundario */ rgba(8, 8, 10, 0) 70%
  );
  border-radius: 50%;
  filter: blur(40px);
  transform: translateZ(-50px);
  transition:
    transform 0.1s ease-out,
    opacity 0.4s ease;
  opacity: 0.8;
}

/* 3. SOMBRA EN LA BASE */
.logo-shadow {
  position: absolute;
  bottom: -30px;
  width: 200px;
  height: 25px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  border-radius: 50%;
  filter: blur(8px);
  transition:
    transform 0.1s ease-out,
    opacity 0.4s ease,
    width 0.4s ease;
}

/* 4. TARJETA / CONTENEDOR 3D */
.logo-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 5. REFLEJO ESPECULAR (GLARE) */
.logo-glare {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
  transform: translate(0, 0) translateZ(25px);
  transition:
    transform 0.1s ease-out,
    opacity 0.4s ease;
  opacity: 0;
  mix-blend-mode: overlay;
  border-radius: 50%;
  z-index: 20;
}

/* 6. IMAGEN PRINCIPAL (El Cubo / Logo) */
.logo-image {
  width: 80%;
  height: auto;
  object-fit: contain;
  transform: translateZ(40px);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
  transition:
    transform 0.4s ease-out,
    filter 0.4s ease;
}

/* Efectos al pasar el ratón */
.logo-stage:hover .logo-glare {
  opacity: 1;
}

.logo-stage:hover .logo-ambient-glow {
  opacity: 1;
  filter: blur(50px);
}