/* Wepster Pay (/pay/): 9. Кейси. Токени, основа й телефон — style/pay.css.
   Вкладки — initTabs у js/pay.js, рух (повзунок, число, місяці, поява) — js/pay-cases.js.
   Усі кейси лежать в одній клітинці сітки: невибрані невидимі, але місце під найвищий зарезервовано, тож картка
   не міняє висоту. Перехід: старий кейс гасне й зсувається на 8px у бік свого місця в рядку вкладок, новий в'їжджає
   каскадом (--i), число доїжджає (js), місяці заповнюються знизу. Без JS усі кейси видно списком; при
   prefers-reduced-motion усе стоїть у кінцевому вигляді. */

/* =====================================================================
   9. КЕЙСИ
   ===================================================================== */

.py-cases {
  --cs-tint: #e0fcec;
}

/* м'ятна підкладка рядка «З Wepster Pay» і міток: з акценту й полотна картки, тож слухається контексту розділу */
@supports (color: color-mix(in srgb, red, blue)) {
  .py-cases {
    --cs-tint: color-mix(in srgb, var(--c-accent) 20%, var(--c-panel));
  }
}

/* ---------- Вкладки: сегментований перемикач, підкладка їде від вкладки до вкладки ---------- */

.py-tabs {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  margin-top: clamp(24px, 4vh, 44px);
  padding: 4px;
  border-radius: var(--py-r-chip);
  background: var(--c-ghost);
  transition: opacity .6s ease, transform .8s var(--py-ease);
}

.py-tabs [role="tab"] {
  position: relative;
  z-index: 1;
  flex: none;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--py-r-chip);
  color: var(--c-soft);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transition: background-color .22s ease, color .22s ease, transform .22s var(--py-ease);
}

/* глобальна жовта «пляма» кнопок сайту (main.css) і жовтий колір тексту на hover тут не потрібні */
.py-tabs [role="tab"]:hover::before,
.py-tabs [role="tab"]:active::before {
  content: none;
}

.py-tabs [role="tab"]:hover {
  background: var(--c-ghost);
  color: var(--c-ink);
}

.py-tabs [role="tab"]:active {
  transform: scale(.97);
}

.py-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

/* вибрана вкладка (без JS і до ініціалізації — м'ятна сама; з повзунком фон віддає він) */
.py-tabs [role="tab"][aria-selected="true"] {
  background: var(--c-btn-bg);
  color: var(--c-btn-ink);
}

.py-tabs.has-thumb [role="tab"][aria-selected="true"] {
  background: transparent;
}

.py-tabs-thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: var(--w, 0);
  height: var(--h, 0);
  border-radius: var(--py-r-chip);
  background: var(--c-btn-bg);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--x, 0), var(--y, 0));
  transition: transform .5s var(--py-ease), width .5s var(--py-ease), height .5s var(--py-ease), opacity .2s ease;
}

.py-tabs-thumb.is-on {
  opacity: 1;
}

/* миттєва постановка: старт, зміна розмірів, reduced motion */
.py-tabs-thumb.is-set {
  transition: none;
}

/* ---------- Картка: усі кейси в одній клітинці ---------- */

.py-cases-stage {
  margin-top: 20px;
  padding: clamp(24px, 3.4vw, 52px);
  border-radius: var(--py-r-card);
  background-color: var(--c-panel);
  transition: background-color .6s ease;
}

.py-case + .py-case {
  margin-top: 56px;
}

.py-cases-stage.is-tabbed {
  display: grid;
}

.py-cases-stage.is-tabbed > .py-case {
  grid-area: 1 / 1;
  margin-top: 0;
  visibility: hidden;
  /* пішов — ховаємо, коли старий вміст уже погас */
  transition: visibility 0s linear .4s;
}

.py-cases-stage.is-tabbed > .py-case.is-on {
  visibility: visible;
  transition-delay: 0s;
}

