body.loading .bg-layer {
  opacity: 0;
}
body.loaded .bg-layer {
  opacity: 1;
  transition-delay: 1s;
  transition: opacity 1s ease;
}

body.loading .top-bar .logo,
body.loading .top-bar .blub-wrapper {
  opacity: 0;
  transform: translateX(-6px);
}

body.loaded .top-bar .logo,
body.loaded .top-bar .blub-wrapper {
  opacity: 1;
  transform: translateX(0);

  transition-property: opacity, transform, filter;
  transition-duration: var(--intro-dur);
  transition-timing-function: var(--ease);
}

body.loaded .top-bar .logo {
  transition-delay: calc(var(--intro-step) * 0);
}

body.loaded .top-bar .blub-wrapper {
  transition-delay: calc(var(--intro-step) * 5);
}

body.is-home.loaded .top-bar .logo {
  transition-delay: calc(var(--intro-menu-delay) + var(--intro-step) * 0);
}

body.is-home.loaded .top-bar .blub-wrapper {
  transition-delay: calc(var(--intro-menu-delay) + var(--intro-step) * 5);
}

@media (min-width: 991px) {
  body.loading .top-bar .menu a {
    opacity: 0;
    transform: translateX(-6px);
  }

  body.loaded .top-bar .menu a {
    opacity: 1;
    transform: translateX(0);
    transition-property: opacity, transform, filter;
    transition-duration: var(--intro-dur);
    transition-timing-function: var(--ease);
  }

  body.loaded .top-bar .menu a:nth-child(1) {
    transition-delay: calc(var(--intro-step) * 1);
  }
  body.loaded .top-bar .menu a:nth-child(2) {
    transition-delay: calc(var(--intro-step) * 2);
  }
  body.loaded .top-bar .menu a:nth-child(3) {
    transition-delay: calc(var(--intro-step) * 3);
  }
  body.loaded .top-bar .menu a:nth-child(4) {
    transition-delay: calc(var(--intro-step) * 4);
  }

  body.is-home.loaded .top-bar .menu a:nth-child(1) {
    transition-delay: calc(var(--intro-menu-delay) + var(--intro-step) * 1);
  }
  body.is-home.loaded .top-bar .menu a:nth-child(2) {
    transition-delay: calc(var(--intro-menu-delay) + var(--intro-step) * 2);
  }
  body.is-home.loaded .top-bar .menu a:nth-child(3) {
    transition-delay: calc(var(--intro-menu-delay) + var(--intro-step) * 3);
  }
  body.is-home.loaded .top-bar .menu a:nth-child(4) {
    transition-delay: calc(var(--intro-menu-delay) + var(--intro-step) * 4);
  }
}

@media (max-width: 990px) {
  body.loading .top-bar .top-bar__toggle {
    opacity: 0;
    transform: translateX(-6px);
  }

  body.loaded .top-bar .top-bar__toggle {
    opacity: 1;
    transform: translateX(0);
    transition-property: opacity, transform, filter;
    transition-duration: var(--intro-dur);
    transition-timing-function: var(--ease);
    transition-delay: calc(var(--intro-step) * 1);
  }

  body.is-home.loaded .top-bar .top-bar__toggle {
    transition-delay: calc(var(--intro-menu-delay) + var(--intro-step) * 1);
  }
}

/* char, words animation */

/* -----------------------------
   1) Cold-load: прячем всё целиком
------------------------------ */
body.loading [data-animate],
body.loading [data-animate][data-tag] {
  opacity: 0;
  transition: opacity 2s ease;
}
body.loading [data-animate].is-split,
body.loading [data-animate][data-tag] {
  opacity: 1;
}

body.loading .hero__points li,
body.loading [data-delay-cold],
body.loading [data-animate] .char,
body.loading [data-animate] .word,
body.loading [data-animate][data-tag] > .is-item {
  opacity: 0;
  will-change: opacity;
}

