/* s-trust.css страницы /style — из site/v8/s-trust.css (tools/prod.mjs). */
/* v4 · фото, афиши, почему мы, Борис, с кем работали, заявка — помощник C
   Классы: ph- фото · po- афиши · wy- почему мы · bo- Борис · ar- с кем работали · by- заявка.
   Цвет: чёрный, белый, серые; красный — только кнопка и красные слова из S.rich. Свет — белый или цветом самой работы. */

/* ───────── шапки разделов: заголовок слева, текст справа по нижней линии ───────── */
.ph-hd, .po-hd { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.ph-hd .h2, .po-hd .h2 { max-width: 11em; }
.po-hd .lead { justify-self: end; }

/* ═════════ 6. ФОТОСЕССИИ: полёт сквозь съёмку ═════════ */
.ph-side { justify-self: end; display: grid; gap: 22px; max-width: 32em; }
.ph-price { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: #fff; }
.ph-city { font-size: 14px; color: var(--mute); }
.ph-run { position: relative; margin-top: clamp(8px, 1.4vw, 24px); }
.ph-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* фон тихо окрашивается в цвет ближайшего снимка */
.ph-tint { --c: 10, 10, 10; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 54%, rgba(var(--c), .42), rgba(var(--c), .12) 52%, rgba(var(--c), 0) 78%); }
.ph-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#000, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 84%, #000); }
.ph-3d { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 50% 52%; }
.ph-f { display: block; overflow: hidden; border-radius: 6px; background: #0b0b0b; }
.ph[data-mode="fly"] .ph-f { position: absolute; left: 50%; top: 52%; will-change: transform, opacity; }
.ph-f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ph-f::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--fog, 0); pointer-events: none; }
.ph[data-mode="flat"] .ph-run { margin-top: clamp(40px, 5vw, 72px); }
.ph[data-mode="flat"] .ph-stage { position: relative; height: auto; overflow: visible; }
.ph[data-mode="flat"] .ph-stage::after, .ph[data-mode="flat"] .ph-tint { display: none; }
.ph[data-mode="flat"] .ph-3d { position: relative; perspective: none; }
.ph[data-mode="flat"] .ph-f { position: absolute; left: 0; top: 0; }

/* ═════════ 7. АФИШИ: ситилайты ═════════ */
.po-street { position: relative; margin-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(120px, 14vw, 210px); }
.po-row { position: relative; display: flex; gap: clamp(18px, 2.4vw, 36px); align-items: flex-end; }
/* мокрый асфальт: еле светлая полоса пола и линия, где стена встречается с полом */
.po-row::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 100%; width: 100vw; height: clamp(120px, 14vw, 210px); transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 85%); border-top: 1px solid rgba(255, 255, 255, .08);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
.po-box { --on: 0; --hv: 0; position: relative; flex: var(--ar) 1 0; min-width: 0; display: block; }
.po-box:hover, .po-box:focus-visible { --hv: 1; }
.po-case { position: relative; z-index: 2; display: block; aspect-ratio: var(--ar); border-radius: 3px; overflow: hidden; background: #060606;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, calc(.05 + .12 * var(--on))), 0 0 0 7px #0c0c0c, 0 0 0 8px rgba(255, 255, 255, .07), 0 30px 60px rgba(0, 0, 0, .5); }
.po-case img { width: 100%; height: 100%; object-fit: cover; }
.po-case::after { content: ''; position: absolute; inset: 0; z-index: 2; background: #000; opacity: calc((1 - var(--on)) * .87); pointer-events: none; }
/* подсветка изнутри: чуть ярче у верхнего края, как лампы в коробе */
.po-tube { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: calc(var(--on) * (.85 + .15 * var(--hv))); mix-blend-mode: screen;
  background: radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, .16), transparent 62%), linear-gradient(to bottom, rgba(255, 255, 255, .05), transparent 30%, transparent 82%, rgba(255, 255, 255, .04)); }
