/* ==========================================================================
   ШРИФТЫ — свои, а не с fonts.googleapis.com
   Тот же набор подмножеств и unicode-range, что отдаёт Google, но без
   блокирующего запроса к чужому домену. Обновить: tools/fonts.py
   ========================================================================== */

/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/anton-400-vietnamese.woff2?v=82cc85bd) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/anton-400-latin-ext.woff2?v=0d17b788) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/anton-400-latin.woff2?v=d0fa07ff) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-cyrillic-ext.woff2?v=62213be8) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-cyrillic.woff2?v=e17cfd15) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-greek.woff2?v=0a557721) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-vietnamese.woff2?v=c89b9cc0) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-latin-ext.woff2?v=db5ff4db) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-latin.woff2?v=83c005d4) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-cyrillic-ext.woff2?v=62213be8) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-cyrillic.woff2?v=e17cfd15) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-greek.woff2?v=0a557721) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-vietnamese.woff2?v=c89b9cc0) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-latin-ext.woff2?v=db5ff4db) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-latin.woff2?v=83c005d4) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-vietnamese.woff2?v=8895e3d4) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-latin-ext.woff2?v=952dddb4) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-latin.woff2?v=06408904) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-vietnamese.woff2?v=8895e3d4) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-latin-ext.woff2?v=952dddb4) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-latin.woff2?v=06408904) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-vietnamese.woff2?v=8895e3d4) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-latin-ext.woff2?v=952dddb4) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-latin.woff2?v=06408904) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   phreshboys.fun — тёмный гранж / плёнка / серебро
   ========================================================================== */

:root{
  /* палитра снята с фотографии: тёплый уголь, пыльная роза, слива, серебро */
  --ink:      #070508;
  --ink-2:    #0d0910;
  --smoke:    #1a141d;
  --ash:      #2b222f;
  --rose:     #c98ba0;
  --rose-dim: #8d6273;
  --plum:     #6f4d78;
  --silver:   #ded8e4;
  --silver-2: #9a92a4;
  --txt:      #efe9f0;
  --txt-dim:  #a397a8;

  --online:   #7fd48c;
  --idle:     #e6b566;
  --dnd:      #e2707f;
  --offline:  #6d6474;

  --f-disp: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-ui:   'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;


  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);   /* мягкое затухание, без рывка */
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--f-ui);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100svh;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }

[hidden]{ display:none !important; }

::selection{ background:var(--rose); color:#140f16; }

/* тонкий скроллбар */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--ash); border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--plum); }

/* ==========================================================================
   ФОН
   ========================================================================== */

.scene{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  /* перерисовка внутри сцены не выходит за её пределы */
  contain:layout paint style;
}

/* --------------------------------------------------------------------------
   Дальний слой.
   Раньше здесь висел filter: blur(38px) на полноэкранной картинке — самая
   дорогая операция страницы. Теперь размытие запечено в bg-far.webp (240px,
   2 КБ), а браузер просто растягивает её. Цветокоррекция ушла в те же
   пиксели при экспорте... кроме тона — его дешевле держать здесь, потому
   что это не свёртка, а попиксельная операция, и она кэшируется в слое.
   -------------------------------------------------------------------------- */
.scene__far{
  position:absolute; inset:-10%;
  background:url('/assets/img/bg-far.webp?v=8c5474be') center 22% / cover no-repeat;
  filter:saturate(.62) contrast(1.12) brightness(.42) hue-rotate(-8deg);
  transform:scale(1.22) translate3d(0,0,0);
  transition:transform .9s var(--ease);
  will-change:transform;
}

/* --------------------------------------------------------------------------
   «Пятно света».
   Раньше: полноэкранный слой с mask-image, центр которой = координаты курсора.
   Маска менялась каждый кадр → полная перерастеризация размытого слоя.
   Теперь: блок фиксированного размера со статичной маской едет за курсором,
   а картинка внутри едет ровно навстречу — визуально она стоит на месте.
   Обе трансформации композитятся на GPU, перерисовки нет вообще.
   -------------------------------------------------------------------------- */
.scene__spot{
  position:absolute; left:0; top:0;
  width:640px; height:640px;          /* радиус маски 320px в обе стороны */
  opacity:0;
  transition:opacity .6s ease;
  will-change:transform;
  -webkit-mask-image:radial-gradient(320px 320px at 50% 50%, #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
          mask-image:radial-gradient(320px 320px at 50% 50%, #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
}
html[data-fx-spot="on"] .scene__spot{ opacity:1; }

.scene__spot-i{
  position:absolute; left:0; top:0; display:block;
  background:url('/assets/img/bg-near.webp?v=240e4190') center 22% / cover no-repeat;
  filter:saturate(.9) contrast(1.2) brightness(.66);
  transition:transform .55s var(--ease);
  will-change:transform;
}

/* --------------------------------------------------------------------------
   Цветокоррекция.
   Неподвижные градиенты остались здесь и рисуются один раз.
   Тёплое пятно, которое ходило за курсором, вынесено в отдельный слой.
   -------------------------------------------------------------------------- */
.scene__grade{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 8%,  rgba(111,77,120,.30), transparent 62%),
    radial-gradient(110% 80% at 50% 108%, rgba(120,70,60,.22), transparent 60%),
    linear-gradient(180deg, rgba(7,5,8,.55) 0%, rgba(7,5,8,.72) 46%, rgba(7,5,8,.94) 100%);
}

.scene__warm{
  position:absolute; left:0; top:0;
  width:1120px; height:1120px;        /* градиент гаснет на 68% от 560px */
  background:radial-gradient(560px 560px at 50% 50%, rgba(201,139,160,.16), transparent 68%);
  will-change:transform;
}

.scene__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.scene__grain{ opacity:.30; mix-blend-mode:overlay; image-rendering:pixelated; }

/* --------------------------------------------------------------------------
   Строчная развёртка.
   Раньше анимировался background-position — это перерисовка полного экрана
   каждый кадр. Теперь полосы лежат на блоке с запасом сверху и просто едут
   трансформом на ту же величину за то же время.
   -------------------------------------------------------------------------- */
.scene__scan{ position:absolute; inset:0; opacity:.22; overflow:hidden; }
.scene__scan i{
  position:absolute; left:0; right:0; top:-300px; bottom:0;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px);
  animation:scan 9s linear infinite;
  will-change:transform;
}
@keyframes scan{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,300px,0); } }

.scene__vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 105% at 50% 46%, transparent 38%, rgba(0,0,0,.62) 78%, #000 100%);
}

