/* CH 02 · КЛИП — the music video / CD single. Real footage wall, thin italics, mono player UI. */
.ch2{
  --bg:#080107; --glow:#210014; --pink:#F9AADB; --pink-l:#FFD0EB; --mint:#96F2B0; --mint-d:#7DD89B;
  --muted:#B9A5B3; --line:rgba(255,255,255,.12);
  background:var(--bg);color:#fff;
}
.c2-wrap{max-width:1320px;margin-inline:auto;padding-inline:max(16px,4vw)}
.c2-mono{font:400 13px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mint)}

/* ---------- sticky player = navigation ---------- */
.c2-player{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2vw,26px);
  padding:10px max(16px,4vw);
  background:rgba(8,1,7,.86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);font:400 12px/1 var(--f-mono);letter-spacing:.04em}
.c2-player__logo{width:92px}
.c2-player__ctrls{display:flex;gap:6px}
.c2-player__ctrls button{width:32px;height:32px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:color .15s,box-shadow .15s}
.c2-player__ctrls button:hover{color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint)}
.c2-player__ctrls svg{width:13px;height:13px;fill:currentColor}
.c2-player__mid{display:grid;gap:8px;min-width:0}
.c2-player__row{display:flex;justify-content:space-between;gap:12px;white-space:nowrap}
.c2-player__now{overflow:hidden;text-overflow:ellipsis}
.c2-player__now b{color:var(--mint);font-weight:600}
.c2-player__row time{color:var(--muted);font-variant-numeric:tabular-nums}
.c2-player__bar{height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.c2-player__bar i{display:block;height:100%;background:var(--mint);transform-origin:left;transform:scaleX(0)}
.c2-player__rep{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;color:var(--mint);
  text-transform:uppercase;letter-spacing:.12em;box-shadow:inset 0 0 0 1px rgba(150,242,176,.4)}
.c2-player__rep svg{width:14px;height:14px;fill:currentColor;animation:c2-pulse 2.4s ease-in-out infinite}
@keyframes c2-pulse{50%{opacity:.4}}

/* ---------- hero: video wall ---------- */
.c2-hero{position:relative;overflow:hidden;isolation:isolate;display:grid}
.c2-wall{grid-area:1/1;z-index:-2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:#000}
.c2-wall video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#140410}
.c2-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(55% 50% at 50% 50%,rgba(8,1,7,.84),rgba(8,1,7,.5) 75%),
             linear-gradient(180deg,rgba(8,1,7,.2),transparent 25%,transparent 70%,var(--bg))}
.c2-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.c2-hero__title{grid-area:1/1;place-self:center;width:min(88%,900px);padding-block:32px;text-align:center;display:grid;justify-items:center}
.c2-hero__title .logo{width:100%;filter:drop-shadow(0 0 30px rgba(249,170,219,.25))}
.c2-hero__title .brand-sub{margin-top:clamp(12px,2vw,24px)}
.c2-official{display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(20px,3vw,34px);padding:7px 10px;
  font:400 12px/1 var(--f-mono);letter-spacing:.05em;color:rgba(255,255,255,.8);
  background:rgba(8,1,7,.6);box-shadow:inset 0 0 0 1px var(--line)}
.c2-official svg{width:10px;height:10px;fill:var(--mint)}

/* ---------- intro ---------- */
.c2-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end;padding-block:clamp(48px,7vw,104px)}
.c2-display{font:200 italic clamp(54px,9.4vw,140px)/.9 var(--f-display);letter-spacing:-.03em}
.c2-display em{color:var(--pink)}
.c2-intro__side>p+p{margin-top:16px}
.c2-intro__side>p:not(.c2-mono){color:var(--muted)}
.c2-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.c2-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 22px;text-decoration:none;
  background:var(--mint);color:#062611;font:600 13px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  transition:box-shadow .2s,background .2s,color .2s}
.c2-btn svg{width:14px;height:14px;fill:currentColor}
.c2-btn:hover{box-shadow:0 0 0 4px rgba(150,242,176,.16),0 0 40px rgba(150,242,176,.35)}
.c2-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.c2-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--mint);color:var(--mint)}
.c2-btn--big{padding:20px 28px;font-size:14px}

