/* ============================================================================
   RP2 · КНОПКА З ЕЛЕКТРИЧНИМ РОЗРЯДОМ
   Перенесено 1:1 з прототипу v2 («основа §7» + §11 «рух тільки з дозволу»).
   Три шари: маска-ламана тримає шлях нерухомо, під нею їде вузька смуга
   світла. Сила стала, змінюється лише частота.
   · спокій: цикл раз на 7 с — ТІЛЬКИ на головних кнопках (.btn);
     другорядні (--quiet, --line) у спокої чисті;
   · наведення й фокус із клавіатури запускають повний проход ОДРАЗУ
     (перезапуск зміною animation-name), далі цикл раз на 2,4 с;
   · натиснення — один спалах; робота (aria-busy) — безперервно;
   · prefers-reduced-motion: розряд не гасне, а завмирає ламаною за станами.
   ========================================================================== */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--rp-flame); color: var(--rp-on-flame);
  border:0; border-radius: var(--rp-r-pill); cursor:pointer;
  padding: 14px 26px;
  font-family: var(--rp-font-text); font-size: var(--rp-fs-ui);
  font-weight: var(--rp-w-semi); line-height:1.2;
  text-align:center; text-decoration:none; max-width:100%; text-wrap: balance;
  text-shadow: 0 0 2px var(--rp-halo), 0 0 6px var(--rp-halo);
  box-shadow: var(--rp-sh-flame);
  transition: background-color .2s linear,
              color var(--rp-dur) linear,
              border-color var(--rp-dur) linear,
              transform var(--rp-dur) linear;
  --rp-arc: var(--rp-arc);
  --rp-halo: var(--rp-flame);
  --rp-focus-inner: var(--rp-on-flame);
  --rp-arc-dur: 7s;
  --rp-arc-delay: 4.6s;   /* спокій стартує тихо: без спалаху одразу після
                             зняття наведення чи завантаження сторінки */
}
/* Правило «коли б'є розряд, тінь не росте»: наведення дає підйом і зміну
   фону, box-shadow лишається тим самим. Дві світлові події поруч читаються
   як брак — а референс іншого й не робить. */
.btn:hover, .btn.is-hover{
  background: var(--rp-flame-hi); --rp-halo: var(--rp-flame-hi);
  transform: translateY(-1px);
}

