/* TRIBVLIST */

:root{
  --bg:#eef1f4;
  --bg-2:#e4e9ef;
  --ink:#132038;
  --ink-dim:#66748d;
  --line:rgba(19,32,56,.16);

  /* оттенок медленно уползает по мере прокрутки, акценты едут за ним */
  --hue:214;
  --accent:hsl(var(--hue) 68% 42%);
  --accent-soft:hsl(calc(var(--hue) + 8) 72% 52%);
  --accent-cold:hsl(calc(var(--hue) + 186) 62% 46%);

  --font-display:"Oswald","Impact",sans-serif;
  --font-serif:"Cormorant Garamond",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,90px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --player-height:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-mono);font-weight:300;font-size:15px;line-height:1.65;
  overflow-x:hidden;padding-bottom:var(--player-height);
}
body.is-loading{overflow:hidden;height:100vh}
body.no-scroll{overflow:hidden}
body.has-player{--player-height:84px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* полоса прокрутки под тему */
html{scrollbar-width:thin;scrollbar-color:hsl(var(--hue) 55% 45%) #dfe5ec}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#dfe5ec}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--accent),hsl(calc(var(--hue) + 14) 60% 30%));
  border:2px solid #dfe5ec;border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{background:var(--accent-soft)}
::-webkit-scrollbar-corner{background:#dfe5ec}

.container{width:min(1360px,100%);margin:0 auto;padding-inline:var(--gutter)}

/* наложения */
/* раскол тарелки: секвенция на фоне всей страницы */
/* размер задаём явно: у канвы есть собственный размер (буфер), и при width:auto
   браузер верстает её по нему, а не растягивает по inset — при devicePixelRatio,
   отличном от единицы, картинка уезжает от центра */
.plate{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* запасные процедурные осколки */

/* засветка в самом низу страницы */
.fadeout{
  position:fixed;inset:0;z-index:8995;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 50% 50%,#fff 0%,var(--bg) 70%);
}
.grain{
  position:fixed;inset:-120px;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 7s steps(6) infinite;
  mix-blend-mode:multiply;transition:opacity .8s
}
body.audio-on .grain{opacity:.06}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-8%,4%)}40%{transform:translate(6%,-6%)}
  60%{transform:translate(-4%,-8%)}80%{transform:translate(8%,6%)}100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:8990;pointer-events:none;
  background:radial-gradient(115% 85% at 50% 42%,transparent 55%,rgba(19,32,56,.1) 100%);
}

/* шторка смены языка */
.wipe{
  position:fixed;inset:0;z-index:9400;background:var(--ink);display:grid;place-items:center;
  clip-path:inset(0 0 100% 0);pointer-events:none;
}
.wipe span{font-family:var(--font-display);font-weight:700;letter-spacing:.3em;font-size:clamp(18px,3vw,34px);
  color:var(--bg);opacity:0;transform:translateY(16px)}
.wipe.is-on{clip-path:inset(0 0 0 0);transition:clip-path .62s var(--ease-out);pointer-events:all}
.wipe.is-on span{opacity:1;transform:none;transition:opacity .5s .18s,transform .6s var(--ease-out) .18s}
.wipe.is-out{clip-path:inset(100% 0 0 0);transition:clip-path .66s var(--ease-out)}
.wipe.is-out span{opacity:0;transition:opacity .3s}

/* прелоадер */
.loader{position:fixed;inset:0;z-index:9800;background:var(--bg);display:grid;place-items:center}
.loader.is-out{opacity:0;pointer-events:none;transition:opacity 1s var(--ease)}
.loader__inner{position:absolute;left:50%;bottom:11vh;transform:translateX(-50%);
  text-align:center;width:max-content;max-width:90vw}
.loader__word{display:flex;gap:.04em;justify-content:center;font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,4vw,46px);letter-spacing:.22em;line-height:1.2;overflow:hidden}
.loader__word span{display:block;transform:translateY(110%);animation:loader-rise .9s var(--ease-out) forwards}
.loader__word span:nth-child(1){animation-delay:.05s}.loader__word span:nth-child(2){animation-delay:.10s}
.loader__word span:nth-child(3){animation-delay:.15s}.loader__word span:nth-child(4){animation-delay:.20s}
.loader__word span:nth-child(5){animation-delay:.25s}.loader__word span:nth-child(6){animation-delay:.30s}
.loader__word span:nth-child(7){animation-delay:.35s}.loader__word span:nth-child(8){animation-delay:.40s}
.loader__word span:nth-child(9){animation-delay:.45s}
@keyframes loader-rise{to{transform:translateY(0)}}
.loader__meta{display:flex;justify-content:space-between;gap:24px;width:100%;margin-top:14px;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}
.loader__count::after{content:"%";opacity:.5;margin-left:2px}
.loader__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(19,32,56,.1)}
.loader__bar i{display:block;height:100%;width:0;background:var(--accent)}

