@font-face{
  font-family: 'Frutiger Next Cn';
  src: url('/shrifty/FrutigerNextLTW1G-RegularCn.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face{
  font-family: 'Frutiger Next Cn';
  src: url('/shrifty/FrutigerNextLTW1G-MediumCn.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face{
  font-family: 'Frutiger Next Cn';
  src: url('/shrifty/FrutigerNextLTW1G-BoldCn.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face{
  font-family: 'Frutiger Next Cn';
  src: url('/shrifty/FrutigerNextLTW1G-HeavyCn.woff2') format('woff2');
  font-weight: 900; font-display: block;
}

@font-face{
  font-family: 'PT Mono';
  src: url('/shrifty/PTMono-cyrillic-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'PT Mono';
  src: url('/shrifty/PTMono-latin-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

@font-face{
  font-family: 'Frutiger Next';
  src: url('/shrifty/FrutigerNextLTW1G-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root{
  --bumaga-belaya: #FBFAF7;
  --linii: rgba(22, 98, 58, 0.12);

  --k-nadpis:    clamp(0.6rem,  0.7007vw,  0.7rem);
  --k-metka:     clamp(0.64rem, 0.8333vw,  0.85rem);
  --k-melko:     clamp(0.78rem, 0.9910vw,  1rem);
  --k-tekst:     clamp(1rem,    1.1785vw,  1.2rem);
  --k-lid:       clamp(1.14rem, 1.6667vw,  1.6rem);
  --k-sred:      clamp(1.4rem,  2.3569vw,  2.3rem);
  --k-krupno:    clamp(1.9rem,  3.3333vw,  3.2rem);
  --k-zagolovok: clamp(2.2rem,  4.7139vw,  4.3rem);
  --k-plakat:    clamp(2.4rem,  6.6667vw,  6.2rem);

  --k-geroy: clamp(1.9rem, 5.2778vw, 4.9rem);

  --k-ekran: var(--k-geroy);
  --shag-zag: 0.95;
  --shag-podzag: 1.1;
  --shag-tekst: 1.4;
  --vozduh-zag: calc(var(--k-lid) * 2);
  --pod-zag: calc(var(--k-ekran) * (var(--shag-zag) / 2 - 0.22));
  --otstup-za-zag: calc(var(--vozduh-zag) - var(--pod-zag) - (var(--shag-tekst) / 2 - 0.447) * 1em);
  --otstup-za-zag-podzag: calc(var(--vozduh-zag) - var(--pod-zag) - (var(--shag-podzag) / 2 - 0.447) * 1em);
  --otstup-abzaca: 0.667em;
  --kray-bukvy: -0.065em;

  --k-klich: clamp(3rem, 13vw, 11rem);

  --znak-storona: round(0.4em, 1px);
  --znak-propisnaya: 0.667em;
  --znak-podyom: calc(var(--znak-propisnaya) / 2 - var(--znak-storona) / 2);
  --znak-prosvet: 0.55em;

  --pole-pilyuli: 0.716em;
  --pole-knopki: 1.244em;

  --pole-ekrana: 5.2vw;

  --niz-slova: clamp(3rem, 7vh, 5.4rem);

  --ritm: clamp(0.9rem, 2.1vh, 1.7rem);

  --vozduh-metki: var(--ritm);
}

:root{
  --barhat:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, rgba(0, 0, 0, 0.02) 1px 3px),
    radial-gradient(112% 94% at 50% 44%,
      rgba(22, 98, 58, 0.26) 0%, rgba(22, 98, 58, 0.09) 48%, rgba(22, 98, 58, 0) 74%),
    radial-gradient(132% 112% at 50% 50%,
      rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.42) 72%, rgba(0, 0, 0, 0.72) 100%),
    var(--glubokiy);
}

*{ margin: 0; padding: 0; box-sizing: border-box; }

.menyu__punkt,
.list__chip,
.knopka-etiketki,
.shov__ryad{
  text-box: trim-both cap alphabetic;
}

html{ overflow-x: clip; scrollbar-gutter: stable; }

@media (pointer: coarse){ html{ scrollbar-gutter: auto; } }

body{
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, select, [contenteditable]{
  -webkit-user-select: text;
  user-select: text;
}
img, a{ -webkit-user-drag: none; }
body{
  font-family: 'Frutiger Next Cn', 'Arial Narrow', Arial, sans-serif;
  background: var(--krem);
  color: var(--chernila);
  overflow-x: clip;
}

html:has(body.nakal),
html.nakal{ overflow: hidden; overscroll-behavior: none; }
body.nakal{ overflow: hidden; }

@media (hover: hover) and (pointer: fine){
  body.linza-zhivet .scena, body.linza-zhivet .scena *{ cursor: none; }
}
img{ display: block; max-width: 100%; }

.scena{ height: calc(100vh + 1900px); }
.ekran{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
}

body.bez-prozhektora .scena{ height: 100vh; height: 100svh; }
body.bez-prozhektora .banka,
body.bez-prozhektora .oreol,
body.bez-prozhektora .kursor{ display: none; }

body.nakal .shapka--zakrep{ opacity: 0; visibility: hidden; pointer-events: none; }
body.bez-prozhektora .shapka--zakrep{
  transition: transform 340ms var(--hod-out), opacity 560ms var(--hod-out);
}

body.bez-prozhektora #listay{ display: none; }

.nakal-pole{
  position: absolute; inset: 0;

  background: var(--barhat);
}

.klich{
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  font-weight: 900;
  font-size: var(--k-klich);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  will-change: opacity, transform;
}
.stroka{ display: block; }
.klich__ten{ display: block; color: color-mix(in srgb, var(--krem) 18%, transparent); }
.klich__zhar{
  position: absolute; inset: 0;
  color: var(--krem);

  clip-path: inset(-25% 100% -25% 0);
  will-change: clip-path;
}

.znak-vhoda{
  position: absolute;
  top: 5vh; left: 50%;
  translate: -50% 0;

  height: 15vh; width: auto;
  opacity: 0;

  z-index: 0;
  transform-origin: top left;
  will-change: opacity, transform;
}
.marka{
  position: absolute;
  bottom: 5vh; left: 50%;
  translate: -50% 0;
  font-weight: 500;
  font-size: var(--k-metka);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--zoloto-svet);
  will-change: opacity, transform;
}

.listay{
  position: absolute;
  bottom: 4.4vh; left: 50%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  opacity: 0;
  will-change: opacity;
}
.listay__slovo{
  font-weight: 500;
  font-size: var(--k-nadpis);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--krem) 78%, transparent);
}
.listay__pilyulya{
  width: 26px; height: 42px;
  border: 1.5px solid color-mix(in srgb, var(--krem) 45%, transparent);
  border-radius: 999px;
  display: grid; justify-items: center;
  padding-top: 7px;
}

.listay__tochka{
  width: 4px; height: 4px;
  background: var(--krasnyy);

  animation:
    listay-hod 2.85s cubic-bezier(0.37, 0, 0.63, 1) infinite,
    listay-svet 2.85s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

@keyframes listay-hod{
  0%, 22%{ transform: translateY(0); }
  58.7%{ transform: translateY(21px); }
  76%{ transform: translateY(21px); }
  76.7%, 100%{ transform: translateY(0); }
}

@keyframes listay-svet{
  0%{ opacity: 0; }
  14%, 58.7%{ opacity: 1; }
  76%{ opacity: 0; }
  76.7%, 100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .listay__tochka{ animation: none; opacity: 1; }
}

.oreol{
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.oreol--svet{
  width: 100px; height: 100px;
  margin: -50px 0 0 -50px;
  background: radial-gradient(circle closest-side at 50% 50%,
    transparent 0%,
    transparent 49%,
    rgba(255, 247, 227, 0.30) 53%,
    rgba(255, 247, 227, 0.20) 60%,
    rgba(255, 247, 227, 0.11) 70%,
    rgba(255, 247, 227, 0.05) 82%,
    rgba(255, 247, 227, 0.015) 92%,
    transparent 100%);
}

.oreol--kray{
  box-shadow:
    0 0 40px 6px rgba(255, 247, 227, 0.22),
    0 0 10px 1px rgba(255, 247, 227, 0.26);
}

.kursor{
  position: absolute;
  left: 0; top: 0;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.kursor--koltso{
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid #FFFFFF;
  box-shadow: 0 0 6px rgba(35, 31, 32, 0.34), inset 0 0 4px rgba(35, 31, 32, 0.22);
}
.kursor--tochka{
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: #FFFFFF;
  box-shadow: 0 0 5px rgba(35, 31, 32, 0.42);
}

.linza{

  --kadr: calc(92vh - 37.8px);
  --pole-slova: min(34vw, 30rem);
  position: absolute; inset: 0;
  z-index: 2;
  clip-path: circle(0px at 50% 50%);
  opacity: 0;
  will-change: clip-path, opacity;
  contain: paint;
}
.podloga{ position: absolute; inset: 0; }

.podloga--temno{

  background: var(--barhat);
}

.shapka{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: 1.15rem var(--pole-ekrana);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.2rem);

  background: var(--krem);
  border-bottom: 1px solid rgba(35, 31, 32, 0.18);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}
.shapka--vzoshla{ visibility: visible; pointer-events: auto; }

.shapka--zakrep{
  position: fixed;
  z-index: 80;

  transition: transform 340ms var(--hod-out);
  will-change: transform;
}
.shapka--zakrep.vidna{ opacity: 1; visibility: visible; pointer-events: auto; }

.shapka--zakrep.spryatana{ transform: translateY(-102%); }
.shapka__znak-ssylka{ display: flex; flex: 0 0 auto; }

.shapka__znak{
  height: 8vh; width: auto;

  transform-origin: 50% 92%;
  transition: transform 300ms var(--hod-out), filter 300ms var(--hod-out);
  will-change: transform;
}

.shapka__znak-ssylka:hover .shapka__znak,
.shapka__znak-ssylka:focus-visible .shapka__znak{
  transform: translateY(-2px) scale(1.07) rotate(-2.2deg);
  filter: drop-shadow(0 6px 14px rgba(166, 127, 42, 0.38));
}

.shapka__znak-ssylka:active .shapka__znak{
  transform: translateY(0) scale(1.02) rotate(-1deg);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce){
  .shapka__znak{ transition: filter 300ms linear; }
  .shapka__znak-ssylka:hover .shapka__znak,
  .shapka__znak-ssylka:focus-visible .shapka__znak,
  .shapka__znak-ssylka:active .shapka__znak{ transform: none; }
}

.menyu{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  max-width: 100%;

  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 16px;
  margin-block: -14px;
}
.menyu::-webkit-scrollbar{ display: none; }

.menyu__dok{
  flex: 0 0 auto;
  position: relative;
  width: 26px; height: 64px;

  margin-right: 3px;
}

.menyu__dok img{
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 64px; height: 64px;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 88%;
  animation: banka-plyvet 5500ms cubic-bezier(0.37, 0, 0.63, 1) infinite;
  transition: rotate 320ms cubic-bezier(0.23, 1, 0.32, 1),
              scale 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes banka-plyvet{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-2px) rotate(-1.1deg); }
}

#shapka-dok img{ opacity: 0; }
#shapka-dok.menyu__dok--polon img{ opacity: 1; }
#shapka-skvoznaya .menyu__dok img{ opacity: 1; }

.menyu__dok:hover img{
  rotate: 4.2deg;
  scale: 1.16;
}
.menyu__dok:active img{ rotate: 1.6deg; scale: 1.05; }
.menyu__dok img{
  transition: rotate 320ms var(--hod-out), scale 320ms var(--hod-out),
              translate 320ms var(--hod-out), filter 320ms var(--hod-out);
}
@media (prefers-reduced-motion: reduce){
  .menyu__dok img{ animation: none; transition: none; }
}
@media (max-width: 1240px){
  .menyu__dok{ width: 22px; height: 54px; }
  .menyu__dok img{ width: 54px; height: 54px; }
}

.menyu__punkt{

  display: inline-block;
  white-space: nowrap;

  padding: var(--pole-pilyuli) 1.05em;
  border-radius: 999px;
  font-size: var(--k-melko);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
  color: var(--chernila);
  border: 1px solid rgba(35, 31, 32, 0.25);
  background: transparent;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
              box-shadow 200ms ease;
}

.menyu__punkt:hover{
  background: transparent;
  color: var(--chernila);
  border-color: rgba(35, 31, 32, 0.45);
  box-shadow: 0 2px 7px rgba(35, 31, 32, 0.16), 0 1px 0 rgba(35, 31, 32, 0.08);
}
.menyu__punkt:focus-visible{ outline: 2px solid var(--zelenyy); outline-offset: 3px; }

.menyu__punkt--deystvie{
  position: relative;

  border: 0;
  padding: calc(var(--pole-pilyuli) + 1px) calc(1.05em + 1px);
  background: var(--krasnyy);
  color: #FFFFFF;
  font-weight: 700;
}
.menyu__punkt--deystvie i{ background: #FFFFFF; }

.menyu__punkt--deystvie:hover{
  background: color-mix(in srgb, var(--krasnyy) 92%, #231F20);
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(225, 38, 28, 0.34), 0 1px 0 rgba(35, 31, 32, 0.10);
}
.menyu__punkt--deystvie:hover i{ background: #FFFFFF; }
.menyu__punkt--deystvie:active{ transform: scale(0.97); }

@media (max-width: 1240px){
}

.geroy-pole{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  overflow: hidden;

  top: var(--rost-shapki, calc(8vh + 2.3rem + 1px));

  z-index: 3;
  overflow: hidden;
}

.slovo{
  position: absolute;
  left: 0; top: 0; bottom: 0;

  width: clamp(20rem, 46%, 40rem);

  display: flex; flex-direction: column; justify-content: flex-end;

  padding: 0 var(--pole-ekrana) var(--niz-slova);

  z-index: 2;
  opacity: 0;
  will-change: opacity, transform;
}

.slovo__nutro{
  position: relative;
  width: max-content;
  max-width: 100%;
}

.slovo::before{
  content: '';
  position: absolute;

  inset: 0 -55% 0 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--oreol, 0);
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.968) 0%,
    rgba(0, 0, 0, 0.858) 18%,
    rgba(0, 0, 0, 0.682) 35%,
    rgba(0, 0, 0, 0.484) 46%,
    rgba(0, 0, 0, 0.374) 56%,
    rgba(0, 0, 0, 0.22) 68%,
    rgba(0, 0, 0, 0.132) 79%,
    rgba(0, 0, 0, 0.055) 90%,
    transparent 100%);
}

.slovo__zagolovok{
  font-weight: 900;

  font-size: var(--k-ekran);
  line-height: var(--shag-zag);
  margin-left: var(--kray-bukvy);
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: var(--krem);

  text-shadow:
    0 0 26px rgba(0, 0, 0, 0.76),
    0 1px 3px rgba(0, 0, 0, 0.6);
}
.slovo__zagolovok span{ display: block; }

.slovo__zoloto{ color: var(--zoloto-svet); }

.slovo__manifest{
  margin-top: var(--otstup-za-zag);
  margin-left: var(--kray-bukvy);
  font-weight: 700;

  font-size: var(--k-lid);
  line-height: var(--shag-tekst);
  color: var(--krem);

  text-shadow:
    0 0 16px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.64);
}

.slovo__vvod{
  display: block;

  max-width: none;
  margin-bottom: 0.9em;
  font-weight: 700;
  font-size: var(--k-nadpis);
  letter-spacing: 0.13em;
  white-space: nowrap;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--zoloto-svet) 78%, transparent);
}

.banka{
  position: absolute;
  left: 0; top: 0;
  z-index: 4;
  height: 62vh; width: 62vh;
  margin: -31vh 0 0 -31vh;
  object-fit: contain;
  will-change: transform, opacity;
}

.geroi{
  position: absolute; inset: 0;
  overflow: hidden;
  opacity: 0;
  will-change: opacity, transform;
}

.geroi img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(1.02);
  will-change: transform;
}