/* хвиля заряду */
.btn::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:0; top:-40%; bottom:-40%; width:26%;
  /* хвиля темна, не світла: біла нитка на #FF6900 дає 2,9:1, тож плашка
     під ниткою на мить темнішає — і нитка знов читається як ≈6:1 */
  background: radial-gradient(closest-side, var(--rp-arc-wash), transparent 66%);
  opacity:0;
  transform: translateX(-160%);
  animation: rp-wash var(--rp-arc-dur) linear var(--rp-arc-delay) infinite;
}
/* нитка розряду */
.btn::after{
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  -webkit-mask-image: var(--rp-bolt);          mask-image: var(--rp-bolt);
  -webkit-mask-repeat: repeat-x;               mask-repeat: repeat-x;
  -webkit-mask-size: 52px 100%;                mask-size: 52px 100%;
  -webkit-mask-position: center;               mask-position: center;
  background-image: linear-gradient(90deg,
      transparent 0 44.5%,
      var(--rp-arc) 47.4% 48.6%,
      transparent 51.5% 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  opacity:0;
  animation: rp-arc var(--rp-arc-dur) linear var(--rp-arc-delay) infinite;
}

@keyframes rp-arc{
  0%       { background-position-x:100%; opacity:0; animation-timing-function: var(--rp-arc-ease); }
  3%       { background-position-x:  76%; opacity:1; animation-timing-function: var(--rp-arc-ease); }
  9%       { background-position-x:   0%; opacity:1; }
  13%      { background-position-x:   0%; opacity:0; }
  100%     { background-position-x:   0%; opacity:0; }
}
@keyframes rp-wash{
  0%       { transform: translateX(-160%); opacity:0; animation-timing-function: var(--rp-arc-ease); }
  3%       { transform: translateX( -60%); opacity:.10; animation-timing-function: var(--rp-arc-ease); }
  9%       { transform: translateX( 320%); opacity:.10; }
  13%      { transform: translateX( 320%); opacity:0; }
  100%     { transform: translateX( 320%); opacity:0; }
}
/* один спалах — окрема назва анімації перезапускає її. Дві копії:
   rp-*-hit для натиснення, rp-*-hov для наведення й фокуса, щоб
   натиснення поверх наведення теж давало свіжий проход. */
@keyframes rp-arc-hit{
  0%   { background-position-x:100%; opacity:0; animation-timing-function: var(--rp-arc-ease); }
  14%  { opacity:1; }
  76%  { background-position-x:0%; opacity:1; }
  100% { background-position-x:0%; opacity:0; }
}
@keyframes rp-wash-hit{
  0%   { transform: translateX(-160%); opacity:0; animation-timing-function: var(--rp-arc-ease); }
  14%  { opacity:.14; }
  76%  { transform: translateX(320%); opacity:.14; }
  100% { transform: translateX(320%); opacity:0; }
}
@keyframes rp-arc-hov{
  0%   { background-position-x:100%; opacity:0; animation-timing-function: var(--rp-arc-ease); }
  14%  { opacity:1; }
  76%  { background-position-x:0%; opacity:1; }
  100% { background-position-x:0%; opacity:0; }
}
@keyframes rp-wash-hov{
  0%   { transform: translateX(-160%); opacity:0; animation-timing-function: var(--rp-arc-ease); }
  14%  { opacity:.14; }
  76%  { transform: translateX(320%); opacity:.14; }
  100% { transform: translateX(320%); opacity:0; }
}

/* наведення й фокус — повний проход одразу, далі цикл 2,4 с */
.btn:hover::after, .btn.is-hover::after,
.btn:focus-visible::after, .btn.is-focus::after{
  animation: rp-arc-hov .42s var(--rp-arc-ease) 1 both,
             rp-arc 2.4s linear 1.98s infinite;
}
.btn:hover::before, .btn.is-hover::before,
.btn:focus-visible::before, .btn.is-focus::before{
  animation: rp-wash-hov .42s var(--rp-arc-ease) 1 both,
             rp-wash 2.4s linear 1.98s infinite;
}

/* у роботі — безперервно, і наведення цього не перебиває */
.btn.is-busy, .btn[aria-busy="true"]{ --rp-arc-dur: 1.15s; --rp-arc-delay: 0s; cursor: progress; }
.btn.is-busy::after, .btn[aria-busy="true"]::after{ animation: rp-arc 1.15s linear infinite; }
.btn.is-busy::before, .btn[aria-busy="true"]::before{ animation: rp-wash 1.15s linear infinite; }

/* натиснення — один спалах, перебиває і наведення, і роботу */
.btn:active::after { animation: rp-arc-hit  .42s var(--rp-arc-ease) 1 both; }
.btn:active::before{ animation: rp-wash-hit .42s var(--rp-arc-ease) 1 both; }
.btn:active, .btn.is-active{ background: var(--rp-flame-hi); --rp-halo: var(--rp-flame-hi); }
.btn.is-active::after { animation:none; background-position-x:46%; opacity:1; }
.btn.is-active::before{ animation:none; transform: translateX(150%); opacity:.14; }

/* ---- рівні ---- */
.btn--quiet{
  background: var(--rp-tint); color: var(--rp-ink);
  box-shadow:none;
  --rp-arc: var(--rp-flame);
  --rp-arc-wash: rgb(255 105 0 / .14);
  --rp-halo: var(--rp-tint);
  --rp-focus-inner: var(--rp-paper);
}
.btn--quiet:hover, .btn--quiet.is-hover,
.btn--quiet:active, .btn--quiet.is-active{ background:#FFE7D6; --rp-halo:#FFE7D6; }

/* На темному Присок не працює: --rp-ink там білий, і напис зникає на
   світлій плашці. Тиха кнопка всередині .on-dark стає привидом. */
.on-dark .btn--quiet{
  background: var(--rp-ghost-fill); color: var(--rp-on-dark);
  border: var(--rp-hair-2) solid var(--rp-ghost-line);
  --rp-arc:#FFFFFF; --rp-arc-wash: rgb(255 255 255 / .10);
  --rp-halo: transparent; --rp-focus-inner: transparent;
}
.on-dark .btn--quiet:hover, .on-dark .btn--quiet.is-hover,
.on-dark .btn--quiet:active, .on-dark .btn--quiet.is-active{
  background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .4);
  --rp-halo: transparent;
}

.btn--line{
  background: transparent; color: var(--rp-ink);
  border: var(--rp-hair) solid var(--rp-edge);
  padding: 13px 25px;
  box-shadow:none;
  --rp-arc: var(--rp-flame);
  --rp-arc-wash: rgb(255 105 0 / .14);
  --rp-halo: var(--rp-paper);
  --rp-focus-inner: var(--rp-paper);
}
.btn--line:hover, .btn--line.is-hover,
.btn--line:active, .btn--line.is-active{ background: var(--rp-tint); border-color: var(--rp-flame); --rp-halo: var(--rp-tint); }

/* На темному та сама кнопка стає привидом референсу: напівпрозора заливка
   плюс світла межа. На світлому тлі привид з альфою не працює — тому це
   окреме правило під .on-dark, а не заміна базового. */
.on-dark .btn--line, .btn--ghost{
  background: var(--rp-ghost-fill); color: var(--rp-on-dark);
  border: var(--rp-hair-2) solid var(--rp-ghost-line);
  --rp-arc:#FFFFFF; --rp-arc-wash: rgb(255 255 255 / .10);
  --rp-halo: transparent; --rp-focus-inner: transparent;
}
.on-dark .btn--line:hover, .btn--ghost:hover{
  background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .4);
}

