/* core/modern.css — современные приёмы v2. Подключать после site.css и до core/a11y.css.
   Всё прогрессивное: в браузерах без поддержки сайт работает как раньше.
   В версии для слабовидящих и при «уменьшить движение» эффекты выключаются. */

/* ---------- 1. Плавные переходы между страницами (View Transitions API) ----------
   Chrome/Edge 126+, Safari 18.2+. Остальные браузеры переходят как обычно.
   .vt-header — шапка остаётся на месте, .vt-title — заголовок страницы перетекает.
   Имя перехода на странице должно быть уникальным: .vt-title — только у одного элемента. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms var(--ease-in-out) both vt-fade-out; }
::view-transition-new(root) { animation: 320ms var(--ease-out) both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(8px); } }
.vt-header { view-transition-name: site-header; }
.vt-title { view-transition-name: page-title; }
::view-transition-group(page-title) { animation-duration: 360ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
html[data-a11y="on"]::view-transition-group(*),
html[data-a11y="on"]::view-transition-old(*),
html[data-a11y="on"]::view-transition-new(*) { animation: none !important; }

/* ---------- 2. Полоса прогресса прокрутки (CSS scroll-driven animations) ----------
   Элемент <span class="scroll-progress" aria-hidden="true"></span> внутри шапки (у шапки position: sticky/relative). */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none; opacity: 0;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress { opacity: 1; animation: sp-grow linear both; animation-timeline: scroll(root block); }
  @keyframes sp-grow { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---------- 3. Стеклянная закреплённая шапка ----------
   Класс .glass-header на <header>. core/modern.js добавляет .is-scrolled после прокрутки. */
.glass-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--c-bg) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in oklch, var(--c-line) 75%, transparent);
  transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.glass-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(20, 20, 20, 0.35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-header { background: var(--c-bg); }
}

/* ---------- 4. Подсветка плитки под курсором (только мышь) ----------
   Класс .spotlight на плитке; цвет — переменная --spot (по умолчанию акцент). */
@media (hover: hover) and (pointer: fine) {
  .spotlight { position: relative; isolation: isolate; }
  .spotlight::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in oklch, var(--spot, var(--c-accent)) 13%, transparent), transparent 62%);
    opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
  }
  .spotlight:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .spotlight::after { display: none; } }

/* ---------- 5. «Кинетический» заголовок: слова проявляются по очереди ----------
   Разметка: <h1 class="kinetic"><span class="w" style="--i:0">Город</span> <span class="w" style="--i:1">у</span> …</h1>
   Пробелы между span обязательны (для переноса и скринридера). */
.kinetic .w {
  display: inline-block;
  animation: kin-in 760ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}
@keyframes kin-in {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .kinetic .w { animation: none; } }

/* ---------- 6. Зерно бумаги (опционально, класс .has-grain на <body>) ---------- */
.has-grain::before {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { .has-grain::before { display: none; } }

/* ---------- 7. Подчёркивание ссылок, которое «дорисовывается» ---------- */
.link-draw {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .link-draw:hover { background-size: 100% 2px; }
}

/* ---------- 8. Плавная прокрутка к якорям ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Версия для слабовидящих: всё выключено, шапка непрозрачная ---------- */
html[data-a11y="on"] .glass-header { background: var(--c-bg) !important; border-bottom: 2px solid var(--c-line); }
html[data-a11y="on"] .scroll-progress,
html[data-a11y="on"] .spotlight::after,
html[data-a11y="on"] .has-grain::before { display: none !important; }
html[data-a11y="on"] .kinetic .w { display: inline; }
html[data-a11y="on"] .link-draw { background: none; text-decoration: underline !important; }
html[data-a11y="on"] { scroll-behavior: auto; }