/* Wepster Pay (/pay/): 6–7. Блекаут і рахунок голосом (дві колонки з телефоном). Токени, основа й телефон — style/pay.css.
   Сцени (шар «світло гасне», QR, голос) — style/pay-scenes.css + js/pay-scenes.js. */

/* =====================================================================
   6–7. БЛЕКАУТ І ГОЛОС — дві колонки (одна сітка, дзеркально)
   ===================================================================== */

.py-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(40px, 6vw, 120px);
}

.py-split-stage {
  display: flex;
  justify-content: center;
}

.py-voice .py-split-stage {
  order: -1;
}

.py-voice .py-split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* =====================================================================
   6. БЛЕКАУТ
   ===================================================================== */

/* Глибока темрява: фон блока й шар «світло гасне» (.py-lights, pay-scenes.css) одного кольору, тож межа між ними
   зникає, коли шар повністю непрозорий. Блок лежить над шаром (z 101 проти 100): світиться, поки решта гасне. */
.py-blackout,
.py-lights {
  --py-deep: #0b0c0c;
}

.py-blackout {
  --c-bg: var(--py-deep);
  --c-panel: #171918;
  --c-line: rgba(255, 255, 255, .08);
  --py-card-hi: #212523;
  z-index: 101;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}

.py-blackout .py-note {
  color: var(--c-soft);
}

/* ---------- П1: чотири факти — пронумеровані картки-виноски ---------- */

.py-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 28px 22px;
  margin-top: 56px;
  counter-reset: fact;
}

.py-facts li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 28px 26px 26px 30px;
  border-radius: var(--py-r-card);
  background: linear-gradient(160deg, var(--py-card-hi) 0%, var(--c-panel) 72%);
  box-shadow:
    inset 0 0 0 1px var(--c-line),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 28px 46px -30px #000;
  color: var(--c-ink);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.45;
  letter-spacing: -.005em;
  transform: rotate(var(--r, 0deg));
  counter-increment: fact;
}

.py-facts li:nth-child(1) { --r: -1deg; }
.py-facts li:nth-child(2) { --r: .8deg; }
.py-facts li:nth-child(3) { --r: .6deg; }
.py-facts li:nth-child(4) { --r: -.9deg; }

/* м'ятний номер на куті картки */
.py-facts li::before {
  content: counter(fact);
  position: absolute;
  top: -13px;
  left: -9px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--c-accent) 55%, transparent);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Підкладка телефона: світло йде від екрана, а не заливає блок ---------- */

.py-blackout .py-split-stage {
  position: relative;
  isolation: isolate;
}

/* ореол: тісне м'ятне ядро за телефоном і широка нейтральна напівтінь без краю */
.py-blackout .py-split-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4% -22% -8%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 37% 43% at 50% 47%, color-mix(in srgb, var(--c-accent) 25%, transparent), color-mix(in srgb, var(--c-accent) 10%, transparent) 50%, transparent 100%),
    radial-gradient(ellipse 54% 62% at 50% 50%, rgba(255, 255, 255, .06), transparent 100%);
}

/* м'ятна пляма світла на поверхні під телефоном */
.py-blackout .py-split-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -36px;
  left: 50%;
  width: 78%;
  height: 60px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 36%, transparent), color-mix(in srgb, var(--c-accent) 9%, transparent) 62%, transparent);
}

/* корпус: тонкий світлий кант і тінь під ним; м'ятний відблиск по контуру — окремий шар .py-halo (opacity),
   короткий, без широкої хмари */
.py-blackout .py-phone--glow {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 0 0 3px rgba(0, 0, 0, .6),
    0 50px 90px -40px #000;
}

.py-halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-accent) 10%, transparent),
    0 0 64px -18px color-mix(in srgb, var(--c-accent) 50%, transparent);
}

/* QR сам світиться: біла плашка кидає м'ятне світло на темний екран */
.py-blackout .py-qr-wrap {
  border-radius: 14px;
  box-shadow: 0 0 56px -10px color-mix(in srgb, var(--c-accent) 34%, transparent);
}

/* =====================================================================
   7. ГОЛОС
   ===================================================================== */

/* Три слова — три кроки сцени: великі, у стовпчик, вирівняні за ритмом блекауту (заголовок → 32px → зміст) */
.py-voice .py-h3 {
  margin-top: 32px;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -.028em;
}

.py-voice .py-h3 span {
  display: block;
}

