/* Nondeletable — тёмная тема (черновик).
   Финальный визуал согласуем с Максимом. Здесь база: цвета, шрифты,
   выверенная шкала отступов, сетка секций. */

/* ===== Токены ===== */
:root {
    /* Цвета: обсидиан/графит */
    --bg:            #0e1013;   /* фон-обсидиан */
    --surface:       #16191f;   /* карточки/панели */
    --surface-2:     #1c2027;   /* ховер/вложенное */
    --border:        #262b33;
    --text:          #e7e9ee;
    --text-muted:    #9aa0ab;
    --accent:        #FF3301;   /* оранжевый из логотипа */
    --accent-dim:    #b32400;
    --accent-ink:    #1a0600;   /* тёмный текст на акценте */

    /* Нативный UI (скроллбары, поля, select) — в тёмной схеме */
    color-scheme: dark;

    /* Шкала отступов: 2/4/8/16 для объектов + крупные для секций */
    --sp-1: 2px;
    --sp-2: 4px;
    --sp-3: 8px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    --maxw: 1080px;        /* контентные секции */
    --maxw-wide: 1600px;   /* хедер и hero */
    --radius: 8px;

    --font-head: "Tektur", system-ui, sans-serif;  /* техно/киберпанк, с кириллицей */
    --font-body: "Rubik", system-ui, sans-serif;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; }

/* ===== Доступность ===== */
/* Видимый фокус с клавиатуры (мышиный клик его не вызывает — :focus-visible) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Смещение для якорей: sticky-хедер не перекрывает цель */
[id] { scroll-margin-top: 5rem; }
/* Skip-link: скрыт, пока не получит фокус с клавиатуры */
.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: -100px;
    z-index: 100;
    padding: var(--sp-3) var(--sp-5);
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius);
    font-weight: 500;
    transition: top 0.15s;
}
.skip-link:focus { top: var(--sp-4); }
/* main как цель skip-link не должен рисовать свою рамку фокуса */
.site-main:focus { outline: none; }

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0 var(--sp-6);   /* горизонт. отступ на внешнем баре — как у .hero */
    background: rgba(14, 16, 19, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.header-inner {
    max-width: var(--maxw-wide);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;   /* без горизонт. паддинга: контент по краю контейнера */
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand-logo { height: 32px; width: auto; display: block; }
.brand-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}
.header-right { display: flex; align-items: center; gap: var(--sp-6); }
.site-nav { display: flex; gap: var(--sp-5); }
.site-nav a { color: var(--text-muted); font-size: 0.95rem; transition: color 0.15s; }
.site-nav a:hover { color: var(--text); }
.site-nav a.active { color: var(--accent); }

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
}
.lang-toggle .lang-opt.active { color: var(--accent); font-weight: 500; }
.lang-toggle .lang-sep { opacity: 0.5; }

/* Бургер: скрыт на десктопе, показывается в мобильной медиа-выборке */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.nav-toggle-bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Открытое состояние: три полоски → крестик */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Main / секции ===== */
.site-main { flex: 1; width: 100%; }
.section {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-6);
}
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.section-title { font-size: 1.6rem; }
.section-link { color: var(--text-muted); font-size: 0.9rem; }
.section-link:hover { color: var(--accent); }

