/* animaciones.css */
/* Sistema de animaciones por data attributes */

/* ===== ESTADO INICIAL ===== */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ===== KEYFRAMES DE ANIMACIONES ===== */

/* Izquierda */
@keyframes animateInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Derecha */
@keyframes animateInRight {
  from {
    opacity: 0;
    transform: translateX(80px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Arriba */
@keyframes animateInUp {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Abajo */
@keyframes animateInDown {
  from {
    opacity: 0;
    transform: translateY(-80px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Fade */
@keyframes animateInFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Scale */
@keyframes animateInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Left-Up */
@keyframes animateInLeftUp {
  from {
    opacity: 0;
    transform: translate(-80px, 80px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* Left-Down */
@keyframes animateInLeftDown {
  from {
    opacity: 0;
    transform: translate(-80px, -80px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* Right-Up */
@keyframes animateInRightUp {
  from {
    opacity: 0;
    transform: translate(80px, 80px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* Right-Down */
@keyframes animateInRightDown {
  from {
    opacity: 0;
    transform: translate(80px, -80px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* ===== CLASES DE ANIMACIÓN ===== */

/* Animación izquierda */
[data-animate].animated-left,
[data-animate="left"].animated {
  animation: animateInLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animación derecha */
[data-animate].animated-right,
[data-animate="right"].animated {
  animation: animateInRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animación arriba */
[data-animate].animated-up,
[data-animate="up"].animated {
  animation: animateInUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animación abajo */
[data-animate].animated-down,
[data-animate="down"].animated {
  animation: animateInDown 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animación fade */
[data-animate].animated-fade,
[data-animate="fade"].animated {
  animation: animateInFade 0.8s ease forwards;
}

/* Animación scale */
[data-animate].animated-scale,
[data-animate="scale"].animated {
  animation: animateInScale 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animaciones combinadas */
[data-animate].animated-left-up,
[data-animate="left-up"].animated {
  animation: animateInLeftUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[data-animate].animated-left-down,
[data-animate="left-down"].animated {
  animation: animateInLeftDown 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[data-animate].animated-right-up,
[data-animate="right-up"].animated {
  animation: animateInRightUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[data-animate].animated-right-down,
[data-animate="right-down"].animated {
  animation: animateInRightDown 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ===== TRANSFORM INICIAL SEGÚN ANIMACIÓN ===== */
[data-animate="left"] {
  transform: translateX(-80px) scale(0.95);
}

[data-animate="right"] {
  transform: translateX(80px) scale(0.95);
}

[data-animate="up"] {
  transform: translateY(80px) scale(0.95);
}

[data-animate="down"] {
  transform: translateY(-80px) scale(0.95);
}

[data-animate="fade"] {
  transform: scale(1);
}

[data-animate="scale"] {
  transform: scale(0.8);
}

[data-animate="left-up"] {
  transform: translate(-80px, 80px) scale(0.95);
}

[data-animate="left-down"] {
  transform: translate(-80px, -80px) scale(0.95);
}

[data-animate="right-up"] {
  transform: translate(80px, 80px) scale(0.95);
}

[data-animate="right-down"] {
  transform: translate(80px, -80px) scale(0.95);
}

/* ===== TRANSICIONES SUAVES ===== */
[data-animate] {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ===== PARA REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== ANIMACIÓN PARA BOTÓN DE PRUEBA ===== */
.test-animate-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 20px 0;
}

.test-animate-btn:hover {
  background: #0056b3;
}