/* ORTHODOX HOUSE — современный слой (20.09.2026).
   Всё здесь — прогрессивное улучшение: браузер без поддержки просто не видит правила (@supports / новые
   свойства игнорируются), страницы работают как прежде. Уважает prefers-reduced-motion. */

/* 1. Плавные переходы между страницами — cross-document View Transitions (Chrome 126+, Edge, Safari 18.2+).
      Шапка и нижняя навигация живут в своих группах и не мигают, содержимое мягко сменяется. */
@view-transition { navigation: auto; }
@keyframes oh-vt-out { to { opacity: 0; } }
@keyframes oh-vt-in { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 140ms cubic-bezier(.4, 0, 1, 1) both oh-vt-out; }
  ::view-transition-new(root) { animation: 240ms cubic-bezier(0, 0, .2, 1) 30ms both oh-vt-in; }
  .hdr { view-transition-name: oh-hdr; }
  .bnav { view-transition-name: oh-bnav; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 2. Карточки проявляются при прокрутке — scroll-driven animations (Chrome 115+, Safari 26+).
      Двигаем translate (не transform), чтобы не спорить с hover-подъёмом карточек. */
@keyframes oh-reveal { from { opacity: .12; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
    .acard, .scard, .ecard, .vcard, .lcard, .jrow, .catgrid > a, a.card[href^="/lives/"], .oh-reveal {
      animation: oh-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}

/* 3. Лёгкий параллакс главной картинки статьи (view() timeline) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    article.full .im.hero { overflow: clip; }
    article.full .im.hero img { animation: oh-parallax linear both; animation-timeline: view(); animation-range: cover; scale: 1.08; }
  }
}
@keyframes oh-parallax { from { translate: 0 -4%; } to { translate: 0 4%; } }

/* 4. Полоса прочтения статьи — тонкая золотая линия под шапкой, растёт по мере чтения (scroll(root) timeline) */
@supports (animation-timeline: scroll()) {
  body:has(article.full .body)::before {
    content: ""; position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 71; pointer-events: none;
    background: linear-gradient(90deg, #9c7526, #f0d68a);
    transform-origin: 0 50%;
    animation: oh-grow linear both; animation-timeline: scroll(root);
  }
}
@keyframes oh-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 5. Шапка получает тень, когда «прилипла» — scroll-state container queries (Chrome 133+) */
@supports (container-type: scroll-state) {
  .hdr { container-type: scroll-state; }
  @container scroll-state(stuck: top) {
    .hbar { box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .6); }
  }
}

/* 6. <details> раскрывается плавно (interpolate-size + ::details-content, Chrome 131+).
      Только в содержимом — выпадающий список в панели настроек (.ctl) не трогаем. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  main details:not(.ctl details)::details-content,
  article details::details-content,
  .col-center details::details-content,
  .lives details::details-content {
    height: 0; overflow: clip;
    transition: height .28s cubic-bezier(.2, .7, .2, 1), content-visibility .28s allow-discrete;
  }
  main details[open]:not(.ctl details)::details-content,
  article details[open]::details-content,
  .col-center details[open]::details-content,
  .lives details[open]::details-content { height: auto; }
}

/* 7. Появление шторки мобильного меню и всплывающих слоёв — @starting-style (Chrome 117+, Safari 17.5+) */
@media (prefers-reduced-motion: no-preference) {
  .bsheet, .bscrim { transition: opacity .2s ease, translate .22s cubic-bezier(.2, .7, .2, 1), display .22s allow-discrete; }
  .bsheet:not(.open) { opacity: 0; translate: 0 24px; } .bscrim:not(.open) { opacity: 0; }
  @starting-style { .bsheet.open { translate: 0 24px; opacity: 0; } .bscrim.open { opacity: 0; } }
}

/* 8. Типографика: заголовки без «висячих» слов, абзацы без сирот (text-wrap, Chrome 114/117+, Safari 17.5+) */
h1, h2, h3, .acard h3, .nm, .lname, .ttl, .ecard .nm { text-wrap: balance; }
p, li, .esub, .lead, .meta, .mt { text-wrap: pretty; }

/* 9. Углы нового поколения — мягкий сквиркл у карточек (corner-shape, Chrome 139+) */
@supports (corner-shape: squircle) {
  .acard, .scard, .ecard, .vcard, .lcard, .jrow, .blk, .ebox, .authbox { corner-shape: squircle; }
}

/* 10. Отклик нажатия у кнопок и чипов */
@media (prefers-reduced-motion: no-preference) {
  .savebtn, .sbtn, .epill, .chip, .lbtn, .ecard .go, .cta, .btn { transition: scale .1s ease, filter .15s ease; }
  .savebtn:active, .sbtn:active, .epill:active, .chip:active, .lbtn:active, .ecard .go:active, .cta:active, .btn:active { scale: .965; }
}

/* 11. Поля ввода растут под текст (field-sizing, Chrome 123+); системные элементы форм — в цвет темы */
textarea { field-sizing: content; min-height: 3lh; max-height: 50vh; }
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* 12. Длинные ленты: браузер не раскладывает то, что далеко за экраном (content-visibility) */
.scard, .acard { content-visibility: auto; contain-intrinsic-size: auto 320px; }