/* ===== Hero ===== */
.hero {
    min-height: 64vh;
    display: flex;
    align-items: stretch;   /* колонки тянутся на всю высоту баннера */
    padding: var(--sp-8) var(--sp-6);
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 51, 1, 0.10), transparent 40%),
        var(--bg);
}
.hero-inner {
    width: 100%;
    max-width: var(--maxw-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
    gap: var(--sp-7);
}
.hero-text { align-self: center; }   /* текст по центру по вертикали */
/* Колонка логотипа во всю высоту баннера. Сцена (logo-scene.js) вписывает
   в #logo-frame квадрат по меньшей стороне и центрирует его. Меньшая сторона
   на десктопе — обычно ширина колонки, поэтому размер буквы ограничит она. */
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-logo { width: 100%; height: 100%; max-width: 865px; }
.hero-kicker {
    color: var(--accent);
    font-family: var(--font-head);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: var(--sp-4);
}
.hero-title { font-size: clamp(2rem, 6vw, 4rem); margin-bottom: var(--sp-5); }
.hero-lead { color: var(--text-muted); font-size: 1.15rem; max-width: 620px; margin-bottom: var(--sp-6); }
.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ===== Кнопки ===== */
.btn {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 500; }
.btn-accent:hover { box-shadow: 0 0 0 3px rgba(255, 51, 1, 0.30); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ===== Проекты (список) ===== */
.project-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.project-item { }
.project-link {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr auto;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.project-link:hover { border-color: var(--accent); background: var(--surface-2); transform: translateX(4px); }
.project-name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
/* Описание: ровно 2 строки — резерв высоты (одинаковые ряды, без разнобоя),
   длинный текст обрезается многоточием. */
.project-summary {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    min-height: 3em;            /* 2 строки × line-height 1.5 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.project-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

.tag {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: var(--sp-1) var(--sp-3);
    border-radius: 4px;
}

/* ===== Скиллы (минимализм: 3 колонки-категории, списки через запятую) ===== */
/* Как обычная .section: max-width + паддинги, чтобы края совпадали с соседями */
.skills-section { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-8) var(--sp-6); }
.skills-section .wide-inner { max-width: none; margin: 0; }

.skills-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    margin-top: var(--sp-4);
}
.skill-group {
    /* Без вертикальных разделителей: столбцы держат заголовки + отступы сетки. */
    padding-left: 0;
}
.skill-group-title {
    font-size: 1rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-3);
}
/* Навыки иконками: силуэт через CSS-маску (как соцсети), tooltip с названием. */
.skill-icons {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, 52px);
    justify-content: start;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.skill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: default;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.skill:hover,
.skill:focus-visible {
    border-color: var(--accent);
    background: var(--surface-2);
    transform: translateY(-2px);
    outline: none;
}
.skill-ico {
    width: 30px;
    height: 30px;
    display: block;
    background-color: var(--text-muted);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    transition: background-color 0.15s;
}
.skill:hover .skill-ico,
.skill:focus-visible .skill-ico { background-color: var(--accent); }

/* Название для скринридеров (визуально скрыто). */
.skill-name-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Подсказка при наведении/фокусе. */
.skill::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: var(--sp-1) var(--sp-2);
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 5;
}
.skill:hover::after,
.skill:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== Обо мне + связь ===== */
.about-contact {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-7);
    align-items: start;
}
.about p { color: var(--text-muted); margin-bottom: var(--sp-4); }
/* align-items: stretch — фото тянется по высоте текстовой колонки. */
.about-body { display: flex; gap: var(--sp-6); align-items: stretch; margin-top: var(--sp-4); }
.about-photo {
    flex: 0 0 300px;
    width: 300px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);   /* виден как бокс, пока фото нет */
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Слайд-шоу фото: кадры стопкой, активный виден, crossfade через opacity. */
.about-slideshow { position: relative; }
.about-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 2s ease;
}
.about-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
.about-text { flex: 1; }
.about-text p:last-child { margin-bottom: 0; }
.contact-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-6);
}
/* 3 группы (Соцсети / Обратная связь / Поддержать) в 3 колонки */
.contact-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    margin-top: var(--sp-5);
}
.contact-group { margin-top: var(--sp-5); }
.contact-group:first-of-type { margin-top: var(--sp-4); }
/* внутри грида собственные отступы групп не нужны */
.contact-groups .contact-group { margin-top: 0; }
.contact-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}
.contact-links { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-links a { color: var(--text); }
.contact-links a:hover { color: var(--accent); }

/* ===== Footer ===== */
.site-footer {
    border-top: 1px solid var(--border);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    color: var(--text-muted);
}
.footer-legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; justify-content: center; }
.footer-legal a { font-size: 0.85rem; color: var(--text-muted); }
.footer-legal a:hover { color: var(--accent); }
.footer-copy { font-size: 0.85rem; }

/* ===== Форма ===== */
.contact-form { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 460px; }
.contact-form label { display: flex; flex-direction: column; gap: var(--sp-2); font-size: 0.9rem; color: var(--text-muted); }
.contact-form input,
.contact-form textarea {
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.contact-form .btn[disabled]:hover { box-shadow: none; }

/* ===== Заглушки внутренних страниц ===== */
.page-head { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-8) var(--sp-6) 0; }
.page-stub {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--sp-6);
    color: var(--text-muted);
}