/* Ніч суцільною заливкою — для помаранчевого тла, де помаранчева кнопка
   не існує (фінальний CTA-банер) */
.btn--ink{
  background: var(--rp-navy); color:#FFFFFF; box-shadow:none;
  --rp-arc:#FFFFFF; --rp-arc-wash: rgb(255 255 255 / .12);
  --rp-halo: var(--rp-navy); --rp-focus-inner:#FFFFFF;
}
.btn--ink:hover{ background: var(--rp-navy-mid); --rp-halo: var(--rp-navy-mid); }

/* Біла суцільна — друга дія на темному тлі, яка не має зливатися з
   пігулками-перевагами поруч («Контакти» в блоці «Про компанію», 10.09) */
.btn--paper{
  background:#FFFFFF; color: var(--rp-navy); box-shadow:none;
  --rp-arc: var(--rp-flame); --rp-arc-wash: rgb(255 105 0 / .14);
  --rp-halo:#FFFFFF; --rp-focus-inner: var(--rp-navy);
}
.btn--paper:hover, .btn--paper:active{ background: var(--rp-tint); --rp-halo: var(--rp-tint); }

/* іконка в кнопці — не стискається */
.btn svg{ flex:none; position:relative; }

/* ---- розміри й ширина ---- */
.btn--sm{ padding: 11px 18px; font-size: var(--rp-fs-small); }
.btn--line.btn--sm{ padding: 10px 17px; }
.btn--lg{ padding: 16px 32px; font-size: var(--rp-fs-body); }
.btn--wide{ width:100%; }

/* Кнопка всередині картки товару: прямокутніша, дрібніша, без тіні —
   точно за референсом. Розряд тут ВИМКНЕНО: нитка з кроком маски 52px
   на кнопці 12px перетворюється на смітинку. */
.btn--card{
  border-radius: var(--rp-r-sm); padding: 9px 12px;
  font-size:.75rem; font-weight: var(--rp-w-semi); letter-spacing:.02em;
  text-transform:uppercase; box-shadow:none; text-shadow:none;
}
.btn--card:hover{ background:#1E1E1E; color:#FFFFFF; transform:none; }
.btn--card::before, .btn--card::after{ display:none; }

/* ---- фокус ---- */
.btn:focus-visible, .btn.is-focus{
  outline: 2px solid var(--rp-focus); outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--rp-focus-inner);
}

/* ---- вимкнена ---- */
.btn[disabled], .btn[aria-disabled="true"]{
  background: var(--rp-line); color: var(--rp-muted);
  border-color: transparent; cursor: not-allowed;
  text-shadow:none; box-shadow:none; transform:none;
}
.btn[disabled]::before, .btn[disabled]::after,
.btn[aria-disabled="true"]::before, .btn[aria-disabled="true"]::after{ display:none; }

/* ---- другорядні у спокої: чисті ------------------------------------------
   Базовий цикл раз на 7 с крутиться лише на головних кнопках. Другорядні
   (--quiet, --line) у спокої розряд не показують; наведення, фокус чи
   натиснення запускають повний прохід одразу — правила станів вище мають
   вищу специфічність і перемагають це скидання. */
.btn--quiet::before, .btn--quiet::after,
.btn--line::before,  .btn--line::after{ animation: none; }

/* ===== РУХ: ТІЛЬКИ РОЗРЯД, І ТІЛЬКИ З ДОЗВОЛУ =============================
   Коли користувач попросив прибрати рух — рух зникає повністю.
   Розряд не гасне, а завмирає: маска лишається, під нею стає рівна заливка.
   У спокої кнопка чиста; наведення, фокус, натиснення й робота показують
   нерухому витравлену ламану різної сили.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* Скидач вище гасить ТРИВАЛОСТІ, а не трансформи — без цих рядків
     картка під курсором стрибне на 7px замість плавного підйому. */
  .btn:hover, .btn.is-hover{ transform:none; }
  .card:hover, .door:hover, .row:hover, .tez__a:hover,
  .guide__r:hover, .bento__t:hover{ transform:none; }
  .card:hover .card__shot img, .tez__a:hover .tez__shot img,
  .bento__t:hover .bento__shot img{ transform:none; }
  .btn::before{ display:none; }
  /* нитка не гасне, а завмирає посеред кнопки — той самий відтинок,
     який анімована кнопка показує в мить проходу */
  .btn::after{
    animation: none !important;
    background-position-x: 47%;
    opacity:0;
  }
  .btn:hover::after, .btn.is-hover::after,
  .btn:focus-visible::after, .btn.is-focus::after{ opacity:.6; }
  .btn:active::after, .btn.is-active::after{ opacity:1; }
  .btn.is-busy::after, .btn[aria-busy="true"]::after{ opacity:.9; }
}