/* шапка */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;gap:22px;
  padding:18px var(--gutter);
  transform:translateY(-110%);transition:transform .7s var(--ease-out),background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-on{transform:translateY(0)}
.nav.is-solid{background:rgba(238,241,244,.78);backdrop-filter:blur(14px);border-color:var(--line)}
.nav__logo{font-family:var(--font-display);font-weight:700;letter-spacing:.22em;font-size:16px;margin-right:auto}
.nav__links{display:flex;gap:24px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.nav__links a{position:relative;padding-bottom:3px;transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__links a.is-active{color:var(--accent-soft)}

.lang{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em}
.lang button{color:var(--ink-dim);transition:color .3s}
.lang button.is-on{color:var(--ink)}
.lang button:hover{color:var(--accent-soft)}
.lang i{width:1px;height:11px;background:var(--line)}

.nav__cta{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:9px 20px;
  border:1px solid var(--line);border-radius:99px;transition:.35s var(--ease);white-space:nowrap;
}
.nav__cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.nav__burger{display:none;width:34px;height:24px;position:relative}
.nav__burger i{position:absolute;left:0;right:0;height:1px;background:var(--ink);transition:.4s var(--ease-out)}
.nav__burger i:first-child{top:8px}.nav__burger i:last-child{top:15px}
body.menu-open .nav{color:var(--bg)}
body.menu-open .nav__burger i{background:var(--bg)}
body.menu-open .nav__burger i:first-child{top:11px;transform:rotate(45deg)}
body.menu-open .nav__burger i:last-child{top:11px;transform:rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:880;background:var(--ink);color:var(--bg);display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--gutter);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-out)}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu__list{display:flex;flex-direction:column;gap:4px}
.menu__list a{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(30px,8vw,64px);
  line-height:1.1;letter-spacing:.02em;display:flex;align-items:baseline;gap:16px;opacity:0;transform:translateY(30px)}
body.menu-open .menu__list a{opacity:1;transform:none;transition:opacity .6s var(--ease-out) calc(.2s + var(--i,0)*.06s),transform .7s var(--ease-out) calc(.2s + var(--i,0)*.06s)}
.menu__list em{font-family:var(--font-mono);font-style:normal;font-size:11px;color:var(--accent-cold);letter-spacing:.2em}
.menu__links{position:absolute;left:var(--gutter);right:var(--gutter);bottom:36px;display:flex;flex-wrap:wrap;gap:22px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.menu__links a:hover{color:var(--ink)}

/* первый экран */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:grid;place-items:center;z-index:2}
.hero__media{display:none}
.hero__img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) contrast(.9) brightness(1.5);opacity:.3;
  transform:scale(1.18);animation:hero-zoom 2.6s var(--ease-out) .25s forwards}
@keyframes hero-zoom{to{transform:scale(1.02)}}

/* Видео поверх фотографии: фото остаётся постером, пока ролик не пошёл */
.hero__video{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__video.is-on{opacity:.32}
.hero__video video,.hero__video iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-width:177.78vh;min-height:100%;border:0;pointer-events:none;
  filter:grayscale(.85) contrast(.92) brightness(1.4)
}
.hero__video video{object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(238,241,244,.8) 0%,rgba(238,241,244,.4) 38%,rgba(238,241,244,.72) 72%,var(--bg) 100%)}

.hero__inner{position:relative;z-index:2;align-self:end;text-align:center;
  padding:0 var(--gutter) clamp(96px,14vh,150px);max-width:1100px}