/* ===== Страница /projects: баннер + зигзаг картинка-текст ===== */
.page-banner {
    min-height: 22vh;
    display: flex;
    align-items: center;
    padding: var(--sp-7) var(--sp-6);
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 51, 1, 0.10), transparent 45%),
        var(--bg);
}
.page-banner-inner { width: 100%; max-width: var(--maxw-wide); margin: 0 auto; }
.page-banner-title { font-size: clamp(1.8rem, 4vw, 3rem); }
.page-banner--center { text-align: center; }

.projects-showcase {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
}

/* Карточка — широкая картинка (3:1) с тенью-градиентом и текстом поверх. */
.project-card { position: relative; }
.project-card-link {
    display: block;
    position: relative;
    aspect-ratio: 3 / 1;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--surface);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card-link:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--accent); }

.project-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* кроп сверху/снизу, ширина сохраняется */
    object-position: center;
}

/* Тень-градиент: одна сторона прозрачная, другая — тёмная. */
.project-card-scrim {
    position: absolute;
    inset: 0;
    /* нечётные ряды: прозрачно слева → тень справа */
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(10, 10, 12, 0.35) 42%,
        rgba(10, 10, 12, 0.88) 100%);
}
.project-card:nth-child(even) .project-card-scrim {
    /* чётные ряды: прозрачно справа → тень слева */
    background: linear-gradient(270deg,
        transparent 0%,
        rgba(10, 10, 12, 0.35) 42%,
        rgba(10, 10, 12, 0.88) 100%);
}

/* Текст в тёмной части. Нечётные — справа, чётные — слева. */
.project-card-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 52%;
    padding: var(--sp-6);
    color: #fff;
    right: 0;
    text-align: right;
}
.project-card:nth-child(even) .project-card-text {
    right: auto;
    left: 0;
    text-align: left;
}
.project-card-title { font-size: 1.7rem; margin-bottom: var(--sp-2); }
.project-card-summary { font-size: 1.05rem; margin-bottom: var(--sp-3); color: rgba(255, 255, 255, 0.85); }
.project-card-tags {
    list-style: none;
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
    justify-content: flex-end;
}
.project-card:nth-child(even) .project-card-tags { justify-content: flex-start; }
.project-card-more {
    display: inline-block;
    font-weight: 600;
    color: var(--accent);
}
.project-card-link:hover .project-card-more { text-decoration: underline; }

/* ===== Страница /cv: интро + таймлайн опыта ===== */
.cv-intro { display: flex; align-items: flex-start; gap: var(--sp-7); }
.cv-intro-main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.cv-intro-photo { flex: 0 0 300px; }
.cv-intro-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--border);
    display: block;
}
.cv-summary { max-width: 60ch; font-size: 1.15rem; color: var(--text-muted); }

.cv-contacts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-6);
    width: 100%;
    max-width: 640px;
}
.cv-contacts li { display: flex; flex-direction: column; gap: 2px; }
.cv-contact-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.cv-contact-value { color: var(--text); }
.cv-contact-value:hover { color: var(--accent); }

.cv-pdf { margin-top: var(--sp-2); }

/* Таймлайн: вертикальная линия слева, точки у каждой записи. */
.cv-timeline { list-style: none; position: relative; padding-left: var(--sp-6); }
.cv-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--border);
}
.cv-job { position: relative; padding-bottom: var(--sp-6); }
.cv-job:last-child { padding-bottom: 0; }
.cv-job::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--bg);
}
.cv-job-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.cv-job-role { font-size: 1.2rem; }
.cv-job-period { color: var(--text-muted); font-size: 0.9rem; white-space: nowrap; }
.cv-job-company { color: var(--accent); font-size: 0.95rem; margin: 2px 0 var(--sp-3); }
.cv-job-note { color: var(--text-muted); }
.cv-job-summary { color: var(--text-muted); max-width: 70ch; margin-bottom: var(--sp-3); }
.cv-group-title { font-weight: 500; margin: var(--sp-3) 0 var(--sp-2); }
.cv-group-title:first-of-type { margin-top: 0; }
.cv-job-points { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cv-job-points li { color: var(--text-muted); padding-left: var(--sp-4); position: relative; }
.cv-job-points li::before { content: "—"; position: absolute; left: 0; color: var(--text-muted); }

/* ===== Обратная связь: контакты + форма ===== */
.feedback {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--sp-8);
    align-items: start;
}