body.loading.animate [data-animate].is-split .char,
body.loading.animate [data-animate].is-split .word,
body.loading.animate [data-animate][data-tag] > .is-item {
  transition-property: opacity;
  transition-duration: var(--intro-dur);
  transition-timing-function: ease-out;
  transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * var(--intro-step));
  opacity: 1;
}

body.loading [data-animate].first .char {
  position: relative;
  z-index: 1;
  opacity: 0;
  will-change: opacity;
}

body.loading.animate [data-animate].first.is-split .char {
  transition-duration: 2s;
  transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 60ms);
}

/* Hero motto: special last letter (stub). */
body.loading [data-animate].first:first-of-type.is-split .char:last-of-type {
  display: inline-block;
  position: relative;
  z-index: 0;
  opacity: 0;
  transform: translateX(-20px);
  filter: blur(10px);
  will-change: color, opacity, transform, filter;
  color: var(--accent);
}

body.loading.animate
  [data-animate].first:first-of-type.is-split
  .char:last-of-type {
  display: inline-block;
  position: relative;
  z-index: 0;
  opacity: 0;
  transform: translateX(-20px);
  filter: blur(10px);
  color: var(--accent);
  animation: heroMottoLastLoop 8.8s var(--ease) 4400ms infinite both;
}

body.loading .hero__motto-perfect.first:first-of-type.is-split .char:nth-last-child(2),
body.loading .hero__motto-perfect.first:first-of-type.is-split .char:last-of-type {
  display: inline-block;
  position: relative;
  z-index: 0;
  opacity: 0;
  transform: translateX(-20px);
  filter: blur(10px);
  will-change: color, opacity, transform, filter;
  color: var(--accent);
}

body.loading.animate
  .hero__motto-perfect.first:first-of-type.is-split
  .char:nth-last-child(2) {
  animation: heroMottoSuffixLoop 8.8s var(--ease) 4400ms infinite both;
}

body.loading.animate
  .hero__motto-perfect.first:first-of-type.is-split
  .char:last-of-type {
  animation: heroMottoSuffixLoop 8.8s var(--ease) 4700ms infinite both;
}

@keyframes heroMottoLastLoop {
  0% {
    opacity: 0;
    transform: translateX(-20px);
    filter: blur(10px);
    color: var(--accent);
  }
  10% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    color: var(--accent);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    color: var(--accent);
  }
  70%,
  100% {
    opacity: 0;
    transform: translateX(20px);
    filter: blur(10px);
    color: var(--accent);
  }
}

@keyframes heroMottoSuffixLoop {
  0% {
    opacity: 0;
    transform: translateX(-20px);
    filter: blur(10px);
    color: var(--accent);
  }
  8% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    color: var(--accent);
  }
  48% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    color: var(--accent);
  }
  58%,
  100% {
    opacity: 0;
    transform: translateX(20px);
    filter: blur(10px);
    color: var(--accent);
  }
}

body.loaded:not(.loading) [data-animate] {
  opacity: 1;
}
body.loaded:not(.loading) [data-animate] .char,
body.loaded:not(.loading) [data-animate] .word,
body.loaded:not(.loading) [data-animate] > .is-item {
  opacity: 1;
  transition: none;
}
body.loaded:not(.loading)
  .hero__motto
  [data-animate].first:first-of-type.is-split
  .char:last-of-type {
  color: var(--accent);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.loading [data-animate][data-tag] > .is-item,
  body.loading [data-animate].is-split .char,
  body.loading [data-animate].is-split .word,
  body.loading [data-animate].first:first-of-type.is-split .char:last-of-type,
  body.loading .hero__motto-perfect.first:first-of-type.is-split .char:nth-last-child(2),
  body.loading .top-bar .logo,
  body.loading .top-bar .menu a,
  body.loading .top-bar .top-bar__toggle,
  body.loading .top-bar .blub-wrapper,
  body.loaded .top-bar .logo,
  body.loaded .top-bar .menu a,
  body.loaded .top-bar .top-bar__toggle,
  body.loaded .top-bar .blub-wrapper,
  body.loading .hero__motto,
  body.loading .hero__points,
  body.loading .hero-title,
  body.loading .bg-layer {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}