/* s-hero.css страницы /style — из site/v8/s-hero.css (tools/prod.mjs). */
/* v5 · A · первый экран (башня из обложек в белом луче) → витрина «Уникальные обложки».
   Свет — белый, холодно-нейтральный; красный — только логотип и кнопка. Типографика — по варианту ?type=1..4. Классы — h-*, cv-*. */
.h-sec { position: relative; }
.h-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #000; }
.h-stage::after { /* очень тонкое зерно — только в сцене с башней, к низу гаснет */ content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .045; transition: opacity .8s ease; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 260px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 260px), transparent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.h-cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.h-grid .h-stage::after { opacity: 0; }
.cv-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }

/* ───────── свет ───────── */
.h-lt { position: absolute; pointer-events: none; opacity: 0; }
.h-beam { z-index: 1; --phi: 14deg; filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .9) 35%, rgba(0, 0, 0, .62) 80%, rgba(0, 0, 0, .3) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .9) 35%, rgba(0, 0, 0, .62) 80%, rgba(0, 0, 0, .3) 94%, transparent 100%); }
.h-beam i, .h-beam b { position: absolute; inset: 0; }
.h-beam i { /* конус: ярче к оси, мягко гаснет к краям */
  background: conic-gradient(from 180deg at 50% 0,
    rgba(236, 241, 248, .2) 0deg, rgba(236, 241, 248, .13) calc(var(--phi) * .45), rgba(236, 241, 248, .045) calc(var(--phi) * .82), rgba(236, 241, 248, 0) var(--phi),
    rgba(236, 241, 248, 0) calc(360deg - var(--phi)), rgba(236, 241, 248, .045) calc(360deg - var(--phi) * .82), rgba(236, 241, 248, .13) calc(360deg - var(--phi) * .45), rgba(236, 241, 248, .2) 360deg); }
.h-beam b { /* объём: неровные лучи в пыли, расходятся от источника */
  background:
    repeating-conic-gradient(from 180deg at 50% 0, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .05) .7deg, rgba(255, 255, 255, 0) 1.9deg),
    repeating-conic-gradient(from 181deg at 50% 0, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .035) 1.2deg, rgba(255, 255, 255, 0) 3.3deg);
  -webkit-mask-image: conic-gradient(from 180deg at 50% 0, #000 0deg, rgba(0, 0, 0, .7) calc(var(--phi) * .7), transparent var(--phi), transparent calc(360deg - var(--phi)), rgba(0, 0, 0, .7) calc(360deg - var(--phi) * .7), #000 360deg);
  mask-image: conic-gradient(from 180deg at 50% 0, #000 0deg, rgba(0, 0, 0, .7) calc(var(--phi) * .7), transparent var(--phi), transparent calc(360deg - var(--phi)), rgba(0, 0, 0, .7) calc(360deg - var(--phi) * .7), #000 360deg); }
.h-src { z-index: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 247, 252, .34), rgba(244, 247, 252, .1) 48%, rgba(244, 247, 252, 0)); filter: blur(8px); }
.h-halo { z-index: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(230, 236, 245, .075), rgba(230, 236, 245, .025) 55%, rgba(230, 236, 245, 0)); }
.h-floor { z-index: 2; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02) 55%, rgba(255, 255, 255, 0)); }
.h-pool { z-index: 2; border-radius: 50%; background: radial-gradient(closest-side, rgba(250, 252, 255, .46), rgba(240, 245, 252, .17) 36%, rgba(240, 245, 252, .04) 70%, rgba(240, 245, 252, 0)); filter: blur(5px); }
.h-haze { z-index: 5; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(closest-side at 50% 38%, rgba(235, 240, 248, .055), rgba(235, 240, 248, 0) 75%); }