/* ==========================================================================
   БОКОВЫЕ РЕЙКИ
   ========================================================================== */

.rail{
  position:fixed; top:0; bottom:0; width:34px; z-index:4;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  opacity:0; animation:railIn 1.2s var(--ease) 1.5s forwards;
}
.rail--l{ left:0; }
.rail--r{ right:0; }
.rail__t{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--silver-2); opacity:.42;
  white-space:nowrap;
}
.rail__t i{ color:var(--rose); font-style:normal; opacity:.9; }
.rail--l .rail__t{ transform:rotate(180deg); writing-mode:vertical-rl; }
.rail--r .rail__t{ writing-mode:vertical-rl; }
@keyframes railIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }

/* ==========================================================================
   HUD
   ========================================================================== */

.hud{
  position:fixed; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(22px,4vw,44px);
  pointer-events:none;
}
.hud__mark{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.30em;
  color:var(--silver-2);
}
.hud__glyph{ width:19px; height:19px; color:var(--rose); }
.hud__clock{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--silver-2);
}
.hud__dot{
  width:6px; height:6px; border-radius:50%; background:var(--rose);
  box-shadow:0 0 10px var(--rose);
  animation:blip 2.4s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.28; transform:scale(.7);} }

/* ==========================================================================
   СЦЕНА / КАРТОЧКА
   ========================================================================== */

.stage{
  position:relative; z-index:5;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:76px clamp(18px,5vw,40px) 58px;
  perspective:1200px;
}

.card{
  position:relative;
  width:min(560px,100%);
  border-radius:26px;
  transform-style:preserve-3d;
  transform:translateZ(0);
  /* Значение трансформа пишет JS готовой строкой (см. tilt()): calc() с
     переменными пересчитывался бы на каждом кадре. Здесь — только
     сшивание соседних кадров. */
  transition:transform .35s var(--ease-soft);
  will-change:transform;
}
/* возврат в покой — чуть длиннее */
.card.is-resting{ transition:transform .6s cubic-bezier(.18,.7,.24,1); }

/* мягкое свечение под карточкой.
   Сделано на box-shadow, а не на размытом слое: тень выходит за карточку,
   но не создаёт лишней прокрутки страницы. */
.card__glow{
  position:absolute; inset:9% 7% 7%;
  border-radius:50%;
  pointer-events:none;
  transform:translateZ(-40px);
  box-shadow:
    0 0 100px 46px rgba(111,77,120,.40),
    0 46px 120px 26px rgba(201,139,160,.13);
}

/* «цепь»: вращающаяся серебряная кайма.
   Раньше анимировался угол конического градиента через @property — это
   заново рисует градиент каждый кадр. Теперь градиент рисуется один раз,
   а крутится сам элемент: чистая композиция на GPU. Визуально то же самое —
   вращение конического градиента и есть поворот. */
.card__ring{
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  overflow:hidden; pointer-events:none; z-index:2;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.card__ring i{
  position:absolute; left:50%; top:50%;
  width:160%; aspect-ratio:1; min-width:160%;
  margin:-80% 0 0 -80%;
  background:conic-gradient(
      transparent 0deg, rgba(222,216,228,.75) 22deg, rgba(201,139,160,.55) 48deg,
      transparent 96deg, transparent 190deg, rgba(222,216,228,.42) 216deg,
      transparent 268deg, transparent 360deg);
  animation:spin 9s linear infinite;
  will-change:transform;
}
@keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.card__inner{
  position:relative; z-index:1;
  border-radius:inherit;
  padding:clamp(20px,4vw,30px);
  background:
    linear-gradient(180deg, rgba(43,34,47,.60), rgba(10,7,12,.78));
  border:1px solid rgba(222,216,228,.09);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -40px 90px -50px rgba(201,139,160,.5) inset,
    0 40px 90px -30px rgba(0,0,0,.9),
    0 4px 22px rgba(0,0,0,.6);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  overflow:hidden;
}

/* блик, который ходит за курсором по стеклу.
   Градиент нарисован один раз на блоке 920x660 и просто едет за курсором. */
.card__glare{
  position:absolute; left:0; top:0; z-index:3;
  width:920px; height:660px;
  background:radial-gradient(460px 330px at 50% 50%, rgba(255,255,255,.085), transparent 62%);
  opacity:0; pointer-events:none;
  transition:opacity 1s var(--ease-soft);
  will-change:transform;
}
.card:hover .card__glare{ opacity:1; }

/* ==========================================================================
   ШАПКА ПРОФИЛЯ
   ========================================================================== */

.hero{ display:flex; align-items:center; gap:clamp(16px,3.4vw,24px); }

.hero__ava{ position:relative; flex:0 0 auto; width:clamp(84px,19vw,104px); aspect-ratio:1; }

.ava__ring{
  position:absolute; inset:-7px; border-radius:50%;
  background:conic-gradient(var(--rose), var(--silver), var(--plum), var(--rose));
  animation:spin 6s linear infinite;
  opacity:.85;
  will-change:transform;
  -webkit-mask:radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 2px));
          mask:radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 2px));
}
.hero__ava::after{  /* внешнее гало */
  content:''; position:absolute; inset:-18px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,139,160,.32), transparent 68%);
  filter:blur(10px); pointer-events:none;
}
.ava__shot{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  border:2px solid rgba(7,5,8,.9);
  box-shadow:0 10px 30px rgba(0,0,0,.72);
  z-index:1;
}
.ava__shot img{
  width:100%; height:100%; object-fit:cover; object-position:50% 26%;
  filter:contrast(1.1) saturate(1.02);
  transition:transform .8s var(--ease), filter .5s ease;
}
.hero__ava:hover .ava__shot img{ transform:scale(1.09); filter:contrast(1.2) saturate(1.12); }

.ava__badge{
  position:absolute; right:2px; bottom:2px; z-index:3;
  width:20px; height:20px; border-radius:50%;
  background:var(--offline);
  border:3.5px solid #0b070d;
  transition:background .4s ease, box-shadow .4s ease;
}
.ava__badge[data-state="online"]{ background:var(--online); box-shadow:0 0 14px rgba(127,212,140,.8); }
.ava__badge[data-state="idle"]  { background:var(--idle);   box-shadow:0 0 14px rgba(230,181,102,.7); }
.ava__badge[data-state="dnd"]   { background:var(--dnd);    box-shadow:0 0 14px rgba(226,112,127,.7); }

.hero__id{ min-width:0; }