.py-case {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "num cols"
    "link cols";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 5vw, 96px);
  align-content: start;
}

.py-case:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 10px;
  border-radius: 20px;
}

/* ---------- Ліва колонка: число, місяці, база ---------- */

.py-case-num {
  grid-area: num;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.py-case-big {
  color: var(--c-gain);
  font-size: clamp(46px, 5.6vw, 84px);
  font-weight: var(--py-h-w);
  line-height: 1;
  letter-spacing: var(--py-h-ls);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.py-case-up {
  margin-right: .06em;
  font-size: .42em;
  letter-spacing: -.01em;
}

.py-case--free .py-case-big {
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.04;
  white-space: normal;
}

.py-case-sub {
  max-width: 22em;
  margin-top: 16px;
  font-size: var(--py-fs-4);
  line-height: 1.45;
}

/* 12 клітинок = 12 місяців; кожна заповнюється знизу, каскадом */
.py-case-months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 560px;
  margin-top: 32px;
}

.py-case-months i {
  position: relative;
  display: block;
  height: 44px;
  border-radius: 10px;
  background: var(--c-ghost);
  overflow: hidden;
}

.py-case-months i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform-origin: 50% 100%;
  transition: transform 0s linear .4s;
}

.py-case-months i:nth-child(2) { --k: 1; }
.py-case-months i:nth-child(3) { --k: 2; }
.py-case-months i:nth-child(4) { --k: 3; }
.py-case-months i:nth-child(5) { --k: 4; }
.py-case-months i:nth-child(6) { --k: 5; }
.py-case-months i:nth-child(7) { --k: 6; }
.py-case-months i:nth-child(8) { --k: 7; }
.py-case-months i:nth-child(9) { --k: 8; }
.py-case-months i:nth-child(10) { --k: 9; }
.py-case-months i:nth-child(11) { --k: 10; }
.py-case-months i:nth-child(12) { --k: 11; }

.py-case-calc {
  max-width: 32em;
  margin-top: 16px;
  color: var(--c-soft);
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.py-case-calc b,
.py-case-calc span {
  display: block;
}

.py-case-calc b {
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
}

.py-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 30em;
  margin-top: 28px;
}

