/* =========================================================
   Elemental W — Motion
   Movimiento compartido de la interfaz.
   ========================================================= */

@keyframes ew-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ew-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ew-mascot-enter {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-3deg) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes ew-mascot-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.ew-motion-reveal {
  opacity: 0;
}

.ew-motion-reveal.is-visible {
  animation:
    ew-fade-up 520ms cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.ew-motion-fade {
  opacity: 0;
}

.ew-motion-fade.is-visible {
  animation:
    ew-fade-in 420ms ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ew-motion-reveal,
  .ew-motion-fade {
    opacity: 1;
  }

  .ew-motion-reveal.is-visible,
  .ew-motion-fade.is-visible {
    animation: none;
  }
}