/* Сцени Wepster Pay (js/pay-scenes.js): дотик у hero, кроки #how, блекаут, голос.
   Лише transform/opacity. Кольори — токени секцій. Стан «озброєно» ставить скрипт: без нього все видно. */

.py-phone-screen { position: relative; }

/* ---------- Hero: крапка-дотик ---------- */
.py-tap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-phone-bg);
  box-shadow: 0 0 0 1px var(--c-accent);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--tx, 50%), var(--ty, 50%)) scale(1.5);
}

.py-tap.is-on { animation: py-tap 520ms var(--py-ease) both; }

@keyframes py-tap {
  0% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.5); }
  45% { opacity: .85; transform: translate(var(--tx), var(--ty)) scale(.8); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.3); }
}

/* ---------- Блекаут: «світло гасне», сяйво телефона, сканування QR ---------- */

/* Шар створює js/pay-scenes.js перед секцією #blackout: чорний на весь екран, змінюється лише opacity (від прокрутки).
   Секція лежить над шаром (z 101, pay-blackout.css), решта сторінки під ним; шапка (900), смуга розділів (870)
   і док (860) вище. Без скрипта й за prefers-reduced-motion шару нема, блок просто темний. */
.py-lights {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--py-deep);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* сяйво телефона вмикає скрипт («озброєно» + .is-dark), коли стало достатньо темно; без скрипта воно вже ввімкнене */
.py-blackout .py-split-stage::before,
.py-blackout .py-split-stage::after,
.py-halo {
  transition: opacity 1.6s var(--py-ease) .2s;
}

.py-blackout.is-armed:not(.is-dark) .py-split-stage::before,
.py-blackout.is-armed:not(.is-dark) .py-split-stage::after,
.py-blackout.is-armed:not(.is-dark) .py-halo {
  opacity: 0;
}

/* картки-виноски «сідають» сходинкою: спершу більший нахил, трохи менші й нижче, далі вирівнюються
   (клас .is-armed ставить скрипт лише тоді, коли картки ще нижче екрана) */
.py-facts.is-armed li {
  transition:
    opacity .7s var(--py-ease) var(--d, 0ms),
    transform .95s var(--py-ease) var(--d, 0ms);
}

.py-facts.is-armed li:not(.is-in) {
  opacity: 0;
  transform: translateY(22px) rotate(calc(var(--r) * 3.2)) scale(.96);
}

/* лінія сканування по QR: смуга світла з яскравою передньою кромкою проходить плашку зверху вниз */
.py-scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  pointer-events: none;
}

.py-scan::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c-accent) 22%, transparent) 68%, color-mix(in srgb, var(--c-accent) 60%, transparent) 95%, color-mix(in srgb, var(--c-accent) 78%, #087a47) 100%);
  box-shadow: 0 1px 12px 1px color-mix(in srgb, var(--c-accent) 70%, transparent);
  transform: translateY(-100%);
}

.py-phone.is-scan .py-scan::before {
  animation: py-scan 1.5s cubic-bezier(.45, .05, .35, 1) both;
}

@keyframes py-scan {
  from { transform: translateY(-100%); }
  to { transform: translateY(300%); }
}

/* «Оплачено»: коло з галочкою з'являється пружно (pay.css), галочка дописується слідом */
@media (prefers-reduced-motion: no-preference) {
  [data-py-scene="blackout"] .py-scr-ok use {
    stroke-dasharray: 16;
  }

  [data-py-scene="blackout"] .py-scr.is-on .py-scr-ok use {
    animation: py-tick .5s var(--py-ease) .74s backwards;
  }
}

@keyframes py-tick {
  from { stroke-dashoffset: 16; }
}

/* ---------- Голос: мікрофон, жива хвиля, бульбашки по черзі (лише коли скрипт озброїв сцену) ---------- */

/* скидання між колами — миттєве, без переходів */
[data-py-scene="voice"].is-reset,
[data-py-scene="voice"].is-reset *,
[data-py-scene="voice"].is-reset *::before,
[data-py-scene="voice"].is-reset *::after {
  transition: none !important;
  animation: none !important;
}

[data-py-scene="voice"].is-armed [data-beat] {
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transform-origin: 100% 100%;
  transition: opacity .4s var(--py-ease), transform .65s var(--py-ease);
}

[data-py-scene="voice"].is-armed [data-beat="2"] { transform-origin: 0 100%; }
[data-py-scene="voice"].is-armed [data-beat="3"] { transform-origin: 50% 100%; }

[data-py-scene="voice"].is-b1 [data-beat="1"],
[data-py-scene="voice"].is-b2 [data-beat="2"],
[data-py-scene="voice"].is-b3 [data-beat="3"] {
  opacity: 1;
  transform: none;
}

