/* Каркас страницы: контейнер, секции, служебные классы */
.container {
    width: 100%;
    max-width: calc(var(--container-max-width) + 2 * var(--container-gutter));
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

.section {
    /* Половина промежутка сверху и снизу: между соседними секциями — ровно --section-gap */
    padding-block: calc(var(--section-gap) / 2);
}

[id] {
    scroll-margin-top: var(--space-l);
}

main:focus {
    outline: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 1000;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-small);
    background-color: var(--color-surface);
    color: var(--color-navy);
    transform: translateY(calc(-100% - var(--space-s)));
    transition: transform var(--transition-fast);
}

/* Тень только в видимом состоянии: размытие тени выглядывает из-за края экрана */
.skip-link:focus {
    box-shadow: var(--shadow-glow);
    transform: none;
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

/*
 * Появление при прокрутке (js/appear.js). Без JS и при prefers-reduced-motion скрипт
 * не ставит на <html> класс js-appear — элементы видимы сразу. Анимируются только opacity/transform.
 * Начальное смещение блок может переопределить через --appear-from.
 */
.js-appear [data-appear] {
    opacity: 0;
    transform: var(--appear-from, translateY(var(--space-l)));
    transition:
        opacity var(--duration-appear) var(--ease-out),
        transform var(--duration-appear) var(--ease-out);
}

.js-appear [data-appear].is-visible {
    opacity: 1;
    transform: none;
}