/* =====================================================================
   Audiofill — базові стилі
   Підключати після tokens.css. Тут: скидання, типографіка, сітка,
   посилання, зміна мови, поява при прокручуванні.
   Опис: docs/02_design-system.md
   ===================================================================== */
/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg-page); color: var(--text-main);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-heading); text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
section[id] { scroll-margin-top: 96px; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Текстове посилання (кнопки-посилання сюди не входять, тож їхній колір не змінюється) */
.link { color: var(--link); display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-fast); }
.link:hover { color: var(--link-hover); }
.link i { transition: transform var(--t-base) var(--ease-out); }
.link:hover i { transform: translate(2px, -2px); }

/* Зміна мови: текст коротко згасає і з'являється вже перекладеним */
[data-i18n], [data-i18n-html], [data-usd] { transition: opacity var(--t-fast) linear; }
.is-lang-switching [data-i18n], .is-lang-switching [data-i18n-html], .is-lang-switching [data-usd] { opacity: 0; }

/* ---------- Поява при прокручуванні ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal] [data-reveal-item] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms), transform var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms); }
.js [data-reveal].is-in [data-reveal-item] { opacity: 1; transform: none; }

/* Посилання «перейти до змісту» для клавіатури: видно лише у фокусі */
.skip { position: absolute; left: var(--gutter); top: -80px; z-index: var(--z-toast); padding: 12px 18px; border-radius: var(--r-md); background: var(--action); color: var(--text-on-accent); font-weight: 600; transition: top var(--t-base) var(--ease-out); }
.skip:focus { top: 12px; }

/* Атрибут hidden ховає елемент завжди, навіть якщо компонент задає свій display */
[hidden] { display: none !important; }