/* styles.css */

.scroll-element {
    opacity: 0; /* Inicialmente oculto */
    transition: opacity 0.5s, transform 1s;
  }
  
  .slide-from-left {
    transform: translateX(-100%);
  }
  
  .slide-from-right {
    transform: translateX(100%);
  }
  
  .slide-from-top {
    transform: translateY(-100%);
  }
  
  .slide-from-botton {
    transform: translateY(100%);
  }
  .appear {
    opacity: 1;
    transform: translateX(0);
  }
  

/* FUNDIDO */
.fade-in {
    opacity: 0;
    transition: opacity 0.5s;
}

.fade-in.appear {
    opacity: 1;
}

/* ESCALA */
.scale-down {
    transform: scale(0);
    transition: transform 0.5s;
}

.scale-down.appear {
    transform: scale(1);
}


/* DESVANECER */
.fade-from-top {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.5s, transform 0.5s;
}

.fade-from-top.appear {
    opacity: 1;
    transform: translateY(0);
}

/* DESVANECIDO ABAJO */
.fade-from-bottom {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s, transform 0.5s;
}

.fade-from-bottom.appear {
    opacity: 1;
    transform: translateY(0);
}


/* ROTA */
.rotate {
    transform: rotate(-180deg);
    transition: transform 0.5s;
}

.rotate.appear {
    transform: rotate(0);
}

/* CAMBIOCOLOR */
.color-change {
    background-color: #fff;
    transition: background-color 0.5s;
}

.color-change:hover {
    background-color: #f00;
}



/* DESPLAZAMIENTO SUEVE */
.smooth-scroll {
    scroll-behavior: smooth;
}

/* ROTACION HOVER ESCALA */
.hover-scale-rotate {
    transition: transform 0.3s;
}

.hover-scale-rotate:hover {
    transform: scale(1.1) rotate(15deg);
}

/* CAMBIO OPACIDAD HOVER */
.hover-opacity {
    transition: opacity 0.3s;
}

.hover-opacity:hover {
    opacity: 0.8;
}


/* CAMBIO COLOR HOVER */

.hover-color-change {
    transition: color 0.3s;
}

.hover-color-change:hover {
    color: #00f;
}