/* --- ник: серебро с хромовым переливом, слои под glitch/decrypt --- */
.nick{
  position:relative;
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(38px,10.5vw,60px); line-height:.92;
  letter-spacing:.006em; text-transform:lowercase;
  cursor:default;
}
/* невидимый размерник: не даёт блоку прыгать, пока символы перебираются */
.nick__sizer{ display:block; visibility:hidden; pointer-events:none; }

.nick__t{
  position:absolute; inset:0;
  white-space:nowrap;
}
.nick__t--m{
  background:linear-gradient(178deg,
    #ffffff 0%, #e7e1ee 16%, #a99fb2 34%, #5d5468 47%,
    #ffffff 56%, #c6bccd 70%, #8d8397 84%, #efe9f4 100%);
  background-size:100% 260%;
  background-position:0 var(--chrome,20%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  transition:background-position .9s var(--ease);
}
/* призраки rgb-сдвига: живут постоянно, чуть заметно дышат */
.nick__t--r,.nick__t--b{
  mix-blend-mode:screen; pointer-events:none;
  opacity:var(--ghost,.16);
  transition:opacity .5s var(--ease-soft), transform .35s var(--ease-soft);
}
.nick__t--r{ color:rgba(226,112,127,.9); transform:translate(-1.2px,.6px); }
.nick__t--b{ color:rgba(120,150,235,.9); transform:translate(1.2px,-.6px); }

/* во время рассыпания символов сдвиг разъезжается сильнее */
.nick.is-glitch{ --ghost:.85; }
.nick.is-glitch .nick__t--r{ transform:translate(-3px,1.2px); }
.nick.is-glitch .nick__t--b{ transform:translate(3px,-1.2px); }

/* блик, который проносится по буквам во время рассыпания */
.nick__t--s{
  background:linear-gradient(100deg,
    transparent 36%, rgba(255,255,255,.55) 46%,
    #ffffff 50%, rgba(255,255,255,.55) 54%, transparent 64%);
  background-size:260% 100%;
  background-position:130% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  mix-blend-mode:screen; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
}
.nick.is-glitch .nick__t--s{
  opacity:1;
  animation:nickShine .58s linear infinite;
}
@keyframes nickShine{ from{ background-position:130% 0; } to{ background-position:-50% 0; } }

/* хромовый градиент во время glitch гоняется туда-сюда заметно быстрее */
.nick.is-glitch .nick__t--m{ animation:nickChrome .46s linear infinite; }
@keyframes nickChrome{ from{ background-position:0 0%; } to{ background-position:0 100%; } }

.nick:hover .nick__t--m{ background-position:0 78%; }
.nick:hover{ --ghost:.6; }

/* --- статус --- */
.status{
  display:flex; align-items:center; gap:10px;
  margin-top:10px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.20em;
  text-transform:lowercase; color:var(--txt-dim);
}
.status__eq{ display:flex; align-items:flex-end; gap:2px; height:13px; }
.status__eq i{
  width:2.5px; border-radius:2px;
  background:var(--st, var(--rose));
  box-shadow:0 0 8px var(--st, rgba(201,139,160,.75));
  animation:eq 1.1s ease-in-out infinite;
}
.status[data-state="online"] { --st:var(--online); }
.status[data-state="idle"]   { --st:var(--idle);   }
.status[data-state="dnd"]    { --st:var(--dnd);    }
.status[data-state="offline"]{ --st:var(--offline); }
/* не в сети — палочки замирают */
.status[data-state="offline"] .status__eq i{ animation-play-state:paused; opacity:.6; }
.status__eq i:nth-child(1){ height:5px;  animation-delay:0s;    }
.status__eq i:nth-child(2){ height:11px; animation-delay:.16s;  }
.status__eq i:nth-child(3){ height:7px;  animation-delay:.32s;  }
.status__eq i:nth-child(4){ height:12px; animation-delay:.48s;  }
@keyframes eq{ 0%,100%{ transform:scaleY(.35);} 50%{ transform:scaleY(1);} }

/* --- чипы --- */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.chip{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--silver-2);
  padding:4px 9px; border-radius:999px;
  border:1px solid rgba(222,216,228,.13);
  background:rgba(222,216,228,.035);
  transition:border-color .3s ease, color .3s ease, transform .3s var(--ease);
}
.chip b{ color:var(--txt); font-weight:700; }
.chip:hover{ border-color:rgba(201,139,160,.5); color:var(--txt); transform:translateY(-2px); }
.chip--live{ color:#ffd9e2; border-color:rgba(226,112,127,.45); background:rgba(226,112,127,.10); }

/* --- разделитель --- */
.rule{ display:flex; align-items:center; gap:6px; margin:19px 0 17px; }
.rule i{ height:1px; background:linear-gradient(90deg,transparent,rgba(222,216,228,.22),transparent); }
.rule i:nth-child(1){ flex:1; }
.rule i:nth-child(2){ width:22px; background:var(--rose); opacity:.55; }
.rule i:nth-child(3){ flex:1; }

/* ==========================================================================
   БЛОКИ
   ========================================================================== */

.block{ margin-bottom:15px; }
.block__cap{
  font-family:var(--f-mono); font-size:9.5px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--silver-2);
  opacity:.62; margin-bottom:9px; padding-left:2px;
}

/* --- DISCORD --- */
.dc{
  position:relative; overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(222,216,228,.10);
  background:linear-gradient(180deg, rgba(26,20,29,.85), rgba(10,7,12,.85));
  transition:border-color .7s var(--ease-soft), transform .8s var(--ease-soft), box-shadow .8s var(--ease-soft);
}
.dc:hover{
  border-color:rgba(201,139,160,.34);
  transform:translateY(-2px);
  box-shadow:0 18px 40px -26px rgba(201,139,160,.6);
}
.dc__banner{
  height:46px;
  background:
    linear-gradient(120deg, rgba(111,77,120,.85), rgba(201,139,160,.4) 42%, rgba(26,20,29,.9)),
    url('/assets/img/dc-banner.webp?v=2d919ddc') center 30% / cover;
  filter:saturate(.75) brightness(.6);   /* размытие уже в картинке */
  opacity:.8;
}
.dc__row{ display:flex; align-items:center; gap:12px; padding:0 14px 14px; margin-top:-20px; }

.dc__ava{ position:relative; flex:0 0 auto; width:52px; height:52px; }
.dc__ava img{
  width:100%; height:100%; border-radius:16px; object-fit:cover; object-position:50% 26%;
  border:3px solid #0b070d;
}
.dc__state{
  position:absolute; right:-3px; bottom:-3px;
  width:15px; height:15px; border-radius:50%;
  background:var(--offline); border:3px solid #0b070d;
  transition:background .4s ease, box-shadow .4s ease;
}
.dc__state[data-state="online"]{ background:var(--online); box-shadow:0 0 10px rgba(127,212,140,.75); }
.dc__state[data-state="idle"]  { background:var(--idle);   box-shadow:0 0 10px rgba(230,181,102,.7); }
.dc__state[data-state="dnd"]   { background:var(--dnd);    box-shadow:0 0 10px rgba(226,112,127,.7); }

.dc__meta{ min-width:0; flex:1; padding-top:18px; }
.dc__name{ display:block; font-weight:700; font-size:15px; letter-spacing:.01em; }
.dc__sub{
  display:block; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.10em; color:var(--txt-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.dc__btn{
  position:relative; overflow:hidden; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:7px;
  margin-top:18px; padding:9px 14px;
  border-radius:11px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:#150f18;
  background:linear-gradient(180deg,#efe9f2,#b9b0c2);
  box-shadow:0 6px 18px -8px rgba(222,216,228,.7), 0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .35s var(--ease), box-shadow .35s ease, filter .35s ease;
  white-space:nowrap;
}
.dc__btn svg{ width:17px; height:17px; }
.dc__btn:hover{ filter:brightness(1.06); box-shadow:0 12px 26px -8px rgba(201,139,160,.85), 0 1px 0 rgba(255,255,255,.7) inset; }
.dc__btn:active{ transform:scale(.97); }
.dc__btn-sh{
  position:absolute; top:0; left:0; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform:translateX(-200%) skewX(-18deg);
}
.dc__btn:hover .dc__btn-sh{ animation:sheen .8s var(--ease) forwards; }
@keyframes sheen{
  from{ transform:translateX(-200%) skewX(-18deg); }
  to  { transform:translateX(250%)  skewX(-18deg); }
}

.dc__act{
  display:flex; align-items:center; gap:10px;
  margin:0 14px 14px; padding:9px 11px;
  border-radius:12px;
  background:rgba(222,216,228,.05);
  border:1px solid rgba(222,216,228,.08);
}
.dc__act-art{ flex:0 0 auto; width:36px; height:36px; border-radius:8px; overflow:hidden; background:var(--ash); }
.dc__act-art img{ width:100%; height:100%; object-fit:cover; }
.dc__act-meta{ min-width:0; display:flex; flex-direction:column; }
.dc__act-meta b{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc__act-meta i{
  font-style:normal; font-family:var(--f-mono); font-size:10px;
  color:var(--txt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- ПЛЕЕР --- */
.player{
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(222,216,228,.10);
  background:linear-gradient(180deg, rgba(26,20,29,.9), rgba(10,7,12,.9));
  transition:border-color .7s var(--ease-soft), box-shadow .8s var(--ease-soft);
}
.player:hover{ border-color:rgba(201,139,160,.3); box-shadow:0 18px 40px -28px rgba(201,139,160,.55); }
.player.is-playing{ border-color:rgba(201,139,160,.34); }

/* верхняя планка: индикатор + эквалайзер */
.player__bar{
  display:flex; align-items:center; gap:10px;
  padding:9px 13px;
  border-bottom:1px solid rgba(222,216,228,.07);
  background:rgba(0,0,0,.28);
}
.player__led{
  width:7px; height:7px; border-radius:50%; background:var(--offline);
  transition:background .4s ease, box-shadow .4s ease;
}
.player.is-playing .player__led{
  background:var(--rose); box-shadow:0 0 10px var(--rose);
  animation:blip 1.8s ease-in-out infinite;
}
/* Эквалайзер — один canvas вместо четырнадцати элементов.
   Раньше каждый кадр в 14 узлов писался inline-стиль: это 840 инвалидаций
   стиля в секунду при играющем треке. Рисунок остался тот же — те же
   полосы, тот же градиент, тот же спад до 14% на паузе. */
.player__wave{
  flex:1; height:16px; min-width:0;
  display:block;
}

.player__tag{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--silver-2); opacity:.6;
  white-space:nowrap;
  transition:color .5s ease, opacity .5s ease;
}
.player.is-playing .player__tag{ color:var(--rose); opacity:.9; }

.player__count{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  color:var(--silver-2); opacity:.45; white-space:nowrap;
  padding-left:1px;
}

/* тело */
.player__body{ display:flex; align-items:center; gap:13px; padding:13px; }

/* транспорт: prev — пластинка — next */
.player__transport{ display:flex; align-items:center; gap:5px; flex:0 0 auto; }

.player__nav{
  padding:0; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  color:var(--silver-2);
  transition:color .35s ease, transform .45s var(--ease-soft), opacity .35s ease;
}
.player__nav svg{ width:19px; height:19px; display:block; }
.player__nav:hover{ color:var(--txt); transform:scale(1.16); }
.player__nav:active{ transform:scale(.9); }
.player__nav:disabled{ opacity:.22; cursor:default; transform:none; }
.player__nav:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:6px; }
#prevBtn:hover{ transform:scale(1.16) translateX(-2px); }
#nextBtn:hover{ transform:scale(1.16) translateX(2px); }

/* «пластинка» = кнопка play/pause */
.player__disc{
  position:relative; flex:0 0 auto;
  width:54px; height:54px; padding:0;
  border-radius:50%; overflow:hidden;
  border:1px solid rgba(222,216,228,.22);
  background:#0b070d; cursor:pointer;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.9);
  transition:transform .6s var(--ease-soft), box-shadow .6s var(--ease-soft), border-color .5s ease;
}
/* обёртка обложки: её сдвигает JS при смене трека,
   вращение остаётся на самой картинке и не конфликтует */
.player__art{ position:absolute; inset:0; display:block; }
.player__disc img{
  width:100%; height:100%; object-fit:cover; object-position:50% 26%;
  filter:brightness(.6) contrast(1.1);
  transition:filter .5s ease;
}
.player.is-playing .player__disc img{ animation:disc 11s linear infinite; }

/* пока трек меняется — ползунок и наведение не мешают */
.player.is-swapping .player__seek{ pointer-events:none; }
.player.is-swapping .player__disc{ border-color:rgba(201,139,160,.5); }
@keyframes disc{ to{ transform:rotate(360deg); } }

.player__disc::after{  /* дырка пластинки */
  content:''; position:absolute; top:50%; left:50%; z-index:3;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:#0b070d;
  box-shadow:0 0 0 1px rgba(222,216,228,.25);
  opacity:0; transition:opacity .5s ease;
}
.player.is-playing .player__disc::after{ opacity:1; }
.player__disc:hover{
  border-color:rgba(201,139,160,.6);
  transform:scale(1.05);
  box-shadow:0 12px 28px -10px rgba(201,139,160,.7);
}
.player__disc:active{ transform:scale(.97); }
.player__disc:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }

.player__ic{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  color:var(--txt);
  background:radial-gradient(circle at 50% 50%, rgba(10,7,12,.5), rgba(10,7,12,.72));
  transition:color .3s ease, background .4s ease, opacity .3s ease;
}
.player__ic .ic{ width:22px; height:22px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.9)); }
.player__disc:hover .player__ic{
  color:#fff;
  background:radial-gradient(circle at 50% 50%, rgba(10,7,12,.28), rgba(10,7,12,.6));
}
.ic--pause{ display:none; }
.player.is-playing .ic--play{ display:none; }
.player.is-playing .ic--pause{ display:block; }

/* колечко загрузки */
.player__spinner{
  position:absolute; inset:-1px; z-index:4; border-radius:50%;
  border:1.5px solid transparent; border-top-color:var(--rose);
  opacity:0; transition:opacity .3s ease;
}
.player.is-loading .player__spinner{ opacity:1; animation:spin360 .85s linear infinite; }
.player.is-loading .player__ic{ opacity:.25; }
@keyframes spin360{ to{ transform:rotate(360deg); } }

/* середина: название, перемотка, время */
.player__mid{ flex:1; min-width:0; }
.player__track{ display:flex; align-items:baseline; gap:7px; min-width:0; margin-bottom:7px; }
.player__track b{
  font-size:13.5px; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__track i{
  font-style:normal; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.12em; color:var(--txt-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.player__seek{
  position:relative; height:4px; border-radius:4px;
  background:rgba(222,216,228,.12);
  cursor:pointer; touch-action:none;
}
.player__seek::before{ content:''; position:absolute; inset:-9px 0; }  /* зона попадания */
.player__buf{
  position:absolute; inset:0 auto 0 0; width:0%;
  border-radius:inherit; background:rgba(222,216,228,.16);
  transition:width .4s ease;
}
.player__prog{
  position:absolute; inset:0 auto 0 0; width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--plum),var(--rose));
  box-shadow:0 0 12px rgba(201,139,160,.55);
}
.player__prog b{
  position:absolute; right:0; top:50%;
  width:10px; height:10px; margin:-5px -5px 0 0;
  border-radius:50%; background:var(--silver);
  box-shadow:0 0 10px rgba(222,216,228,.8);
  transform:scale(0);
  transition:transform .35s var(--ease-soft);
}
.player__seek:hover .player__prog b,
.player__seek:focus-visible .player__prog b,
.player.is-seeking .player__prog b{ transform:scale(1); }
.player__seek:focus-visible{ outline:2px solid var(--rose); outline-offset:6px; border-radius:4px; }

.player__time{
  display:flex; justify-content:space-between;
  margin-top:7px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em;
  color:var(--silver-2); opacity:.7;
}

/* громкость */
.player__vol{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.player__mute{
  padding:0; width:22px; height:22px;
  background:none; border:0; cursor:pointer;
  color:var(--silver-2);
  transition:color .35s ease, transform .4s var(--ease-soft);
}
.player__mute svg{ width:22px; height:22px; display:block; }
.player__mute:hover{ color:var(--txt); transform:scale(1.12); }
.player__mute:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:4px; }
.player__mute .wv-1,.player__mute .wv-2,.player__mute .wv-x{ transition:opacity .25s ease; }
.player__mute .wv-x{ opacity:0; }
.player.is-muted .player__mute{ color:var(--rose-dim); }
.player.is-muted .player__mute .wv-1,
.player.is-muted .player__mute .wv-2{ opacity:0; }
.player.is-muted .player__mute .wv-x{ opacity:1; }

.player__volbar{
  position:relative; width:56px; height:4px; border-radius:4px;
  background:rgba(222,216,228,.12);
  cursor:pointer; touch-action:none;
}
.player__volbar::before{ content:''; position:absolute; inset:-9px 0; }
.player__volbar span{
  position:absolute; inset:0 auto 0 0; width:70%;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(222,216,228,.55),var(--silver));
}
.player__volbar:focus-visible{ outline:2px solid var(--rose); outline-offset:6px; border-radius:4px; }

/* ==========================================================================
   ССЫЛКИ
   ========================================================================== */

.links{
  display:grid; grid-template-columns:repeat(4,1fr); gap:9px;
  margin-top:19px;
}
.lnk{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:15px 6px 12px;
  border-radius:15px;
  border:1px solid rgba(222,216,228,.10);
  background:linear-gradient(180deg, rgba(222,216,228,.045), rgba(222,216,228,.012));
  color:var(--silver-2);
  transition:color .35s ease, border-color .35s ease, background .35s ease,
             transform .45s var(--ease), box-shadow .45s ease;
}
.lnk svg,.lnk__logo{
  width:26px; height:26px;
  transition:transform .5s var(--ease), filter .35s ease;
}
/* лого студии: тот же размер и обводка кружком, что у нарисованных иконок */
.lnk__logo{
  display:block; border-radius:50%; overflow:hidden;
  border:1.7px solid currentColor;
  background:#000;
}
.lnk__logo img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); }

/* иконка ссылки готовым svg (телеграм). В отличие от .lnk__logo кружка и
   обводки нет: это знак, а не фотография. Наведение повторяет то же
   движение, что у нарисованных иконок и лого. */
.lnk__ic{ display:block; width:26px; height:26px; flex:0 0 auto; }
.lnk__ic img{
  width:100%; height:100%; object-fit:contain;
  transition:transform .5s var(--ease), filter .35s ease;
}
.lnk:hover .lnk__ic img{
  transform:translateY(-2px) scale(1.1) rotate(-4deg);
  filter:drop-shadow(0 0 10px rgba(201,139,160,.7));
}
.lnk__cap{
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.20em;
  text-transform:uppercase; opacity:.7; white-space:nowrap;
  transition:opacity .3s ease, letter-spacing .4s var(--ease);
}
.lnk::before{  /* заливка снизу вверх */
  content:''; position:absolute; inset:auto 0 0 0; height:0;
  background:linear-gradient(180deg, rgba(201,139,160,.28), rgba(111,77,120,.10));
  transition:height .45s var(--ease);
}
.lnk::after{  /* верхняя световая линия */
  content:''; position:absolute; top:0; left:50%; width:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--rose),transparent);
  transform:translateX(-50%);
  transition:width .45s var(--ease);
}
.lnk:hover{
  color:var(--txt);
  border-color:rgba(201,139,160,.42);
  transform:translateY(-5px);
  box-shadow:0 20px 34px -22px rgba(201,139,160,.85);
}
.lnk:hover::before{ height:100%; }
.lnk:hover::after{ width:88%; }
.lnk:hover svg,
.lnk:hover .lnk__logo{ transform:translateY(-2px) scale(1.1) rotate(-4deg); filter:drop-shadow(0 0 10px rgba(201,139,160,.7)); }
.lnk:hover .lnk__cap{ opacity:1; letter-spacing:.3em; }
.lnk:active{ transform:translateY(-2px) scale(.98); }
.lnk > *{ position:relative; z-index:1; }

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */

