/* Red Roses — рух: кнопка помічника, переходи між сторінками й мовами, «живі» кнопки (№573.80–82, 573.90).
   Поведінка — motion.js. Усе вимикається prefers-reduced-motion (блок унизу файлу). */

:root {
  --m-spring: cubic-bezier(.32, .72, 0, 1);   /* швидкий старт, довге м'яке доїжджання — як шторки iOS */
  --m-dur: .32s;                              /* розгортання */
  --m-dur-out: .24s;                          /* згортання: йти швидше, ніж приходити (~70 %) */
}

/* ---------- кнопка помічника (№573.80) ----------
   Типово — кругла 52 px (лише значок). .is-full — розгорнута з підписом: перший екран, hover, фокус.
   Ширина не анімується з auto, тому рухаються max-width підпису, відступ і проміжок — разом це ~300 мс. */
.bot { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center;
  height: 52px; min-width: 52px; padding: 0 15px; gap: 0; border-radius: 26px;
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow);
  font: 500 .95rem/1 var(--font-sans); white-space: nowrap; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  contain: layout style;                      /* зміна ширини не виходить за межі кнопки: решта сторінки не перераховується */
  transition: padding var(--m-dur-out) var(--m-spring), gap var(--m-dur-out) var(--m-spring),
              background-color .2s var(--ease), color .2s var(--ease), transform .1s var(--ease); }
.bot-ico { display: inline-flex; flex: none; }
.bot-t { display: inline-block; max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width var(--m-dur-out) var(--m-spring), opacity .14s var(--ease); }
.bot.is-full, .bot:focus-visible { padding: 0 20px 0 15px; gap: 10px;
  transition: padding var(--m-dur) var(--m-spring), gap var(--m-dur) var(--m-spring),
              background-color .2s var(--ease), color .2s var(--ease), transform .1s var(--ease); }
.bot.is-full .bot-t, .bot:focus-visible .bot-t { max-width: 16em; opacity: 1; transition: max-width var(--m-dur) var(--m-spring), opacity .24s var(--ease) .06s; }
@media (hover: hover) {
  .bot:hover { padding: 0 20px 0 15px; gap: 10px; background: var(--accent); color: var(--on-accent);
    transition: padding var(--m-dur) var(--m-spring), gap var(--m-dur) var(--m-spring),
                background-color .2s var(--ease), color .2s var(--ease), transform .1s var(--ease); }
  .bot:hover .bot-t { max-width: 16em; opacity: 1; transition: max-width var(--m-dur) var(--m-spring), opacity .24s var(--ease) .06s; }
}
.bot:active { transform: scale(.96); }
.bot:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
@media (max-width: 600px) {
  .bot { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  /* демо-перемикач варіантів стоїть над кнопкою, а не поруч: повна кнопка на 390 інакше заходить під нього.
     body > — бо стиль .vbar вбудований у сторінку ПІСЛЯ цього файлу і за рівної ваги переміг би */
  body > .vbar { bottom: calc(14px + 52px + 10px + env(safe-area-inset-bottom)); }
}

/* ---------- завіса зміни мови (№573.81) ----------
   Стара сторінка: елемент .rr-curtain з'являється (motion.js), через ~450 мс — перехід.
   Нова сторінка: клас html.rr-swap-in — та сама завіса псевдоелементом, яка тане.
   Слово на завісі — мова, НА яку переходимо; шрифт назви закладу. */
.rr-curtain, html.rr-swap-in::after {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
  background: var(--bg); color: var(--accent-ink);
  font: 400 clamp(3.2rem, 9vw, 6.5rem)/1 var(--font-script);
}
.rr-curtain { opacity: 0; view-transition-name: rr-curtain;
  transition: opacity .3s var(--ease); }
.rr-curtain span { display: block; transform: translateY(14px); opacity: 0;
  transition: transform .45s var(--m-spring), opacity .3s var(--ease) .08s; }
.rr-curtain.on { opacity: 1; }
.rr-curtain.on span { transform: none; opacity: 1; }

html.rr-swap-in::after { content: "Українська"; pointer-events: none; }
html.rr-swap-in:lang(en)::after { content: "English"; }
html.rr-swap-out::after { animation: rr-curtain-out .45s var(--ease) .12s both; }
@keyframes rr-curtain-out { to { opacity: 0; visibility: hidden; } }

/* ---------- переходи між сторінками (№573.82) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--ease); }
/* шапка — окремий шар: на всіх сторінках вона та сама, тож не блимає разом зі сторінкою */
.hdr { view-transition-name: rr-hdr; }
::view-transition-group(rr-hdr) { animation-duration: .28s; }
::view-transition-old(rr-curtain) { animation: rr-curtain-out .45s var(--ease) .1s both; }

/* ---------- «живі» кнопки (№573.90) ---------- */
.btn, .hdr-item, .add, .tabs button, .seg button, .sheet-foot a, .sheet-foot button, .vbar a, .lang-btn {
  -webkit-tap-highlight-color: transparent; }
.btn:active, .btn--ghost:active, .hdr-item:active, .seg button:active, .sheet-foot a:active, .vbar a:active { transform: scale(.97); }
.hdr-item, .seg button, .sheet-foot a, .vbar a { transition: color .2s, opacity .2s, background-color .2s, transform .12s var(--ease); }
/* стрілка йде туди, куди веде кнопка */
.btn .ico:has(use[href="#i-arrow"]), .sheet-foot a .ico:has(use[href="#i-arrow"]) { transition: transform .22s var(--m-spring); }
.btn:hover .ico:has(use[href="#i-arrow"]), .sheet-foot a:hover .ico:has(use[href="#i-arrow"]),
.btn:focus-visible .ico:has(use[href="#i-arrow"]) { transform: translateX(4px); }
.link-arrow:focus-visible svg { transform: translateX(4px); }
/* фокус клавіатури: кільце з'являється з руху, а не стрибком */
.btn:focus-visible, .hdr-item:focus-visible, .vbar a:focus-visible { outline-offset: 4px; animation: rr-ring .2s var(--ease); }
@keyframes rr-ring { from { outline-offset: 8px; } }

/* ---------- менше руху — без руху ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .bot, .bot-t, .bot.is-full .bot-t, .bot:focus-visible .bot-t, .rr-curtain, .rr-curtain span,
  .hdr-item, .seg button, .sheet-foot a, .vbar a, .btn .ico, .sheet-foot a .ico { transition: none !important; }
  .bot .bot-t { transition: none !important; }
  .bot:active, .btn:active, .hdr-item:active, .seg button:active, .sheet-foot a:active, .vbar a:active { transform: none; }
  .btn:hover .ico, .btn:focus-visible .ico, .sheet-foot a:hover .ico { transform: none; }
  html.rr-swap-in::after, html.rr-swap-out::after { content: none; animation: none; }
  .btn:focus-visible, .hdr-item:focus-visible, .vbar a:focus-visible { animation: none; }
}