/*
 * Базовая типографика и сброс. Класс sc на body — корневой scope сайта.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--sc-paper);
    color: var(--sc-ink);
    font-family: var(--sc-font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* iOS Safari при повороте в landscape сам раздувает шрифт («text
       autosizing»), а обратно в portrait НЕ откатывает → текст остаётся
       крупным. 100% = используем наши размеры как есть, без авто-инфляции.
       Глобально на html/body — лечит весь сайт разом. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.12s, opacity 0.12s;
}
a:hover { opacity: 0.78; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sc-ink);
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

::selection { background: var(--sc-accent-soft); color: var(--sc-accent-ink); }

/* Кастомный scrollbar (только webkit, Firefox обходится дефолтом) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--sc-line-2);
    border-radius: 8px;
    border: 2px solid var(--sc-paper);
}
*::-webkit-scrollbar-thumb:hover { background: var(--sc-ink-4); }

/* Утилитарные: моноширинный + центрированный контейнер */
.sc-mono { font-family: var(--sc-font-mono); }

.sc-container {
    width: 100%;
    max-width: var(--sc-container);
    margin: 0 auto;
    padding: 0 24px;
}

.sc-container--wide {
    max-width: var(--sc-container-wide);
}

/* Шапка приклеена к верху на лендинге — вспомогательный класс */
.sc-sticky-top {
    position: sticky;
    top: 0;
    z-index: 30;
}

/* Анимации */
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-spin { animation: sc-spin 1s linear infinite; }

@keyframes sc-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position:  200px 0; }
}

/* Лёгкое подёргивание — для привлечения внимания (hero-форма после загрузки). */
@keyframes sc-attention {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-3px) rotate(-0.2deg); }
    40%      { transform: translateX(3px)  rotate(0.2deg); }
    60%      { transform: translateX(-2px) rotate(-0.1deg); }
    80%      { transform: translateX(2px)  rotate(0.1deg); }
}

/* Резче — обратная связь на пустой submit. */
@keyframes sc-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-6px); }
    30%      { transform: translateX(6px); }
    45%      { transform: translateX(-5px); }
    60%      { transform: translateX(5px); }
    75%      { transform: translateX(-2px); }
    90%      { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .sc-spin,
    .sc-hero__form--attention,
    .sc-hero__form--shake { animation: none !important; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}