/* ===================================================================
   INDENANT BROKER - ANIMACIONES Y EFECTOS VISUALES
   Archivo de animaciones, transiciones y efectos especiales
   Extraído de home.php para mejor organización
   =================================================================== */

/* ===================================================================
   1. CONFIGURACIÓN GENERAL DE SCROLL Y BODY
   =================================================================== */
/* Configuración de body con gradiente de fondo */
body {
  background: linear-gradient(180deg, #1A1A1A 0%, #0D0D0D 100%);
}

/* Scroll Snap para navegación fluida y simétrica - Solo en Desktop */
/* En dispositivos móviles y tablets, se permite navegación libre */
html {
  scroll-snap-type: none; /* Por defecto deshabilitado */
}

/* Habilitar scroll snap SOLO en desktop (1024px en adelante) */
@media (min-width: 1024px) {
  html {
    scroll-snap-type: y mandatory;
  }
  
  .snap-point {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* En móviles y tablets, los snap-points no tienen efecto (solo se aplican en desktop) */

/* ===================================================================
   2. ANIMACIONES KEYFRAMES
   =================================================================== */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-8px); 
  }
}

.animate-float { 
  animation: float 4s ease-in-out infinite; 
}

/* ===================================================================
   3. BOTONES Y ELEMENTOS INTERACTIVOS
   =================================================================== */
.btn-dopamine {
  background: var(--gradient-dopamine);
  color: white;
  transition: all 0.3s ease;
}

.btn-dopamine:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255, 87, 51, 0.3);
}

/* ===================================================================
   4. ANIMACIONES DEL LOGO Y NAVEGACIÓN
   =================================================================== */
.logo-nav-animation {
  /* Transición elástica y suave */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              filter 0.4s ease-out;
}

.logo-nav-animation:hover {
  transform: scale(1.25) rotate(-8deg);
  /* Glow de doble capa: un núcleo blanco brillante y un aura naranja */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) 
          drop-shadow(0 0 12px rgba(255, 87, 51, 0.7));
}

.logo-nav-animation:active {
  /* Un "pop" rápido y brillante al hacer clic */
  transform: scale(1.15);
  filter: drop-shadow(0 0 5px white) 
          drop-shadow(0 0 15px rgba(255, 87, 51, 1));
}

/* Fix simple para Mac - tamaño fijo optimizado */
.mac-logo-fix {
  height: 36px !important;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ===================================================================
   5. CONFIGURACIÓN DE PARTÍCULAS
   =================================================================== */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1; /* Asegura que esté detrás de todo el contenido */
}

/* ===================================================================
   6. UTILIDADES GENERALES
   =================================================================== */
/* Ocultar elementos con Alpine.js */
[x-cloak] { 
  display: none !important; 
}

/* Fuentes display y body */
.font-display { 
  font-family: 'Montserrat', sans-serif; 
}

.font-body { 
  font-family: 'Inter', sans-serif; 
}