.foot{
  position:relative; z-index:5;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px 10px;
  padding:0 0 22px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--silver-2);
}
/* Приглушение перенесено с .foot на его прямых детей: opacity создаёт
   группу, и подпись студии внутри .foot{opacity:.4} не смогла бы стать
   ярче родителя ни при каком значении. */
.foot > span,
.foot > i{ opacity:.4; }
.foot > i{ font-style:normal; color:var(--rose); }

/* --- подпись студии --- */
/* Оболочка повторяет .chip: та же рамка, та же подложка, те же 999px. */
.foot__studio{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(222,216,228,.13);
  background:rgba(222,216,228,.035);
  text-transform:none; letter-spacing:normal; white-space:nowrap;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.foot__studio:hover{ border-color:var(--rose); background:rgba(222,216,228,.06); }
.foot__by{
  font-family:var(--f-mono); font-size:8px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--silver-2); opacity:.75;
}
.foot__logo{
  display:block; flex:0 0 auto; width:22px; height:22px;
  border-radius:50%; overflow:hidden;
  opacity:.8; transition:opacity .35s var(--ease);
}
.foot__logo img{ width:100%; height:100%; object-fit:cover; }
.foot__studio:hover .foot__logo{ opacity:1; }
.foot__name{ font-family:var(--f-ui); font-size:11.5px; letter-spacing:.01em; }
.foot__name b{ font-weight:700; color:var(--txt); }
.foot__name i{ font-style:normal; font-weight:400; color:var(--silver-2); margin-left:4px; }