/* --- Левая колонка: контакты --- */
.contacts-title {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-6);
}
.contacts .contact-group { margin-top: var(--sp-5); }
.contact-value { color: var(--text); font-size: 1.05rem; }
.contact-value:hover { color: var(--accent); }

.social-row {
    list-style: none;
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-7);
}
/* Сетка 4×2 для блока «Связаться» на главной. */
.social-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
/* Иконка-силуэт: PNG как маска, цвет задаётся background-color (перекрашиваемо). */
.social-ico {
    width: 18px;
    height: 18px;
    display: block;
    background-color: var(--text-muted);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    transition: background-color 0.15s;
}
.social-link:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-2px); }
.social-link:hover .social-ico { background-color: var(--accent); }

/* --- Правая колонка: форма (underline-инпуты) --- */
.feedback-form { display: flex; flex-direction: column; gap: var(--sp-6); }
.field { display: block; }
/* Лейбл нужен для доступности, визуально скрыт — как в референсе (плейсхолдеры). */
.field-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.field input,
.field textarea {
    width: 100%;
    padding: var(--sp-3) 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    resize: none;
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--accent); }

.feedback-submit {
    align-self: flex-end;
    border-radius: 999px;
    padding: var(--sp-3) var(--sp-7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}

/* Honeypot: убираем из потока и от глаз/скринридеров, но оставляем для ботов. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Чекбокс согласия на обработку данных. */
.consent-field {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.consent-field input[type="checkbox"] {
    margin-top: 2px;
    width: 16px; height: 16px;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.consent-field a { color: var(--text); text-decoration: underline; }
.consent-field a:hover { color: var(--accent); }

/* Flash-сообщения формы (успех/ошибка). */
.form-flash {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.9rem;
}
.form-flash--success {
    color: var(--text);
    border-color: color-mix(in srgb, #37b24d 55%, transparent);
    background: color-mix(in srgb, #37b24d 12%, transparent);
}
.form-flash--error {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ===== 404 ===== */
.error-page {
    position: relative;
    min-height: calc(100vh - 220px);   /* минус хедер/футер — карточка по центру */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-6);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 51, 1, 0.10), transparent 55%),
        var(--bg);
}

/* Гигантское «404» на фоне: приподнято, чтобы верх цифр торчал над карточкой. */
.error-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -78%);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(12rem, 36vw, 28rem);
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #d8dce4 0%, #6b7280 60%, #3a3f4a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

/* Карточка «матовое стекло»: смещена вниз — перекрывает нижнюю часть цифр,
   сквозь неё просвечивают размытые «404» → эффект стекла читается. */
.error-card {
    position: relative;
    z-index: 1;
    margin-top: 20vh;
    max-width: 560px;
    text-align: center;
    padding: var(--sp-5) var(--sp-7);
    border-radius: 20px;
    border: 1px solid rgba(231, 233, 238, 0.16);
    background: rgba(22, 25, 31, 0.30);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(231, 233, 238, 0.14);
}
.error-title { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--sp-4); }
.error-text { color: var(--text-muted); font-size: 1.02rem; margin-bottom: var(--sp-6); }
.error-btn { padding: var(--sp-3) var(--sp-6); }

/* Мобильный: мельче текст → плашка прямоугольная и низкая, лежит
   на нижней трети «404» (а не перекрывает всё число). */
@media (max-width: 480px) {
    .error-watermark { transform: translate(-50%, -62%); }
    .error-card {
        margin-top: 24vh;
        padding: var(--sp-4) var(--sp-5);
    }
    .error-title { font-size: 1.25rem; margin-bottom: var(--sp-2); }
    .error-text { font-size: 0.85rem; margin-bottom: var(--sp-4); }
    .error-btn { padding: var(--sp-2) var(--sp-5); }
}

/* ===== Адаптив ===== */
@media (max-width: 860px) {
    .about-contact { grid-template-columns: 1fr; }
    .about-body { flex-direction: column; align-items: center; text-align: center; }
    /* в колонке нет высоты от stretch — задаём квадрат явно */
    .about-photo { flex-basis: auto; width: min(300px, 80%); aspect-ratio: 1 / 1; }
    .contact-groups { grid-template-columns: 1fr; }
    .feedback { grid-template-columns: 1fr; gap: var(--sp-7); }
    /* Резюме: интро в колонку, фото сверху и по центру */
    .cv-intro { flex-direction: column; }
    .cv-intro-photo { order: -1; flex: none; width: min(300px, 80%); align-self: center; }
    .project-link { grid-template-columns: 1fr; gap: var(--sp-2); }
    .project-tags { justify-content: flex-start; }
    .hero-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
    .hero-visual { order: -1; }   /* логотип сверху, текст под ним */
    /* Одна колонка: у ячейки нет высоты баннера, задаём её явно.
       Квадрат впишется по меньшей стороне и встанет по центру экрана. */
    .hero-logo { height: min(55vh, 80vw); }

    /* узкий экран: карточка выше, текст занимает больше ширины */
    .project-card-link { aspect-ratio: 3 / 2; }
    .project-card-text { max-width: 78%; padding: var(--sp-5); }
    .project-card-title { font-size: 1.4rem; }
    .project-card-summary { font-size: 0.98rem; }
}
@media (max-width: 640px) {
    .site-header { padding: 0 var(--sp-4); }
    .header-inner { position: relative; }   /* якорь для выпадающей панели */

    .nav-toggle { display: flex; }

    /* Меню (nav + переключатель языка) → выпадающая панель под хедером */
    .header-right {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-4);
        padding: var(--sp-5) var(--sp-4);
        background: rgba(14, 16, 19, 0.98);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border);
    }
    .header-right.open { display: flex; }

    .site-nav { flex-direction: column; gap: var(--sp-4); }
    .site-nav a { font-size: 1.05rem; }
    .lang-toggle { align-self: flex-start; }

    .section { padding: var(--sp-7) var(--sp-4); }
    .skills-section { padding: var(--sp-7) var(--sp-4); }
    .skills-groups { grid-template-columns: 1fr; gap: var(--sp-5); }

    /* Контакты резюме: минимальный gap между столбцами */
    .cv-contacts { column-gap: 12px; }
}

