/* Tetra — CADD: табы секции «What you can do» (.section_cadd-features).
   Состояния по Figma 12221:19712. Классы ставит tetra-cadd-features.js:
     .is-tabs-ready — на секции после инициализации
     .is-active     — на активном пункте .cadd-features_tab-active
     .is-paused     — на секции, пока она вне экрана (таймер и бегущая строка стоят)
   Custom code в Designer не выполняется — там все пункты остаются раскрытыми. */

.section_cadd-features .cadd-features_tabs { gap: 1.125rem; }

.section_cadd-features .cadd-features_tab-active {
  cursor: pointer;
  transition: margin-bottom .5s cubic-bezier(.22, 1, .36, 1);
}
.section_cadd-features .cadd-features_tab-active:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.25rem;
}

/* --- неактивный пункт: заголовок 51px / 15%, описание и бар скрыты --- */
.section_cadd-features .cadd-features_tab-title {
  font-size: 3.19rem;
  letter-spacing: -0.04em;
  opacity: 0.15;
  transition: font-size .5s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}
.section_cadd-features .cadd-features_tab-detail {
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: max-height .5s cubic-bezier(.22, 1, .36, 1),
              padding .5s cubic-bezier(.22, 1, .36, 1),
              opacity .3s ease;
}

/* --- активный пункт: заголовок 71.6px / 100%, описание и бар видны.
       До инициализации JS активным считается первый пункт. --- */
.section_cadd-features .cadd-features_tab-active.is-active,
.section_cadd-features:not(.is-tabs-ready) .cadd-features_tab-active:first-child {
  margin-bottom: 0.125rem;
}
.section_cadd-features .cadd-features_tab-active.is-active .cadd-features_tab-title,
.section_cadd-features:not(.is-tabs-ready) .cadd-features_tab-active:first-child .cadd-features_tab-title {
  font-size: 4.476rem;
  opacity: 1;
}
.section_cadd-features .cadd-features_tab-active.is-active .cadd-features_tab-detail,
.section_cadd-features:not(.is-tabs-ready) .cadd-features_tab-active:first-child .cadd-features_tab-detail {
  max-height: 6rem;
  padding-top: 0.5595rem;
  padding-bottom: 0.5595rem;
  opacity: 1;
  transition: max-height .5s cubic-bezier(.22, 1, .36, 1),
              padding .5s cubic-bezier(.22, 1, .36, 1),
              opacity .4s ease .15s;
}

/* --- прогресс-бар: заполнение (scaleX 0→1) рисует JS по таймеру пункта;
       таймер идёт только пока секция в зоне видимости --- */
.section_cadd-features .cadd-features_progress-bar {
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0% 50%;
}

/* --- сцена справа: кроссфейд скринов телефона и смена фонового слова --- */
.section_cadd-features .cadd-features_phone {
  transition: opacity .5s ease;
}
/* зум телефона (десктоп): через 1 с после включения пункта телефон плавно
   увеличивается к своей точке фокуса (у каждого пункта своя точка, сила и
   скорость — задаёт JS через --zoom-fy / --zoom-scale / --zoom-dur / --zoom-ease).
   Точка фокуса остаётся на месте, остальное уходит за край сцены.
   translateX(-50%) — центрирование из Webflow */
@media screen and (min-width: 480px) {
  .section_cadd-features .cadd-features_stage .cadd-features_phone {
    transform-origin: 50% var(--zoom-fy, 0%);
    transition: opacity .5s ease,
                transform var(--zoom-dur, 2s) var(--zoom-ease, cubic-bezier(0.77, 0, 0.175, 1));
  }
  .section_cadd-features .cadd-features_stage .cadd-features_phone.is-zoomed {
    transform: translateX(-50%) scale(var(--zoom-scale, 1.83));
  }
  .section_cadd-features .cadd-features_stage .cadd-features_phone.is-zoom-reset {
    transition: opacity .5s ease;
  }
}

