/* s-media.css страницы /style — из site/v8/s-media.css (tools/prod.mjs). */
/* v7 · соцсети, анимация, lyric video, youtube — помощник B. Префиксы: so- mo- ly- yt- */

/* ═════════ 20 · СОЦСЕТИ: упаковка сообщества, экран и телефон ═════════ */
.so-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.so-pin { position: relative; margin-top: clamp(16px, 2.4vw, 40px); }
.so-stick { position: sticky; top: var(--so-top, 100px); }
.so-stage { position: relative; }
.so-light { position: absolute; left: 50%; top: 50%; width: min(1500px, 125vw); height: 135%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025) 55%, transparent); }
.so-world { position: absolute; left: 50%; top: 0; transform-origin: 50% 0; perspective: 2600px; perspective-origin: 42% 30%; font-family: var(--ft); }

/* — общие части упаковки: Inter Tight, строчные, ч/б работы — */
.so-bw { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.92); }
.so-lg { position: absolute; display: block; height: auto; max-width: none; }
.so-pill, .so-dot { position: relative; top: -.05em; display: inline-block; vertical-align: middle; overflow: hidden; background: #151515; border-radius: 999px; }
.so-pill { width: .98em; height: .56em; }
.so-dot { width: .62em; height: .62em; }

/* обложка сообщества 1590×400 */
.so-cv { container-type: inline-size; position: relative; display: block; width: 100%; aspect-ratio: 1590 / 400; overflow: hidden; color: #fff; text-align: left;
  background: radial-gradient(70% 150% at 88% 0%, #2a2a2a 0%, #101010 50%, #060606 100%); }
.so-cv .so-lg { left: 4.4cqw; top: 5cqw; width: 12.5cqw; }
.so-cv-t { position: absolute; right: 4.4cqw; bottom: 4cqw; text-align: right; font: 500 8.6cqw/.9 var(--fd); letter-spacing: -.06em; color: #8f8f8f; text-transform: lowercase; white-space: nowrap; }
.so-cv-t b { font-weight: 500; color: #fff; }

/* плитки меню 2:3 */
.so-tile { container-type: inline-size; position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; color: #fff; text-align: left;
  background: radial-gradient(140% 75% at 20% 0%, #252525 0%, #0e0e0e 52%, #050505 100%); }
.so-tile .so-lg { left: 8cqw; top: 8cqw; width: 30cqw; }
.so-tw { position: absolute; left: 7cqw; bottom: 8cqw; font: 500 24cqw/.86 var(--fd); letter-spacing: -.065em; color: #fff; white-space: nowrap; text-transform: lowercase; }
.so-ts { position: absolute; left: 7.5cqw; font: 500 10cqw/.98 var(--fd); letter-spacing: -.045em; color: #8f8f8f; text-transform: lowercase; }
.so-stack { position: absolute; left: 7cqw; top: 44cqw; display: flex; }
.so-stack i { display: block; width: 36cqw; height: 36cqw; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.6cqw #0c0c0c; background: #151515; }
.so-stack i + i { margin-left: -12cqw; }
.so-t2 .so-ts { top: 54cqw; font-size: 11cqw; }
.so-t3 .so-shot { position: absolute; left: 7cqw; right: 7cqw; top: 33cqw; aspect-ratio: 16 / 9; border-radius: 4cqw; overflow: hidden; background: #151515; }
.so-t3 .so-tw { font-size: 14.2cqw; bottom: 21cqw; letter-spacing: -.055em; }
.so-t3 .so-ts3 { bottom: 9cqw; }

/* экран: страница сообщества на компьютере, 900×600 */
.so-scr { position: absolute; left: 0; top: 0; width: 900px; height: 600px; border-radius: 26px; transform-style: preserve-3d; transform-origin: 50% 55%;
  background: linear-gradient(180deg, #131313, #0a0a0a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 60px 140px rgba(0, 0, 0, .65); }
.so-l { position: absolute; display: block; }
.so-scv { left: 18px; top: 18px; width: 864px; border-radius: 16px; overflow: hidden; }
.so-av { left: 40px; top: 184px; width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 7px #101010; }
.so-av svg, .so-ph-av svg, .so-pav svg { display: block; width: 100%; height: 100%; }
.so-nm { left: 164px; top: 250px; font-size: 21px; line-height: 1.2; font-weight: 500; color: #f4f4f4; letter-spacing: -.01em; white-space: nowrap; }
.so-mt { top: 304px; width: 148px; border-radius: 12px; overflow: hidden; }
.so-mt0 { left: 18px; } .so-mt1 { left: 178px; } .so-mt2 { left: 338px; }
.so-mc { top: 538px; width: 148px; font-size: 13px; line-height: 1.3; font-weight: 500; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-mc0 { left: 18px; } .so-mc1 { left: 178px; } .so-mc2 { left: 338px; }
.so-wt { left: 514px; top: 304px; font-size: 13px; line-height: 1.3; color: #8a8a8a; }
.so-w { width: 117px; height: 117px; border-radius: 12px; overflow: hidden; background: #151515; }
.so-w img, .so-w video, .so-pm img, .so-pm video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s var(--ease); }
.so-w:hover img, .so-w:hover video, .so-pm:hover img, .so-pm:hover video { transform: scale(1.04); }
.so-w0 { left: 514px; top: 330px; } .so-w1 { left: 640px; top: 330px; } .so-w2 { left: 766px; top: 330px; }
.so-w3 { left: 514px; top: 456px; } .so-w4 { left: 640px; top: 456px; } .so-w5 { left: 766px; top: 456px; }
.so-scv, .so-mt { transition: filter .4s; }
.so-scv:hover, .so-mt:hover { filter: brightness(1.12); }

/* телефон: то же сообщество, 300×650; лента записей листается прокруткой */
.so-ph { position: absolute; left: 860px; top: 90px; width: 300px; height: 650px; padding: 9px; border-radius: 50px; background: #171717;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .9), 0 60px 120px rgba(0, 0, 0, .75), -30px 30px 80px rgba(0, 0, 0, .55); will-change: transform; }
.so-ph-scr { position: relative; height: 100%; border-radius: 41px; overflow: hidden; background: #000; }
.so-ph-in { position: relative; padding-bottom: 24px; will-change: transform; }
.so-ph-cv { display: block; width: 100%; }
.so-ph-av { display: block; width: 72px; height: 72px; margin: -36px 0 0 14px; position: relative; border-radius: 50%; box-shadow: 0 0 0 5px #000; }
.so-ph-nm { padding: 10px 14px 0; font-size: 15px; line-height: 1.25; font-weight: 500; color: #f2f2f2; }
.so-ph-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 14px 14px 0; }
.so-ph-t { display: block; border-radius: 8px; overflow: hidden; }
.so-ph-wt { padding: 22px 14px 10px; font-size: 12.5px; color: #8a8a8a; }
.so-post { padding-bottom: 18px; }
.so-post-h { display: flex; align-items: center; gap: 8px; padding: 0 14px 9px; font-size: 12px; line-height: 1.2; font-weight: 500; color: #e8e8e8; }
.so-pav { flex: none; width: 24px; height: 24px; }
.so-pm { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.so-pm-w { aspect-ratio: 16 / 9; }

@media (max-width: 1100px) { .so-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) {
  .so-scr { display: none; }
  .so-ph { left: 0; top: 0; }
}

/* ═════════ 30 · АНИМАЦИЯ ═════════ */
.mo-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px 64px; align-items: end; }
.mo-price { font-size: calc(clamp(46px, 5.3vw, 76px) * var(--fd-k)); white-space: nowrap; }
.mo-side .lead { margin-top: 16px; }
.mo-band { position: relative; max-width: 1440px; margin: clamp(8px, 2vw, 24px) auto 0; padding: 72px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.mo-glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: blur(52px) saturate(1.6); opacity: .8; pointer-events: none; background: #000;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); }
.mo-track { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.mo-it { position: absolute; left: 50%; top: 50%; width: var(--mo-w); height: var(--mo-h); margin: calc(var(--mo-h) / -2) 0 0 calc(var(--mo-w) / -2);
  border-radius: 18px; overflow: hidden; background: #0c0c0c; will-change: transform, opacity; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.mo-it video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mo-it:focus-visible { outline-offset: 6px; border-radius: 18px; }
.mo-foot { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 4px; }
.mo-hint { text-align: center; }
.mo-nav { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: box-shadow .3s, transform .4s var(--ease); }
.mo-nav:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.mo-nav:active { transform: scale(.94); }
.mo-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) { .mo-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) {
  .mo-band { padding: 48px 0; -webkit-mask-image: none; mask-image: none; }
  .mo-it { border-radius: 14px; }
  .mo-foot { gap: 16px; }
  .mo-hint { font-size: 12.5px; max-width: 15em; }
  .mo-nav { width: 46px; height: 46px; }
}

/* ═════════ 40 · LYRIC VIDEO ═════════ */
.ly-in { max-width: 960px; margin: 0 auto; }
.ly-head { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.ly-stage { position: relative; }
.ly-glow { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; height: auto; transform: scale(1.04, 1.1); filter: blur(70px) saturate(1.3);
  opacity: .5; pointer-events: none; transition: opacity .5s; background: #000; }
.ly-stage.dark .ly-glow { opacity: .12; }
.ly-scr { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 120px rgba(0, 0, 0, .7); }
.ly-scr video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ly-black { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .28s ease; pointer-events: none; }
.ly-stage.dark .ly-black { opacity: 1; }
.ly-reels { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ly-r { display: block; padding-bottom: 10px; opacity: .45; transition: opacity .45s; }
.ly-r:hover, .ly-r:focus-visible { opacity: .8; }
.ly-r.on { opacity: 1; }
.ly-f { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0c0c0c; }
.ly-f img { width: 100%; height: 100%; object-fit: cover; }
.ly-pr { display: block; height: 2px; margin-top: 8px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; opacity: 0; transition: opacity .4s; }
.ly-r.on .ly-pr { opacity: 1; }
.ly-pr b { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 759px) {
  .ly-head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ly-scr { border-radius: 10px; }
  .ly-reels { gap: 6px; margin-top: 10px; }
  .ly-f { border-radius: 5px; }
  .ly-pr { margin-top: 6px; }
}

/* ═════════ 50 · YOUTUBE ═════════ */
.yt-pin { position: relative; }
.yt-stick { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.yt-head { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; width: 100%; }
.yt-head .h2 { max-width: 15em; }
.yt-head .lead { margin-top: 18px; max-width: 30em; }
.yt-stage { position: relative; width: 100%; margin-top: clamp(28px, 3.4vw, 48px); }
.yt-c { position: absolute; left: 50%; top: var(--yt-top); width: var(--yt-w); height: var(--yt-h); margin-left: calc(var(--yt-w) / -2);
  transform-origin: 50% 50%; will-change: transform, opacity; display: block; }
.yt-im { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; background: #0c0c0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 100px rgba(0, 0, 0, .65); }
.yt-gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; filter: blur(64px) saturate(1.5);
  transform: scale(1.04, 1.12); opacity: 0; pointer-events: none; }
.yt-c:focus-visible { outline: none; }
.yt-c:focus-visible .yt-im { outline: 2px solid #fff; outline-offset: 4px; }
.yt-steps { display: flex; gap: 6px; margin-top: clamp(24px, 3vw, 40px); position: relative; z-index: 2; }
.yt-s { width: 40px; height: 24px; display: grid; place-items: center; }
.yt-s i { display: block; width: 100%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .2); transition: background-color .45s; }
.yt-s:hover i { background: rgba(255, 255, 255, .55); }
.yt-s.on i { background: #fff; }
@media (max-width: 759px) {
  .yt-im, .yt-gl { border-radius: 10px; }
  .yt-s { width: 32px; }
}

/* lyric: кадр-обложка поверх ролика, пока ролик не показал свой кадр (на медленной сети — вместо чёрного экрана) */
.ly-po { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.ly-po.off { visibility: hidden; }
.ly-black { transition-duration: .16s; }
/* соцсети, телефон: на узкой обложке текст мельче — не заходит под аватар */
.so-ph-cv .so-cv-t { font-size: 7cqw; }