/* Знак лежит в том же закреплённом слое, что и тарелка, и встаёт ровно на её
   место: --plate-y, --plate-size и --reveal пишет модуль, который рисует фон.
   Закрашен он не картинкой, а градиентом сквозь маску — оттого и переливается
   красками самой тарелки. Перелив и глитч живут на знаке, проявление — на
   обёртке, иначе две анимации спорят за одно свойство. */
.wordmark{position:fixed;left:50%;top:var(--plate-y,42%);z-index:1;pointer-events:none;
  width:clamp(170px,calc(var(--plate-size,420px) * .66),440px);
  opacity:var(--reveal,0);
  transform:translate(-50%,-50%) scale(calc(.9 + .1 * var(--reveal,0)));
  filter:blur(calc((1 - var(--reveal,0)) * 8px));
  will-change:opacity,transform}
.wordmark i{display:block;width:100%;aspect-ratio:1280/883;
  -webkit-mask:url(../assets/img/logo-wordmark.png) center/contain no-repeat;
          mask:url(../assets/img/logo-wordmark.png) center/contain no-repeat;
  /* полоса широкая: в знак попадает лишь узкий кусок градиента, поэтому он
     не пестрит, а медленно переливается из кобальта в бирюзу и обратно */
  background:linear-gradient(105deg,
    #0d2555 0%, #1f4e8f 12%, #3f93b0 22%, #b2913f 28%, #8f3040 33%,
    #1f4e8f 44%, #0d2555 58%, #2a6f8c 72%, #1f4e8f 86%, #0d2555 100%);
  background-size:640% 100%;
  filter:drop-shadow(0 8px 28px rgba(19,32,56,.22));
  animation:wordmark-sheen 18s linear infinite}
@keyframes wordmark-sheen{from{background-position:0 0}to{background-position:640% 0}}
.wordmark.is-glitch i{
  animation:wordmark-sheen 18s linear infinite, wordmark-glitch .2s steps(2) infinite}
@keyframes wordmark-glitch{
  0%,100%{transform:translateX(0);clip-path:none}
  30%{transform:translateX(-5px);clip-path:inset(26% 0 44% 0)}
  60%{transform:translateX(6px);clip-path:inset(58% 0 14% 0)}}

.hero__tag{
  font-family:var(--font-display);font-weight:300;text-transform:uppercase;
  font-size:clamp(13px,1.5vw,19px);letter-spacing:.34em;margin:6px 0 0;color:var(--ink)
}
.hero__note{margin:20px auto 0;max-width:520px;font-size:12.5px;letter-spacing:.06em;color:var(--ink-dim)}

.hero__side{position:absolute;right:calc(var(--gutter) * .55);top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:9px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  color:var(--ink-dim)}
.hero__side span{opacity:0;animation:side-in .6s var(--ease-out) forwards}
.hero__side span:nth-child(1){animation-delay:1.2s}.hero__side span:nth-child(2){animation-delay:1.28s}
.hero__side span:nth-child(3){animation-delay:1.36s}.hero__side span:nth-child(4){animation-delay:1.44s}
.hero__side span:nth-child(5){animation-delay:1.52s}.hero__side span:nth-child(6){animation-delay:1.6s}
.hero__side span:nth-child(7){animation-delay:1.68s}.hero__side span:nth-child(8){animation-delay:1.76s}
@keyframes side-in{from{opacity:0;transform:translateX(12px)}to{opacity:.75;transform:none}}

.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-dim)}
.hero__scroll i{width:1px;height:52px;background:linear-gradient(180deg,var(--ink-dim),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;width:1px;height:18px;background:var(--accent-soft);
  animation:scroll-dot 1.9s var(--ease) infinite}
@keyframes scroll-dot{0%{top:-20px}70%,100%{top:56px}}

/* бегущая строка */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;position:relative;z-index:2}
.marquee--alt{background:transparent;border-top:0}
/* Контурная строка: у каждого слова свой сдвиг оттенка.
   Считаем nth-of-type, а не nth-child — между словами лежат разделители <b>,
   и по общему счёту обе копии ленты красились бы по-разному, а на стыке
   цикла слово меняло бы цвет. Шаг 6 совпадает с числом слов в копии. */