.py-case-tags li {
  padding: 10px 18px;
  border-radius: var(--py-r-chip);
  background: var(--cs-tint);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.py-case > .py-link {
  grid-area: link;
  align-self: start;
  justify-self: start;
  margin-top: 28px;
}

/* ---------- Права колонка: «Зараз → З Wepster Pay → Автоматизація» ---------- */

.py-case-cols {
  grid-area: cols;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.py-case-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 20px 24px;
  border-radius: 22px;
}

.py-case-row dt {
  padding-top: 3px;
  color: var(--c-soft);
  font-size: var(--py-fs-5);
  font-weight: 700;
  line-height: 1.4;
}

.py-case-row dd {
  font-size: 17px;
  line-height: 1.5;
}

.py-case-row dd b {
  font-weight: 700;
}

/* «Зараз» — те, що є сьогодні (графіт, без кольору втрат: помаранчевий чужий айдентиці), «З Wepster Pay» — вигода
   (зелений), «Автоматизація» — нейтрально */
.py-case-row:first-child dt {
  color: var(--c-ink);
}

.py-case-row--us {
  background: var(--cs-tint);
}

.py-case-row--us dt {
  color: var(--c-gain);
}

/* ---------- Перехід між кейсами ---------- */

/* кожен «такт» кейса: вміст лівої колонки, три рядки, посилання */
.py-case :is(.py-case-num > *, .py-case-row, .py-link) {
  transition: opacity .18s ease, transform .32s var(--py-ease);
}

.py-case-num > :nth-child(2) { --i: 1; }
.py-case-num > :nth-child(3) { --i: 2; }
.py-case-num > :nth-child(4) { --i: 3; }
.py-case-row:nth-child(1) { --i: 1; }
.py-case-row:nth-child(2) { --i: 2; }
.py-case-row:nth-child(3) { --i: 3; }
.py-case > .py-link { --i: 4; }

/* кейс лівіше за вибраний йде ліворуч, правіше — праворуч: зсув 8px у бік руху повзунка */
.py-case.is-before :is(.py-case-num > *, .py-case-row, .py-link) {
  opacity: 0;
  transform: translate3d(-8px, 0, 0);
}

.py-case.is-after :is(.py-case-num > *, .py-case-row, .py-link) {
  opacity: 0;
  transform: translate3d(8px, 0, 0);
}

.py-case.is-before .py-case-months i::after,
.py-case.is-after .py-case-months i::after {
  transform: scaleY(0);
}

/* вибраний: з'являється після того, як старий погас, сходинкою 55 мс */
.py-case.is-on :is(.py-case-num > *, .py-case-row, .py-link) {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease calc(110ms + var(--i, 0) * 55ms),
    transform .7s var(--py-ease) calc(110ms + var(--i, 0) * 55ms);
}

.py-case.is-on .py-case-months i::after {
  transform: none;
  transition: transform .55s var(--py-ease) calc(240ms + var(--k, 0) * 30ms);
}

/* перша поява блока (клас is-pre ставить js лише тоді, коли блок нижче екрана): усе чекає, потім грає як перехід */
.py-cases.is-pre .py-case.is-on :is(.py-case-num > *, .py-case-row, .py-link) {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: none;
}

.py-cases.is-pre .py-case.is-on .py-case-months i::after {
  transform: scaleY(0);
  transition: none;
}

.py-cases.is-pre .py-tabs {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: none;
}

/* порожньої білої рамки до появи вмісту немає: картка проявляється разом із ним */
.py-cases.is-pre .py-cases-stage {
  background-color: transparent;
  transition: none;
}

/* ---------- Невисокі екрани ноутбуків: картка вміщається разом із заголовком ---------- */

@media (min-width: 993px) and (max-height: 800px) {
  .py-tabs {
    margin-top: 20px;
  }

  .py-cases-stage {
    padding: 28px 36px;
  }

  .py-case-big {
    font-size: clamp(44px, 4.6vw, 64px);
  }

  .py-case--free .py-case-big {
    font-size: clamp(34px, 3.6vw, 52px);
  }

  .py-case-sub {
    margin-top: 10px;
    font-size: 17px;
  }

  .py-case-months {
    margin-top: 22px;
  }

  .py-case-months i {
    height: 34px;
  }

  .py-case-calc {
    margin-top: 12px;
  }

  .py-case > .py-link {
    margin-top: 18px;
  }

  .py-case-row {
    padding: 14px 20px;
  }

  .py-case-row dd {
    font-size: 16px;
    line-height: 1.45;
  }
}

/* ---------- Адаптив ---------- */

@media (max-width: 992px) {
  .py-case {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "num"
      "cols"
      "link";
    grid-template-rows: none;
    row-gap: 32px;
  }

  .py-case > .py-link {
    margin-top: 0;
  }

  /* одна колонка: число має всю ширину картки */
  .py-case-big {
    font-size: clamp(56px, 9vw, 80px);
  }

  .py-case--free .py-case-big {
    font-size: clamp(44px, 6.5vw, 60px);
  }
}

/* планшет: п'ять вкладок в один рядок ще вміщаються, якщо трохи стиснути */
@media (min-width: 768px) and (max-width: 880px) {
  .py-tabs [role="tab"] {
    padding: 0 14px;
    font-size: 15px;
  }
}

/* =====================================================================
   ТЕЛЕФОН (до 767px)
   Вкладки — одна стрічка чипів, що гортається вбік (вибраний чип несе фон сам, повзунок прихований, тож по вертикалі
   ніщо не їздить). Видно лише вибраний кейс, тож картка має його висоту без запасу під найвищий; висоту
   веде js (клас is-tween). Новий кейс з'являється м'яким фейдом, місяці заповнюються каскадом.
   ===================================================================== */

@media (max-width: 767px) {
  .py-cases .py-h2 {
    max-width: 11em;
    text-wrap: balance;
  }

  .py-tabs {
    flex-wrap: nowrap;
    width: auto;
    max-width: none;
    gap: 8px;
    margin: 28px calc(var(--py-x) * -1) 0;
    padding: 0 var(--py-x);
    overflow-x: auto;
    border-radius: 0;
    background: none;
    scroll-padding-inline: var(--py-x);
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .py-tabs::-webkit-scrollbar {
    display: none;
  }

  /* край згасає лише з того боку, де є ще вкладки */
  .py-tabs.has-more-end {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }

  .py-tabs.has-more-start {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px);
    mask-image: linear-gradient(90deg, transparent, #000 36px);
  }

  .py-tabs.has-more-start.has-more-end {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  }

  .py-tabs [role="tab"] {
    padding: 0 18px;
    background: var(--c-ghost);
    font-size: var(--py-fs-4);
    scroll-snap-align: center;
  }

  .py-tabs [role="tab"]:hover {
    background: var(--c-ghost);
  }

  /* повзунок на телефоні не потрібен: вибраний чип має власний фон (і ніколи не їде між рядками) */
  .py-tabs-thumb {
    display: none;
  }

  .py-tabs.has-thumb [role="tab"][aria-selected="true"],
  .py-tabs [role="tab"][aria-selected="true"] {
    background: var(--c-btn-bg);
    color: var(--c-btn-ink);
  }

  .py-cases-stage {
    margin-top: 16px;
    padding: 24px 20px 28px;
    transition: background-color .6s ease, height .22s var(--py-ease);
  }

  .py-cases-stage.is-tween {
    overflow: hidden;
  }

  /* лише вибраний кейс у потоці: висота картки = висота кейса */
  .py-cases-stage.is-tabbed > .py-case:not(.is-on) {
    display: none;
  }

  .py-cases-stage.is-tabbed > .py-case.is-on {
    animation: py-case-in .22s ease both;
  }

  .py-case {
    row-gap: 28px;
  }

  .py-case-big {
    font-size: var(--py-fs-1);
  }

  .py-case--free .py-case-big {
    font-size: 36px;
  }

  .py-case-sub {
    margin-top: 12px;
    font-size: var(--py-fs-4);
  }

  .py-case-months {
    gap: 4px;
    margin-top: 20px;
  }

  .py-case-months i {
    height: 32px;
    border-radius: 7px;
  }

  .py-cases-stage.is-tabbed .py-case.is-on .py-case-months i::after {
    animation: py-case-fill .4s var(--py-ease) calc(var(--k, 0) * 22ms) both;
  }

  .py-cases.is-pre .py-case.is-on .py-case-months i::after {
    animation: none;
  }

  .py-case-calc {
    font-size: var(--py-fs-5);
  }

  .py-case-calc b {
    font-size: var(--py-fs-5);
  }

  .py-case-tags li {
    font-size: var(--py-fs-5);
  }

  .py-case-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px 0;
    border-radius: 20px;
  }

  /* м'ятна плитка виходить на 16px у поля картки, тож текст усіх рядків стоїть на одній лінії */
  .py-case-row--us {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .py-case-row dt {
    padding-top: 0;
  }

  .py-case-row dd {
    font-size: var(--py-fs-4);
    line-height: 1.45;
  }

  .py-case > .py-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--py-tap);
  }
}

@keyframes py-case-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes py-case-fill {
  from {
    transform: scaleY(0);
  }

  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .py-cases-stage,
  .py-tabs,
  .py-tabs [role="tab"],
  .py-tabs-thumb,
  .py-case,
  .py-case :is(.py-case-num > *, .py-case-row, .py-link),
  .py-case-months i::after {
    transition: none !important;
    animation: none !important;
  }
}