/* «Смена кадров» на /production/ (20.10.2026, по видео-образцу владельца, вторая версия): закреплённый экран, прокрутка мышью/трекпадом/пальцем
   меняет кадр. Три фото 16:9 на чёрном, сверху и снизу выглядывают соседние кадры, края слева и справа неровные, как у киноплёнки (маска-контур).
   Смена – кадры сдвигаются на шаг, название собирается из случайных букв. Скрипт – production-swap-2.js. Без скрипта виден первый кадр. */
.pw { position: relative; background: #000; color: #fff; font-family: 'Noto Sans', Arial, sans-serif; font-weight: 300; --n: 4; --pk: 30px; --g: 10px; height: calc(100vh + (var(--n) - 1) * 80vh); height: calc(100svh + (var(--n) - 1) * 80svh); }
body > .top-back { position: fixed !important; }
@media (min-width: 980px) { .pw { --nav: 72px; margin-top: -72px; } }
.pw__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding-top: var(--nav, 0px); }
.pw__stage { --w: min(calc(100vw - 24px), calc((100svh - var(--nav, 0px) - 2 * (var(--pk) + var(--g))) * 16 / 9)); --h: calc(var(--w) * 9 / 16);
  position: relative; width: var(--w); height: calc(var(--h) + 2 * (var(--pk) + var(--g))); overflow: hidden; }
.pw__s { position: absolute; left: 0; top: calc(var(--pk) + var(--g)); width: 100%; height: var(--h); margin: 0; background: #0b0b0b;
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
  transform: translate3d(0, calc(var(--p, 0) * (var(--h) + var(--g))), 0); transition: transform .8s cubic-bezier(.65, 0, .2, 1); will-change: transform; }
.pw__s:nth-child(odd) { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028 0.05' numOctaves='4' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='24' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='26' y='24' width='1548' height='852' rx='46' fill='%23000' filter='url%28%23f%29'/%3E%3C/svg%3E"); }
.pw__s:nth-child(even) { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='f' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028 0.05' numOctaves='4' seed='23' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='24' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='26' y='24' width='1548' height='852' rx='46' fill='%23000' filter='url%28%23f%29'/%3E%3C/svg%3E"); }
.pw__img, .pw__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: translate3d(0, calc(var(--p, 0) * -9%), 0) scale(1.14); transition: transform .8s cubic-bezier(.65, 0, .2, 1); will-change: transform; }
.pw .pw__s .pw__cta { position: absolute !important; left: auto; top: auto; right: clamp(18px, 2.8vw, 44px); bottom: clamp(20px, 3.2vw, 48px); margin: 0; z-index: 3; pointer-events: none; display: inline-block; padding: 12px 18px !important; min-height: 0 !important; height: auto !important; background: transparent !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 8px !important; color: #fff !important; text-decoration: none; font: 600 clamp(10px, .85vw, 12px)/1 'Noto Sans', Arial, sans-serif !important; letter-spacing: .12em; text-transform: uppercase; transform: none !important; box-shadow: none !important; }
.pw .pw__s .pw__cta:hover { background: #fff !important; color: #000 !important; }
.pw .pw__s[data-p="0"] .pw__cta { pointer-events: auto; }
.pw__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.05) 24%, rgba(0,0,0,.05) 42%, rgba(0,0,0,.8) 100%), linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 38%), linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 40%); box-shadow: inset 0 0 12vw 3vw rgba(0,0,0,.88); }
.pw__shade::after { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .6s ease; }
.pw__s:not([data-p="0"]) .pw__shade::after { opacity: .5; }
.pw__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

.pw__ttl, .pw__side, .pw__cta { position: absolute; z-index: 2; opacity: 0; transform: translate3d(0, calc(var(--p, 0) * var(--h) * .14), 0); transition: opacity .35s ease, transform .8s cubic-bezier(.65, 0, .2, 1); }
.pw__s[data-p="0"] .pw__ttl, .pw__s[data-p="0"] .pw__side, .pw__s[data-p="0"] .pw__cta { opacity: 1; transition: opacity .5s ease .3s, transform .8s cubic-bezier(.65, 0, .2, 1); }
.pw__ttl { left: clamp(16px, 2.6vw, 40px); bottom: clamp(20px, 3.2vw, 48px); margin: 0; font: 300 clamp(26px, 5.6vw, 84px)/.98 'Noto Sans', Arial, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.pw__ttl span { display: block; white-space: nowrap; }
.pw__side { right: clamp(18px, 2.8vw, 44px); top: 50%; margin-top: -4.5em; width: min(22%, 270px); margin: 0; padding: 0; list-style: none; text-align: center; }
.pw__side li { margin: 0 0 clamp(10px, 1.6vw, 22px); padding-bottom: clamp(10px, 1.6vw, 22px); font: 400 clamp(10px, 1vw, 15px)/1.4 'Noto Sans', Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.pw__side li:last-child { margin: 0; padding: 0; }

@media (max-width: 760px) {
  .pw { --pk: 22px; --g: 8px; }
  .pw__side { display: none; }
  .pw .pw__s .pw__cta { top: auto; bottom: 12px; right: 12px; padding: 8px 12px !important; font-size: 10px !important; }
  .pw__ttl { font-size: clamp(20px, 7vw, 34px); }
}
@media (prefers-reduced-motion: reduce) {
  .pw__s, .pw__img, .pw__vid, .pw__ttl, .pw__side, .pw__cta { transition: none; }
}

.pw__g { pointer-events: none; }

/* 23.10.2026: на последнем кадре кнопка стоит справа вверху – внизу она налезала на широкое название */
.pw .pw__s .pw__vid ~ .pw__cta { top: clamp(18px, 3vw, 44px); bottom: auto; }