/* =========================================
   BASE DE ANIMACIONES SCROLL
   ========================================= */
.anim-item {
  opacity: 0;
  filter: blur(10px);
  will-change: transform, opacity;
}

.anim-show {
  opacity: 1;
  filter: blur(0);
  /* Transición suave y elegante */
  transition:
    transform 2.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 2.0s ease,
    filter 1.8s ease;
}

/* DIRECCIONES DE ENTRADA */
[data-anim="top"] { transform: translateY(-100px); }
[data-anim="up"] { transform: translateY(100px); }
[data-anim="left"] { transform: translateX(-100px); }
[data-anim="right"] { transform: translateX(100px); }
[data-anim="zoom"] { transform: scale(1.15); }
[data-anim="fade"] { transform: scale(0.95); }

/* ACTIVACIÓN (Estado Final) */
.anim-show[data-anim] {
  transform: translate(0,0) scale(1) !important;
}

/* =========================================
   EFECTOS HOVER PREMIUM AUTOMÁTICOS
   ========================================= */

/* 1. Tarjetas de Categorías de Reciclaje (Vixual grid) */
#vix1, #vix2, #vix3, #vix4 {
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 12px;
}
#vix1:hover, #vix2:hover, #vix3:hover, #vix4:hover {
  transform: translateY(-12px) scale(1.02) !important;
  box-shadow: 0 25px 45px -10px rgba(0, 0, 0, 0.15);
  filter: brightness(1.04);
}

/* 2. Botones Rápidos (Donar / Reciclar) */
#contact img {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#contact img:hover {
  transform: scale(1.08) rotate(-2deg);
  filter: brightness(1.1) drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}

/* 3. Imágenes de Banners y Galerías (Heros, About, etc.) */
#heros img, #about img, #herox img, #heroz img {
  transition: all 0.5s ease;
  border-radius: 8px; /* Opcional: suaviza los bordes */
}
#heros img:hover, #about img:hover, #herox img:hover, #heroz img:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2));
}

/* 4. Iconos de Redes Sociales (Footer) */
#social-media a img {
  transition: all 0.3s ease;
}
#social-media a:hover img {
  transform: translateY(-8px) scale(1.15);
  filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
}

/* 5. Refuerzo al Botón Pulse (Flotantes Whatsapp/Messenger) */
.img-pulse {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.img-pulse:hover {
  transform: scale(1.1);
  filter: brightness(1.15);
}