/* ═══════════════════════════════════════════════════════════════
   Кейс логотипа юридического бюро Полины Моксач (cases/branding-moksach.html).
   Работает поверх case-kksk.css и case-kksk-brand.css (обложка-видео,
   заголовок, разделы, визуальный поток с полями ~50 px).
   Здесь только палитра бюро (вино + графит, как на сайте клиента) и свои блоки.
   Знак и надпись — инлайн-SVG (<use> из скрытого спрайта), цвет — через fill.
   Префикс pm-.
   ═══════════════════════════════════════════════════════════════ */

.pm {
  --kb-green: #771f30;      /* номера разделов — вино бюро */
  --pm-wine: #771f30;
  --pm-garnet: #852b3e;
  --pm-carbon: #18181b;
  --pm-zinc: #71717a;
  --pm-mist: #e4e4e7;
  --pm-fog: #f4f4f5;
}

.pm .kk-cover { background: #131313; }

/* ── Общее для плиток со знаком ────────────────────────── */
.pm-tile { position: relative; display: grid; place-items: center; overflow: hidden; margin: 0; }
.pm-tile svg { display: block; overflow: visible; }
.pm-tile figcaption { position: absolute; left: clamp(16px, 2vw, 32px); right: clamp(16px, 2vw, 32px); bottom: clamp(14px, 1.8vw, 28px); display: flex; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.pm-fog { background: var(--pm-fog); color: var(--pm-carbon); }
.pm-white { background: #fff; color: var(--pm-carbon); }
.pm-carbon { background: var(--pm-carbon); color: #fff; }
.pm-wine { background: var(--pm-wine); color: #fff; }
.pm-f-wine { fill: var(--pm-wine); }
.pm-f-carbon { fill: var(--pm-carbon); }
.pm-f-white { fill: #fff; }

/* ── П над М: три плитки ───────────────────────────────── */
.pm-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kb-gut); }
.pm-tri .pm-tile { aspect-ratio: 1 / 1; }
.pm-tri svg { width: 52%; height: auto; }
.pm-tri__p, .pm-tri__m { transition: fill 0.8s ease, fill-opacity 0.8s ease, transform 1.4s var(--ease); }
.pm-ghost { fill-opacity: 0.1; }
/* в третьей плитке П опускается на М при появлении */
html.js .pm-tri__drop .pm-tri__p { transform: translateY(-34px); fill-opacity: 0; }
html.js .kk-in .pm-tri__drop .pm-tri__p, html.js .kk-in.pm-tri__drop .pm-tri__p { transform: none; fill-opacity: 1; transition-delay: 0.5s; }

/* ── Построение ────────────────────────────────────────── */
.pm-grid { aspect-ratio: 16 / 8; }
.pm-grid svg { width: min(84%, 1500px); height: auto; margin-bottom: 4%; }
/* толщина в единицах viewBox (без non-scaling-stroke: с ним pathLength не масштабирует штрих и прорисовка обрывается) */
.pm-grid__g line { stroke: var(--pm-wine); stroke-width: 0.45; stroke-opacity: 0.55; }
.pm-grid__d line { stroke-opacity: 0.32; }
.pm-grid__dim path, .pm-grid__dim line { fill: none; stroke: var(--pm-wine); stroke-width: 0.6; }
.pm-grid__dim text { fill: var(--pm-wine); font: 400 9px/1 var(--font-text); letter-spacing: 0.02em; }
html.js .pm-grid.kk-r .pm-grid__g line { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--i, 0) * 60ms); }
html.js .pm-grid.kk-r.kk-in .pm-grid__g line { stroke-dashoffset: 0; }
html.js .pm-grid.kk-r .pm-grid__dim, html.js .pm-grid.kk-r .pm-grid__logo { opacity: 0; transition: opacity 1s ease 1.2s; }
html.js .pm-grid.kk-r .pm-grid__logo { transition-delay: 0.4s; }
html.js .pm-grid.kk-r.kk-in .pm-grid__dim, html.js .pm-grid.kk-r.kk-in .pm-grid__logo { opacity: 1; }
.pm-grid figcaption { opacity: 1; color: var(--pm-zinc); text-transform: none; letter-spacing: 0; font-size: 14px; }
.pm-grid figcaption b { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.1; color: var(--pm-wine); margin-bottom: 4px; }
.pm-grid figcaption > span { max-width: 30ch; }

/* ── Версии логотипа 2×2 ───────────────────────────────── */
.pm-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kb-gut); }
.pm-logos .pm-tile { aspect-ratio: 4 / 3; }
.pm-logos svg { width: 64%; height: auto; }