.section_cadd-features .cadd-features_phone.is-hidden {
  opacity: 0;
}
.section_cadd-features .cadd-features_stage-word {
  transition: opacity .25s ease;
}
.section_cadd-features .cadd-features_stage-word.is-switching {
  opacity: 0;
}

/* бегущая строка: JS кладёт слова в .cadd-features_stage-track (копий на 2
   ширины сцены), дорожка бесконечно едет влево на 50% своей ширины */
.section_cadd-features.is-tabs-ready .cadd-features_stage-word {
  left: 0;
  transform: none;
}
.section_cadd-features .cadd-features_stage-track {
  display: flex;
  flex: none;
  will-change: transform;
  animation: cadd-features-marquee var(--cadd-marquee-duration, 20s) linear infinite;
}
.section_cadd-features .cadd-features_stage-track > span {
  flex: none;
}
.section_cadd-features.is-paused .cadd-features_stage-track {
  animation-play-state: paused;
}
@keyframes cadd-features-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .section_cadd-features .cadd-features_tab-active,
  .section_cadd-features .cadd-features_tab-title,
  .section_cadd-features .cadd-features_tab-detail,
  .section_cadd-features .cadd-features_phone,
  .section_cadd-features .cadd-features_stage-word {
    transition: none !important;
  }
  .section_cadd-features .cadd-features_phone.is-zoomed {
    transform: translateX(-50%) !important;
  }
  .section_cadd-features .cadd-features_stage-track {
    animation: none;
  }
}

/* --- МОБИЛКА (<=479): пункты в ряд листаются свайпом (snap к левому краю);
       активный пункт прокручивается на место первого — это делает JS --- */
@media screen and (max-width: 479px) {
  .section_cadd-features .cadd-features_tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .section_cadd-features .cadd-features_tabs::-webkit-scrollbar { display: none; }
  .section_cadd-features .cadd-features_tab-active {
    flex: none;
    scroll-snap-align: start;
  }
  /* на мобилке размеры слайда не меняются: у всех пунктов одинаковый кегль,
     описание и бар всегда на месте; активный отличается только прозрачностью */
  .section_cadd-features .cadd-features_tab-active,
  .section_cadd-features .cadd-features_tab-active.is-active { margin-bottom: 0; transition: none; }
  .section_cadd-features .cadd-features_tab-active .cadd-features_tab-title,
  .section_cadd-features .cadd-features_tab-active.is-active .cadd-features_tab-title {
    font-size: 4.476rem;
    transition: opacity .3s ease;
  }
  .section_cadd-features .cadd-features_tab-active .cadd-features_tab-detail,
  .section_cadd-features .cadd-features_tab-active.is-active .cadd-features_tab-detail {
    max-height: none;
    padding-top: 0.5595rem;
    padding-bottom: 0.5595rem;
    transition: opacity .3s ease;
  }
  .section_cadd-features .cadd-features_tab-active .cadd-features_tab-media {
    opacity: 0.4;
    transition: opacity .3s ease;
  }
  .section_cadd-features .cadd-features_tab-active.is-active .cadd-features_tab-media { opacity: 1; }
  /* слайд = своя карточка с телефоном + заголовок/текст; общая сцена скрыта */
  .section_cadd-features.is-tabs-ready .cadd-features_stage { display: none; }
  .section_cadd-features .cadd-features_tab-media {
    position: relative;
    width: 100%;
    height: 400px;
    margin-bottom: 1rem;
    overflow: hidden;
    background-color: #f4f5f7;
  }
  .section_cadd-features .cadd-features_tab-media .cadd-features_tab-phone {
    position: absolute;
    left: 50%;
    top: 32px;
    width: 235px;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
    opacity: 1;
  }
}
/* на десктопе карточек в пунктах нет — там общая сцена справа */
@media screen and (min-width: 480px) {
  .section_cadd-features .cadd-features_tab-media,
  .section_cadd-features .cadd-features_tab-active.is-clone { display: none; }
}