/* свет на стене и на асфальте — размытая копия самой афиши */
.po-glow { position: absolute; z-index: 0; left: -26%; right: -26%; top: -16%; bottom: -8%; border-radius: 40%; background-size: cover; background-position: center; pointer-events: none;
  filter: blur(56px) saturate(1.5); opacity: calc(var(--on) * (.5 + .18 * var(--hv))); transform: translateZ(0); transition: opacity .5s ease; }
.po-pool { position: absolute; z-index: 0; left: -28%; right: -28%; top: 97%; height: 42%; border-radius: 50%; background-size: 100% 100%; pointer-events: none;
  filter: blur(36px) saturate(1.6); opacity: calc(var(--on) * .34); transform: translateZ(0); }
.po-refl { position: absolute; z-index: 1; left: 0; right: 0; top: calc(100% + 9px); aspect-ratio: var(--ar); overflow: hidden; pointer-events: none; opacity: calc(.05 + var(--on) * .58);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 50%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 50%); }
.po-refl img { width: 100%; height: 100%; object-fit: cover; transform: scaleY(-1); filter: blur(3px); }

/* ═════════ 8. ПОЧЕМУ НАМ СТОИТ ДОВЕРИТЬСЯ: четыре сцены ═════════ */
.wy-h { max-width: 12em; }
.wy-run { position: relative; }
.wy-t { font-size: 16px; line-height: 1.4; font-weight: 500; color: #fff; }
.wy-key { margin-top: 18px; font-size: calc(clamp(30px, 3.6vw, 52px) * var(--fd-k)); text-wrap: balance; }
.wy-p { margin-top: 24px; max-width: 30em; font-size: 16px; line-height: 1.62; color: var(--mute); text-wrap: pretty; }
.wy-p b { font-weight: 500; color: #fff; }
.wy-arts { position: relative; }
.wy-sc { position: relative; width: 100%; height: 100%; }
/* закреплённая сцена (широкий экран) */
.wy[data-mode="pin"] .wy-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 72px; overflow: hidden; }
.wy[data-mode="pin"] .wy-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 88px); align-items: stretch; }
.wy[data-mode="pin"] .wy-texts { position: relative; }
.wy[data-mode="pin"] .wy-copy { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; will-change: transform, opacity; }
.wy[data-mode="pin"] .wy-art { position: absolute; inset: 0; will-change: transform, opacity; }
/* пункты друг под другом (телефон, «меньше движения») */
.wy[data-mode="flow"] .wy-grid { display: flex; flex-direction: column; }
.wy[data-mode="flow"] .wy-texts, .wy[data-mode="flow"] .wy-arts { display: contents; }
.wy[data-mode="flow"] .wy-copy { padding-top: clamp(44px, 5vw, 72px); border-top: 1px solid var(--line); margin-top: clamp(40px, 5vw, 72px); }
.wy[data-mode="flow"] .wy-art { position: relative; height: clamp(340px, 42vw, 520px); margin-top: 28px; }
.wy-copy[data-k="0"] { order: 0; } .wy-art[data-k="0"] { order: 1; }
.wy-copy[data-k="1"] { order: 2; } .wy-art[data-k="1"] { order: 3; }
.wy-copy[data-k="2"] { order: 4; } .wy-art[data-k="2"] { order: 5; }
.wy-copy[data-k="3"] { order: 6; } .wy-art[data-k="3"] { order: 7; }

