/* ------------ESTADO BASE--------------- */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}




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

.fade-up.visible {
  animation: fadeUp 0.6s ease-out forwards;
}


@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-down.visible {
  animation: fadeDown 0.6s ease-out forwards;
}


@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-left.visible {
  animation: fadeLeft 0.6s ease-out forwards;
}


@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-right.visible {
  animation: fadeRight 0.6s ease-out forwards;
}


@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in.visible {
  animation: zoomIn 0.6s ease-out forwards;
}


@keyframes heroEpic {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(50px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.hero-epic.visible {
  animation: heroEpic 1s ease-out forwards;
}


@keyframes vibrate {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes vibrate {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-2px); }
  40%  { transform: translateX(2px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.wsp-btn-box a {
  animation: vibrate-sequence 7s infinite;
}

/* Combina pausa + vibración */
@keyframes vibrate-sequence {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  88% {
    transform: translate(0, 0) rotate(0deg);
  }
  91% {
    transform: translate(-1px, 1px) rotate(-1deg);
  }
  93% {
    transform: translate(2px, -2px) rotate(1deg);
  }
  95% {
    transform: translate(-1.5px, 1.5px) rotate(-1deg);
  }
  97% {
    transform: translate(1px, -1px) rotate(0.6deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}