/* ═══════════════════════════════════════════════════════════════════
   BANNGRU — внутренние страницы в языке нового интерфейса

   Подключается после site.css и home.css. Космос, остров, палитра Ctrl+K
   и движение приходят из home.css/home.js; здесь только то, чем
   внутренняя страница отличается от главной: шапка страницы, стеклянные
   блоки текста и короткий вход без «падения» острова.

   Каждая страница — своё пространство: цвет задаётся один раз,
   в <html style="--tint: …">, и красит фон, остров, маркеры и ссылки.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ Вход ═══
   На главной остров падает сверху и космос проявляется почти две секунды.
   При переходе между страницами это повторялось бы на каждом клике —
   здесь вход короткий, чтобы сайт ощущался одним приложением. */

.js .page .space-bg { animation-duration: 700ms; }
.js .page .topbar .island { animation: introFade 420ms ease both; }
.js .page .topbar .logo, .js .page .topbar-actions { animation: introFade 420ms ease both; }
/* Шапка страницы видна сразу при входе — проявляется вдвое быстрее, чем
   секции главной, которые появляются по мере прокрутки */
.js .orbit.page .page-hero .reveal { transition-duration: 450ms, 600ms, 450ms; }

/* ═══ Шапка страницы ═══ */

.page .page-hero { padding: calc(var(--nav-h) + 92px) 0 60px; overflow: visible; }

/* Свечение цвета пространства за заголовком */
.page .page-hero::before {
    content: ''; position: absolute; left: 50%; top: 42%; z-index: 0;
    width: min(760px, 90vw); height: 320px; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 22%, transparent), transparent);
    filter: blur(30px); pointer-events: none;
}

/* Хлебные крошки — моноширинный «кикер» с линией, как подписи секций главной */
.page .crumbs {
    gap: 10px; margin-bottom: 22px;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: color-mix(in srgb, var(--tint) 85%, #fff);
}
.page .crumbs::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.page .crumbs a { color: var(--text-muted); transition: color 180ms ease; }
.page .crumbs a:hover { color: #fff; }
.page .crumbs i { font-size: 0.5rem; color: var(--text-muted); }

.page .page-hero h1 {
    font-size: clamp(2.5rem, 6.2vw, 4.6rem); font-weight: 800;
    letter-spacing: -0.045em; line-height: 1.02;
    /* «Конфиденциальности» в 40px шире телефона — разрешаем перенос */
    hyphens: auto; overflow-wrap: anywhere;
}
.page .page-hero p { max-width: 640px; margin-top: 22px; font-size: 1.07rem; }

/* ═══ Текст и блоки ═══
   Поверхности — стекло: сквозь них виден цвет пространства */

.page .prose .content-section,
.page .prose .story-section,
.page .prose .version-card,
.page .prose [class$='-card'], .page .prose [class*='-card '],
.page .prose .section, .page .prose details, .page .prose .cta-box, .page .prose .contact-box {
    background: rgba(255, 255, 255, 0.028);
    border-color: var(--line);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* Страницы-витрины (карточки в несколько колонок) шире текстовых */
.page .prose.prose-wide { max-width: 1120px; }

/* Карточка-ссылка оживает цветом пространства */
.page .prose a[class$='-card']:hover, .page .prose a[class*='-card ']:hover, .page .prose .blog-card-link:hover {
    border-color: color-mix(in srgb, var(--tint) 45%, transparent);
    box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--tint) 70%, transparent);
}

.page .prose h2 { letter-spacing: -0.03em; }

/* Пути API и токены в тексте — одно длинное «слово», без переноса
   они раздвигают страницу на телефоне */
.page .prose :not(pre) > code { overflow-wrap: anywhere; }
.page .prose h2 > i:first-child { margin-right: 6px; color: var(--tint); }

/* Значок версии и даты — моноширинным, как цифры в интерфейсе */
.page .prose .version-number { font-family: var(--mono); letter-spacing: -0.02em; }
.page .prose .version-date, .page .prose .news-date, .page .prose .blog-date { font-family: var(--mono); font-size: 0.74rem; }

/* Кнопка копирования кода: подпись появляется рядом с иконкой */
.page .prose .copy-btn span { font-size: 0.72rem; }

/* Цвет на странице бренда копируется по клику */
.page [data-copy] { cursor: copy; }
.page [data-copy][data-copied]::after {
    content: 'Скопировано'; position: absolute; left: 12px; bottom: 10px;
    padding: 3px 9px; font-size: 0.7rem; font-weight: 700;
    color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 999px;
}
.page .color-preview[data-copy] { position: relative; }

/* ═══ Финальный призыв внизу страницы ═══ */

.page-cta { position: relative; z-index: 1; padding: 30px 0 120px; text-align: center; }
.page-cta-box {
    position: relative; max-width: 860px; margin: 0 auto; padding: 46px 28px; overflow: hidden;
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 28px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.page-cta-box::before {
    content: ''; position: absolute; inset: auto -20% -60% -20%; height: 120%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 20%, transparent), transparent);
    pointer-events: none;
}
.page-cta-box > * { position: relative; }
.page-cta h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; }
.page-cta p { max-width: 520px; margin: 14px auto 0; color: var(--text-secondary); }
.page-cta .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

@media (max-width: 768px) {
    .page .page-hero { padding: calc(var(--nav-h) + 56px) 0 44px; }
    .page .page-hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
    .page .page-hero p { font-size: 1rem; }
    .page-cta { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    .js .page .space-bg, .js .page .topbar .island, .js .page .topbar .logo, .js .page .topbar-actions { animation: none; }
}