/* Animaciones Ligeras (Hardware Accelerated) */

/* 1. Flotación Suave (Levitación) para Imágenes 3D */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

/* 2. Resplandor Pulsante para Botones Primarios */
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(0, 240, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
}

.btn-primary {
  animation: pulse-glow 2.5s infinite;
}

/* 3. Animaciones de Entrada (Fade-in Up) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Aplicado estáticamente a la Hero Section */
.hero-content > * {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.hero-content .hero-tag { animation-delay: 0.1s; }
.hero-content h1 { animation-delay: 0.3s; }
.hero-content p { animation-delay: 0.5s; }
.hero-content .hero-btns { animation-delay: 0.7s; }

/* 4. Clases Dinámicas para Scroll (controladas por JS) */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}