@import '@/styles/variables';

[data-transition="down-to-up"] {
  opacity: 0;
  transform: translateY(100px);
  transition: all 1s cubic-bezier(.19,1,.22,1);

  &.play-transition {
    opacity: 1;
    transform: translateY(0);
  }

  @include tablet-only {
    transform: translateY(50px);
  }

  @include mobile {
    transform: translateY(40px);
  }
}

[data-transition="up-to-down"] {
  opacity: 0;
  transform: translateY(-100px);
  transition: all 1s cubic-bezier(.19,1,.22,1);

  &.play-transition {
    opacity: 1;
    transform: translateY(0);
  }

  @include tablet-only {
    transform: translateY(-50px);
  }

  @include mobile {
    transform: translateY(-40px);
  }
}

[data-transition="fade-in"] {
  opacity: 0;
  transition: all 0.3s ease-out;

  &.play-transition {
    opacity: 1;
  }
}