.plenka{
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23z)'/%3E%3C/svg%3E");
}

@media (max-width: 860px){

  :root{ --pole-ekrana: 6vw; }

  :root{ --k-ekran: clamp(2rem, 9vw, 2.9rem); }
  .klich{ --k-klich: clamp(2.3rem, 13.4vw, 4.4rem); }
  .znak-vhoda{ height: 9vh; top: 5vh; }
  .shapka{ padding: 2.4vh var(--pole-ekrana) 0; gap: 3vw; }

  .shapka__znak{ height: 7.4vh; }
  .banka{ height: 40vh; width: 40vh; margin: -20vh 0 0 -20vh; }
}

@media (max-width: 1100px){
  :root{ --niz-slova: clamp(2rem, 6vh, 3.6rem); }

  .slovo{
    top: auto; right: 0; width: auto;
    padding: 0 var(--pole-ekrana) var(--niz-slova);
    justify-content: flex-end;
  }

  .slovo::before{
    inset: auto 0 0 0;
    height: 64vh;
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.99) 0%,
      rgba(0, 0, 0, 0.924) 14%,
      rgba(0, 0, 0, 0.792) 28%,
      rgba(0, 0, 0, 0.616) 41%,
      rgba(0, 0, 0, 0.44) 53%,
      rgba(0, 0, 0, 0.264) 67%,
      rgba(0, 0, 0, 0.143) 79%,
      rgba(0, 0, 0, 0.055) 90%,
      transparent 100%);
  }
  .slovo__manifest{ max-width: 40ch; }
}

