// cubic-bezier(0.18, 0.66, 0.05, 0.96)
// cubic-bezier(0.77, 0, 0.17, 1.02)

@use 'sass:map';
@use '../vars.scss' as *;

.transition-cubic-bezier-ease-in {
  transition-timing-function: map.get($cubic-bezier, 'ease-in');
}

.transition-cubic-bezier-ease-in-out {
  transition-timing-function: map.get($cubic-bezier, 'ease-in-out');
}

.v-enter-active,
.v-leave-active {
  transition: opacity var(--va-transition-duration-fast) map.get($cubic-bezier, 'ease-in');
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  opacity: 1;
  transition: opacity var(--va-transition-duration-moderate) ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

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

  to {
    opacity: 1;
  }
}

// title-effects
.yun-title-effects {
  position: relative;
  
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    border: 2px solid;
    transition: var(--va-transition-duration);
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
  }

  &::before {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
    transform: translate3d(10px, 10px, 0);
  }

  &::after {
    right: 0;
    bottom: 0;
    border-width: 0 2px 2px 0;
    transform: translate3d(-10px, -10px, 0);
  }

  &:hover::before,
  &:hover::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}