/* ============================================================
   COLEGIO MARCELINA — ANIMACIONES GLOBALES
   Sistema de animaciones centralizado v1.0
   Basado en documentación funcional v2
   ============================================================ */


/* ──────────────────────────────────────────
   @KEYFRAMES BASE
────────────────────────────────────────── */

/* Fade up — scroll reveal principal */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in — aparición simple sin movimiento */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade down — entrada desde arriba */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide in left — entrada desde izquierda */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in right — entrada desde derecha */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale in — aparición con escala */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse dot — punto pulsante pill hero */
@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
}

/* Pulse ring — anillo de pulso para badges y puntos de mapa */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Glow — pulso de sombra para botón WhatsApp flotante */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.50);
  }
  50% {
    box-shadow: 0 4px 32px rgba(34, 197, 94, 0.75);
  }
}

/* Glow indigo — pulso de sombra para elementos índigo */
@keyframes glowIndigo {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(76, 72, 200, 0.35);
  }
  50% {
    box-shadow: 0 4px 32px rgba(76, 72, 200, 0.60);
  }
}

/* Glow lima — pulso de sombra para elementos lima/acento */
@keyframes glowLima {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(132, 204, 22, 0.35);
  }
  50% {
    box-shadow: 0 4px 32px rgba(132, 204, 22, 0.60);
  }
}

/* Shimmer — efecto de carga en skeletons */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Carousel slide — transición entre slides */
@keyframes carrSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Badge entrada — pill inscripciones abiertas */
@keyframes badgeEnter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Scale bar — barra superior de cards de nivel */
@keyframes scaleBarX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* ──────────────────────────────────────────
   SCROLL REVEAL — Sistema IntersectionObserver
   Usar con JS: agrega .is-visible cuando entra al viewport
────────────────────────────────────────── */