/* ───────── ореолы цвета обложек, отражения, сами обложки ───────── */
.h-glows { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.h-gw { position: absolute; left: 0; top: 0; max-width: none; opacity: 0; mix-blend-mode: screen; transform-origin: 50% 50%; will-change: transform, opacity; user-select: none; }
.h-refl { position: absolute; inset: 0; z-index: 3; pointer-events: none; filter: blur(2.5px); opacity: 0; }
.h-rc { position: absolute; left: 0; top: 0; opacity: 0; transform-origin: 50% 50%; will-change: transform; }
.h-rc img { width: 100%; height: 100%; object-fit: cover; }
.h-world { position: absolute; inset: 0; z-index: 4; transform-style: preserve-3d; perspective: 2100px; pointer-events: none; }
.cv { position: absolute; left: 0; top: 0; display: block; padding: 0; transform-origin: 50% 50%; will-change: transform; pointer-events: auto; border-radius: 3px; cursor: zoom-in; outline-offset: 4px; }
.cv-f { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: #0c0c0c; transition: transform .7s var(--ease); }
.cv-f img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.cv-rim, .cv-gl { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.cv-rim { /* верхняя кромка ловит свет сверху */ background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .13) 2.2%, rgba(255, 255, 255, 0) 16%); }
.cv-gl { left: -100%; right: -100%; background: linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 47%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .16) 53%, rgba(255, 255, 255, 0) 62%); will-change: transform, opacity; }
.h-grid .cv:hover .cv-f, .h-grid .cv:focus-visible .cv-f { transform: scale(1.03); }