@media (prefers-reduced-motion: reduce){
  .klich, .znak-vhoda, .oreol{ will-change: auto; }
}

@media (max-width: 860px){

  .geroi img{ object-position: 50% 0%; }

  .slovo__manifest{ font-size: clamp(0.98rem, 4.15vw, 1.28rem); }

  :root{ --niz-slova: clamp(2.6rem, 8vh, 4.4rem); }

  .slovo::before{
    -webkit-mask-image: linear-gradient(to right,
      #000 0%, #000 54%, rgba(0, 0, 0, 0.58) 74%,
      rgba(0, 0, 0, 0.34) 88%, rgba(0, 0, 0, 0.26) 100%);
    mask-image: linear-gradient(to right,
      #000 0%, #000 54%, rgba(0, 0, 0, 0.58) 74%,
      rgba(0, 0, 0, 0.34) 88%, rgba(0, 0, 0, 0.26) 100%);
    height: 52vh;
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.975) 0%,
      rgba(0, 0, 0, 0.945) 14%,
      rgba(0, 0, 0, 0.869) 27%,
      rgba(0, 0, 0, 0.737) 39%,
      rgba(0, 0, 0, 0.561) 51%,
      rgba(0, 0, 0, 0.374) 64%,
      rgba(0, 0, 0, 0.209) 76%,
      rgba(0, 0, 0, 0.077) 88%,
      transparent 100%);
  }
}

@media (max-width: 860px){
  .menyu{ gap: 2.6vw; overflow-x: visible; }
  .menyu__punkt:not(.menyu__punkt--deystvie){ display: none; }
  .menyu__dok{ margin-right: 1vw; }
  .menyu__punkt--deystvie{ font-size: clamp(0.66rem, 3vw, 0.82rem); letter-spacing: 0.11em; }

  .shapka__znak{ height: 6.6vh; }
}