/*
 * animate.css
 * Copyright (C) 2024 veypi
 *
 * Distributed under terms of the MIT license.
 */

:root {
  --vanimate-time: 200ms
}

.voa-animate-slow {
  --vanimate-time: 300ms
}

.voa-hover-line-b {
  cursor: pointer;
  position: relative;

  &:hover {
    opacity: 0.7;
  }

  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0.1em;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
  }

  &:hover::after {
    left: 0px;
    width: 100%;
  }
}

.voa-scale-off {
  transform-origin: center center;
  animation: scale-off var(--vanimate-time) ease-out forwards !important;
}

.voa-scale-in {
  transform-origin: center center;
  animation: scale-in var(--vanimate-time) ease-in forwards;
}

.voa-slidein-right {
  animation: slidein-right var(--vanimate-time) ease-in forwards;

}

.voa-slidein-up {
  animation: slidein-up var(--vanimate-time) ease-in forwards;
}


@keyframes scale-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-off {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes slidein-up {
  0% {
    transform: translateY(-100%) scale(1);
  }

  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes slidein-right {
  0% {
    transform: translateX(100%) scale(1);
  }

  100% {
    transform: translateX(0) scale(1);
  }
}