/* ============================================================
   painting_immersion.css — «погружение в картину» на шапках публички (13.09.2026).

   Клик по картине шапки → она вырастает на весь экран, камера едет
   по деталям, к каждой всплывает подпись. Заголовок шапки распадается
   по буквам и собирается обратно при выходе.

   Только transform/opacity, без layout-триггеров; при
   prefers-reduced-motion всё происходит склейкой кадров.
   Зависит от _base.css (палитра, шрифты) и _hero.css (шапка).
   ============================================================ */

:root {
  --pim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pim-camera: 1500ms;
  --pim-fade: 420ms;
}

/* ── Триггер в шапке ─────────────────────────────────────── */
.pim-trigger {
  position: absolute; z-index: 3;
  top: 0; bottom: 0; left: 60%; right: 0;
  background: transparent; border: 0; padding: 0;
  cursor: zoom-in; color: var(--dark);
  display: flex; align-items: flex-end; justify-content: flex-end;
  -webkit-tap-highlight-color: transparent;
}
.page-hero-wrap .pim-trigger { left: 55%; }
/* Кабинет: шапка .page-hero невысокая, текст слева — триггер правые 45 % */
.page-hero > .pim-trigger { left: 55%; }
.page-hero > .pim-trigger .pim-trigger-hint { margin: 0 20px 20px 0; }
.pim-trigger:focus-visible { outline: 2px solid var(--accent-2, #C27D2A); outline-offset: -6px; }
.pim-trigger-hint {
  margin: 0 28px 74px 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 99px;
  background: rgba(244, 239, 230, 0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(28, 18, 10, 0.12);
  font-family: var(--font-serif, 'PT Serif', Georgia, serif); font-size: 13px; letter-spacing: 0.02em;
  color: var(--dark, #1C120A);
  opacity: 0; transform: translateY(6px);
  transition: opacity 220ms var(--pim-ease), transform 220ms var(--pim-ease),
              background 180ms ease;
}
.pim-trigger-hint em { font-style: italic; color: var(--accent-1, #8B1A2C); }
.pim-trigger-hint::before {
  content: ''; width: 14px; height: 14px; flex: none;
  border: 1.6px solid currentColor; border-radius: 50%;
  box-shadow: 5px 5px 0 -3px currentColor;
}
.pim-trigger:hover .pim-trigger-hint,
.pim-trigger:focus-visible .pim-trigger-hint,
[data-pim-hero]:hover .pim-trigger-hint { opacity: 1; transform: translateY(0); }

/* ── Слой 2: буквы заголовка ─────────────────────────────── */
/* Хореография: буквы уходят вверх волной слева направо (10 мс на букву),
   без вращения — лёгкий дрейф по горизонтали и подъём; камера трогается
   через 380 мс, когда текст почти растворился. На закрытии текст собирается
   обратной волной (8 мс) вместе с угасанием оверлея, когда холст уже вернулся
   в кроп шапки (тайминги — closeIt в JS). Блоки шапки — ступенькой. */
[data-pim-text] > * {
  transition: opacity var(--pim-fade) var(--pim-ease), transform var(--pim-fade) var(--pim-ease);
}
.pim-char {
  display: inline-block; white-space: pre;
  transition: opacity 380ms var(--pim-ease), transform 460ms var(--pim-ease);
  transition-delay: var(--pim-dc, 0ms);
  will-change: transform, opacity;
}
/* `animation: none` обязателен: у .hero-left > * стоит heroSlideUp с fill-mode
   both, и её конечный кадр (opacity 1) перебивает любое обычное правило.
   Класс is-pim-touched остаётся навсегда после первого открытия — иначе при
   возврате въезд шапки проигрывается заново и выглядит как сбой. */
[data-pim-hero].is-pim-touched [data-pim-text] > *:not([data-pim-headline]) { animation: none; }
[data-pim-hero].is-pim-open [data-pim-text] > *:not([data-pim-headline]) {
  opacity: 0; transform: translateY(12px);
}
[data-pim-hero].is-pim-open .pim-char {
  opacity: 0;
  transform: translate(var(--pim-dx, 0px), var(--pim-dy, -24px)) scale(0.94);
  transition-delay: var(--pim-d, 0ms);
}
/* Возврат: блоки шапки встают ступенькой сверху вниз */
[data-pim-hero].is-pim-closing [data-pim-text] > *:nth-child(1) { transition-delay: 80ms; }
[data-pim-hero].is-pim-closing [data-pim-text] > *:nth-child(3) { transition-delay: 220ms; }
[data-pim-hero].is-pim-closing [data-pim-text] > *:nth-child(4) { transition-delay: 320ms; }
/* После возврата фокус снова на кнопке-триггере, но кольцо фокуса рисовать
   не надо: с клавиатуры оно вернётся при следующем Tab (класс снимает JS) */
.pim-trigger.is-pim-refocus:focus-visible { outline: none; }
[data-pim-hero].is-pim-open .page-hero-credit,
[data-pim-hero].is-pim-open .hero-painting-credit,
[data-pim-hero].is-pim-open .pim-trigger { opacity: 0; pointer-events: none; }
[data-pim-hero] .hero-painting-credit { transition: opacity var(--pim-fade) ease; }
/* Подчёркивание «проще» — псевдоэлемент, не буква: прячем отдельно, иначе
   черта висит над оверлеем одна */
.hero-headline .underline-accent::after { transition: opacity 300ms ease; }
[data-pim-hero].is-pim-open .hero-headline .underline-accent::after { animation: none; opacity: 0; }
/* Пока идёт переход, текст шапки живёт НАД оверлеем: буквы разлетаются
   поверх темнеющего экрана, а при выходе собираются обратно поверх него же. */
[data-pim-hero].is-pim-open .hero,
[data-pim-hero].is-pim-open .page-hero,
[data-pim-hero].is-pim-open .page-hero-inner,
[data-pim-hero].is-pim-closing .hero,
[data-pim-hero].is-pim-closing .page-hero,
[data-pim-hero].is-pim-closing .page-hero-inner { z-index: 10001; }
[data-pim-hero].is-pim-open .hero,
[data-pim-hero].is-pim-open .page-hero,
[data-pim-hero].is-pim-open .page-hero-inner { pointer-events: none; }
/* Кабинет: сама шапка .page-hero — и обёртка, и стакинг-контекст; чтобы буквы
   были над оверлеем, position:relative уже есть, z-index задан выше */
/* Соседи колонки текста (фото автора на /about/) гаснут вместе с ней */
[data-pim-hero].is-pim-open .page-hero > :not([data-pim-text]) {
  animation: none;   /* у фото свой въезд с fill-mode both — иначе его кадр перебьёт opacity */
  opacity: 0; transition: opacity var(--pim-fade) ease;
}
[data-pim-hero] .page-hero-credit { transition: opacity var(--pim-fade) ease; }

/* ── Оверлей ─────────────────────────────────────────────── */
.pim {
  position: fixed; inset: 0; z-index: 10000;  /* выше nav, лайтбокса (2000) и cookie-плашки (9999); ниже лоадера */
  background: var(--dark, #1C120A); color: var(--bg, #F4EFE6);
  opacity: 0;
  transition: opacity var(--pim-fade) ease;
  overscroll-behavior: contain;
}
.pim.is-visible { opacity: 1; }
/* Атмосфера: сама картина, размытая, под тёплым тёмным стеклом (как overlay
   painting-break) и бумажной текстурой героя — фон живёт цветом холста */
.pim-atmo {
  position: absolute; inset: -8%;
  background-size: cover; background-position: center;
  filter: blur(36px) saturate(0.9) brightness(1.18);
  transform: scale(1.06);
  pointer-events: none;
}
.pim-atmo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28, 18, 10, 0.46) 0%, rgba(28, 18, 10, 0.38) 50%, rgba(28, 18, 10, 0.56) 100%);
}
.pim-atmo::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(244, 239, 230, 0.06) 0.5px, transparent 0.6px);
  background-size: 14px 14px;
}
.pim-stage { position: absolute; inset: 0; overflow: hidden; }
/* «Камера» — обёртка натурального размера холста; картинка и WebGL-холст
   лежат в ней друг на друге, transform двигает обоих сразу */
.pim-cam {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  transition: transform var(--pim-camera) var(--pim-ease);
  will-change: transform;
}
.pim-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  user-select: none; -webkit-user-drag: none;
  max-width: none;
}
.pim-gl {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 600ms ease;
}
.pim.is-depth .pim-gl { opacity: 1; }
.pim.is-instant .pim-cam { transition: none; }
.pim.is-whole .pim-cam {
  box-shadow: 0 0 0 1px rgba(244, 239, 230, 0.12), 0 40px 120px -30px rgba(0, 0, 0, 0.8);
}
.pim-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(14, 10, 7, 0.55) 100%);
  opacity: 0; transition: opacity 800ms ease;
}
.pim.is-zoomed .pim-vignette { opacity: 1; }