.marquee--alt span{color:transparent;-webkit-text-stroke:1px hsl(calc(var(--hue) + var(--shift,0)) 50% 62% / .6)}
.marquee--alt span:nth-of-type(6n+1){--shift:0}
.marquee--alt span:nth-of-type(6n+2){--shift:26}
.marquee--alt span:nth-of-type(6n+3){--shift:52}
.marquee--alt span:nth-of-type(6n+4){--shift:78}
.marquee--alt span:nth-of-type(6n+5){--shift:104}
.marquee--alt span:nth-of-type(6n+6){--shift:130}
.marquee__track{display:flex;gap:34px;align-items:center;width:max-content;will-change:transform}
.marquee span{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(22px,3.4vw,44px);
  letter-spacing:.06em;white-space:nowrap}
.marquee b{color:var(--accent);font-size:14px}

/* общее */
.eyebrow{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 18px}
.section-head{margin-bottom:clamp(34px,5vw,70px)}
.section-title{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.92;margin:0;
  font-size:clamp(46px,10vw,140px);letter-spacing:-.01em;position:relative;
}
.section-title--small{font-size:clamp(32px,4.6vw,64px)}
.section-head .section-title::after{
  content:"";position:absolute;left:0;bottom:-16px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease-out) .25s;
}
.section-head .section-title.is-in::after{transform:scaleX(1)}

/* на резкой прокрутке крупный шрифт расслаивается на два канала */
.section-title,.manifest__item h3,.cta__link,.release__name,.footer__brand{transition:text-shadow .3s var(--ease)}
body.is-rushing .section-title,
body.is-rushing .manifest__item h3,
body.is-rushing .cta__link,
body.is-rushing .release__name,
body.is-rushing .footer__brand{
  text-shadow:-4px 0 hsl(var(--hue) 80% 55% / .6), 4px 0 var(--accent-cold);
}

/* заливка текста градиентом, которая проезжает при наведении */
.sweep{
  background-image:linear-gradient(100deg,
    currentColor 0 30%, var(--accent-soft) 42%, var(--accent-cold) 52%, currentColor 64% 100%);
  background-size:320% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  transition:background-position .9s var(--ease-out),color .35s;
}
.release:hover .sweep,
.track:hover .sweep,
.menu__list a:hover .sweep{background-position:0 0;color:transparent}
section[data-section]{padding-block:clamp(70px,10vw,150px);position:relative;z-index:2}
[data-skew]{will-change:transform}

/* о проекте */
.about__quote{
  margin:0;font-family:var(--font-serif);font-weight:300;font-size:clamp(23px,3.3vw,50px);
  line-height:1.28;letter-spacing:-.005em;
}
.lit{transition:opacity .18s linear;opacity:.16}
.about__grid{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(24px,5vw,80px);margin-top:clamp(34px,5vw,70px);
  padding-top:32px;border-top:1px solid var(--line)}
.about__body{margin:0;max-width:60ch;color:#c3bcb0}
.about__cite{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);text-align:right}
.about__cite em{font-style:normal;font-size:10.5px;opacity:.72}

/* манифест */
.manifest{height:320vh;position:relative;z-index:2}
.manifest__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.manifest__bg{position:absolute;inset:0}
.manifest__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) contrast(1.02) brightness(1.06);opacity:0;transform:scale(1.12);
  transition:opacity 1s var(--ease),transform 2.4s var(--ease-out)}
.manifest__bg img.is-on{opacity:1;transform:scale(1)}
.manifest__scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(238,241,244,.66) 28%,rgba(238,241,244,.7) 72%,var(--bg))}
.manifest__stage{position:relative;width:min(1360px,100%);padding-inline:var(--gutter);min-height:46vh}
.manifest__item{position:absolute;inset:0;padding-inline:var(--gutter);max-width:860px;
  opacity:0;transform:translateY(40px);pointer-events:none;
  transition:opacity .75s var(--ease),transform .9s var(--ease-out)}
