body
  .header,
  .footer-desktop
    opacity: 0
    transition: opacity 0.5s ease-in
  &.loaded
    .header,
    .footer-desktop
      opacity: 1

.main
  &::after
    transform: translateY(102%)
  .footer-mobile
    opacity: 0
  .headline__subtitle,
  .headline__title,
  .headline__btnholder,
  .media__countdown
    opacity: 0
    transform: translateY(1rem)
  .main__media,
  .intro__background,
  .fullscreen-bg
    opacity: 0
  &.animate-in
    &:after
      animation: 0.8s 0.3s ease-in-out 1 both blockMove
    .main__media,
    .footer-mobile,
    .intro__background,
    .fullscreen-bg
      animation: 0.8s 0.3s ease-in-out 1 both itemsOpacity
    .headline__subtitle,
    .headline__title,
    .headline__btnholder,
    .media__countdown
      opacity: 1
      transform: translateY(0)
    .headline__subtitle
      transition: opacity 0.2s 0.8s, transform 0.2s 0.8s cubic-bezier(0.06, 0.71, 0.71, 1.25)
    .headline__title,
    .media__countdown
      transition: opacity 0.2s 0.9s, transform 0.2s 0.9s cubic-bezier(0.06, 0.71, 0.71, 1.25)
    .headline__btnholder
      transition: opacity 0.2s 1s, transform 0.2s 1s cubic-bezier(0.06, 0.71, 0.71, 1.25)
  &.animate-out
    opacity: 0
    visibility: hidden
    transition: all .5s ease-in-out

.inner
  opacity: 0
  visibility: hidden
  &::after
    transform: translateY(102%)
  .content-block
    opacity: 0
    transform: translateY(1rem)
  .inner__media
    opacity: 0
  &.animate-in
    opacity: 1
    visibility: visible
    &:after
      animation: 0.8s 0.3s ease-in-out 1 both blockMove
    .inner__media
      animation: 0.8s 0.3s ease-in-out 1 both itemsOpacity
    .content-block
      opacity: 1
      transform: translateY(0)
      &:nth-of-type(1)
        transition: opacity 0.2s 1s, transform 0.2s 1s cubic-bezier(0.06, 0.71, 0.71, 1.25)
      &:nth-of-type(2)
        transition: opacity 0.2s 1.1s, transform 0.2s 1.1s cubic-bezier(0.06, 0.71, 0.71, 1.25)
      &:nth-of-type(3)
        transition: opacity 0.2s 1.2s, transform 0.2s 1.2s cubic-bezier(0.06, 0.71, 0.71, 1.25)
      &:nth-of-type(4)
        transition: opacity 0.2s 1.3s, transform 0.2s 1.3s cubic-bezier(0.06, 0.71, 0.71, 1.25)
  &.animate-out
    opacity: 0
    visibility: hidden
    transition: all .5s ease-in-out

.nav
  opacity: 0
  visibility: hidden
  &::after
    transform: translateY(102%)
  .nav__background
    opacity: 0
  .navigation
    li
      opacity: 0
      transform: translate(0, 1rem)
  &.animate-in
    opacity: 1
    visibility: visible
    &:after
      animation: 0.8s 0.3s ease-in-out 1 both blockMove
    .nav__background
      opacity: 1
      transition: opacity 0.8s 0.6s ease-in
    .navigation
      li
        opacity: 1
        transform: translate(0, 0)
        &:nth-of-type(1)
          transition: opacity 0.2s 1.1s, transform 0.2s 1.1s cubic-bezier(0.06, 0.71, 0.71, 1.25)
        &:nth-of-type(2)
          transition: opacity 0.2s 1.2s, transform 0.2s 1.2s cubic-bezier(0.06, 0.71, 0.71, 1.25)
        &:nth-of-type(3)
          transition: opacity 0.2s 1.3s, transform 0.2s 1.3s cubic-bezier(0.06, 0.71, 0.71, 1.25)
        &:nth-of-type(4)
          transition: opacity 0.2s 1.4s, transform 0.2s 1.4s cubic-bezier(0.06, 0.71, 0.71, 1.25)
  &.animate-out
    opacity: 0
    visibility: hidden
    transition: all .5s ease-in-out
 
.popup
  opacity: 0
  visibility: hidden
  transition: visibility 0s 0s, opacity 0.3s 0s
  .popup__content
    opacity: 0
    transform: translateY(30px)
    transition: opacity 0.6s, transform 0.6s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  &.animate-in
    opacity: 1
    visibility: visible
    .popup__content
      opacity: 1
      transform: translateY(0)
  &.animate-out
    opacity: 0
    visibility: hidden
    transition: opacity 0.3s 0.6s, visibility 0s 0.9s
    .popup__content
      opacity: 0
      transform: translateY(-30px)

.popup-close
  transform: scale3d(0,0,0)
  transition: color 0.3s, transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  &.is-scaled-up
    transform: scale3d(1,1,1)