/* ---------- track sections ---------- */
.c2-sec{padding-block:clamp(64px,9vw,128px)}
.c2-th{display:grid;gap:16px;margin-bottom:clamp(34px,4.5vw,60px)}
.c2-th span{display:flex;align-items:center;gap:14px;font:400 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.c2-th span::after{content:"";flex:1;height:1px;background:var(--line)}
.c2-th h2{font:300 italic clamp(42px,6vw,90px)/.95 var(--f-display);letter-spacing:-.02em}

.c2-lede{font:500 clamp(24px,2.8vw,40px)/1.3 var(--f-body);max-width:920px}
.c2-lede mark{background:none;color:var(--pink)}
.c2-facts{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.c2-facts li{border-top:1px solid var(--line);padding-top:22px}
.c2-facts .star{width:18px;height:18px;color:var(--mint)}
.c2-facts h3{margin:16px 0 8px;font:600 italic 24px/1.2 var(--f-display)}
.c2-facts p{color:var(--muted)}

/* set-list: CD + tracklist */
.c2-setlist{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.c2-cdwrap{position:sticky;top:110px}
.c2-cd{width:100%;max-width:470px;aspect-ratio:1;will-change:transform;filter:drop-shadow(0 30px 70px rgba(249,170,219,.18))}
.ch2 [data-track]{scroll-margin-top:60px}
.c2-nowplaying{margin-top:26px;display:grid;gap:8px}
.c2-nowplaying span{font:400 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.c2-nowplaying b{font:300 italic clamp(24px,2.4vw,32px)/1.15 var(--f-display)}
.c2-tracks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.c2-tracks button{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;text-align:left;
  padding:16px 6px;border-bottom:1px solid var(--line);transition:background .15s}
.c2-tracks .no,.c2-tracks .yr{font:400 13px/1 var(--f-mono);color:var(--muted)}
.c2-tracks .ti b{display:block;font:600 19px/1.25 var(--f-body);transition:color .15s}
.c2-tracks .ti i{font-style:normal;font-size:15px;color:var(--muted)}
.c2-tracks button:hover{background:rgba(255,255,255,.03)}
.c2-tracks button:hover .ti b{color:var(--pink)}
.c2-tracks .is-playing .ti b{color:var(--mint)}
.c2-tracks .is-playing .no{font-size:0}
.c2-tracks .is-playing .no::before{content:"";display:inline-block;width:15px;height:14px;
  background:linear-gradient(var(--mint),var(--mint)) 0 100%/3px 60% no-repeat,
             linear-gradient(var(--mint),var(--mint)) 6px 100%/3px 100% no-repeat,
             linear-gradient(var(--mint),var(--mint)) 12px 100%/3px 40% no-repeat;
  animation:c2-eq .8s steps(1) infinite}
@keyframes c2-eq{
  0%{background-size:3px 60%,3px 100%,3px 40%}
  33%{background-size:3px 100%,3px 35%,3px 80%}
  66%{background-size:3px 30%,3px 70%,3px 100%}}
.c2-note{margin-top:20px;font:400 13px/1.5 var(--f-mono);color:var(--muted)}

/* how a class goes: editor timeline */
.c2-class{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:start}
.c2-phone{position:relative;margin:0;aspect-ratio:16/9;background:#000;box-shadow:0 0 0 1px var(--line)}
.c2-phone video{width:100%;height:100%;object-fit:cover}
.c2-phone figcaption{position:absolute;left:12px;bottom:12px;padding:7px 9px;background:rgba(8,1,7,.72);font:400 12px/1 var(--f-mono);letter-spacing:.05em}
.c2-tl{position:relative;margin-bottom:clamp(34px,4vw,52px)}
.c2-tl__ruler{display:flex;justify-content:space-between;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line);
  font:400 11px/1 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.c2-tl__track{display:flex;gap:2px;height:66px}
.c2-tl__track span{flex:var(--d) 1 0;min-width:max-content;display:flex;align-items:flex-end;padding:8px 10px;overflow:hidden;white-space:nowrap;
  color:#1a0010;font:600 12px/1 var(--f-mono);letter-spacing:.03em;
  background-image:repeating-linear-gradient(90deg,rgba(33,0,20,.1) 0 1px,transparent 1px 5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.c2-tl__track .k1{background-color:var(--pink)}
.c2-tl__track .k2{background-color:var(--mint)}
.c2-tl__track .k3{background-color:var(--pink-l)}
.c2-tl__track .k4{background-color:var(--mint-d)}
.c2-tl__track .k5{background-color:#fff}
.c2-tl__head{position:absolute;top:22px;bottom:-6px;left:0;width:2px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.8);animation:c2-play 16s linear infinite}
.c2-tl__head::before{content:"";position:absolute;top:-6px;left:-5px;border:6px solid transparent;border-top-color:#fff}
@keyframes c2-play{from{left:0}to{left:calc(100% - 2px)}}
.c2-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.c2-steps li{display:grid;grid-template-columns:64px minmax(0,15em) minmax(0,1fr);gap:8px 20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.c2-steps span{font:400 13px/1 var(--f-mono);color:var(--mint);font-variant-numeric:tabular-nums}
.c2-steps h3{font:600 italic 21px/1.2 var(--f-display)}
.c2-steps p{font-size:16px;line-height:1.5;color:var(--muted)}

/* for you if */
.c2-you{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.c2-you li{display:flex;gap:clamp(14px,2vw,28px);align-items:center;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  font:300 italic clamp(28px,4.4vw,64px)/1.05 var(--f-display);letter-spacing:-.015em;transition:padding .25s ease}
.c2-you li:hover{padding-left:14px}
.c2-you .star{width:.45em;height:.45em;color:var(--mint)}
.c2-you em{color:var(--pink)}

.c2-interlude{padding-block:clamp(84px,12vw,180px);background:radial-gradient(60% 90% at 25% 50%,var(--glow),transparent 70%)}
.c2-interlude p{margin-top:22px;font:200 italic clamp(46px,8vw,128px)/.95 var(--f-display);letter-spacing:-.03em;max-width:11ch}
.c2-interlude em{color:var(--pink)}

/* faq */
.ch2 .faq{max-width:940px;counter-reset:q;border-top:1px solid var(--line)}
.ch2 .faq details{border-bottom:1px solid var(--line)}
.ch2 .faq summary{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:22px 0;
  font:600 clamp(18px,1.8vw,22px)/1.3 var(--f-body)}
.ch2 .faq summary::before{counter-increment:q;content:"Q." counter(q,decimal-leading-zero);font:400 12px/1 var(--f-mono);color:var(--mint)}
.ch2 .faq summary::after{content:"+";font:300 26px/1 var(--f-mono);color:var(--pink);transition:transform .2s}
.ch2 .faq details[open] summary::after{transform:rotate(45deg)}
.ch2 .faq summary:hover{color:var(--pink)}
.ch2 .faq details p{padding:0 0 24px 68px;color:var(--muted);max-width:68ch}

/* bonus track */
.c2-bonus{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
.c2-bonus p{color:var(--muted);max-width:46ch;margin-bottom:32px}
.c2-mic{width:100%;max-width:360px;justify-self:center;animation:c2-float 6s ease-in-out infinite;filter:drop-shadow(0 0 50px rgba(249,170,219,.22))}
@keyframes c2-float{50%{transform:translateY(-14px) rotate(-3deg)}}

.c2-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding-block:40px;border-top:1px solid var(--line);
  font:400 12px/1.6 var(--f-mono);color:var(--muted)}
.c2-foot .logo{width:130px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .c2-intro,.c2-setlist,.c2-class,.c2-bonus{grid-template-columns:minmax(0,1fr)}
  .c2-facts{grid-template-columns:minmax(0,1fr)}
  .c2-cdwrap{position:static;display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center}
  .c2-nowplaying{margin-top:0}
  .c2-mic{max-width:220px}
}
@media (max-width:640px){
  .c2-player{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .c2-player__logo{display:none}
  .c2-player__row time{display:none}
  .c2-player__rep span{display:none}
  .c2-wall{grid-template-columns:minmax(0,1fr)}
  .c2-wall video:nth-child(n+3){display:none}
  .c2-tl__track span{font-size:0;padding:0}
  .c2-steps li{grid-template-columns:52px minmax(0,1fr)}
  .c2-steps p{grid-column:2}
  .ch2 .faq summary{grid-template-columns:44px minmax(0,1fr) auto}
  .ch2 .faq details p{padding-left:0}
}