.py-voice .py-lead {
  margin-top: 32px;
}

/* рядок вводу з мікрофоном внизу екрана чату */
.py-vin {
  display: flex;
  align-items: center;
  gap: 8px;
}

.py-vin-field {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--c-phone-panel);
  color: var(--c-phone-soft);
  font-size: 14px;
}

.py-vin-mic {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  transition: transform .35s var(--py-ease);
}

.py-vin-mic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* силует голосового: ритм із шести, по краях нижче */
.py-msg--voice .py-wave {
  height: 26px;
}

.py-msg--voice .py-wave i {
  height: calc(var(--wb, 52%) * var(--we, 1));
}

.py-msg--voice .py-wave i:nth-child(6n + 1) { --wb: 38%; }
.py-msg--voice .py-wave i:nth-child(6n + 2) { --wb: 64%; }
.py-msg--voice .py-wave i:nth-child(6n + 3) { --wb: 92%; }
.py-msg--voice .py-wave i:nth-child(6n + 4) { --wb: 54%; }
.py-msg--voice .py-wave i:nth-child(6n + 5) { --wb: 78%; }
.py-msg--voice .py-wave i:nth-child(6n) { --wb: 44%; }
.py-msg--voice .py-wave i:nth-child(-n + 4),
.py-msg--voice .py-wave i:nth-last-child(-n + 4) { --we: .72; }
.py-msg--voice .py-wave i:nth-child(n + 9):nth-child(-n + 19) { --we: 1.08; }

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

/* планшет: текст і телефон лишаються поруч (телефон завжди 300px, друга колонка забирає решту) */
@media (max-width: 992px) {
  .py-split {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }

  .py-voice .py-split {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* ТЕЛЕФОН (до 767px). Текст і телефон міняються місцями: спершу доказ, потім подробиці.
   .py-split-copy стає display: contents, тож його діти (заголовок, список, примітка) і сцена стають
   рядками однієї сітки й ходять за order. Блекаут: заголовок → QR-сцена → чотири факти списком → примітка.
   Голос: заголовок → лід → телефон, обрізаний знизу вгору до 420px → три кроки. */
@media (max-width: 767px) {
  .py-split,
  .py-voice .py-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .py-split-copy {
    display: contents;
  }

  .py-split-copy > .py-h2 { order: 1; }
  .py-split-stage,
  .py-voice .py-split-stage { order: 3; }

  /* ---------- Блекаут ---------- */

  .py-blackout {
    --py-phone-z: .76;
  }

  .py-blackout .py-split-stage {
    margin-top: 28px;
  }

  .py-blackout .py-facts {
    order: 4;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 40px;
    border-bottom: 1px solid var(--c-line);
  }

  .py-blackout .py-note {
    order: 5;
    margin-top: 20px;
  }

  /* факти — рядки списку з м'ятним номером, без нахилених карток */
  .py-facts li,
  .py-facts li:nth-child(n) {
    --r: 0deg;

    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    column-gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--c-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: var(--py-fs-4);
    line-height: 1.5;
  }

  .py-facts li::before {
    position: static;
    margin-top: 1px;
  }

  /* ---------- Голос ---------- */

  .py-voice .py-split-copy > .py-lead {
    order: 2;
    margin-top: 16px;
    font-size: var(--py-fs-4);
    line-height: 1.5;
  }

  /* сцена: видно нижні ~420px телефона (останні репліки й рядок вводу), верх зрізано чисто:
     clip-path обрізає лише зверху, тінь знизу лишається, а градієнт кольору поля м'яко зводить зріз нанівець */
  .py-voice .py-split-stage {
    position: relative;
    align-items: flex-end;
    height: 420px;
    margin-top: 28px;
    clip-path: inset(0 -40px -80px);
  }

  .py-voice .py-split-stage::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 64px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--c-bg) 8%, transparent);
  }

  .py-voice .py-split-copy > .py-h3 {
    order: 4;
    margin-top: 32px;
    font-size: var(--py-fs-3);
    line-height: 1.25;
  }

  .py-voice .py-h3 span {
    display: inline;
  }

  /* телефон на сторінці вужчий (270×558): тонший силует голосового й одна репліка-контекст */
  .py-msg--voice .py-wave {
    gap: 1.5px;
  }

  .py-msg--voice .py-wave i {
    width: 2.4px;
  }

  .py-chat-day + .py-msg {
    display: none;
  }
}