/* Контакты резюме: два столбца не влезают с gap ≥12px → один столбец */
@media (max-width: 430px) {
    .cv-contacts { grid-template-columns: 1fr; }
}

/* ===== Детальная страница проекта ===== */

/* Hero: стандартный баннер + cover, выглядывающий из тени справа */
.project-hero { position: relative; overflow: hidden; }
.project-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 30vh;
}
.project-hero-text { max-width: 620px; }
.project-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    flex-wrap: wrap;
}
/* Ghost-кнопки верхней строки (контур), чтобы не спорить с оранжевым CTA внизу */
.phero-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.phero-btn:hover {
    border-color: var(--accent);
    background: var(--surface);
    transform: translateY(-2px);
}
.phero-btn--icon { padding: var(--sp-3); }
.phero-btn-ico {
    width: 18px;
    height: 18px;
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
/* cover занимает правую половину и растворяется в тени слева (mask) */
.project-hero-cover {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 52%;
    z-index: 1;
    pointer-events: none;
}
.project-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
}

/* Общий контейнер секций детальной — как .skills-section */
.project-section { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-7) var(--sp-6); }
.project-h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--sp-5); }

/* Блок действий: оранжевые кнопки (GitHub / How to use / Скачать) */
.project-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }
.project-link-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    background: var(--accent);
    color: #17110e;
    border-radius: var(--radius);
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.15s, transform 0.15s;
}
.project-link-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.project-link-ico {
    width: 20px;
    height: 20px;
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

/* Описание + квадратная картинка сбоку */
.project-about {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-7);
    align-items: start;
}
.project-para { color: var(--text-muted); margin-bottom: var(--sp-4); max-width: 70ch; }
.project-para:last-child { margin-bottom: 0; }
/* Квадратная картинка-иконка приложения сбоку от текста.
   align-self: center — блок выравнивается по вертикали относительно текста,
   даже когда абзацев больше (grid у .project-about — align-items: start). */
.project-inline-media {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-inline-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Скругление углов иконки. Крути это число: больше px = круглее.
       Ориентир: 16px — умеренно, 24px — заметно, 40px — как iOS-иконка,
       50% — полный круг. */
    border-radius: 60px;
}

/* Возможности */
.project-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
}
.project-feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
}
.project-feature-title { font-size: 1.05rem; margin-bottom: var(--sp-2); }
.project-feature-text { color: var(--text-muted); font-size: 0.95rem; }