.manifest__item.is-on{opacity:1;transform:none}
.manifest__num{font-size:11px;letter-spacing:.3em;color:var(--accent-soft)}
.manifest__item h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,8vw,110px);line-height:.95;margin:14px 0 22px}
.manifest__item p{margin:0;font-family:var(--font-serif);font-size:clamp(18px,2.2vw,30px);line-height:1.4;max-width:34ch;color:#d6cfc3}
.manifest__dots{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.manifest__dots i{width:6px;height:6px;border-radius:50%;border:1px solid var(--ink-dim);transition:.4s}
.manifest__dots i.is-on{background:var(--accent);border-color:var(--accent);transform:scale(1.35)}

/* релизы */
.release-list{border-top:1px solid var(--line)}
.release{border-bottom:1px solid var(--line)}
.release__head{display:grid;grid-template-columns:90px 1fr auto 40px;align-items:center;gap:20px;width:100%;
  padding:clamp(18px,2.4vw,30px) 0;text-align:left;transition:padding-left .5s var(--ease-out)}
.release:hover .release__head{padding-left:18px}
.release__year{font-size:11px;letter-spacing:.2em;color:var(--ink-dim)}
.release__name{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(26px,4.6vw,66px);line-height:1;letter-spacing:.01em;transition:color .4s}
.release__kind{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.release__toggle{position:relative;width:18px;height:18px;justify-self:end}
.release__toggle i{position:absolute;background:var(--ink);transition:.45s var(--ease-out)}
.release__toggle i:first-child{left:0;right:0;top:8px;height:1px}
.release__toggle i:last-child{top:0;bottom:0;left:8px;width:1px}
.release.is-open .release__toggle i:last-child{transform:scaleY(0)}
.release.is-open .release__name{color:var(--accent-soft)}
.release__panel{height:0;overflow:hidden;transition:height .7s var(--ease-out)}
.release__body{display:grid;grid-template-columns:280px 1fr;gap:clamp(20px,4vw,60px);padding:8px 0 46px}
.release__cover{transition:transform .5s var(--ease-out);transform-style:preserve-3d}
.release__cover img{width:100%;aspect-ratio:1;object-fit:cover;filter:contrast(1.05)}
.release__body p{margin:0 0 16px;max-width:64ch;color:#c3bcb0}
.release__body em{font-style:italic;color:var(--ink)}
.action{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:.35s}
.action::after{content:"→";transition:transform .35s var(--ease-out)}
.action:hover{border-color:var(--accent-soft);color:var(--accent-soft)}
.action:hover::after{transform:translateX(6px)}
button.action::after{content:"▶";font-size:9px}


/* музыка */
.music{border-block:1px solid var(--line)}
.music__hint{margin:14px 0 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.tracklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.track{display:grid;grid-template-columns:38px 46px 1fr auto 56px 26px;align-items:center;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .35s,padding-left .45s var(--ease-out)}
.track:hover{background:rgba(19,32,56,.045);padding-left:14px}
.track__index{font-size:11px;color:var(--ink-dim)}
.track__art{display:block;width:46px;height:46px;overflow:hidden;background:var(--bg-2)}
.track__art img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:filter .4s,transform .6s var(--ease-out)}
.track:hover .track__art img{filter:none;transform:scale(1.08)}
.track__title{font-family:var(--font-display);font-weight:500;font-size:clamp(16px,2vw,22px);text-transform:uppercase;letter-spacing:.04em}
.track__album{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.track__year{font-size:11px;color:var(--ink-dim);text-align:right}
.track__equalizer{display:flex;align-items:flex-end;gap:2px;height:14px;opacity:0;transition:opacity .3s}
.track__equalizer i{width:2px;height:4px;background:var(--accent-soft)}
.track.is-cur{background:rgba(184,51,31,.07)}
.track.is-cur .track__title{color:var(--accent-soft)}
.track.is-cur .track__equalizer{opacity:1}
.track.is-playing .track__equalizer i{animation:equalize-sm .9s ease-in-out infinite}
.track.is-playing .track__equalizer i:nth-child(2){animation-delay:.16s}
.track.is-playing .track__equalizer i:nth-child(3){animation-delay:.32s}
@keyframes equalize-sm{0%,100%{height:3px}50%{height:14px}}
.music__note{margin:28px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.music__note a{border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.music__note a:hover{color:var(--accent-soft);border-color:var(--accent-soft)}

/* видео */
.video__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(14px,2vw,26px)}
.clip{display:block;text-align:left;width:100%}
.clip__thumb{display:block;overflow:hidden;position:relative;aspect-ratio:16/9;background:var(--bg-2)}
.clip__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(1);
  transition:transform .9s var(--ease-out),filter .6s}
.clip:hover .clip__thumb img{transform:scale(1.07);filter:grayscale(0) brightness(1.04)}
.clip__thumb::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .4s}
.clip:hover .clip__thumb::after{border-color:var(--accent)}
.clip__meta{display:flex;flex-direction:column;gap:3px;padding-top:14px}
.clip__meta b{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:16px}
.clip__meta i{font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}

/* галерея */
.photo{height:480vh;position:relative;z-index:2}
.photo__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.photo__head{position:absolute;top:clamp(70px,11vh,120px);left:var(--gutter);right:var(--gutter);z-index:3;
  display:flex;align-items:flex-end;gap:20px;pointer-events:none;will-change:transform}
.photo__head .section-title{font-size:clamp(38px,6vw,86px)}
.photo__head .eyebrow{margin:0}
.photo__hint{margin-left:auto;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim)}

.photo__track{display:flex;align-items:center;gap:clamp(14px,2vw,30px);padding-inline:var(--gutter);
  width:max-content;will-change:transform;cursor:grab;touch-action:pan-y}
.photo.is-drag .photo__track{cursor:grabbing}

.shot{margin:0;flex:0 0 auto;position:relative;width:clamp(230px,26vw,380px);height:clamp(300px,46vh,480px);
  overflow:hidden;background:var(--bg-2);will-change:transform,opacity}
.shot--tall{height:clamp(360px,62vh,640px)}
.shot--wide{width:clamp(320px,38vw,560px);height:clamp(250px,38vh,400px)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out);
  user-select:none;-webkit-user-drag:none}
.shot:hover img{transform:scale(1.06)}
.shot figcaption{
  position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.28em;color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ease-out);
  text-shadow:0 1px 12px rgba(0,0,0,.9);pointer-events:none;
}
.shot.is-near figcaption{opacity:.85;transform:none}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,transparent 55%,hsl(var(--hue) 70% 45% / .28));
  opacity:0;transition:opacity .6s;mix-blend-mode:screen;
}
.shot.is-near::after{opacity:1}