/* ==========================================================================
   ПОЯВЛЕНИЕ
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(26px) scale(.985);
  filter:blur(9px);
}
html[data-boot="ready"] .reveal{
  animation:reveal .95s var(--ease) forwards;
  animation-delay:calc(var(--d,0) * 78ms + 120ms);
}
@keyframes reveal{ to{ opacity:1; transform:none; filter:none; } }

html[data-boot="ready"] .card{ animation:cardIn 1.15s var(--ease) forwards; }

/* Аварийный выход: если JS не отработал вовсе — через 6 с показать контент.
   Живой скрипт сразу переводит data-boot в booting, и эти правила отключаются. */
html[data-boot="loading"] .boot{ animation:bootBail .8s linear 6s forwards; }
@keyframes bootBail{ to{ opacity:0; visibility:hidden; } }
html[data-boot="loading"] .reveal{ animation:reveal .8s var(--ease) 6s forwards; }
html[data-boot="loading"] .card{ animation:cardIn .8s var(--ease) 6s forwards; }
@keyframes cardIn{
  from{ opacity:0; transform:translateY(46px) scale(.94) rotateX(9deg); }
  to  { opacity:1; }
}

/* ==========================================================================
   ПРЕЛОАДЕР
   ========================================================================== */

.boot{
  position:fixed; inset:0; z-index:60;
  background:#040305;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease;
}
.boot__beam{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:linear-gradient(180deg,transparent,rgba(222,216,228,.85) 42%,rgba(201,139,160,.9) 58%,transparent);
  transform:translateX(-50%) scaleY(0);
  animation:beam 1s var(--ease) forwards;
  box-shadow:0 0 26px rgba(201,139,160,.8);
}
@keyframes beam{ to{ transform:translateX(-50%) scaleY(1); } }

