/* ============================================================
   MOTEL FLAMINGO — Animaciones discretas
   ============================================================ */

@keyframes heroZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

@keyframes aparecerArriba {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulsoSuave {
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(0,0,0,0.8), 0 0 0 0 rgba(31,122,82,0.5); }
  50% { box-shadow: 0 10px 30px -8px rgba(0,0,0,0.8), 0 0 0 12px rgba(31,122,82,0); }
}

/* Entrada al hacer scroll (activada por IntersectionObserver en main.js) */
.animar { opacity: 0; }
.animar.visible { animation: aparecerArriba 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* Retardos escalonados */
.retardo-1.visible { animation-delay: 0.1s; }
.retardo-2.visible { animation-delay: 0.2s; }
.retardo-3.visible { animation-delay: 0.3s; }
.retardo-4.visible { animation-delay: 0.4s; }

/* Entrada del hero (inmediata) */
.entrada { animation: aparecerArriba 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.entrada-1 { animation-delay: 0.15s; }
.entrada-2 { animation-delay: 0.35s; }
.entrada-3 { animation-delay: 0.55s; }
.entrada-4 { animation-delay: 0.75s; }

/* Transición al filtrar */
.grilla-animada > * { animation: aparecer 0.5s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animar { opacity: 1; }
}