.rv {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.rv.is-visible,
.rv.vis {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes de dirección */
.rv-left {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-left.is-visible { opacity: 1; transform: translateX(0); }

.rv-right {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-right.is-visible { opacity: 1; transform: translateX(0); }

.rv-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-scale.is-visible { opacity: 1; transform: scale(1); }

/* Delays escalonados — stagger para grids y listas */
.rv.d1, .rv-left.d1, .rv-right.d1, .rv-scale.d1 { transition-delay: 0.07s; }
.rv.d2, .rv-left.d2, .rv-right.d2, .rv-scale.d2 { transition-delay: 0.14s; }
.rv.d3, .rv-left.d3, .rv-right.d3, .rv-scale.d3 { transition-delay: 0.21s; }
.rv.d4, .rv-left.d4, .rv-right.d4, .rv-scale.d4 { transition-delay: 0.28s; }
.rv.d5, .rv-left.d5, .rv-right.d5, .rv-scale.d5 { transition-delay: 0.35s; }
.rv.d6, .rv-left.d6, .rv-right.d6, .rv-scale.d6 { transition-delay: 0.42s; }


/* ──────────────────────────────────────────
   FADE UP — Animación directa sin JS
────────────────────────────────────────── */

.fade-up {
  animation: fadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fade-up.delay-1 { animation-delay: 0.10s; }
.fade-up.delay-2 { animation-delay: 0.20s; }
.fade-up.delay-3 { animation-delay: 0.30s; }
.fade-up.delay-4 { animation-delay: 0.40s; }

.fade-in  { animation: fadeIn  0.45s ease both; }
.fade-down { animation: fadeDown 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }

.scale-in { animation: scaleIn 0.50s cubic-bezier(0.16, 1, 0.3, 1) both; }


/* ──────────────────────────────────────────
   HOVER LIFT — Cards, pilares, elementos interactivos
────────────────────────────────────────── */

/* Lift estándar — cards generales */
.hover-lift {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(15, 14, 36, 0.13);
}

/* Lift suave — hover menor para elementos pequeños */
.hover-lift-sm {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift-sm:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 14, 36, 0.10);
}

/* Lift fuerte — cards de nivel, razones, pasos */
.hover-lift-lg {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease;
}
.hover-lift-lg:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(15, 14, 36, 0.16);
}

/* Lift lateral — elementos dark sidebar, pilares dark */
.hover-slide-right {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s ease,
              border-color 0.22s ease;
}
.hover-slide-right:hover {
  transform: translateX(4px);
}

/* Scale hover — galería masonry, fotos */
.hover-scale {
  transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-scale:hover {
  transform: scale(1.02) translateY(-3px);
}

/* Scale hover fuerte — galería de nivel */
.hover-scale-lg {
  transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-scale-lg:hover {
  transform: scale(1.03) translateY(-3px);
}


/* ──────────────────────────────────────────
   HOVER BUTTONS — Estados de botones
────────────────────────────────────────── */

.hover-btn {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.18s ease;
}
.hover-btn:hover {
  transform: translateY(-2px);
}
.hover-btn:active {
  transform: scale(0.97);
}

/* Hover link con flecha — "Ver más →" */
.hover-arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.15s ease;
}
.hover-arrow:hover {
  gap: 9px;
}


/* ──────────────────────────────────────────
   GLOW EFFECTS
────────────────────────────────────────── */

/* Glow continuo — botón WhatsApp flotante */
.glow-whatsapp {
  animation: glowPulse 3s ease infinite;
}
.glow-whatsapp:hover {
  animation: none;
  transform: scale(1.10);
}

/* Glow continuo índigo */
.glow-indigo {
  animation: glowIndigo 3s ease infinite;
}
.glow-indigo:hover {
  animation: none;
}

/* Glow continuo lima */
.glow-lima {
  animation: glowLima 3s ease infinite;
}
.glow-lima:hover {
  animation: none;
}

/* Pulse dot — punto pulsante en pills */
.pulse-dot {
  animation: pulseDot 2s ease infinite;
}

/* Pulse ring — anillo expansivo */
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: pulseRing 2s ease infinite;
  border: 2px solid currentColor;
}

/* Skeleton shimmer — estados de carga */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% auto;
  animation: shimmer 1.8s linear infinite;
}


/* ──────────────────────────────────────────
   OVERLAY HOVER — Galerías e imágenes
────────────────────────────────────────── */

/* Contenedor con overlay al hover */
.hover-overlay {
  position: relative;
  overflow: hidden;
}

.hover-overlay .overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: flex-end;
  padding: 14px;
}

.hover-overlay:hover .overlay {
  opacity: 1;
}

/* Label reveal al hover — instalaciones */
.hover-label {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hover-overlay:hover .hover-label {
  opacity: 1;
}


/* ──────────────────────────────────────────
   BADGE Y PILL — Entradas animadas
────────────────────────────────────────── */

.badge-enter {
  animation: badgeEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.badge-enter.delay-1 { animation-delay: 0.15s; }
.badge-enter.delay-2 { animation-delay: 0.30s; }


/* ──────────────────────────────────────────
   ACCORDION — Estados open/close
────────────────────────────────────────── */

.acc-arrow {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.15s ease;
}
.acc-item.open .acc-arrow {
  transform: rotate(180deg);
}

.acc-body {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
}

/* FAQ icon rotate */
.faq-ico {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.15s ease,
              color 0.15s ease;
}
.faq-item.open .faq-ico {
  transform: rotate(45deg);
}


/* ──────────────────────────────────────────
   TRANSITIONS GLOBALES REUTILIZABLES
────────────────────────────────────────── */

/* Clases utilitarias de transición */
.transition-fast   { transition: all 0.15s ease; }
.transition-base   { transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.transition-slow   { transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.transition-reveal {
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Color y border transition */
.transition-color  { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }

/* Opacidad */
.transition-opacity { transition: opacity 0.22s ease; }