/* ── Знак без надписи: аватары ─────────────────────────── */
.pm-avatars { display: flex; justify-content: center; align-items: center; gap: clamp(20px, 5vw, 96px); padding: clamp(56px, 8vw, 150px) 0 clamp(80px, 10vw, 170px); }
.pm-ava { display: grid; place-items: center; width: clamp(84px, 14vw, 240px); aspect-ratio: 1 / 1; border-radius: 50%; }
.pm-ava svg { width: 58%; height: auto; margin-top: 6%; transform: translateX(-7.2%); } /* −10 px при круге 240 px: оптический центр знака правее геометрического */
.pm-ava--line { box-shadow: inset 0 0 0 1px var(--pm-mist); }

/* ── Цвет ──────────────────────────────────────────────── */
.pm-pal { display: grid; grid-template-columns: 3fr 1.4fr 3fr 1.2fr 1.2fr 1.2fr; min-height: clamp(260px, 30vw, 520px); }
.pm-pal > div { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 1.6vw, 26px); font-size: 13px; line-height: 1.4; }
.pm-pal b { font-family: var(--font-display); font-weight: 500; font-size: clamp(16px, 1.4vw, 24px); line-height: 1.1; text-transform: uppercase; }
.pm-pal span { opacity: 0.7; font-variant-numeric: tabular-nums; }
.pm-pal__wine { background: var(--pm-wine); color: #fff; }
.pm-pal__garnet { background: var(--pm-garnet); color: #fff; }
.pm-pal__carbon { background: var(--pm-carbon); color: #fff; }
.pm-pal__zinc { background: var(--pm-zinc); color: #fff; }
.pm-pal__fog { background: var(--pm-fog); color: var(--pm-carbon); }
.pm-pal__white { background: #fff; color: var(--pm-carbon); box-shadow: inset 0 0 0 1px var(--pm-mist); }
html.js .pm-pal.kk-r > div { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--i) * 90ms); }
html.js .pm-pal.kk-r.kk-in > div { clip-path: inset(0 0 0 0); }

/* ── Знак поверх фона сайта: ролик с весами и Фемидой ── */
.pm-scene { aspect-ratio: 16 / 9; }
.pm-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(10, 10, 12, 0.55), transparent 100%); pointer-events: none; }
.pm-scene svg { position: relative; z-index: 1; width: min(46%, 760px); height: auto; }
.pm-scene figcaption { z-index: 1; }
html.js .pm-scene.kk-r svg { opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease 0.5s, transform 1.6s var(--ease) 0.5s; }
html.js .pm-scene.kk-r.kk-in svg { opacity: 1; transform: none; }


@media (max-width: 900px) {
  .pm-grid { aspect-ratio: auto; padding: 48px 0 0; display: block; }
  .pm-grid svg { width: 92%; margin: 0 auto; }
  .pm-grid figcaption { position: static; display: grid; grid-template-columns: 1fr; gap: 18px; padding: 32px 20px 28px; }
  .pm-pal { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .pm-pal > div { min-height: clamp(120px, 26vw, 200px); }
}
@media (max-width: 600px) {
  .pm-tri { grid-template-columns: minmax(0, 1fr); }
  .pm-tri .pm-tile { aspect-ratio: 4 / 3; }
  .pm-tri svg { width: 44%; }
  .pm-grid__dim text { display: none; }
  .pm-logos { grid-template-columns: minmax(0, 1fr); }
  .pm-logos svg { width: 74%; }
  .pm-scene { aspect-ratio: 4 / 3; }
  .pm-scene svg { width: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-tri__p, .pm-tri__m { transition: none; }
  html.js .pm-tri__drop .pm-tri__p { transform: none; fill-opacity: 1; }
  html.js .pm-grid.kk-r .pm-grid__g line { stroke-dashoffset: 0; transition: none; }
  html.js .pm-grid.kk-r .pm-grid__dim, html.js .pm-grid.kk-r .pm-grid__logo { opacity: 1; transition: none; }
  html.js .pm-pal.kk-r > div { clip-path: none; transition: none; }
  html.js .pm-scene.kk-r svg { opacity: 1; transform: none; transition: none; }
}