/* CSS Scroll-driven Animations - не обрабатывается Tailwind */

.scroll-container {
  view-timeline-name: --main-scroll;
  view-timeline-axis: block;
}

@keyframes bg-scale {
  from {
    margin-inline: var(--start-spacing);
  }
  to {
    margin-inline: 0;
  }
}

.section-bg {
  --start-spacing: 4px;
  animation: bg-scale both;
  animation-timeline: --main-scroll;
  animation-range: entry 90% contain 40%;
}

@media (min-width: 960px) {
  .section-bg {
    --start-spacing: 16px;
  }
}

@media (min-width: 1320px) {
  .section-bg {
    --start-spacing: 40px;
  }
}

/* Features component animations */
.active-text {
  color: var(--color-brand-additional) !important;
}

.active-btn {
  background-color: black;
}

@keyframes tabs-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes layer-up-wrapper {
  from {
    margin-bottom: 54px;
  }
  to {
    margin-bottom: 0;
  }
}

@keyframes layer-up {
  from {
    transform: translateY(92px);
  }
  to {
    transform: translateY(0px);
  }
}

@keyframes assemble {
  from {
    opacity: 1;
    transform: var(--start);
    box-shadow: 14px 18px 48px 0px rgba(15, 27, 47, 0.27);
  }
  to {
    opacity: 1;
    transform: translate(0) rotate(0) scale(1);
    box-shadow: 0;
  }
}

@media (min-width: 1320px) {
  /* Анимация табов */
  .tabs-appearance {
    opacity: 0;
    animation: tabs-in both;
    animation-timeline: --main-scroll;
    animation-range: contain 30% contain 35%;
  }

  /* Анимация экрана под карточки */
  .assembly-bg {
    animation: layer-up both;
    animation-timeline: --main-scroll;
    animation-range: entry 90% contain 35%;
  }

  /* Анимация экрана под карточки */
  .assembly-bg-wrapper {
    animation: layer-up-wrapper both;
    animation-timeline: --main-scroll;
    animation-range: entry 90% contain 35%;
  }

  /* Анимация карточек на первом табе */
  .feature-card {
    display: block;
    animation: assemble both;
    animation-timeline: --main-scroll;
    animation-range: entry 90% contain 35%;
  }

  .card-backlog {
    --start: translate(-270px, -290px) scale(1.31);
  }
  .card-to-do {
    --start: translate(20px, -130px) scale(1.42);
  }
  .card-in-progress {
    --start: translate(65px, -90px) scale(1.21);
  }
  .card-completed {
    --start: translate(150px, -340px) scale(1.34);
  }

  #features.is-static .feature-card,
  #features.is-static .assembly-bg,
  #features.is-static .assembly-bg-wrapper,
  #features.is-static .tabs-appearance {
    animation: none !important;
    transform: none !important;
    opacity: 1;
  }
}