/* Главная */
.mh { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-end; align-items: center; padding-top: 16px; color: var(--muted); }

/* герой: лого-струны + об артисте */
/* первый экран: слева — лого-струны открытой стороной к свету, справа — foire.;
   свечение заходит под концы линий, и они подсвечиваются его цветом */
.hero-main {
  position: relative; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center;
  min-height: min(86svh, 900px); padding: 40px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) 40px;
  overflow-x: clip;
}
.hm-right { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.strings { position: relative; width: 100%; aspect-ratio: 450 / 324; touch-action: pan-y; cursor: crosshair; }
.strings-svg, .strings-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.strings-cv { opacity: 0; }
.strings.live .strings-cv { opacity: 1; }
.strings.live .strings-svg { opacity: 0; }
.hm-name { margin: 0 0 0 9%; font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -.02em; line-height: 1; color: #CFCFCF; }
.np { min-height: 20px; margin-left: 9%; color: var(--muted); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.np.on { opacity: 1; transform: none; }
.np::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--signal); vertical-align: 1px; }
@media (max-width: 760px) {
  .hero-main { grid-template-columns: 1fr; min-height: auto; padding-top: 24px; padding-bottom: 8px; gap: 0; }
  .hm-right { order: 1; align-items: center; }
  .strings { width: 92%; }
  .hm-name, .np { margin-left: 0; }
  .fo-band { order: 2; }
}
.hm-lines { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--muted); }