/* Технологии */
.project-tech { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Галерея */
.project-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
}
.project-shot img {
    width: 100%;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* Резерв места под кадры (без CLS): пропорция приходит из данных проекта
   через --shot-ratio; если не задана — картинка в натуральном виде. */
.project-gallery[style*="--shot-ratio"] .project-shot img {
    aspect-ratio: var(--shot-ratio);
    height: auto;
    object-fit: cover;
}
.project-shot figcaption {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: var(--sp-3);
}

/* Phone-галерея: мобильные (портретные) скрины. Узкие колонки, картинка
   contain в «рамке телефона» — без апскейла и колонок-«простыней». */
.project-gallery--phone {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
}
.project-gallery--phone .project-shot img {
    width: auto;
    max-width: 100%;
    max-height: 620px;
    margin: 0 auto;
    background: var(--surface);
    padding: var(--sp-2);
}
.project-gallery--phone .project-shot figcaption { text-align: center; }

/* ===== Примеры работ (сайты на заказ): блок на каждый сайт ===== */
.site-block { margin-bottom: var(--sp-8); }
.site-block:last-child { margin-bottom: 0; }
.site-name {
    font-size: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}
.site-kind { color: var(--text-muted); font-size: 0.95rem; font-weight: 400; }
.site-points {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-4) 0 var(--sp-5);
}
.site-points li {
    position: relative;
    padding-left: var(--sp-4);
    color: var(--text-muted);
    font-size: 0.95rem;
}
.site-points li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.site-block .project-gallery { margin-top: var(--sp-5); }
.site-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}
.site-note { color: var(--text-muted); font-size: 0.9rem; font-style: italic; }

/* Планшет: ролик уезжает под текст, галерея/фичи — в один столбец */
@media (max-width: 860px) {
    .project-about { grid-template-columns: 1fr; }
    .project-inline-media { width: 260px; margin: 0 auto; }
    .project-about-video { margin: 0 auto; }
    .project-features,
    .project-gallery,
    .site-points { grid-template-columns: 1fr; }
    /* Phone-галерея остаётся многоколоночной — портретные скрины узкие */
    .project-gallery--phone { grid-template-columns: repeat(3, 1fr); }
}

/* Мобайл: cover мешает читаемости — прячем, оставляем чистый баннер */
@media (max-width: 680px) {
    .project-hero-cover { display: none; }
    .project-section { padding: var(--sp-7) var(--sp-4); }
    .project-gallery--phone { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Описание + демо-видео сбоку (текст слева, ролик справа) ===== */
.project-about--video { align-items: stretch; }
.project-about--video .project-about-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.project-about-video {
    width: 320px;
    max-width: 100%;
    flex-shrink: 0;
}
.project-about-video video {
    width: 100%;
    max-height: 78vh;
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: #000;
}

/* Вводная строка над сеткой (напр. пояснение к механикам) */
.project-lead-note { color: var(--text-muted); margin-bottom: var(--sp-5); max-width: 70ch; }

/* Полоса-разделитель: ряд квадратных кадров-сцен */
.project-scenes-section { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.scene-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-3);
}
.scene-tile { margin: 0; }
.scene-tile img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
@media (max-width: 860px) { .scene-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .scene-strip { grid-template-columns: repeat(2, 1fr); } }

/* ===== Tiny Software: коллекция приложений (zigzag) ===== */
/* --app-accent задаётся инлайном на .tiny-app (свой цвет каждого приложения) */
.tiny-apps { display: flex; flex-direction: column; gap: var(--sp-7); }
.tiny-app {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-6);
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--app-accent);
    border-radius: var(--radius);
    padding: var(--sp-5);
}
/* Чётные карточки — рендер справа (чередование) */
.tiny-app:nth-child(even) .tiny-app-media { order: 2; }

.tiny-app-media {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--border);
}
.tiny-app-media img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.tiny-app-name { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.tiny-app-name::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--app-accent);
    margin-right: var(--sp-3);
    vertical-align: middle;
}
.tiny-app-tagline { color: var(--text-muted); margin-bottom: var(--sp-4); }

.tiny-app-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.tiny-app-points li {
    position: relative;
    padding-left: var(--sp-5);
    color: var(--text-muted);
    font-size: 0.95rem;
}
.tiny-app-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-accent);
}

