/* =========================================================
   VALRYN SHARED TRANSITIONS
========================================================= */

/* =========================================================
   PAGE ENTRANCE
========================================================= */

.aurora-enter {
  animation:
    auroraEnter
    0.65s
    ease
    both;
}

@keyframes auroraEnter {

  from {

    opacity: 0;

    transform:
      translateY(14px);

    filter:
      blur(6px);

  }

  to {

    opacity: 1;

    transform: none;

    filter: none;

  }

}

/* =========================================================
   FADE
========================================================= */

.fade-in {
  animation:
    valrynFadeIn
    .45s
    ease
    both;
}

@keyframes valrynFadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

/* =========================================================
   SCALE
========================================================= */

.scale-in {

  animation:
    valrynScale
    .35s
    ease
    both;

}

@keyframes valrynScale {

  from {

    opacity: 0;

    transform:
      scale(.96);

  }

  to {

    opacity: 1;

    transform:
      scale(1);

  }

}

/* =========================================================
   SLIDE UP
========================================================= */

.slide-up {

  animation:
    slideUp
    .45s
    ease
    both;

}

@keyframes slideUp {

  from {

    opacity: 0;

    transform:
      translateY(20px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}

/* =========================================================
   HOVER
========================================================= */

.hover-lift {

  transition:

    transform
    var(--transition),

    box-shadow
    var(--transition);

}

.hover-lift:hover {

  transform:
    translateY(-3px);

}

/* =========================================================
   BUTTONS
========================================================= */

button,
.button,
.btn {

  transition:

    background-color
    var(--transition-fast),

    border-color
    var(--transition-fast),

    color
    var(--transition-fast),

    transform
    var(--transition-fast),

    box-shadow
    var(--transition-fast);

}

/* =========================================================
   LINKS
========================================================= */

a {

  transition:

    color
    var(--transition-fast),

    opacity
    var(--transition-fast);

}

/* =========================================================
   INPUTS
========================================================= */

input,
textarea,
select {

  transition:

    border-color
    var(--transition-fast),

    box-shadow
    var(--transition-fast),

    background-color
    var(--transition-fast);

}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  * {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}