.boot__center{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:15px;
  opacity:0; animation:bootFade .6s ease .35s forwards;
}
@keyframes bootFade{ to{ opacity:1; } }

.boot__name{
  display:block;
  font-family:var(--f-disp); font-size:clamp(30px,8vw,46px);
  letter-spacing:.03em; text-transform:lowercase;
  background:linear-gradient(180deg,#fff,#8d8397);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
  will-change:transform,filter;
}
/* пока сигнал не дошёл — текст дёргается и двоится */
.boot__name.is-messy{
  text-shadow:
    1.5px 0 rgba(226,112,127,.55),
   -1.5px 0 rgba(120,150,235,.55);
}
/* собрался: рывки прекращаются, текст фиксируется и коротко вспыхивает */
.boot__name.is-locked{
  transform:none !important;
  text-shadow:none;
  animation:bootLock .5s var(--ease) forwards;
}
@keyframes bootLock{
  0%  { filter:brightness(2.4) blur(1.5px); letter-spacing:.13em; }
  60% { filter:brightness(1.25) blur(0);    letter-spacing:.03em; }
  100%{ filter:none;                        letter-spacing:.03em; }
}
.boot__bar{
  display:block; width:min(230px,54vw); height:1.5px;
  background:rgba(222,216,228,.14); overflow:hidden; border-radius:2px;
}
.boot__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--plum),var(--rose),var(--silver));
  box-shadow:0 0 12px rgba(201,139,160,.9);
  transition:width .25s ease-out;
}
.boot__hint{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--silver-2); opacity:.6;
}

/* CLICK TO START */
.boot__start{
  position:relative;
  margin-top:8px; padding:0;
  background:none; border:0; cursor:pointer;
  font-family:var(--f-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.44em; text-transform:uppercase;
  color:var(--txt-dim);
  opacity:0;
  animation:startIn .8s var(--ease) forwards;
  transition:color .35s ease, letter-spacing .5s var(--ease);
}
.boot__start[hidden]{ display:none; }
@keyframes startIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.boot__start-t{
  display:block; padding:0 0 6px 3px;   /* 3px компенсируют трекинг справа */
  animation:startPulse 2.1s ease-in-out .8s infinite;
}
@keyframes startPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.42; } }