/* призрачный номер кадра за лентой */
.photo__ghost{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  font-family:var(--font-display);font-weight:700;font-size:min(72vh,52vw);line-height:1;
  color:hsl(var(--hue) 45% 62% / .1);letter-spacing:-.04em;
  transition:color .6s;
}

.photo__meta{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,7vh,90px);z-index:3;
  display:flex;align-items:center;gap:20px;pointer-events:none;
  font-size:10.5px;letter-spacing:.24em;color:var(--ink-dim)}
.photo__count b{font-weight:400;color:var(--ink)}
.photo__count i{font-style:normal}
.photo__line{flex:1;height:1px;background:var(--line);overflow:hidden}
.photo__line b{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}

/* продакшен */
.studio__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:center}
.studio__media{overflow:hidden;aspect-ratio:4/3}
.studio__media img{width:100%;height:112%;object-fit:cover;filter:grayscale(.3) contrast(1.02) brightness(1);
  transition:filter .8s var(--ease)}
.studio__media:hover img{filter:grayscale(0) contrast(1.02) brightness(1)}
.studio__text p{color:#c3bcb0;max-width:56ch}
.btn{display:inline-flex;align-items:center;justify-content:center;margin-top:24px;padding:16px 34px;
  border:1px solid var(--line);border-radius:99px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  position:relative;overflow:hidden;transition:color .4s,border-color .4s;z-index:0;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);
  transition:transform .55s var(--ease-out);z-index:-1}