/* 1 — лента обложек бежит и сереет, «Танцы» вырастает в центр */
.wy-s0 { --t: 0; overflow: hidden; isolation: isolate; background: #000;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.wy-fg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; will-change: transform; }
.wy-ft { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #111; }
.wy-ft img { width: 100%; height: 100%; object-fit: cover; }
.wy-ft-slot { background: none; }
.wy-fg-g, .wy-fg-d { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wy-fg-g { background: #808080; mix-blend-mode: saturation; opacity: var(--t); }
.wy-fg-d { background: #000; opacity: calc(var(--t) * .6); }
.wy-hi { position: absolute; z-index: 3; left: 0; top: 0; display: block; will-change: transform; }
.wy-hi img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.wy-hi-gl { position: absolute; z-index: 0; inset: -34%; border-radius: 50%; background-size: cover; background-position: center; filter: blur(44px) saturate(1.7); pointer-events: none; transform: translateZ(0); }

/* 2 — одна рамка, четыре формата */
.wy-s1 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.wy-fgl { position: absolute; inset: 6% 12% 18%; pointer-events: none; }
.wy-fgl span { position: absolute; inset: 0; border-radius: 50%; background-size: cover; background-position: center; filter: blur(64px) saturate(1.5); opacity: 0; transform: translateZ(0); }
.wy-frm { position: relative; z-index: 1; display: block; border-radius: 12px; overflow: hidden; background: #0d0d0d; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.wy-frm > img, .wy-frm > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
.wy-lab { position: relative; z-index: 1; display: flex; gap: 6px; }
.wy-lab button { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: #7d7d7d; transition: color .4s, box-shadow .4s; }
.wy-lab button:hover { color: #d6d6d6; }
.wy-lab button.on { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* 3 — стена портретов: камера ныряет, лица проявляются по одному */
.wy-s2 { overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 100%); }
.wy-wall { position: absolute; left: 0; top: 0; display: grid; transform-origin: 0 0; will-change: transform; }
.wy-wt { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #0c0c0c; }
.wy-wt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) brightness(.14); transform: scale(1.08); transition: filter 1.1s var(--ease), transform 1.6s var(--ease); }
.wy-wt.lit img { filter: none; transform: none; }

/* 4 — комплект одного артиста собирается из беспорядка */
.wy-kp { position: absolute; left: 0; top: 0; display: block; border-radius: 8px; overflow: hidden; background: #111; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); will-change: transform, opacity; }
.wy-kp img { width: 100%; height: 100%; object-fit: cover; }

/* ═════════ 9. БОРИС: «привет!» и карточка с портретом прямо в строке ═════════ */
.bo-hi { font-size: calc(clamp(64px, 15.5vw, 224px) * var(--fd-k)); line-height: .9; margin-left: -.04em; white-space: nowrap; }
.bo-card { position: relative; display: inline-block; vertical-align: -.06em; width: .06em; height: .86em; margin-left: .02em; border-radius: .06em; overflow: hidden; background: #cfcfcf;
  transition: width 1.5s var(--ease) .3s; }
.bo-hi.in .bo-card { width: .78em; }
.bo-card img { position: absolute; left: 50%; top: 0; width: .78em; height: .86em; max-width: none; object-fit: cover; transform: translateX(-50%); }
.bo-name { margin-top: clamp(18px, 2vw, 32px); font-size: calc(clamp(34px, 6.4vw, 92px) * var(--fd-k)); line-height: 1.02; }
.bo-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: 20px clamp(28px, 3.4vw, 56px); margin-top: clamp(40px, 4.6vw, 72px); padding-top: 22px; border-top: 1px solid var(--line); }
.bo-role { font-size: 15px; line-height: 1.5; color: #fff; }
.bo-p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: #a9a9a9; text-wrap: pretty; }
html.rm .bo-card { width: .78em; transition: none; }

/* ═════════ 10. С КЕМ МЫ РАБОТАЛИ: имена одним абзацем, фото — кружками в строке ═════════
   Широкий экран: только имена и фото; роль — подписью под именем при наведении (фокусе).
   Телефон: роль всегда видна — мелкой строкой под именем. */
.ar-txt { --fs: calc(clamp(30px, 4.4vw, 64px) * var(--fd-k)); position: relative; margin-top: clamp(36px, 4vw, 60px); font-family: var(--fd); font-weight: var(--fd-w); font-stretch: var(--fd-wd, 100%);
  letter-spacing: var(--fd-ls); font-size: var(--fs); line-height: 1.12; text-transform: lowercase; }
.ar-it { position: relative; display: inline-block; vertical-align: top; margin: 0 .28em .06em 0; color: #343434; outline: none; cursor: default; transition: color .7s var(--ease); }
.ar-it.lit { color: #f2f2f2; }
.ar-a, .ar-w { white-space: nowrap; }
.ar-ph { position: relative; z-index: 1; top: -.06em; display: inline-block; vertical-align: middle; width: .72em; height: .72em; margin-right: .15em; border-radius: 50%; overflow: hidden; background: #161616;
  opacity: .35; transform: scale(.82); transform-origin: 100% 60%; transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .5s; }
.ar-it.lit .ar-ph { opacity: 1; transform: none; }
.ar-ph img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%; filter: grayscale(1); }
.ar-w { position: absolute; z-index: 4; left: calc(var(--fs) * .87); top: 100%; margin-top: -.1em; font-family: var(--ft); font-size: 14px; font-weight: 400; letter-spacing: .005em; line-height: 1.2;
  text-transform: lowercase; color: #cfcfcf; opacity: 0; transform: translateY(-4px); transition: opacity .4s ease, transform .5s var(--ease); pointer-events: none; }
/* наведение: имя — белым, остальные гаснут, фото вырастает поверх строки, под именем — роль */
.ar-txt.is-h .ar-it { color: #2c2c2c; }
.ar-txt.is-h .ar-it .ar-ph { opacity: .25; }
.ar-txt .ar-it.on { z-index: 3; color: #fff; }
.ar-txt .ar-it.on .ar-w { opacity: 1; transform: none; }
.ar-txt .ar-it.on .ar-ph { z-index: 3; opacity: 1; transform: scale(2.6); box-shadow: 0 0 0 .025em #000, 0 .2em .5em rgba(0, 0, 0, .6); }
.ar-it:focus-visible .ar-n { text-decoration: underline 2px rgba(255, 255, 255, .6); text-underline-offset: .12em; }
html.rm .ar-it, html.rm .ar-ph, html.rm .ar-w { transition: none; }

/* ═════════ 11. ЗАЯВКА: форма — это фраза ═════════ */
.by { padding-bottom: clamp(96px, 10vw, 160px); }
.by-t { max-width: 13em; font-size: calc(clamp(40px, 6.9vw, 100px) * var(--fd-k)); line-height: .98; }
.by-cap { position: relative; top: -.05em; display: inline-block; vertical-align: middle; height: .74em; margin: 0 .03em; border-radius: 999px; overflow: hidden; background: #111; cursor: zoom-in; transition: transform .6s var(--ease); }
.by-cap img, .by-cap video { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.by-cap-c { width: 1.3em; }
.by-cap-c img { position: absolute; inset: 0; object-position: 50% 24%; opacity: 0; transform: scale(1.08); transition: opacity 1s ease, transform 1.6s var(--ease); }
.by-cap-c img.on { opacity: 1; transform: none; }
.by-cap-m { width: 1.5em; }
.by-cap-m video { object-position: 50% 40%; }
.by-cap:hover { transform: scale(1.06) rotate(-2deg); }
.by-lead { margin-top: var(--gap-title, 32px); max-width: 36em; }
.by-fm { display: block; margin-top: clamp(56px, 6.4vw, 104px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
/* фраза: служебные слова — серым, введённое — белым */
.by-s { font-size: calc(clamp(30px, 4.2vw, 60px) * var(--fd-k)); line-height: 1.36; text-wrap: pretty; }
.by-nb { white-space: nowrap; }
.by-f { position: relative; display: inline-block; vertical-align: baseline; margin: 0 0 0 .02em; }
.by-f, .by-w { max-width: 100%; }
.by-w { display: inline-grid; vertical-align: baseline; min-width: 1.2em; overflow: hidden; }
.by-w::after, .by-w input { grid-area: 1 / 1; font: inherit; letter-spacing: inherit; line-height: 1.12; padding: 0 .05em .04em .03em; }
.by-w::after { content: attr(data-v); visibility: hidden; white-space: pre; text-transform: none; }
.by-w input { width: 100%; min-width: 0; height: auto; border: 0; border-radius: 0; background: none; color: #fff; text-transform: none; outline: none; -webkit-appearance: none; appearance: none;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .22); transition: box-shadow .35s; }
.by-w input::placeholder { color: #4a4a4a; opacity: 1; }
.by-f[data-name="Phone"] .by-w { min-width: 4.2em; }
.by-f[data-name="name"] .by-w { min-width: 4.4em; }
.by-w input:hover { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .45); }
.by-w input:focus { background: none; box-shadow: inset 0 -2px 0 #fff; }
.by-w input:focus::placeholder { color: #333; }
.by-f .fld-opt, .by-f .fld-err { position: absolute; left: .04em; top: 100%; margin-top: 6px; font-family: var(--ft); font-size: 12px; font-weight: 400; letter-spacing: .01em; line-height: 1.3; text-transform: none; white-space: nowrap; }
.by-f .fld-opt { color: #4a4a4a; }
.by-f .fld-err { color: #e6e6e6; font-size: 13px; }
.by-f.err .by-w input { box-shadow: inset 0 -2px 0 var(--red); }
.by-f.err .fld-opt { display: none; }
.by-foot { display: flex; align-items: center; gap: 24px clamp(28px, 4vw, 64px); margin-top: clamp(44px, 4.8vw, 72px); }
.by-go { flex: none; height: 76px; padding: 0 46px; font-size: 18px; }
.by-foot .consent { max-width: 34em; }
.by-ok { min-height: 0; display: block; text-align: left; margin-top: clamp(56px, 6.4vw, 104px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.by-ok-t { font-size: calc(clamp(40px, 6.9vw, 100px) * var(--fd-k)); color: #fff; }
.by-ok-s { margin-top: 18px; font-size: 18px; color: var(--mute); }

/* ───────── планшет и телефон ───────── */
@media (max-width: 759px) {
  .ph-hd, .po-hd { grid-template-columns: 1fr; gap: 20px; }
  .ph-side, .po-hd .lead { justify-self: start; }
  .ph-hd .h2 { font-size: calc(min(var(--h2), 7.4vw) * var(--fd-k)); }

  .po-street { margin-top: 44px; padding-bottom: 110px; }
  .po-row { flex-wrap: wrap; gap: 24px 20px; }
  .po-box { flex: var(--ar) 1 calc(var(--ar) * 140px); }
  .po-case { box-shadow: 0 0 0 1px rgba(255, 255, 255, calc(.05 + .12 * var(--on))), 0 0 0 5px #0c0c0c, 0 0 0 6px rgba(255, 255, 255, .07), 0 20px 40px rgba(0, 0, 0, .5); }
  .po-box:nth-child(-n+2) .po-refl, .po-box:nth-child(-n+2) .po-pool { display: none; }
  .po-row::after { height: 110px; }
  .po-glow { filter: blur(34px) saturate(1.5); }


  .bo-hi { font-size: calc(min(15vw, 96px) * var(--fd-k)); }
  .bo-name { font-size: calc(min(9vw, 40px) * var(--fd-k)); }
  .wy[data-mode="flow"] .wy-art { height: 340px; }
  .wy-lab button { padding: 0 11px; font-size: 13.5px; }
  .bo-body { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }

  /* телефон: роль всегда видна — строкой под именем */
  .ar-txt { --fs: calc(min(6.8vw, 30px) * var(--fd-k)); line-height: 1.1; }
  .ar-it { margin: 0 .34em .42em 0; }
  .ar-w { position: static; display: block; margin: .14em 0 0 calc(var(--fs) * .87); font-size: 11.5px; color: #3c3c3c; opacity: 1; transform: none; }
  .ar-it.lit .ar-w { color: #7c7c7c; }
  .ar-txt .ar-it.on .ar-w { color: #cfcfcf; }
  .ar-txt .ar-it.on .ar-ph { transform: scale(1.6); }

  .by-t { font-size: calc(min(10.2vw, 48px) * var(--fd-k)); }
  .by-s { font-size: calc(min(7.6vw, 34px) * var(--fd-k)); line-height: 1.66; }
  .by-foot { flex-direction: column; align-items: stretch; }
  .by-go { width: 100%; height: 64px; font-size: 16px; padding: 0 24px; }
}

/* ───────── меньше движения: без бесконечных анимаций ───────── */
@media (prefers-reduced-motion: reduce) {
  .ph-f img, .ar-it, .ar-ph, .ar-w, .bo-card, .wy-wt img { transition: none; }
}

/* сообщение формы (боевая версия, tools/prod.mjs) */
.by-msg { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.72); }
.by-msg:empty { display: none; }