/* ───────── текст первого экрана ───────── */
.h-txt { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.h-title { position: absolute; margin: 0; width: max-content; font-size: calc(clamp(40px, 5.85vw, 84px) * var(--fd-k) * var(--h-fit, 1)); }
.h-title .ln { display: block; opacity: 0; transform: translateY(.22em); transition: opacity 1.1s ease, transform 1.4s var(--ease); }
.h-in .h-title .ln { opacity: 1; transform: none; }
.h-in .h-title .ln:nth-child(2) { transition-delay: .09s; }
.h-in .h-title .ln:nth-child(3) { transition-delay: .18s; }
.h-in .h-title .ln:nth-child(4) { transition-delay: .27s; }
.h-copy { position: absolute; width: min(440px, calc(100vw - 32px)); }
.h-copy > * { opacity: 0; transform: translateY(12px); transition: opacity 1s ease .55s, transform 1.2s var(--ease) .55s; }
.h-in .h-copy > * { opacity: 1; transform: none; }
.h-copy .btn { pointer-events: auto; }
.h-text { color: #b3b3b3; font-size: 18px; line-height: 1.55; max-width: 24em; text-wrap: pretty; }
.h-tags { position: relative; height: 1.6em; margin: calc(var(--gap-btn, 30px) * .62) 0 var(--gap-btn, 30px); font: 400 17px/1.6 var(--ft); color: #8a8a8a; text-transform: lowercase; }
.h-tag { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; filter: blur(3px); transition: opacity .6s ease, filter .6s ease; }
.h-tag.on { opacity: 1; filter: none; transition: opacity 1s ease .5s, filter 1s ease .5s; }
.h-em { color: #fff; font-style: normal; font-weight: 500; }
html.rm .h-tags { height: auto; }
html.rm .h-tag { position: static; opacity: 1; filter: none; }
html.rm .h-title .ln, html.rm .h-copy > * { opacity: 1; transform: none; transition: none; }

.h-spin { position: absolute; z-index: 8; touch-action: pan-y; cursor: grab; }
.h-hint { position: absolute; z-index: 8; transform: translateX(-50%); font-size: 13px; color: #8d8d8d; letter-spacing: .02em; pointer-events: none; opacity: 0; display: none; }

/* ───────── витрина «Уникальные обложки» ───────── */
.h-sc { position: absolute; z-index: 6; pointer-events: none; visibility: hidden; }
.cv-sep { /* крупный тихий разделитель */ width: max-content; max-width: none; font-size: calc(clamp(32px, 3.9vw, 56px) * var(--fd-k) * var(--sep-fit, 1)); color: #6f6f6f; margin: 0 0 clamp(28px, 3.2vw, 46px); opacity: 0; white-space: nowrap; }
.cv-head { /* та же сетка, что у витрины: заголовок — колонки 1–5, текст — 6–7, над крупной обложкой */ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px 12px; align-items: end; margin-bottom: clamp(24px, 2.6vw, 36px); opacity: 0; }
.cv-head .h2 { grid-column: 1 / 6; }
.cv-head .lead { grid-column: 6 / 8; }
.cv-head .h2 { font-size: calc(clamp(30px, 3.2vw, 46px) * var(--fd-k)); max-width: 14em; }
.cv-head .lead { font-size: clamp(15px, 1.15vw, 16.5px); max-width: none; padding-bottom: .2em; color: #9a9a9a; }
.cv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; grid-auto-flow: dense; }
.cv-slot { display: block; aspect-ratio: 1; }
.cv-slot-big:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.cv-slot-big:nth-child(17) { grid-column: 6 / span 2; grid-row: 3 / span 2; }

@media (max-width: 759px) {
  .h-title { font-size: calc(min(10.6vw, 46px) * var(--fd-k) * var(--h-fit, 1)); }
  .h-text { font-size: 15.5px; }
  .h-tags { font-size: min(15px, 3.85vw); margin: 12px 0 16px; }
  .h-copy .btn { height: 52px; }
  .h-hint { display: block; }
  .cv-sep { font-size: calc(min(8.4vw, 34px) * var(--fd-k) * var(--sep-fit, 1)); margin-bottom: 22px; }
  .cv-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
  .cv-head .h2, .cv-head .lead { grid-column: 1; }
  .cv-head .h2 { font-size: calc(min(7.8vw, 32px) * var(--fd-k)); }
  .cv-head .lead { font-size: 15.5px; }
  .cv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .cv-slot-big:nth-child(17) { grid-column: 3 / span 2; grid-row: 5 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .h-title .ln, .h-copy > *, .h-tag, .cv-f { transition: none !important; }
}

/* ═════════ круг 4: «Коллаж» — работы в строке заголовка ═════════ */
.h-gapp { position: absolute; left: 0; top: 0; width: 1px; height: var(--gap-title, 32px); visibility: hidden; pointer-events: none; }
.h-title { color: var(--hc); }
.h-title .r { color: #fff; }
.b-m { display: none; }

/* капсулы: круг с обложкой, капсула с играющим моушеном, капсула с фото; обложки и фото сменяются срезом */
.h-cap { position: relative; top: -.05em; display: inline-block; vertical-align: middle; height: .74em; margin: 0 .04em; border-radius: 999px; overflow: hidden; background: #111; pointer-events: auto; cursor: zoom-in; transition: transform .6s var(--ease); }
.h-cap img, .h-cap video { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.h-cap-in { position: absolute; inset: 0; }
.h-cap-in img { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.h-cap-in img.h-wait { clip-path: inset(0 0 0 100%); }
.h-cap-in img.h-go { clip-path: inset(0 0 0 0); transition: clip-path .72s cubic-bezier(.7, 0, .2, 1); }
.h-cap-c { width: .74em; }
.h-cap-m { width: 1.46em; }
.h-cap-m video { object-position: 50% 38%; }
.h-cap-p { width: 1.22em; }
.h-cap-p img { object-position: 50% 22%; }
.h-cap:hover { transform: scale(1.06) rotate(-2deg); }

/* a · «тихая башня»: отражение тоже ч/б */
.h-a .h-refl { filter: grayscale(1) blur(2.5px); }

/* b · «типографский экран»: башни и света нет; заголовок лесенкой во всю колонку, капсулы крупнее (в рост строчных и выше) */
.h-b .h-lt, .h-b .h-refl, .h-b .h-spin, .h-b .h-hint { display: none !important; }
.h-b .h-stage::after { opacity: .035; }
.h-b .h-title { width: auto; font-size: calc(min(9.7vw, 140px) * var(--h-fit, 1)); letter-spacing: -.058em; line-height: .95; }
.h-b .h-title .ln { display: block; white-space: nowrap; }
.h-b .h-title .l2 { padding-left: 2.1em; }
.h-b .h-title .l4 { text-align: right; }
.h-b .h-cap { height: .8em; top: -.06em; margin: 0 .05em; }
.h-b .h-cap-c { width: .8em; }
.h-b .h-cap-m { width: 1.72em; }
.h-b .h-cap-p { width: 1.42em; }
.h-b .h-copy { display: grid; grid-template-columns: minmax(0, 26em) 1fr auto; align-items: end; column-gap: 40px; }
.h-b .h-copy .h-text { grid-column: 1; grid-row: 1; }
.h-b .h-copy .h-tags { grid-column: 2; grid-row: 1; margin: 0; align-self: end; padding-bottom: .1em; }
.h-b .h-copy .btn { grid-column: 3; grid-row: 1; }

@media (max-width: 759px) {
  .h-b .h-title { font-size: calc(min(17vw, 72px) * var(--h-fit, 1)); line-height: .98; }
  .h-b .h-title .ln { display: inline; padding: 0; white-space: normal; }
  .h-b .b-m { display: inline; }
  .h-b .h-copy { display: block; }
  .h-b .h-copy .h-tags { margin: 12px 0 16px; }
}

/* ═════════ круг 5: фон экрана «b» — «дым из обложек» ═════════
   Огромные размытые, приглушённые и почти обесцвеченные работы медленно плывут за заголовком; мягкий светлый блик. */
.h-smoke { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; }
.h-smoke .sm { position: absolute; display: block; max-width: none; height: auto; aspect-ratio: 1; will-change: transform; user-select: none; }
.sm-a { width: min(86vh, 820px); left: 46%; top: -16vh; opacity: .42; animation: sm-a 52s ease-in-out infinite alternate; }
.sm-b { width: min(74vh, 700px); left: 70%; top: 40vh; opacity: .4; animation: sm-b 64s ease-in-out infinite alternate; }
.sm-c { width: min(70vh, 660px); left: -12%; top: 38vh; opacity: .36; animation: sm-c 58s ease-in-out infinite alternate; }
.h-sheen { position: absolute; left: 18%; top: -10vh; width: 80vw; height: 90vh; background: radial-gradient(closest-side, rgba(240, 244, 250, .075), rgba(240, 244, 250, .02) 55%, transparent 75%); animation: h-sheen 34s ease-in-out infinite alternate; }
@keyframes sm-a { from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } to { transform: translate3d(-10vw, 7vh, 0) scale(1.14) rotate(7deg); } }
@keyframes sm-b { from { transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg); } to { transform: translate3d(-14vw, -9vh, 0) scale(.92) rotate(-6deg); } }
@keyframes sm-c { from { transform: translate3d(0, 0, 0) scale(.95) rotate(0deg); } to { transform: translate3d(12vw, -6vh, 0) scale(1.1) rotate(5deg); } }
@keyframes h-sheen { from { transform: translate3d(-12vw, 0, 0); } to { transform: translate3d(14vw, 6vh, 0); } }
.h-b .h-stage::after { opacity: .055; }
html.rm .h-smoke *, html.rm .h-sheen { animation: none !important; }
@media (max-width: 759px) {
  .sm-a { width: 120vw; left: 20%; top: -8vh; }
  .sm-b { width: 100vw; left: 45%; top: 46vh; }
  .sm-c { width: 96vw; left: -40%; top: 30vh; }
}

/* ═════════ круг 6: фоны экрана «b» (?bg=0..4) и низ экрана (?cta=a|b) ═════════ */
.h-bgl { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; contain: strict; }
html.rm .h-bgl *, html.rm .h-bgl *::before, html.rm .h-bgl *::after { animation: none !important; }

/* 1 «фонарь»: стена работ в темноте, мягкое пятно света идёт за курсором.
   Темнота — дыра с мягким краем + четыре сплошных прямоугольника вокруг (дешёво: сплошной цвет не занимает память). */
.h-lamp { --dr: 540px; --dk: rgba(0, 0, 0, .965); background: #000; }
.h-wall { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; }
.h-dark { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.h-dark b { position: absolute; display: block; background: var(--dk); }
.h-dark .dk-h { left: calc(var(--dr) * -1); top: calc(var(--dr) * -1); width: calc(var(--dr) * 2); height: calc(var(--dr) * 2); background: radial-gradient(closest-side, rgba(0, 0, 0, .36), rgba(0, 0, 0, .5) 22%, rgba(0, 0, 0, .7) 46%, rgba(0, 0, 0, .86) 70%, rgba(0, 0, 0, .94) 87%, var(--dk) 99.5%); }
.h-dark .dk-t { left: -300vw; top: -300vh; width: 600vw; height: calc(300vh - var(--dr)); }
.h-dark .dk-b { left: -300vw; top: var(--dr); width: 600vw; height: 300vh; }
.h-dark .dk-l { left: -300vw; top: calc(var(--dr) * -1); width: calc(300vw - var(--dr)); height: calc(var(--dr) * 2); }
.h-dark .dk-r { left: var(--dr); top: calc(var(--dr) * -1); width: 300vw; height: calc(var(--dr) * 2); }

/* 2 «слова-фон»: гигантские бледные строки с названиями разделов, 4 ряда в разные стороны */
.h-words { display: flex; flex-direction: column; justify-content: space-between; padding: 1.5vh 0 0; }
.hw { display: flex; width: max-content; white-space: nowrap; font: 600 clamp(110px, 24.5vh, 330px)/.86 var(--fd); letter-spacing: -.055em; color: rgba(255, 255, 255, .042); text-transform: lowercase; will-change: transform; }
.hw span { padding-right: .18em; }
.hw-0 { animation: hw-l 210s linear infinite; }
.hw-1 { animation: hw-r 260s linear infinite; margin-left: -1.1em; color: rgba(255, 255, 255, .03); }
.hw-2 { animation: hw-l 235s linear infinite; margin-left: -.5em; }
.hw-3 { animation: hw-r 190s linear infinite; margin-left: -1.6em; color: rgba(255, 255, 255, .03); }
@keyframes hw-l { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes hw-r { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* 3 «стена роликов»: колонки вертикальных роликов, ч/б и в тени, медленно едут вверх-вниз */
.h-reels { display: flex; gap: 12px; padding: 0 12px; background: #000; }
.h-reels::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 32% 46%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 70%), linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 22%, transparent 58%, rgba(0, 0, 0, .82) 84%, rgba(0, 0, 0, .9)); }
.hr { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; will-change: transform; animation: hr-dn var(--d) ease-in-out var(--o) infinite alternate; }
.hr-up { animation-name: hr-up; }
.hr img, .hr video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #0b0b0b; opacity: .26; filter: grayscale(1); }
.hr:nth-child(n + 9) { display: none; }
@keyframes hr-dn { from { transform: translate3d(0, -52%, 0); } to { transform: translate3d(0, -4%, 0); } }
@keyframes hr-up { from { transform: translate3d(0, -4%, 0); } to { transform: translate3d(0, -52%, 0); } }
@media (min-width: 1800px) { .hr:nth-child(n + 9) { display: flex; } }

/* 4 «свет»: мягкие белые и серые пятна, как свет в студии, медленно перетекают; зерно чуть заметнее */
.h-light { background: #000; }
.lt { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.lt-1 { width: min(118vh, 1180px); aspect-ratio: 1; right: -16%; top: -42vh; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, .085) 45%, rgba(255, 255, 255, 0)); animation: lt-1 46s ease-in-out infinite alternate; }
.lt-2 { width: min(96vh, 960px); aspect-ratio: 1; left: -18%; bottom: -46vh; background: radial-gradient(closest-side, rgba(200, 204, 210, .15), rgba(200, 204, 210, .055) 50%, rgba(200, 204, 210, 0)); animation: lt-2 58s ease-in-out infinite alternate; }
.lt-3 { width: min(70vh, 700px); aspect-ratio: 1.5; left: 30%; top: -24vh; background: radial-gradient(closest-side, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); animation: lt-3 38s ease-in-out infinite alternate; }
.lt-4 { width: min(80vh, 800px); aspect-ratio: 1; right: 6%; bottom: -40vh; background: radial-gradient(closest-side, rgba(150, 152, 156, .13), rgba(150, 152, 156, 0)); animation: lt-4 64s ease-in-out infinite alternate; }
@keyframes lt-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-22vw, 14vh, 0) scale(1.12); } }
@keyframes lt-2 { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(26vw, -12vh, 0) scale(.9); } }
@keyframes lt-3 { from { transform: translate3d(-8vw, 0, 0) scale(.92); } to { transform: translate3d(18vw, 8vh, 0) scale(1.1); } }
@keyframes lt-4 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-30vw, -10vh, 0); } }
.h-b.h-bg4 .h-stage::after { opacity: .085; }

/* низ экрана — a: абзац, теги и кнопка одним столбцом слева, ровный шаг 24px */
.h-b.h-cta-a .h-copy { display: block; }
.h-b.h-cta-a .h-copy .h-text { max-width: 26em; }
.h-b.h-cta-a .h-copy .h-tags { margin: 22px 0 26px; padding: 0; }

/* низ экрана — b: абзац и теги колонками с общей верхней линией; крупная кнопка-капсула закрывает последнюю строку */
/* абзац — от левого края заголовка, теги — к правому краю (под кнопкой), верх у обоих общий */
.h-b.h-cta-b .h-copy { grid-template-columns: minmax(0, 26em) minmax(0, 1fr); align-items: start; column-gap: 40px; }
.h-b.h-cta-b .h-copy .h-tags { align-self: start; margin: 0; padding: .12em 0 0; }
.h-b.h-cta-b .h-copy .h-tag { left: auto; right: 0; }
.h-cta-in .h-copy .btn { display: none; }
.h-b.h-cta-in .h-title .l4 { text-align: left; } /* «[фото] музыкантов» — от левого края, кнопка — к правому */
.h-cta { position: absolute; z-index: 2; display: flex; font-size: calc(min(9.7vw, 140px) * var(--h-fit, 1)); line-height: 1; opacity: 0; transform: translateY(.12em); transition: opacity 1.1s ease .36s, transform 1.4s var(--ease) .36s; }
.h-in .h-cta { opacity: 1; transform: none; }
.h-cta .btn { pointer-events: auto; height: .8em; padding: 0 .36em; font-size: inherit; }
.h-cta .btn .btn-t { font-size: .19em; font-weight: 500; letter-spacing: -.005em; }
html.rm .h-cta { opacity: 1; transform: none; transition: none; }

@media (max-width: 759px) {
  .h-lamp { --dr: 320px; }
  .hr:nth-child(n + 4) { display: none; }
  .h-reels { gap: 8px; padding: 0 8px; } .hr { gap: 8px; } .hr img, .hr video { border-radius: 10px; }
  .hw { font-size: clamp(84px, 17vh, 150px); }
  .lt-1 { width: 130vw; right: -50%; top: -30vh; } .lt-2 { width: 120vw; left: -50%; bottom: -30vh; }
  .lt-3 { width: 90vw; left: 10%; top: -10vh; } .lt-4 { width: 100vw; right: -30%; bottom: -24vh; }
  .h-b.h-cta-a .h-copy .h-tags, .h-b.h-cta-b .h-copy .h-tags { margin: 12px 0 16px; padding: 0; }
  .h-b.h-cta-b .h-copy .h-tag { left: 0; right: auto; }
  .h-cta { display: none; }
}