/* Motion layer */
html:not(.is-anim-ready) [data-animate]{
  opacity: 1;
  transform: none;
}

.is-anim-ready [data-animate]{
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform, filter;
}

.is-anim-ready [data-animate="fade"]{
  transform: none;
}

.is-anim-ready [data-animate="rise"]{
  filter: blur(10px);
}

.is-anim-ready [data-animate="split-left"]{
  transform: translate3d(-44px, 0, 0);
  filter: blur(8px);
}

.is-anim-ready [data-animate="split-right"]{
  transform: translate3d(44px, 0, 0);
  filter: blur(8px);
}

.is-anim-ready [data-animate="scale"]{
  transform: translate3d(0, 24px, 0) scale(0.96);
  filter: blur(8px);
}

.is-anim-ready [data-animate].is-visible{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.is-anim-ready .header__wrap{
  animation: navDrop 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .hero__div svg path{
  stroke-dasharray: 91;
  stroke-dashoffset: 91;
  animation: lineDraw 0.9s 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.is-anim-ready .hero__visual{
  animation: heroPhotoIn 1.2s 0.16s cubic-bezier(0.16, 1, 0.3, 1) both, heroFloat 7s 1.4s ease-in-out infinite;
}

.is-anim-ready .hero__visual::before{
  animation: bluePulse 6s ease-in-out infinite;
}

.is-anim-ready .hero__up::before{
  animation: blueDrift 7s ease-in-out infinite;
}

.hero__down_item{
  backface-visibility: hidden;
}

.hero__down_item::before{
  animation: cardAura 6s ease-in-out infinite;
}

.is-anim-ready .we{
  animation: weBgAwake 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .we::before{
  animation: weBlueBreath 8s ease-in-out infinite;
}

.is-anim-ready .we__item.is-visible .we__item-div{
  animation: statLineIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .we__item.is-visible .we__item-dot{
  animation: dotWake 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(2){ animation-delay: 40ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(3){ animation-delay: 80ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(4){ animation-delay: 120ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(5){ animation-delay: 160ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(6){ animation-delay: 200ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(7){ animation-delay: 240ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(8){ animation-delay: 280ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(9){ animation-delay: 320ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(10){ animation-delay: 360ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(11){ animation-delay: 400ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(12){ animation-delay: 440ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(13){ animation-delay: 480ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(14){ animation-delay: 520ms; }
.is-anim-ready .we__item.is-visible .we__item-dot:nth-child(15){ animation-delay: 560ms; }

.we__clients-line--left .we__clients-track{
  animation: clientsLeft 34s linear infinite;
}

.we__clients-line--right .we__clients-track{
  animation: clientsRight 38s linear infinite;
}

.we__clients-row:hover .we__clients-track{
  animation-play-state: paused;
}

.btn,
.acc-btn,
.color-btn,
.footer__btn{
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s ease,
    background 0.28s ease;
}

.color-btn{
  position: relative;
  overflow: hidden;
}

.color-btn::after{
  content: "";
  position: absolute;
  inset: -45% auto -45% -40%;
  width: 38%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, rgb(var(--color-white-rgb) / 0), rgb(var(--color-white-rgb) / 0.42), rgb(var(--color-white-rgb) / 0));
  animation: buttonSheen 4.2s ease-in-out infinite;
  pointer-events: none;
}

.is-anim-ready .about__btn{
  overflow: hidden;
}

.is-anim-ready .about__btn::before{
  content: "";
  position: absolute;
  inset: -1px;
  opacity: 0;
  background: radial-gradient(circle at 20% 0%, rgba(212, 144, 60, 0.24), transparent 42%);
  transition: opacity 0.32s ease;
  pointer-events: none;
}

.is-anim-ready .about__btn-active::before,
.is-anim-ready .about__btn:hover::before{
  opacity: 1;
}

.is-anim-ready .about__btn-active svg{
  animation: iconOrbitWake 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .about__content-active .about__content-item{
  animation: aboutItemIn 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .about__content-active .about__content-item:nth-of-type(2){
  animation-delay: 70ms;
}

.is-anim-ready .about__content-active .about__content-item:nth-of-type(3){
  animation-delay: 140ms;
}

.is-anim-ready .about__content-active .about__content-item:nth-of-type(4){
  animation-delay: 210ms;
}

.is-anim-ready .about__content-active .about__content-item:nth-of-type(5){
  animation-delay: 280ms;
}

.is-anim-ready .about__content-active .about__content-item:nth-of-type(6){
  animation-delay: 350ms;
}

.is-anim-ready .about__content-active .about__content-item:nth-of-type(7){
  animation-delay: 420ms;
}

.question-modal.is-open .question-modal__eyebrow,
.question-modal.is-open .question-modal__title,
.question-modal.is-open .question-modal__subtitle,
.question-modal.is-open .question-modal__form-slot{
  animation: modalPieceIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.question-modal.is-open .question-modal__title{
  animation-delay: 70ms;
}

.question-modal.is-open .question-modal__subtitle{
  animation-delay: 130ms;
}

.question-modal.is-open .question-modal__form-slot{
  animation-delay: 200ms;
}

.is-anim-ready .details__item.is-visible .details__item-paragraf{
  animation: detailsItemIn 0.64s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .details__item.is-visible .details__item-paragraf:nth-of-type(2){
  animation-delay: 80ms;
}

.is-anim-ready .details__item.is-visible .details__item-paragraf:nth-of-type(3){
  animation-delay: 160ms;
}

.is-anim-ready .details__item.is-open .details__item-content > :nth-child(n+6){
  animation: detailsExtraIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .format__card.is-visible .format__card-media{
  animation: formatMediaIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .format__card.is-visible .format__card-title,
.is-anim-ready .format__card.is-visible .format__card-content{
  animation: formatContentIn 0.68s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .format__card.is-visible .format__card-title{
  animation-delay: 80ms;
}

.is-anim-ready .format__card.is-visible .format__card-content{
  animation-delay: 150ms;
}

.is-anim-ready .feedback__feed-wrap.is-visible .feedback__card-div svg{
  animation: feedbackLineIn 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .feedback__feed-wrap.is-visible .feedback__card-ico{
  animation: feedbackQuoteIn 0.58s 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .feedback__feed-wrap.is-visible .feedback__card-title,
.is-anim-ready .feedback__feed-wrap.is-visible .feedback__card-descr,
.is-anim-ready .feedback__feed-wrap.is-visible .feedback__card-people{
  animation: feedbackPieceIn 0.68s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .feedback__feed-wrap.is-visible .feedback__card-title{
  animation-delay: 140ms;
}

.is-anim-ready .feedback__feed-wrap.is-visible .feedback__card-descr{
  animation-delay: 220ms;
}

.is-anim-ready .feedback__feed-wrap.is-visible .feedback__card-people{
  animation-delay: 300ms;
}

.is-anim-ready .faq__acc.is-visible .faq__acc-ico{
  animation: faqIconIn 0.54s 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .faq__acc.is-open .faq__acc-body > *{
  animation: faqAnswerIn 0.54s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-anim-ready .faq__acc.is-open .faq__acc-body > :nth-child(2){
  animation-delay: 60ms;
}

.is-anim-ready .faq__acc.is-open .faq__acc-body > :nth-child(3){
  animation-delay: 120ms;
}

.is-anim-ready .faq__acc.is-open .faq__acc-body > :nth-child(4){
  animation-delay: 180ms;
}

@keyframes navDrop{
  from{
    opacity: 0;
    transform: translate3d(0, -22px, 0) scale(0.98);
    filter: blur(10px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes lineDraw{
  to{
    stroke-dashoffset: 0;
  }
}

@keyframes heroPhotoIn{
  from{
    opacity: 0;
    transform: translate3d(58px, 28px, 0) scale(0.9);
    filter: blur(16px);
  }
  to{
    opacity: 1;
    transform: scale(0.95);
    filter: blur(0);
  }
}

@keyframes heroFloat{
  0%, 100%{
    translate: 0 0;
  }
  50%{
    translate: 0 -12px;
  }
}

@keyframes bluePulse{
  0%, 100%{
    opacity: 0.78;
    transform: scale(0.98);
  }
  50%{
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes blueDrift{
  0%, 100%{
    transform: translate3d(0, 0, 0) scale(1);
  }
  50%{
    transform: translate3d(24px, -10px, 0) scale(1.04);
  }
}

@keyframes cardAura{
  0%, 100%{
    opacity: 0.78;
    transform: scale(1);
  }
  50%{
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes buttonSheen{
  0%, 42%{
    transform: translateX(0) skewX(-18deg);
  }
  70%, 100%{
    transform: translateX(430%) skewX(-18deg);
  }
}

@keyframes aboutContentIn{
  from{
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
    filter: blur(10px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes aboutItemIn{
  from{
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(8px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes iconOrbitWake{
  0%{
    transform: rotate(-10deg) scale(0.9);
    filter: drop-shadow(0 0 0 rgba(212, 144, 60, 0));
  }
  58%{
    transform: rotate(5deg) scale(1.08);
    filter: drop-shadow(0 0 18px rgba(212, 144, 60, 0.36));
  }
  100%{
    transform: rotate(0) scale(1);
    filter: drop-shadow(0 0 10px rgba(212, 144, 60, 0.18));
  }
}

@keyframes modalPieceIn{
  from{
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    filter: blur(8px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes detailsItemIn{
  from{
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(8px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes detailsExtraIn{
  from{
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    filter: blur(8px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes formatMediaIn{
  from{
    opacity: 0;
    transform: translateX(-50%) translate3d(0, 34px, 0) scale(0.92);
    filter: blur(12px);
  }
  to{
    opacity: 1;
    transform: translateX(-50%) translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes formatContentIn{
  from{
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    filter: blur(8px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes feedbackLineIn{
  from{
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  to{
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}

@keyframes feedbackQuoteIn{
  from{
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.86);
    filter: blur(8px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes feedbackPieceIn{
  from{
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(8px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes faqIconIn{
  from{
    opacity: 0;
    transform: rotate(-18deg) scale(0.84);
    filter: blur(8px);
  }
  to{
    opacity: 1;
    transform: rotate(0) scale(1);
    filter: blur(0);
  }
}

@keyframes faqAnswerIn{
  from{
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    filter: blur(6px);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes weBgAwake{
  from{
    background-position: center calc(100% + 210px);
  }
  to{
    background-position: center calc(100% + 180px);
  }
}

@keyframes weBlueBreath{
  0%, 100%{
    opacity: 0.78;
    transform: scale(1);
  }
  50%{
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes statLineIn{
  from{
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  to{
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}

@keyframes dotWake{
  from{
    opacity: 0;
    transform: translateY(-8px) scaleY(0.2);
  }
  to{
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes clientsLeft{
  from{
    transform: translate3d(0, 0, 0);
  }
  to{
    transform: translate3d(calc(-50% - 12px), 0, 0);
  }
}

@keyframes clientsRight{
  from{
    transform: translate3d(calc(-50% - 12px), 0, 0);
  }
  to{
    transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 1025px) and (max-width: 1366px), (min-width: 1025px) and (max-height: 820px){
  @keyframes heroPhotoIn{
    from{
      opacity: 0;
      transform: translate3d(48px, 22px, 0) scale(0.78);
      filter: blur(16px);
    }
    to{
      opacity: 1;
      transform: scale(0.82);
      filter: blur(0);
    }
  }
}

@media (max-width: 1024px){
  .is-anim-ready .hero__visual{
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .is-anim-ready [data-animate]{
    opacity: 1;
    transform: none;
    filter: none;
  }

  .is-anim-ready .format__card .format__card-media{
    opacity: 1;
    transform: translateX(-50%);
    filter: none;
  }

  .is-anim-ready .format__card .format__card-title,
  .is-anim-ready .format__card .format__card-content{
    opacity: 1;
    transform: none;
    filter: none;
  }
}