.boot__start-u{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--rose), transparent);
  transform:scaleX(.45); opacity:.6;
  transition:transform .5s var(--ease), opacity .4s ease;
}
.boot__start:hover{ color:var(--txt); letter-spacing:.5em; }
.boot__start:hover .boot__start-u{ transform:scaleX(1); opacity:1; }
.boot__start:focus-visible{ outline:2px solid var(--rose); outline-offset:8px; border-radius:3px; }

/* пока ждём клик — кликабелен весь экран */
.boot.is-armed{ cursor:pointer; }

.boot__wipe{
  position:absolute; inset:0; background:#040305;
  transform-origin:top; transform:scaleY(0);
}
.boot.is-out .boot__wipe{ transform-origin:bottom; animation:wipeOut .85s var(--ease) forwards; }
@keyframes wipeOut{ from{ transform:scaleY(1);} to{ transform:scaleY(0);} }
.boot.is-out{ background:transparent; }
.boot.is-out .boot__center,.boot.is-out .boot__beam{ opacity:0; transition:opacity .3s ease; }
.boot.is-done{ display:none; }

/* ==========================================================================
   КУРСОР
   ========================================================================== */

.cursor{
  position:fixed; top:0; left:0; z-index:70;
  width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%; border:1px solid rgba(222,216,228,.45);
  pointer-events:none; opacity:0;
  transition:opacity .3s ease, width .35s var(--ease), height .35s var(--ease),
             margin .35s var(--ease), border-color .35s ease, background .35s ease;
  mix-blend-mode:difference;
}
.cursor i{
  position:absolute; top:50%; left:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  border-radius:50%; background:var(--rose);
}
html[data-cursor="on"] .cursor{ opacity:1; }
html[data-cursor="on"] .cursor.is-hot{
  width:56px; height:56px; margin:-28px 0 0 -28px;
  border-color:rgba(201,139,160,.9);
  background:rgba(201,139,160,.10);
}
html[data-cursor="on"] body{ cursor:none; }
html[data-cursor="on"] .boot.is-armed,
html[data-cursor="on"] .boot__start{ cursor:none; }
/* полосы перемотки и громкости — обычные div с cursor:pointer,
   без этого правила они перебивали cursor:none и рисовался второй курсор */
html[data-cursor="on"] a,
html[data-cursor="on"] button,
html[data-cursor="on"] .player__seek,
html[data-cursor="on"] .player__volbar{ cursor:none; }

/* ==========================================================================
   БЛОКИ ЛЕНТЫ: бейджи, факты, скиллы, работы, терминал
   Разметку рисует blocks.js, но оформления для неё нигде не было — v2 этих
   блоков не знал, а layout.css описал только оболочку (.pane, .stat, .int).
   Без правил ниже лента раскладывалась в дефолтные списки: страница уходила
   за 10 000 px, скрины работ растягивались, а поле ввода терминала было
   обычным серым инпутом браузера. Значения те же, что у .chip, .stat и .lnk —
   нового языка не заводим, только дописываем недостающее.
   ========================================================================== */

/* --- бейджи под ником: та же пилюля, что .chip, но с иконкой --- */
.badges{
  display:flex; flex-wrap:wrap; gap:7px;
  margin:11px 0 0; padding:0; list-style:none;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  border:1px solid rgba(222,216,228,.12);
  background:rgba(222,216,228,.035);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  color:var(--txt-dim);
  transition:border-color .3s ease, color .3s ease;
}
.badge:hover{ border-color:rgba(201,139,160,.4); color:var(--txt); }
.badge__i{ display:flex; color:var(--rose); }
.badge__i svg{ width:13px; height:13px; }
.badge b{ font-weight:400; color:var(--txt); }

/* Роль печатается и стирается, значение пишет main.js (roleTyper).
   Ширину бейдж держит по самой длинной строке — без этого пилюля
   дышала бы на каждом символе и дёргала весь ряд. */
.badge__type{ display:inline-block; text-align:left; }
.badge__type::after{
  content:''; display:inline-block; vertical-align:-1px;
  width:1px; height:9px; margin-left:2px;
  background:var(--rose);
  animation:badgeCaret 1.05s steps(1) infinite;
}
@keyframes badgeCaret{ 50%{ opacity:0; } }
/* без движения печатать нечего — курсор тоже ни к чему */
@media (prefers-reduced-motion:reduce){
  .badge__type::after{ display:none; }
}

/* --- факты: строка «ключ — значение» с иконкой --- */
.facts{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px;
  margin:0; padding:0; list-style:none;
}
.fact{
  display:flex; align-items:center; gap:9px;
  padding:11px 12px; border-radius:13px;
  border:1px solid rgba(222,216,228,.10);
  background:linear-gradient(180deg, rgba(222,216,228,.045), rgba(222,216,228,.012));
  transition:border-color .35s ease, transform .45s var(--ease);
}
.fact:hover{ border-color:rgba(201,139,160,.4); transform:translateY(-2px); }
.fact__i{ display:flex; flex:0 0 auto; color:var(--rose); }
.fact__i svg{ width:16px; height:16px; }
.fact__k{
  font-family:var(--f-mono); font-size:8px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--silver-2); opacity:.7;
}
/* значение прижато вправо и обрезается: длинный город не ломает плитку */
.fact__v{
  margin-left:auto; min-width:0;
  font-family:var(--f-ui); font-size:13px; font-weight:700; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* --- скиллы: группы пилюль --- */
.skills{ display:flex; flex-direction:column; gap:14px; }
.skills__cap{
  display:flex; align-items:center; gap:7px; margin:0 0 8px;
  font-family:var(--f-mono); font-size:8px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--silver-2); opacity:.6;
}
.skills__cap i{ width:12px; height:1px; background:var(--rose); opacity:.6; }
.skills__pool{
  display:flex; flex-wrap:wrap; gap:7px;
  margin:0; padding:0; list-style:none;
}
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  border:1px solid rgba(222,216,228,.12);
  background:rgba(222,216,228,.035);
  transition:border-color .35s ease, transform .45s var(--ease), background .35s ease;
}
.pill:hover{
  border-color:rgba(201,139,160,.45);
  background:rgba(222,216,228,.06);
  transform:translateY(-2px);
}
.pill b{
  font-family:var(--f-ui); font-size:12.5px; font-weight:700;
  letter-spacing:.01em; color:var(--txt);
}
/* обёртка иконки: blocks.js сносит её целиком, если svg не отдался,
   поэтому размер держит она, а не картинка */