/* полоса статуса: цифры дискографии + поток данных */
.sig { display: grid; grid-template-columns: 1fr; gap: 24px 32px; padding-top: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--line); align-items: start; }
@media (max-width: 760px) { .sig { grid-template-columns: 1fr; } }
.sig-head { display: flex; align-items: center; gap: 10px; color: var(--muted); padding-top: 6px; }
.sig-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
.sig-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--signal); animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 70%, 100% { transform: scale(3.2); opacity: 0; } }
.sig-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .sig-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sig-stats dt { color: var(--muted); font-size: 11px; }
.sig-stats dd { margin: 8px 0 0; font-weight: 300; font-size: clamp(26px, 3.2vw, 48px); white-space: nowrap; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stream-main { grid-column: 1 / -1; height: 54px; overflow: hidden; border-top: 1px solid var(--line); padding-top: 12px; box-sizing: content-box; }
.stream canvas { display: block; }
/* релизы: типографский индекс — каждое название набрано языком своей обложки */
.rels { padding-top: 40px; }
.rels-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.ixs { border-bottom: 1px solid var(--line); }
.ix {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px 24px; align-items: center;
  padding: 14px 0 12px; border-top: 1px solid var(--line); color: var(--fg);
  transition: opacity .5s var(--ease);
}
.ix:hover { opacity: 1; }
@media (max-width: 640px) { .ix { grid-template-columns: 1fr auto; padding: 12px 0 10px; } .ix-t { grid-column: 1 / -1; grid-row: 2; } }
.ix-date, .ix-meta { color: var(--muted); }
.ix-meta { text-align: right; }
.ix-t {
  position: relative; display: block; min-width: 0;
  font-size: clamp(44px, 8.4vw, 136px); line-height: .92; letter-spacing: -.045em; font-weight: 300;
  transition: transform .7s var(--ease), letter-spacing .7s var(--ease), color .5s, text-shadow .7s, opacity .5s;
}
/* остальные строки гаснут, когда одна в фокусе */
.ixs:has(.ix:hover) .ix:not(:hover), .ixs.armed .ix:not(.on) { opacity: .18; }

/* пресейв: особая строка над всеми релизами — широкий гротеск, один цвет, мягкий смаз при наведении */
.ix-presave { isolation: isolate; position: relative; padding-top: 22px; padding-bottom: 20px; border-top-color: transparent; }
.ix-presave::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: linear-gradient(90deg, rgba(120, 70, 140, .22), transparent 75%); }
.ix-presave::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(239, 230, 243, .5), transparent 70%); }
.pv-pill { display: inline-block; padding: 5px 8px 4px; background: #EFE6F3; color: #0B0710; font-size: 10px; letter-spacing: .14em; }
.pv-pill.out { background: var(--signal); }
.ix-presave .ix-t {
  font-family: "Unbounded", var(--sans); font-weight: 500; font-size: clamp(38px, 6.8vw, 112px); letter-spacing: -.04em; line-height: .95;
  color: #E9DCF0; transition: text-shadow .8s var(--ease), letter-spacing .8s var(--ease);
}
.ix-presave:is(:hover, .on) .ix-t { text-shadow: 26px 0 18px rgba(214, 180, 232, .28), -38px 0 30px rgba(150, 90, 175, .25); letter-spacing: -.02em; }
.ix-presave .ix-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pv-when { color: var(--fg); }
.pv-left { color: #D9C2E6; font-variant-numeric: tabular-nums; }

.ix-wedding-song .ix-t { font-weight: 200; color: #F4ECF7; }
.ix-wedding-song:is(:hover, .on) .ix-t { color: #fff; text-shadow: 0 0 24px rgba(190, 255, 248, .9), 0 0 70px rgba(200, 120, 220, .7); }

.ix-fly-room .ix-t { background: linear-gradient(90deg, #EDEDED, #EDEDED 40%, #FF5A1F 55%, #9A7BE0 70%, #3B55D9 85%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.4s var(--ease), transform .7s var(--ease); }
.ix-fly-room:is(:hover, .on) .ix-t { background-position: 100% 0; }

.ix-modulator .ix-t { font-weight: 600; letter-spacing: -.05em; height: .92em; }
.ix-modulator .sl { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.ix-modulator .sl:nth-child(1) { clip-path: inset(0 0 64% 0); }
.ix-modulator .sl:nth-child(2) { clip-path: inset(36% 0 30% 0); transform: translateX(-6px); }
.ix-modulator .sl:nth-child(3) { position: relative; display: block; clip-path: inset(70% 0 0 0); transform: translateX(4px); }
.ix-modulator:is(:hover, .on) .sl:nth-child(1) { transform: translateX(22px); }
.ix-modulator:is(:hover, .on) .sl:nth-child(2) { transform: translateX(-34px); }
.ix-modulator:is(:hover, .on) .sl:nth-child(3) { transform: translateX(12px); }

.ix-sonicstate .ix-t { font-weight: 200; letter-spacing: .01em; color: #E4E8FF; }
.ix-sonicstate:is(:hover, .on) .ix-t { letter-spacing: .12em; text-shadow: -10px 0 26px rgba(127, 140, 214, .9); }

.ix-osvo .ix-t { font-weight: 300; }
.ix-osvo:is(:hover, .on) .ix-t { color: #3A3AFF; animation: focus 1.1s var(--ease) both; }
@keyframes focus { from { filter: blur(10px); } to { filter: blur(0); } }

.ix-sunset .ix-t { font-family: "Instrument Serif", serif; font-weight: 400; letter-spacing: -.02em; }
.ix-sunset .ix-t i { font-style: italic; }
.ix-sunset:is(:hover, .on) .ix-t { background: repeating-linear-gradient(0deg, #E6DFCC 0 2px, transparent 2px 4px); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ix-woldorf .ix-t { font-weight: 600; letter-spacing: -.05em; }
.ix-woldorf:is(:hover, .on) .ix-t { background: repeating-conic-gradient(#EDEDED 0 25%, #2C3E9A 0 50%) 0 0 / .25em .25em; -webkit-background-clip: text; background-clip: text; color: transparent; animation: chk .48s steps(1) infinite; }
@keyframes chk { 50% { background-position: .125em 0; } }

.ix-angels .ix-t { font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 5.6vw, 92px); letter-spacing: -.05em; }
.ix-angels:is(:hover, .on) .ix-t { background: radial-gradient(circle, #F2F2F2 42%, transparent 46%) 0 0 / 5px 5px; -webkit-background-clip: text; background-clip: text; color: transparent; }

.ix-aphet .ix-t { font-family: "Permanent Marker", cursive; font-weight: 400; letter-spacing: 0; transform-origin: 0 60%; }
.ix-aphet:is(:hover, .on) .ix-t { transform: rotate(-3deg) scale(1.04); color: #E9E4D8; }

.ix-waste .ix-t { font-weight: 600; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px #D9D9D9; }
.ix-waste:is(:hover, .on) .ix-t { -webkit-text-stroke: 1.5px #fff; animation: jit .18s steps(2) infinite; }
@keyframes jit { 50% { transform: translate(2px, -1px) skewX(-2deg); } }

.ix-semya .ix-t { font-family: "Caveat", cursive; font-weight: 500; letter-spacing: 0; color: #E2DAD4; }
.ix-semya:is(:hover, .on) .ix-t { animation: tv .4s steps(1) infinite; }
@keyframes tv { 0% { opacity: 1; transform: none; } 30% { opacity: .55; transform: translateX(-5px) skewX(8deg); } 60% { opacity: .9; transform: translateX(3px); } }

.ix-voices-215 .ix-t { font-family: var(--mono); font-weight: 400; letter-spacing: -.02em; transform-origin: 50% 0; }
.ix-voices-215:is(:hover, .on) .ix-t { transform: scaleY(1.22); color: #C9C4B8; }

/* обложка у курсора: сначала однобитный растр, потом цвет */
.fc { position: fixed; left: 0; top: 0; z-index: 20; width: clamp(180px, 20vw, 300px); aspect-ratio: 1; pointer-events: none; opacity: 0; transform: translate(-999px, -999px); transition: opacity .35s var(--ease); will-change: transform; }
.fc.on { opacity: 1; }
.fc canvas, .fc img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fc canvas { image-rendering: pixelated; }
.fc img { object-fit: cover; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .2s, clip-path .7s cubic-bezier(.7, 0, .2, 1); }
.fc.color img { opacity: 1; clip-path: inset(0 0 0 0); }

/* полоса-ссылка на foire.: светлое переливающееся «окно» в тёмной странице, края растворяются */
.fo-band { position: relative; z-index: 1; display: grid; place-items: center; height: clamp(320px, 58svh, 640px); isolation: isolate; color: #13202B; cursor: pointer; --mx: 50%; --my: 50%; }
.fo-band:hover { opacity: 1; }
.fb-sky {
  /* свечение шире колонки: слева мягко уходит под концы лого, справа — за край экрана */
  position: absolute; inset: -6% -30% -6% -38%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 70% at var(--mx) var(--my), rgba(255,255,255,.95), transparent 70%),
    radial-gradient(40% 90% at 18% 50%, rgba(143, 220, 184, .9), transparent 70%),
    radial-gradient(40% 90% at 82% 45%, rgba(183, 166, 240, .9), transparent 70%),
    radial-gradient(50% 110% at 52% 70%, rgba(79, 195, 217, .75), transparent 70%),
    #E9F2F5;
  /* края в тёмный фон страницы — сверху/снизу и по бокам */
  /* эллипс целиком внутри блока: к краям прозрачность 0 задолго до границы — нигде не режется */
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.55) 55%, transparent 98%);
  mask: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.55) 55%, transparent 98%);
  opacity: .82; transition: opacity .8s var(--ease), transform 1.2s var(--ease);
  animation: fb-drift 18s ease-in-out infinite alternate;
}
@keyframes fb-drift { to { background-position: 0 0, 6% 0, -6% 0, 0 4%, 0 0; } }
.fo-band:hover .fb-sky { opacity: 1; }
.fb-word { position: relative; z-index: 2; font-weight: 200; font-size: clamp(64px, 9vw, 168px); line-height: 1; letter-spacing: -.06em; transition: letter-spacing 1s var(--ease); }
.fo-band:hover .fb-word { letter-spacing: -.035em; }
.fb-drop {
  position: absolute; left: 0; top: 0; z-index: 3; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; pointer-events: none;
  transform: translate(var(--mx), var(--my)) scale(.4); opacity: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 10%, rgba(255,255,255,.2) 24%, rgba(170,225,240,.15) 60%, rgba(255,255,255,.55) 76%, rgba(255,255,255,0) 78%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 14px 26px rgba(30,70,100,.18);
  -webkit-backdrop-filter: blur(1px) saturate(1.6); backdrop-filter: blur(1px) saturate(1.6);
  transition: opacity .4s, transform .5s var(--ease);
}
.fo-band.aim .fb-drop { opacity: 1; transform: translate(var(--mx), var(--my)) scale(1); }
@media (max-width: 760px) {
  .fo-band { height: clamp(240px, 70vw, 340px); margin-top: -20px; }
  .fb-sky { inset: -10% -20%; }
  .fb-word { font-size: clamp(64px, 20vw, 110px); }
}