/* Quimitor V3.5 Premium Hero styles - 3D Free-Floating Calibration */

.landing-hero-header {
  position: relative;
  overflow: hidden;
  padding: 40px 0 10px 0; /* Compact top/bottom padding */
  background-image: radial-gradient(var(--color-border) 1.2px, transparent 1.2px);
  background-size: 32px 32px;
}

/* Base perspective wrapper with no background, border, or shadow boxes */
.hero-wrapper-inner {
  position: relative;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 380px;
  perspective: 1200px; /* Perspective container */
  z-index: 2;
  margin-top: 10px;
}

/* Mascot container (completely transparent borderless frame for 3D rotation) */
.mascot-placeholder-frame {
  position: relative;
  width: 320px;
  height: 320px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.1s ease-out; /* Smooth transition follow-up */
  z-index: 3;
}

/* Free-floating Mascot Image (covers 95% of space) */
.mascot-placeholder-img {
  width: 95%;
  height: 95%;
  object-fit: contain;
  transform: translateZ(20px); /* Pushes mascot forward in 3D space */
  animation: mascot-breathe-3d 4s ease-in-out infinite;
  z-index: 4;
}

/* Dynamic soft breathing shadow under mascot */
.mascot-shadow-deco {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%) translateZ(-15px);
  width: 160px;
  height: 14px;
  background: rgba(8, 43, 91, 0.15);
  border-radius: 50%;
  filter: blur(5px);
  pointer-events: none;
  animation: shadow-scale-3d 4s ease-in-out infinite;
  z-index: 2;
}

.dark .mascot-shadow-deco {
  background: rgba(0, 0, 0, 0.4);
}

/* Speech bubble aligned with mascot head (offset dialog bubble tail) */
.hero-speech-badge {
  position: absolute;
  top: -10px;
  left: -20px; /* Offset to the left side */
  background-color: var(--bg-card);
  border: 3.5px solid var(--color-primary);
  border-radius: var(--border-radius-md);
  padding: 8px 14px;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--color-primary);
  box-shadow: 0 5px 0 var(--color-primary);
  width: 210px;
  text-align: left;
  transform: translateZ(40px); /* Pushes speech bubble forward for parallax depth */
  z-index: 10;
}

.dark .hero-speech-badge {
  border-color: #1C3966;
  box-shadow: 0 5px 0 #1C3966;
  color: #EAEFF7;
  background-color: #0F2440;
}

/* Dialog bubble pointer tail shifted to the right, pointing to mascot */
.hero-speech-badge::after {
  content: '';
  position: absolute;
  bottom: -9px;
  right: 28px; /* Positioned on the right side of the bubble */
  border-width: 9px 9px 0 0;
  border-style: solid;
  border-color: var(--bg-card) transparent;
  display: block;
  width: 0;
  z-index: 11;
}

.dark .hero-speech-badge::after {
  border-color: #0F2440 transparent;
}

.hero-speech-badge::before {
  content: '';
  position: absolute;
  bottom: -14px;
  right: 25px;
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: var(--color-primary) transparent;
  display: block;
  width: 0;
  z-index: 9;
}

.dark .hero-speech-badge::before {
  border-color: #1C3966 transparent;
}

/* Chemical molecules (10% opacity, decorative text) */
.floating-item {
  position: absolute;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.1 !important; /* Estrictamente 10% de opacidad */
  z-index: 1;
}

.dark .floating-item {
  color: var(--color-accent);
}

.hero-float-chem-h2o {
  top: 50px;
  right: 15px;
  animation: float-chem-1 6s ease-in-out infinite;
}

.hero-float-chem-nacl {
  bottom: 80px;
  left: 15px;
  animation: float-chem-2 8s ease-in-out infinite;
}

.hero-float-chem-co2 {
  bottom: 40px;
  right: 35px;
  animation: float-chem-3 7s ease-in-out infinite;
}

/* Animations for floating chemical formulas */
@keyframes float-chem-1 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-chem-2 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-chem-3 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Breathing scale animations */
@keyframes mascot-breathe-3d {
  0% { transform: translateZ(20px) scale(1); }
  50% { transform: translateZ(20px) scale(1.01); } /* Máximo 1% de escala */
  100% { transform: translateZ(20px) scale(1); }
}

@keyframes shadow-scale-3d {
  0% { transform: translateX(-50%) translateZ(-15px) scale(1); opacity: 0.8; }
  50% { transform: translateX(-50%) translateZ(-15px) scale(0.92); opacity: 1; }
  100% { transform: translateX(-50%) translateZ(-15px) scale(1); opacity: 0.8; }
}

/* Deco stars & dots */
.hero-deco-star-1,
.hero-deco-star-2 {
  position: absolute;
  color: var(--color-accent);
  width: 24px;
  height: 24px;
  z-index: 1;
  animation: star-glow 4s ease-in-out infinite alternate;
}

.hero-deco-star-1 {
  top: 70px;
  left: 20px;
}

.hero-deco-star-2 {
  bottom: 120px;
  right: 10px;
}

@keyframes star-glow {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 1; }
}