/* Чипы статистики — в акцентном цвете приложения */
.tiny-app-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.tiny-app-stats li {
    font-size: 0.72rem;
    color: var(--app-accent);
    border: 1px solid color-mix(in srgb, var(--app-accent) 40%, transparent);
    background: color-mix(in srgb, var(--app-accent) 12%, transparent);
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
}

.tiny-app-tech {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.tiny-app-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tiny-app-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--app-accent);
    color: #10131a;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.15s, transform 0.15s;
}
.tiny-app-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.tiny-app-btn--ghost {
    background: transparent;
    color: var(--app-accent);
    border: 1px solid color-mix(in srgb, var(--app-accent) 50%, transparent);
}

/* Мобайл: карточка в один столбец, рендер всегда сверху */
@media (max-width: 760px) {
    .tiny-app { grid-template-columns: 1fr; gap: var(--sp-5); }
    .tiny-app:nth-child(even) .tiny-app-media { order: 0; }
}

/* ===== Категории Telegram-ботов (bot_groups) ===== */
/* --group-accent задаётся инлайном на .bot-group (свой цвет каждой категории) */
.bot-groups { display: flex; flex-direction: column; gap: var(--sp-7); }
.bot-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--group-accent);
    border-radius: var(--radius);
    padding: var(--sp-6);
}
.bot-group-head { margin-bottom: var(--sp-5); }
.bot-group-title { font-size: 1.3rem; margin-bottom: var(--sp-2); }
.bot-group-title::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--group-accent);
    margin-right: var(--sp-3);
    vertical-align: middle;
}
.bot-group-tagline { color: var(--text-muted); max-width: 72ch; }

/* Карточки-примеры ботов внутри категории */
.bot-cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.bot-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
}
.bot-card-name {
    font-size: 1.05rem;
    margin-bottom: var(--sp-2);
    color: var(--group-accent);
}
.bot-card-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: var(--sp-3);
}
.bot-card-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.bot-card-tags:last-child { margin-bottom: 0; }

.bot-group-gallery { margin-bottom: var(--sp-5); }
/* Скрины ботов квадратные (1080×1080) — резервируем место заранее (без CLS) */
.bot-group-gallery .project-shot img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }

.bot-group-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.bot-group-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--group-accent);
    color: var(--accent-ink);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.15s, transform 0.15s;
}
.bot-group-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }

@media (max-width: 760px) {
    .bot-group { padding: var(--sp-5); }
}

/* ===== Юридические страницы (privacy / terms / data-processing) ===== */
.legal {
    max-width: 760px;              /* узкая колонка — комфортно читать длинный текст */
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-6);
}
.legal-section { margin-bottom: var(--sp-7); }
.legal-heading {
    font-size: 1.35rem;
    margin-bottom: var(--sp-4);
    color: var(--text);
}
.legal-p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: var(--sp-4);
}
.legal-list {
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 0 var(--sp-4) var(--sp-5);
    padding: 0;
    list-style: disc;
}
.legal-list li { margin-bottom: var(--sp-2); }
.legal-effective {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .legal { padding: var(--sp-7) var(--sp-4); }
}

/* ==========================================================================
   ШТОРА-ПЕРЕХОД «В ГЛАВНУЮ»
   Фазы: смыкание к центру → поворот оранжевой линии на 90° → расход вверх/вниз.
   Классы фаз навешивает main.js (is-closing → is-pivot → is-opening).
   Играет: полный цикл при прямом входе на главную; только раскрытие на главной,
   если пришли по внутренней ссылке; закрытие+поворот на уходящей странице по
   клику на ссылку главной (штора есть на всех страницах, но по умолчанию скрыта).

   >>> ТАЙМИНГИ И ТОЛЩИНА КАЙМЫ — крути переменные ниже <<<
     --dur-close  скорость смыкания к центру
     --dur-pivot  скорость поворота линии на 90°
     --hold       пауза на сомкнутом экране перед поворотом
     --dur-open   скорость расхождения вверх/вниз
     --edge       толщина оранжевой каймы на каждой кромке (линия ≈ 2×--edge)
   main.js читает эти же переменные, так что правка здесь меняет и логику.
   ========================================================================== */