.btn:hover{border-color:var(--accent);color:#fff}
.btn:hover::before{transform:translateY(0)}

/* рецензии */
.press{border-top:1px solid var(--line)}
.review{display:grid;grid-template-columns:280px 1fr;gap:clamp(24px,5vw,80px);
  padding-block:clamp(30px,4vw,56px);border-top:1px solid var(--line)}
.review__author{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px;align-self:start}
.review__author img{width:120px;height:120px;object-fit:cover;border-radius:50%;filter:grayscale(.45) contrast(1.02)}
.review__author b{display:block;font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:17px}
.review__author i{font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.review__text p{margin:0 0 20px;color:#c3bcb0;max-width:72ch}
.review__verse{font-family:var(--font-serif);font-size:clamp(20px,2.4vw,30px);line-height:1.4;color:var(--ink)!important;
  border-left:1px solid var(--accent);padding-left:24px}
.review__verse span{display:block;margin-top:12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim)}

/* призыв */
.cta{position:relative;min-height:78svh;display:grid;place-items:center;overflow:hidden;text-align:center;z-index:2}
.cta__bg{position:absolute;inset:-10% 0}
.cta__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) brightness(1.06);opacity:.22}
.cta__in{position:relative;z-index:2;padding-inline:var(--gutter)}
.cta__link{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(52px,13vw,190px);line-height:.9;letter-spacing:-.01em;transition:color .4s}
.cta__link:hover{color:var(--accent-soft)}

/* подвал */
/* подвал остаётся поверх засветки: контакты не должны утонуть в белом */
.footer{border-top:1px solid var(--line);padding-block:clamp(40px,6vw,80px) 34px;position:relative;z-index:8996}
.footer__inner{display:grid;gap:40px}
.footer__brand{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,13vw,180px);line-height:.85;letter-spacing:.01em;color:rgba(19,32,56,.09)}
.footer__columns{display:flex;flex-wrap:wrap;gap:60px}
.footer__columns span{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:12px}
.footer__columns a{display:block;font-size:13px;padding:3px 0;transition:color .3s}
.footer__columns a:hover{color:var(--accent-soft)}
.footer__note{margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}

/* модалка */
.lightbox{position:fixed;inset:0;z-index:9600;background:rgba(19,32,56,.93);display:grid;place-items:center;
  padding:var(--gutter);opacity:0;transition:opacity .4s}
.lightbox.is-on{opacity:1}
.lightbox__body{width:min(1100px,100%);aspect-ratio:16/9}
.lightbox__body iframe{width:100%;height:100%;border:0}
.lightbox--image .lightbox__body{width:auto;max-width:min(1200px,92vw);height:min(84vh,100%);aspect-ratio:auto}
.lightbox--image .lightbox__body img{width:auto;height:100%;max-width:100%;object-fit:contain}
.lightbox__close{position:absolute;top:24px;right:24px;width:44px;height:44px}
.lightbox__close::before,.lightbox__close::after{content:"";position:absolute;left:8px;right:8px;top:21px;height:1px;background:var(--bg)}
.lightbox__close::before{transform:rotate(45deg)}.lightbox__close::after{transform:rotate(-45deg)}