/* поки йде запис, на місці тексту дві тихі смужки; коли запис закінчився, розпізнаний текст проявляється */
[data-py-scene="voice"].is-armed .py-voice-text {
  position: relative;
  color: transparent;
  transition: color .5s var(--py-ease) .12s;
}

[data-py-scene="voice"].is-armed .py-voice-text::before,
[data-py-scene="voice"].is-armed .py-voice-text::after {
  content: "";
  position: absolute;
  left: 0;
  height: 8px;
  border-radius: 4px;
  background: var(--c-out-ink);
  opacity: .14;
  transition: opacity .3s ease;
}

[data-py-scene="voice"].is-armed .py-voice-text::before { top: 5px; width: 84%; }
[data-py-scene="voice"].is-armed .py-voice-text::after { top: 22px; width: 52%; }

[data-py-scene="voice"].is-heard .py-voice-text {
  color: var(--c-out-ink);
}

[data-py-scene="voice"].is-heard .py-voice-text::before,
[data-py-scene="voice"].is-heard .py-voice-text::after {
  opacity: 0;
}

/* мікрофон натиснуто: стискається, від нього розходиться кільце, поки йде запис */
.py-vin-mic::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

[data-py-scene="voice"].is-rec .py-vin-mic {
  transform: scale(.92);
}

[data-py-scene="voice"].is-rec .py-vin-mic::after {
  animation: py-mic 1.3s ease-out infinite;
}

@keyframes py-mic {
  from { opacity: .75; transform: scale(1); }
  to { opacity: 0; transform: scale(1.7); }
}

/* Жива хвиля: у кожного стовпчика своя тривалість, фаза й розмах, плавні криві на кожному відрізку.
   Цикл починається й закінчується у спокійному силуеті (scaleY 1), тож хвиля сама «осідає» — по черзі,
   кожен стовпчик у свій момент, без різкого скидання. */
[data-py-scene="voice"].is-wave .py-wave i {
  transform-origin: 50% 50%;
  animation: py-wave var(--wd, 1000ms) ease-in-out var(--wo, 0ms) var(--wn, 2) both;
}

.py-wave i:nth-child(4n + 1) { --wd: 1100ms; --wn: 2; }
.py-wave i:nth-child(4n + 2) { --wd: 780ms; --wn: 3; }
.py-wave i:nth-child(4n + 3) { --wd: 1250ms; --wn: 2; }
.py-wave i:nth-child(4n) { --wd: 900ms; --wn: 3; }

.py-wave i:nth-child(3n + 1) { --wo: 0ms; }
.py-wave i:nth-child(3n + 2) { --wo: 110ms; }
.py-wave i:nth-child(3n) { --wo: 230ms; }

.py-wave i:nth-child(5n + 1) { --w1: 1.38; --w2: .5; --w3: 1.18; }
.py-wave i:nth-child(5n + 2) { --w1: 1.2; --w2: .62; --w3: 1.34; }
.py-wave i:nth-child(5n + 3) { --w1: 1.3; --w2: .44; --w3: 1.1; }
.py-wave i:nth-child(5n + 4) { --w1: 1.12; --w2: .56; --w3: 1.28; }
.py-wave i:nth-child(5n) { --w1: 1.34; --w2: .7; --w3: 1.2; }

@keyframes py-wave {
  0% { transform: scaleY(1); }
  21% { transform: scaleY(var(--w1, 1.3)); }
  47% { transform: scaleY(var(--w2, .55)); }
  73% { transform: scaleY(var(--w3, 1.2)); }
  100% { transform: scaleY(1); }
}

/* три слова ліворуч підсвічуються по черзі разом із кроками на телефоні (сцена озброєна); у спокої вони сірі */
.py-voice.is-armed .py-h3 span {
  color: var(--c-soft);
  transition: color .6s var(--py-ease);
}

.py-voice.is-reset .py-h3 span {
  transition: none;
}

.py-voice.is-armed[data-step="1"] .py-h3 span:nth-child(1),
.py-voice.is-armed[data-step="2"] .py-h3 span:nth-child(-n + 2),
.py-voice.is-armed[data-step="3"] .py-h3 span {
  color: var(--c-gain);
}

/* reduced motion: шару й циклів нема, переходів нема, усе в кінцевому стані (скрипт теж нічого не озброює) */
@media (prefers-reduced-motion: reduce) {
  .py-lights { display: none; }
  .py-blackout .py-split-stage::after,
  .py-halo,
  .py-facts li,
  .py-vin-mic { transition: none; }
}

/* режим високого контрасту фарбує фони системним кольором: шар розмивав би сторінку, тож його немає */
@media (forced-colors: active) {
  .py-lights { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .py-tap { display: none; }
  .py-blackout .py-split-stage::before { transition: none; }
}