/* EFECTOS */

.reveal {
  opacity: 0;
  transition: all 1s ease;
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
}

/* Fade sutil */
.reveal.fade {
  transform: translateY(20px);
}

.reveal.fade.active {
  opacity: 1;
  transform: translateY(0);
}

/* Slide desde abajo muy suave */
.reveal.slide-up {
  transform: translateY(60px);
}

.reveal.slide-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* Slide desde izquierda */
.reveal.slide-left {
  transform: translateX(-40px);
}

.reveal.slide-left.active {
  transform: translateX(0);
}

/* Slide desde derecha */
.reveal.slide-right {
  transform: translateX(40px);
}

.reveal.slide-right.active {
  transform: translateX(0);
}

/* Slide desde abajo */
.reveal.slide-up {
  transform: translateY(40px);
}

.reveal.slide-up.active {
  transform: translateY(0);
}

/* Zoom sutil */
.reveal.zoom {
  transform: scale(0.97);
}

.reveal.zoom.active {
  transform: scale(1);
}

/* Variaciones de velocidad */
.reveal.fast {
  transition-duration: 0.6s;
}

.reveal.slow {
  transition-duration: 1.6s;
}

/* Aparición elegante tipo cortina */
.reveal.blur {
  filter: blur(10px);
}

.reveal.blur.active {
  opacity: 1;
  filter: blur(0);
}


@media (max-width: 992px) {

    .reveal.slide-left,
    .reveal.slide-right {
        transform: none !important;
    }

    .row.g-5 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

}

/* Cómo se aplica: 

<div class="col-lg-3 col-12 reveal slide-up"></div>

<link rel="stylesheet" href="css/animaciones.css">
<script src="js/animaciones.js" defer></script>

 */