/* ── Подпись ─────────────────────────────────────────────── */
.pim-caption {
  position: absolute; left: 32px; bottom: 96px; z-index: 2;
  max-width: 400px;
  padding: 22px 26px 24px;
  background: var(--bg, #F4EFE6);
  color: var(--dark, #1C120A);
  border: 1px solid var(--border, #D4C9B0);
  border-radius: var(--radius-lg, 20px);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(16px);
  transition: opacity 480ms var(--pim-ease), transform 560ms var(--pim-ease);
  pointer-events: none;
}
.pim-caption.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Вид «вся картина» на десктопе: карточка стоит слева от холста, низ в низ,
   вся группа отцентрована — координаты считает JS (wholeState) */
@media (min-width: 641px) {
  .pim.is-whole .pim-caption {
    left: var(--pim-cap-left, 32px);
    bottom: var(--pim-cap-bottom, 96px);
    width: var(--pim-cap-width, 400px);
  }
}
.pim-caption-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint, #6B5540); margin-bottom: 8px;
}
.pim-caption-title {
  font-family: var(--font-serif, 'PT Serif', Georgia, serif); font-size: 26px; line-height: 1.12;
  font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px;
  color: var(--dark, #1C120A);
}
.pim-caption-title em { font-style: italic; color: var(--accent-1, #8B1A2C); }
.pim-caption-text { font-size: 15.5px; line-height: 1.55; color: #2A1C10; margin: 0; }

/* ── Бренд ───────────────────────────────────────────────── */
.pim-brand {
  position: absolute; top: 22px; left: 28px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 600ms ease 300ms, transform 600ms var(--pim-ease) 300ms;
}
.pim.is-visible .pim-brand { opacity: 1; transform: translateY(0); }
/* В наезде бренд лежит на самой картине — канон требует подложку под знаком */
.pim-brand::before {
  content: ''; position: absolute; inset: -8px -16px -8px -8px; z-index: -1;
  border-radius: 99px;
  background: rgba(14, 10, 7, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 500ms ease;
}
.pim.is-zoomed .pim-brand::before { opacity: 1; }
.pim-brand-mark { width: 40px; height: 40px; flex: none; }
.pim-brand-logo {
  font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--bg);
}
.pim-brand-logo span { color: var(--accent-2, #C27D2A); font-weight: 700; }
.pim-brand-sub {
  margin-top: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
}

/* ── Управление ──────────────────────────────────────────── */
.pim-close {
  position: absolute; top: 20px; right: 20px; z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(244, 239, 230, 0.25);
  background: rgba(14, 10, 7, 0.45); color: var(--bg);
  display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 160ms ease, transform 160ms var(--pim-ease);
}
.pim-close:hover { background: rgba(139, 26, 44, 0.85); }
.pim-close:active { transform: scale(0.94); }
.pim-close:focus-visible, .pim-arrow:focus-visible { outline: 2px solid var(--accent-2, #C27D2A); outline-offset: 2px; }

.pim-nav {
  position: absolute; left: 50%; bottom: 28px; z-index: 3;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 6px;
  border-radius: 99px;
  background: rgba(14, 10, 7, 0.45);
  border: 1px solid rgba(244, 239, 230, 0.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pim-arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: transparent; color: var(--bg); cursor: pointer;
  display: grid; place-items: center;
  transition: background 160ms ease, transform 160ms var(--pim-ease);
}
.pim-arrow:hover { background: rgba(244, 239, 230, 0.14); }
.pim-arrow:active { transform: scale(0.92); }
.pim-dots { display: flex; gap: 8px; align-items: center; }
.pim-dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(244, 239, 230, 0.35); cursor: pointer;
  transition: background 200ms ease, transform 200ms var(--pim-ease);
}
.pim-dot.is-on { background: var(--accent-2, #C27D2A); transform: scale(1.35); }
.pim-dot--all { width: 9px; height: 9px; border-radius: 2px; }

.pim-depth-toggle {
  position: absolute; right: 24px; bottom: 68px; z-index: 3;
  padding: 6px 12px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.72);
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 160ms ease;
}
.pim-depth-toggle em { font-style: normal; color: var(--accent-2, #C27D2A); }
.pim-depth-toggle[aria-pressed="false"] em { color: rgba(244, 239, 230, 0.5); }
.pim-depth-toggle:hover { background: rgba(244, 239, 230, 0.14); }
.pim-depth-toggle:focus-visible { outline: 2px solid var(--accent-2, #C27D2A); outline-offset: 2px; }

.pim-hint {
  position: absolute; right: 24px; bottom: 32px; z-index: 3;
  padding: 6px 12px; border-radius: 99px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 600ms ease 900ms;
}
.pim.is-visible .pim-hint { opacity: 1; }

/* ── Телефон ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-hero > .pim-trigger { left: 50%; top: 0; bottom: 0; height: auto; align-items: flex-end; }
  .page-hero > .pim-trigger .pim-trigger-hint { margin: 0 10px 12px 0; }
  .pim-trigger, .page-hero-wrap .pim-trigger {
    top: 0; left: 0; right: 0; bottom: auto; height: 40vh;
    align-items: flex-end; justify-content: flex-end;
  }
  /* Низ картины на телефоне занят: шесть цифр статистики и подпись-credit.
     Чип, стоявший там, либо съедал год в подписи, либо накрывал цифру
     (приёмка 22.09.2026). Уводим его в правый верх — под шапкой-меню
     это единственное свободное место, и он там не спорит ни с чем. */
  /* ⛔ Только кабинет (.page-hero): там картина начинается НИЖЕ шапки-меню.
     На публичке (.hero) картина уходит под фиксированный nav, и чип наверху
     оказывается за ним — некликабельный. Проверено глазами на главной. */
  .page-hero > .pim-trigger,
  .page-hero-inner > .pim-trigger { align-items: flex-start; }
  .page-hero > .pim-trigger .pim-trigger-hint,
  .page-hero-inner > .pim-trigger .pim-trigger-hint { margin: 12px 10px 0 0; }
  .pim-trigger-hint {
    margin: 0 10px 30px 0; opacity: 1; transform: none;
    font-size: 10.5px; padding: 5px 9px 5px 8px; gap: 6px;
    background: rgba(244, 239, 230, 0.7);
  }
  .pim-trigger-hint::before { width: 10px; height: 10px; border-width: 1.3px; box-shadow: 4px 4px 0 -2.5px currentColor; }
  .pim-caption {
    left: 12px; right: 12px; bottom: 84px; max-width: none;
    padding: 16px 18px 18px; border-radius: 14px;
  }
  .pim-caption-title { font-size: 21px; }
  .pim-caption-text { font-size: 14.5px; line-height: 1.5; }
  .pim-hint, .pim-depth-toggle { display: none; }
  .pim-nav { bottom: 18px; }
  .pim-close { top: 14px; right: 14px; }
  .pim-brand { top: 16px; left: 14px; gap: 10px; }
  .pim-brand-mark { width: 34px; height: 34px; }
  .pim-brand-logo { font-size: 16px; }
  .pim-brand-sub { font-size: 10px; }
  .pim-atmo { filter: blur(24px) saturate(0.85) brightness(1.05); }

}

/* ── Без движения ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pim, .pim-cam, .pim-gl, .pim-caption, .pim-char, [data-pim-text] > *, .pim-vignette, .pim-brand,
  .pim-trigger-hint, [data-pim-hero] .page-hero-credit { transition: none; }
}