.pill__i{ display:flex; flex:0 0 auto; width:17px; height:17px; }
/* Логотипы показываются сразу в фирменных цветах, без приглушения:
   выцветший логотип читается как неактивный или битый. На наведении
   только лёгкое усиление яркости, чтобы отклик был, но цвет не менялся.
   Файлы лежат в assets/img/tech/ локально, внешних адресов нет. */
.pill__i img{
  width:100%; height:100%; object-fit:contain;
  transition:filter .35s ease;
}
.pill:hover .pill__i img{ filter:brightness(1.1); }

/* --- работы --- */
/* Строками, а не плиткой: список читается сверху вниз одним движением и
   не зависит от чётности — при трёх работах и при семи он выглядит
   одинаково. Собран по той же формуле, что список ссылок: разделитель
   тонкой линией, подсветка строки и стрелка на наведении. */
.works{ display:block; margin:0; padding:0; list-style:none; }
.work{ border-bottom:1px solid rgba(222,216,228,.07); }
.work:last-child{ border-bottom:0; }
.work__a{
  display:flex; align-items:center; gap:12px;
  padding:9px 10px; border-radius:12px;
  transition:background .35s ease;
}
.work__a:hover{ background:rgba(222,216,228,.04); }
/* миниатюра 96x60 — те же 1.6, что у исходных 1200x750,
   поэтому обрезка по центру ничего не срезает по краям */
.work__shot{
  flex:0 0 auto; display:block;
  width:96px; height:60px;
  border-radius:10px; overflow:hidden; background:var(--smoke);
}
.work__shot img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  filter:saturate(.8) brightness(.72);
  transition:transform .7s var(--ease), filter .5s ease;
}
.work__a:hover .work__shot img{ transform:scale(1.06); filter:saturate(1) brightness(.95); }
.work__meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.work__name{
  font-size:13px; font-weight:700; letter-spacing:.01em; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.work__niche{
  font-style:normal; font-family:var(--f-mono); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--silver-2); opacity:.65;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.work__arw{
  margin-left:auto; flex:0 0 auto; color:var(--rose);
  opacity:0; transform:translateX(-4px);
  transition:opacity .3s ease, transform .3s var(--ease);
}
.work__arw svg{ width:14px; height:14px; display:block; }
.work__a:hover .work__arw{ opacity:1; transform:none; }

/* ссылка «все работы студии» — строка во всю ширину под списком */
.works__all{
  display:flex; align-items:center; justify-content:center;
  margin-top:12px; padding:11px; border-radius:12px;
  border:1px dashed rgba(222,216,228,.14);
  color:var(--silver-2);
  transition:border-color .35s ease, color .35s ease, background .35s ease;
}
.works__all:hover{
  border-color:rgba(201,139,160,.45); color:var(--txt);
  background:rgba(222,216,228,.04);
}
.works__all-t{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase;
}

/* --- терминал --- */
.term{
  overflow:hidden; border-radius:14px;
  border:1px solid rgba(222,216,228,.10);
  background:rgba(4,3,5,.72);
}
.term__bar{
  display:flex; align-items:center; gap:6px;
  padding:9px 13px;
  border-bottom:1px solid rgba(222,216,228,.07);
  background:rgba(0,0,0,.3);
}
.term__dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; opacity:.75; }
.term__dot--r{ background:var(--dnd); }
.term__dot--y{ background:var(--idle); }
.term__dot--g{ background:var(--online); }
.term__t{
  margin-left:5px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--silver-2); opacity:.7;
}
.term__v{
  margin-left:auto;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.14em;
  color:var(--silver-2); opacity:.4;
}
.term__out{
  overflow-y:auto; padding:12px 13px;
  font-family:var(--f-mono); font-size:11px; line-height:1.75;
  color:var(--txt-dim);
}
/* pre-wrap обязателен: help разводит колонки пробелами, а greet приходит
   с переводом строки — без него всё слипается в один абзац */
.term__out p{ margin:0; white-space:pre-wrap; word-break:break-word; }
.term__out i{ font-style:normal; color:var(--silver-2); opacity:.55; }
.term__out b{ font-weight:400; color:var(--rose); }

/* hack: цвета строк только из палитры, новых не заводим */
.term__out p.hack--rose  { color:var(--rose); }
.term__out p.hack--silver{ color:var(--silver-2); }
.term__out p.hack--ok    { color:var(--online); }
.term__out p.hack--warn  { color:var(--idle); }
.term__out p.hack--bad   { color:var(--dnd); }
.term__out p.hack--final{
  margin-top:10px;
  color:var(--online);
  font-size:15px; letter-spacing:.42em; text-transform:uppercase;
}
/* пока идёт печать, приглашение показывает, что терминал занят */
.term.is-busy .term__ps,
.term.is-busy .term__cmd{ opacity:.35; }
.term__in{
  display:flex; align-items:center; gap:8px;
  padding:11px 13px;
  border-top:1px solid rgba(222,216,228,.07);
  background:rgba(0,0,0,.22);
  cursor:text;
}
.term__ps{
  flex:0 0 auto;
  font-family:var(--f-mono); font-size:11px; color:var(--rose); opacity:.85;
}
/* инпут сбрасываем полностью: иначе это серая рамка из браузера */
.term__cmd{
  flex:1; min-width:0;
  border:0; outline:0; padding:0; background:none;
  font-family:var(--f-mono); font-size:11px; color:var(--txt);
  caret-color:var(--rose);
}
.term__cmd::placeholder{ color:var(--silver-2); opacity:.4; }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */

@media (max-width:640px){
  .rail{ display:none; }
  .stage{ padding:70px 16px 48px; }
  .hero{ flex-direction:column; align-items:center; text-align:center; gap:14px; }
  .hero__id{ display:flex; flex-direction:column; align-items:center; }
  .status,.chips{ justify-content:center; }
  .dc__row{ flex-wrap:wrap; }
  .dc__btn{ width:100%; justify-content:center; margin-top:4px; }
  .dc__meta{ flex:1 1 120px; }
  .links{ grid-template-columns:repeat(2,1fr); }
  .player__body{ flex-wrap:wrap; gap:11px; }
  .player__transport{ gap:8px; }
  .player__mid{ flex:1 1 130px; }
  .player__vol{ flex:1 1 100%; justify-content:flex-end; }
  .player__volbar{ width:92px; }
}

@media (max-width:380px){
  .links{ grid-template-columns:repeat(2,1fr); gap:7px; }
  .card__inner{ padding:19px; }
}

@media (hover:none){
  .cursor{ display:none; }
  html[data-cursor="on"] body{ cursor:auto; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; filter:none; }
  .scene__scan{ display:none; }
}