/* плеер */
/* YT.Player подменяет div на iframe с тем же id — стилизуем и по классу, и по id */
.yt-host,#ytHost{position:fixed;left:-9999px;top:0;width:1px;height:1px;border:0;overflow:hidden;pointer-events:none}
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:920;background:rgba(238,241,244,.93);
  backdrop-filter:blur(18px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .55s var(--ease-out);
}
.player.is-on{transform:translateY(0)}
.player__seek{height:3px;background:rgba(19,32,56,.12);cursor:pointer;position:relative;touch-action:none}
.player__seek::after{content:"";position:absolute;inset:-8px 0;}
.player__seek i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
.player__inner{display:flex;align-items:center;gap:16px;padding:12px var(--gutter)}
.player__art{width:56px;height:56px;object-fit:cover;background:var(--bg-2);flex:0 0 auto}
.player__equalizer{display:none;align-items:flex-end;gap:3px;height:20px;flex:0 0 auto}
.player__equalizer i{width:2px;height:4px;background:var(--accent-soft)}
.player.is-playing .player__equalizer{display:flex}
.player.is-playing .player__equalizer i{animation:equalize-lg 1s ease-in-out infinite}
.player.is-playing .player__equalizer i:nth-child(2){animation-delay:.14s}
.player.is-playing .player__equalizer i:nth-child(3){animation-delay:.28s}
.player.is-playing .player__equalizer i:nth-child(4){animation-delay:.42s}
@keyframes equalize-lg{0%,100%{height:4px}50%{height:20px}}
.player__meta{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.player__meta b{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__meta i{font-style:normal;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__controls{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.player__button{display:grid;place-items:center;border-radius:50%;transition:background .3s,transform .3s}
.player__button svg{width:18px;height:18px;fill:var(--ink)}
.player__button--small{width:36px;height:36px}
.player__button--small:hover{background:rgba(19,32,56,.07)}
.player__button--main{width:48px;height:48px;background:var(--ink)}
.player__button--main svg{fill:var(--bg);width:20px;height:20px}
.player__button--main:hover{transform:scale(1.07)}
.player__button--main .icon-pause{display:none}
.player.is-playing .player__button--main .icon-play{display:none}
.player.is-playing .player__button--main .icon-pause{display:block}
.player__time{font-size:10.5px;letter-spacing:.1em;color:var(--ink-dim);flex:0 0 auto;min-width:88px;text-align:right}
.player__close{width:30px;height:30px;position:relative;flex:0 0 auto;opacity:.6;transition:opacity .3s}
.player__close:hover{opacity:1}
.player__close::before,.player__close::after{content:"";position:absolute;left:8px;right:8px;top:14px;height:1px;background:var(--ink)}
.player__close::before{transform:rotate(45deg)}.player__close::after{transform:rotate(-45deg)}

/* прогресс и маркер секции */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:950;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--accent)}
.section-marker{position:fixed;left:var(--gutter);bottom:calc(22px + var(--player-height));z-index:850;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-dim);opacity:0;transition:opacity .4s,bottom .5s var(--ease-out)}
.section-marker.is-on{opacity:1}

/* примитивы анимации */
[data-anim]{--d:0ms}
[data-anim="fade"]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out) var(--d),transform 1s var(--ease-out) var(--d)}
[data-anim="rise"]{opacity:0;transform:translateY(60px);transition:opacity 1s var(--ease-out) var(--d),transform 1.1s var(--ease-out) var(--d)}
[data-anim="clip"]{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-out) var(--d)}
[data-anim].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* буквы выезжают уже подкрашенными и остывают до основного цвета */
.word,.char{display:inline-block;transform:translateY(105%);opacity:0;color:var(--accent-soft);
  transition:transform .95s var(--ease-out),opacity .7s var(--ease-out),color 1.4s var(--ease)}
[data-anim].is-in .word,[data-anim].is-in .char{color:inherit}
.word-wrap{display:inline-block;overflow:hidden;vertical-align:bottom}
.word-box{display:inline-block;white-space:nowrap}
[data-anim].is-in .word,[data-anim].is-in .char{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important}
  .word,.char{transform:none!important;opacity:1!important}
  .lit{opacity:1!important}
  .grain{animation:none}
}

/* адаптив */
@media (max-width:1080px){
  .about__grid{grid-template-columns:1fr}
  .about__cite{text-align:left}
  .studio__inner{grid-template-columns:1fr}
  .review{grid-template-columns:1fr}
  .review__author{position:static;flex-direction:row;align-items:center}
  .review__author img{width:76px;height:76px}
  .release__body{grid-template-columns:1fr}
  .release__cover{max-width:280px}
  .track{grid-template-columns:30px 40px 1fr 48px 22px;gap:12px}
  .track__album{display:none}
}
@media (max-width:820px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .lang{margin-left:auto;margin-right:4px}
  .release__head{grid-template-columns:60px 1fr 24px;gap:12px}
  .release__kind{display:none}
  .hero__side{display:none}
  .manifest{height:280vh}
  .photo{height:520vh}
  .shot,.shot--tall,.shot--wide{width:72vw;height:56vh}
  .photo__head{flex-direction:column;align-items:flex-start;gap:6px}
  .photo__hint{margin-left:0}
  body.has-player{--player-height:76px}
  .player__inner{gap:10px;padding:10px 14px}
  .player__art{width:44px;height:44px}
  .player__time,.player__equalizer{display:none!important}
  .player__meta b{font-size:14px}
}