.curtain-overlay {
    --dur-close: 650ms;
    --dur-pivot: 500ms;
    --hold:      220ms;
    --dur-open:  700ms;
    --edge:      2px;

    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
    display: none;   /* по умолчанию скрыта; на главной включается модификатором,
                        на прочих страницах — из JS при перехвате ссылки */
}
/* На главной штора видна с первого кадра (полный цикл или раскрытие). */
.curtain-overlay--home { display: block; }

/* Мгновенно зафиксировать состояние без проигрывания transition
   (нужно, чтобы стартовать раскрытие из «закрытого» кадра на приёмнике). */
.curtain-overlay.no-anim,
.curtain-overlay.no-anim * { transition: none !important; }

/* Базовый слой — кроет фон с первого кадра (без мигания контента). Нужен только
   на главной: при закрытии на уходящей странице фон НЕ кроем, чтобы шторы
   смыкались поверх реального контента. */
.curtain-base {
    position: absolute;
    inset: 0;
    background: var(--bg);
    display: none;
}
.curtain-overlay--home .curtain-base { display: block; }

/* Панели-шторы. Цвет = фон сайта, поэтому видны только оранжевые кромки. */
.curtain-panel { position: absolute; background: var(--bg); }
.curtain-panel::after {           /* оранжевая кромка на внутреннем крае */
    content: "";
    position: absolute;
    background: var(--accent);
}

/* Фаза 1: левая/правая — съезжаются к центру по горизонтали. */
.curtain-panel--left,
.curtain-panel--right {
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    transition: transform var(--dur-close) ease;
}
.curtain-panel--left  { left: 0;  transform: translateX(-100%); }
.curtain-panel--right { right: 0; transform: translateX(100%); }
.curtain-panel--left::after  { top: 0; right: 0; width: var(--edge); height: 100%; }
.curtain-panel--right::after { top: 0; left: 0;  width: var(--edge); height: 100%; }

/* Фаза 3: верх/низ — расходятся врозь по вертикали. Скрыты до подмены. */
.curtain-panel--top,
.curtain-panel--bottom {
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 2;
    visibility: hidden;
    transition: transform var(--dur-open) ease;
}
.curtain-panel--top    { top: 0;    transform: translateY(0); }
.curtain-panel--bottom { bottom: 0; transform: translateY(0); }
.curtain-panel--top::after    { bottom: 0; left: 0; width: 100%; height: var(--edge); opacity: 0; }
.curtain-panel--bottom::after { top: 0;    left: 0; width: 100%; height: var(--edge); opacity: 0; }

/* Оранжевая линия-шов: возникает на подмене, поворачивается на 90°.
   Длина 100vmax — кроет всю сторону в любой ориентации. */
.curtain-seam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--edge) * 2);
    height: 100vmax;
    background: var(--accent);
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform var(--dur-pivot) ease;
    opacity: 0;
    z-index: 3;
}

/* --- Состояния (классы аддитивны: is-closing остаётся, добавляются новые) --- */
/* Фаза 1: L/R к центру. */
.curtain-overlay.is-closing .curtain-panel--left,
.curtain-overlay.is-closing .curtain-panel--right { transform: translateX(0); }

/* Подмена под поворот линии: прячем base и L/R, показываем T/B (кроют, врозь
   ещё не разъехались), шов — вертикальный → крутим на 90°. */
.curtain-overlay.is-pivot .curtain-base,
.curtain-overlay.is-pivot .curtain-panel--left,
.curtain-overlay.is-pivot .curtain-panel--right { visibility: hidden; }
.curtain-overlay.is-pivot .curtain-panel--top,
.curtain-overlay.is-pivot .curtain-panel--bottom { visibility: visible; }
.curtain-overlay.is-pivot .curtain-seam { opacity: 1; transform: translate(-50%, -50%) rotate(90deg); }

/* Фаза 3: шов гаснет (его подменяют кромки T/B), панели расходятся врозь. */
.curtain-overlay.is-opening .curtain-seam { opacity: 0; }
.curtain-overlay.is-opening .curtain-panel--top::after,
.curtain-overlay.is-opening .curtain-panel--bottom::after { opacity: 1; }
.curtain-overlay.is-opening .curtain-panel--top    { transform: translateY(-100%); }
.curtain-overlay.is-opening .curtain-panel--bottom { transform: translateY(100%); }

/* Доступность: без анимации — штора не показывается вовсе. */
@media (prefers-reduced-motion: reduce) {
    .curtain-overlay { display: none !important; }
}