/* =========================================================================
   sempik — визитка. Ночная сакура при лунном свете: чёрный, серебро, белый.
   Слои (снизу вверх): видео + затемнение/зерно (0) → 3D (1) → карточка (2)
   → кот (5) → кнопки (80) → тост (90) → заставка (100) → курсор (110)

   Цвет живёт только в режиме вечеринки (html.party, Konami-код): там переменные
   ниже подменяются цветными (см. раздел 8). Вне вечеринки всё строго R=G=B.

   Производительность: никаких backdrop-filter (поверх видео и 3D он пересчитывается
   каждый кадр), filter: blur — только на статичном, бесконечные анимации — только
   transform/opacity и только там, где их видно.
   ========================================================================= */

:root {
  --bg: #070707;
  --ink: #f2f2f2;
  --muted: #9b9b9b;
  --pink: #d4d4d4;   /* светлый акцент */
  --hot: #ffffff;    /* сильный акцент */
  --violet: #8a8a8a; /* средний */
  --deep: #1a1a1a;   /* тёмный */
  --cyan: #6e6e6e;   /* второй слой глитча */

  /* rgb-тройки для rgba(): свечения, стекло, затемнения. В вечеринке становятся цветными */
  --c-glow: 255, 255, 255;  /* сильное свечение */
  --c-tint: 214, 214, 214;  /* светлая обводка */
  --c-cool: 138, 138, 138;  /* средний тон */
  --c-base: 11, 11, 11;     /* стекло карточки/кнопок */
  --c-shade: 7, 7, 7;       /* затемнение фона */
  --c-on: 44, 44, 44;       /* нажатая кнопка */

  --ink-2: rgba(242, 242, 242, 0.76);
  --line: rgba(255, 255, 255, 0.085);
  --glass: rgba(var(--c-base), 0.86);

  --f-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.3, 1.5, 0.5, 1);

  --gutter: 16px;
  --radius: 28px;

  /* статичное плёночное зерно: альфа уже «вшита» в шум, поэтому это просто ещё один фон
     у затемнения (раньше — отдельный анимированный слой на весь экран) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .25 0 0 0 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px;

  /* «хром» — круглые кнопки поверх всего (звук/музыка справа, игрушки кота слева).
     cat.js берёт те же переменные, чтобы все кнопки выглядели одним набором.
     --chrome-blur: none — размытие фона под кнопками каждый кадр слишком дорогое,
     вместо него плотная подложка */
  --chrome-size: 44px;
  --chrome-edge: 16px;
  --chrome-bg: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 55%), rgba(var(--c-base), 0.8);
  --chrome-bg-on: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%), rgba(var(--c-on), 0.86);
  --chrome-border: rgba(255, 255, 255, 0.14);
  --chrome-border-hi: rgba(var(--c-tint), 0.62);
  --chrome-blur: none;
  --chrome-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px -8px rgba(0, 0, 0, 0.7);
  --chrome-shadow-hi: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 28px -8px rgba(0, 0, 0, 0.7), 0 0 24px -4px rgba(var(--c-glow), 0.34);
  --chrome-shadow-on: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 14px rgba(var(--c-glow), 0.12), 0 10px 26px -8px rgba(0, 0, 0, 0.7), 0 0 26px -4px rgba(var(--c-glow), 0.4);
  --tip-bg: rgba(var(--c-base), 0.94);
  --tip-border: rgba(var(--c-tint), 0.3);
  color-scheme: dark;
}

@property --rb { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: rgba(var(--c-tint), 0.32) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* пока висит заставка — страница не скроллится */
html.js:not(.entered) body { overflow: hidden; }

::selection { background: rgba(var(--c-glow), 0.3); color: #fff; }

img, svg, video, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 10px;
}

/* цветные эмодзи вне вечеринки — серые (фильтр только на крошечных статичных кусочках) */
.emo { display: inline-block; filter: grayscale(1); }
html.party .emo { filter: none; }

/* =========================================================================
   1. Фон
   ========================================================================= */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* если видео не загрузилось — похожий «лунный» градиент вместо чёрной дыры */
  background:
    radial-gradient(60% 70% at 70% 45%, rgba(var(--c-cool), 0.2), transparent 70%),
    radial-gradient(50% 60% at 90% 80%, rgba(var(--c-glow), 0.07), transparent 70%),
    var(--bg);
}

#bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* затемнение + зерно одним слоем (зерно — первым, поверх градиентов) */
.bg-shade {
  position: absolute;
  inset: 0;
  background:
    var(--grain),
    radial-gradient(40% 50% at 68% 50%, rgba(var(--c-shade), 0.25), rgba(var(--c-shade), 0) 70%),
    linear-gradient(90deg, rgba(var(--c-shade), 0.88) 0%, rgba(var(--c-shade), 0.64) 26%, rgba(var(--c-shade), 0.18) 50%, rgba(var(--c-shade), 0) 66%),
    radial-gradient(120% 95% at 62% 48%, rgba(var(--c-shade), 0) 52%, rgba(var(--c-shade), 0.8) 100%);
}
/* вечеринка: радужный оттенок — отдельным слоем поверх видео (фильтр на самом видео дорогой) */
.bg-shade::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg at 50% 50%, #ff3d9a, #ffb84d, #fff27a, #5dffb4, #5ad1ff, #9b7bff, #ff3d9a);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
  pointer-events: none;
}
html.party .bg-shade::after {
  opacity: 0.13;
  visibility: visible;
  transition: opacity 1.2s ease;
  animation: partySpin 14s linear infinite;
}
@keyframes partySpin { to { transform: rotate(1turn); } }

/* =========================================================================
   2. 3D-сцена, кот
   ========================================================================= */
#scene3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: auto;
}
#cat-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* =========================================================================
   3. Карточка
   ========================================================================= */
.ui {
  position: relative;
  z-index: 2;
  pointer-events: none;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: max(118px, 13vh) 24px max(48px, 6vh) clamp(32px, 8vw, 168px);
}

/* «дымчатое стекло» без backdrop-filter: плотная подложка + лунный отсвет сверху-слева.
   Слева фон и так затемнён, так что разницы с размытием почти не видно, а GPU не страдает */
.card {
  --brd-a: rgba(var(--c-glow), 0.62);
  --brd-b: rgba(var(--c-cool), 0.5);
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  width: clamp(380px, 32vw, 460px);
  padding: 30px 30px 20px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(var(--c-glow), 0.075), transparent 60%),
    radial-gradient(110% 70% at 100% 100%, rgba(var(--c-cool), 0.07), transparent 60%),
    var(--glass);
  box-shadow:
    0 40px 90px -34px rgba(0, 0, 0, 0.9),
    0 0 80px -30px rgba(var(--c-glow), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  container: card / inline-size;
}

/* 1px градиентная рамка */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg, var(--brd-a) 0%, rgba(var(--c-tint), 0.12) 32%, rgba(255, 255, 255, 0.04) 55%, var(--brd-b) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.78;
  transition: opacity 0.4s ease;
}
.card.is-hover::before { opacity: 1; }

/* блик, бегающий за курсором */
.card__glare {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.card__glare > span {
  position: absolute;
  left: 0;
  top: 0;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c-glow), 0.09) 0%, rgba(var(--c-glow), 0.035) 35%, transparent 68%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* слой под блик — только пока курсор над карточкой */
.card.is-hover .card__glare > span { opacity: 1; will-change: transform; }

/* ---- появление (только opacity/translate: blur на десятке элементов в момент входа дорогой) ---- */
html.js .card {
  opacity: 0;
  translate: 0 28px;
  scale: 0.975;
}
html.js.entered .card {
  opacity: 1;
  translate: none;
  scale: none;
  transition:
    opacity 0.9s var(--ease-out) 0.28s,
    translate 1.2s var(--ease-out) 0.28s,
    scale 1.2s var(--ease-out) 0.28s;
}
html.js .reveal {
  opacity: 0;
  translate: 0 14px;
}
html.js.entered .reveal {
  opacity: 1;
  translate: none;
  transition:
    opacity 0.75s var(--ease-out),
    translate 0.9s var(--ease-out);
  transition-delay: calc(0.5s + var(--i, 0) * 75ms);
}

/* ---- шапка ---- */
.card__head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.card__id { min-width: 0; }

.avatar {
  position: relative;
  flex: none;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* кольцо — диск с конусным градиентом ПОД фото: тёмная обводка фото оставляет видимой
   полоску в 2px. Без маски и без blur — вращение чисто на композиторе */
.avatar__ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--pink), var(--violet) 28%, rgba(var(--c-cool), 0) 46%, rgba(var(--c-glow), 0) 54%, var(--hot) 74%, var(--pink));
  animation: spin 7s linear infinite;
}
/* мягкий ореол — статичный градиент вместо размытого вращающегося диска */
.avatar__glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--c-glow), 0.2), rgba(var(--c-glow), 0.07) 62%, rgba(var(--c-glow), 0) 100%);
  pointer-events: none;
}
.avatar__img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #141414;
  box-shadow: 0 0 0 3px rgba(9, 9, 9, 0.96);
}
.avatar__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.7);
  transform-origin: 43% 47%;
  transition: transform 0.6s var(--ease-out);
}
.avatar:hover .avatar__img img { transform: scale(1.82); }
.avatar:focus-visible { outline: 2px solid var(--pink); outline-offset: 7px; border-radius: 50%; }
.avatar.is-boop { animation: boop 0.5s var(--ease-back); }
.avatar__dot {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fff 0 16%, var(--pink) 52%, var(--violet) 100%);
  box-shadow: 0 0 0 3.5px #0d0d0d, 0 0 14px rgba(var(--c-glow), 0.5);
}
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes boop {
  0% { transform: scale(1); }
  35% { transform: scale(0.9) rotate(-4deg); }
  70% { transform: scale(1.06) rotate(2deg); }
  100% { transform: scale(1); }
}

/* ---- ник: хромированный, блик пробегает только при наведении ---- */
.name {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(36px, 3.3vw, 50px);
  line-height: 1;
  letter-spacing: -0.035em;
  padding-bottom: 0.06em;
  cursor: default;
}
.name__text {
  display: inline-block;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 70%) -150% 0 / 60% 100% no-repeat,
    linear-gradient(180deg, #ffffff 18%, #e4e4e4 52%, #a2a2a2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.name::before,
.name::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.name::before { color: var(--hot); }
.name::after { color: var(--cyan); }
/* только с настоящим курсором: на телефоне :hover «залипает» после тапа, и глитч крутился бы бесконечно */
@media (hover: hover) {
  .name:hover::before { opacity: 0.6; animation: glitchA 1.1s steps(1) infinite; }
  .name:hover::after { opacity: 0.85; animation: glitchB 1.3s steps(1) infinite; }
  .name:hover .name__text { animation: sheen 1.6s var(--ease-io) infinite, nameJolt 1.1s steps(1) infinite; }
}

@keyframes sheen {
  from { background-position: -150% 0, 0 0; }
  to { background-position: 250% 0, 0 0; }
}
@keyframes shimmer {
  from { background-position: 0% 50%; }
  to { background-position: -260% 50%; }
}
@keyframes nameJolt {
  0%, 100% { transform: none; }
  8% { transform: translate(1px, 0) skewX(-4deg); }
  12% { transform: none; }
  54% { transform: translate(-1px, 0); }
  58% { transform: none; }
}

/* ---- статус ---- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font: 500 11.5px/1.2 var(--f-mono);
  letter-spacing: 0.01em;
  color: #d6d6d6;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.status__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 10px rgba(var(--c-glow), 0.75);
}
.status__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- печатная машинка ----
   «призрак» с самой длинной фразой (невидимый) и живая строка лежат в одной ячейке сетки:
   высота карточки не прыгает, когда фраза переносится на новую строку (и кот не подскакивает) */
.tagline {
  display: grid;
  margin: 22px 0 0;
  min-height: 3em;
  font: 500 13.5px/1.5 var(--f-mono);
  color: #ececec;
  letter-spacing: -0.005em;
}
.tagline__ghost,
.tagline__live { grid-area: 1 / 1; min-width: 0; }
.tagline__ghost { visibility: hidden; pointer-events: none; }
.tagline__ghost .tagline__caret { animation: none; }
.tagline__prompt {
  color: var(--violet);
  margin-right: 1.2ch;
  font-weight: 500;
}
.tagline__caret {
  display: inline-block;
  width: 0.55em;
  height: 1.12em;
  margin-left: 2px;
  vertical-align: -0.2em;
  border-radius: 1px;
  background: linear-gradient(var(--hot), var(--pink));
  box-shadow: 0 0 10px rgba(var(--c-glow), 0.45);
  animation: caret 1.05s steps(1) infinite;
}
.tagline.is-typing .tagline__caret { animation: none; }
@keyframes caret { 50% { opacity: 0; } }

/* ---- о себе ---- */
.about {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- ссылки ---- */
.links { margin-top: 22px; }
.links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.links__list > li { min-width: 0; }
.links__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* узкая карточка: две колонки без стрелок, совсем узкая — одна колонка */
@container card (max-width: 379px) {
  .link { gap: 10px; padding-right: 12px; }
  .link__go { display: none; }
}
@container card (max-width: 319px) {
  .links__list { grid-template-columns: 1fr; }
  .link { gap: 12px; padding-right: 14px; }
  .link__go { display: block; }
}

/* --brand ставит ui.js из config.links (оттенки серого); --b — то, чем реально красим:
   в вечеринке его подменяют настоящие цвета брендов (раздел 8) */
.link {
  --brand: var(--pink);
  --b: var(--brand);
  --mx: 0px;
  --my: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 10px 14px 10px 10px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(var(--mx), var(--my), 0);
  transition:
    transform 0.45s var(--ease-out),
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    background-color 0.3s ease;
}
.link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(130% 160% at var(--px, 20%) var(--py, 50%), color-mix(in srgb, var(--b) 16%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* :hover — только там, где есть настоящий курсор: на телефоне после тапа подсветка «залипала» */
.link:focus-visible,
.link.is-ping {
  border-color: rgba(255, 255, 255, 0.3);
  border-color: color-mix(in srgb, var(--b) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--b) 18%, transparent),
    0 14px 34px -16px color-mix(in srgb, var(--b) 55%, transparent),
    0 0 30px -10px color-mix(in srgb, var(--b) 45%, transparent);
}
.link:focus-visible::before,
.link.is-ping::before { opacity: 1; }
@media (hover: hover) {
  .link:hover {
    border-color: rgba(255, 255, 255, 0.3);
    border-color: color-mix(in srgb, var(--b) 55%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--b) 18%, transparent),
      0 14px 34px -16px color-mix(in srgb, var(--b) 55%, transparent),
      0 0 30px -10px color-mix(in srgb, var(--b) 45%, transparent);
  }
  .link:hover::before { opacity: 1; }
  .link:hover .link__icon svg { transform: scale(1.12) rotate(-6deg); }
  .link:hover .link__go { opacity: 0.95; transform: translate(2px, -2px); }
  .link--copy:hover .link__go { transform: scale(1.1); }
}
.link:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 17px; }
.link:active { transition-duration: 0.12s; }
.link.is-ping { animation: ping 0.9s var(--ease-out); }
@keyframes ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--b) 60%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

.link__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  background: color-mix(in srgb, var(--b) 11%, rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border: 1px solid color-mix(in srgb, var(--b) 26%, transparent);
  transform: translate3d(calc(var(--mx) * 0.7), calc(var(--my) * 0.7), 0);
  transition: transform 0.45s var(--ease-out), background-color 0.3s ease;
}
.link__icon svg {
  width: 21px;
  height: 21px;
  fill: var(--b);
  fill: color-mix(in srgb, var(--b) 80%, #fff);
  transition: transform 0.45s var(--ease-back);
}
.link:focus-visible .link__icon svg { transform: scale(1.12) rotate(-6deg); }

.link__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.link__name {
  font: 600 13.5px/1.1 var(--f-display);
  letter-spacing: 0.005em;
}
.link__sub {
  font: 400 11.5px/1.2 var(--f-mono);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}
.link.is-copied .link__sub { color: var(--hot); }

.link__go {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}
.link:focus-visible .link__go { opacity: 0.95; transform: translate(2px, -2px); }
.link--copy:focus-visible .link__go { transform: scale(1.1); }

.ripple {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--b) 45%, transparent) 0%, color-mix(in srgb, var(--b) 22%, transparent) 45%, transparent 70%);
}

/* ---- GitHub ---- */
.gh {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.8s var(--ease-out), opacity 0.7s var(--ease-out);
}
.gh[hidden] { display: none; }
.gh.is-ready { grid-template-rows: 1fr; }
html.entered .gh.is-ready { opacity: 1; transition-delay: 0s, 1.05s; }
.gh__inner { min-height: 0; overflow: hidden; }
.gh__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
  font: 500 10.5px/1 var(--f-mono);
  color: var(--muted);
}
.gh__label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.gh__head::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
}
.gh__stats {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font: 400 11px/1.2 var(--f-mono);
  color: #ababab;
  white-space: nowrap;
}
.gh__stats b { font-weight: 500; color: #ededed; }
.gh__stats i { font-style: normal; opacity: 0.5; }
.gh__repos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.gh__repos > li { min-width: 0; max-width: 100%; }
.gh__recent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.gh__recent[hidden] { display: none; }
.gh__recent-label {
  font: 400 10.5px/1 var(--f-mono);
  color: #ababab;
}
.gh__repo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font: 500 11.5px/1.2 var(--f-mono);
  color: #e8e8e8;
  text-decoration: none;
  background: rgba(var(--c-cool), 0.1);
  border: 1px solid rgba(var(--c-cool), 0.34);
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.35s var(--ease-out), box-shadow 0.3s ease;
}
.gh__repo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh__repo svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--pink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gh__repo:hover,
.gh__repo:focus-visible {
  border-color: rgba(var(--c-tint), 0.65);
  background: rgba(var(--c-tint), 0.1);
  box-shadow: 0 0 18px -4px rgba(var(--c-glow), 0.35);
  transform: translateY(-1px);
}
.gh__repo:focus-visible { border-radius: 999px; }

/* ---- подвал ---- */
.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: var(--muted);
}
.heart {
  color: var(--hot);
  font-family: "Segoe UI Symbol", "DejaVu Sans", system-ui, sans-serif;
  font-variant-emoji: text;
}
.card__hint {
  font: 400 11px/1.3 var(--f-mono);
  color: #ababab;
}
.konami { color: #d4d4d4; cursor: help; text-decoration: underline dotted rgba(212, 212, 212, 0.45); text-underline-offset: 3px; }

/* =========================================================================
   4. Кнопки звука
   ========================================================================= */
.controls {
  position: fixed;
  top: max(var(--chrome-edge), env(safe-area-inset-top));
  right: max(var(--chrome-edge), env(safe-area-inset-right));
  z-index: 80;
  display: flex;
  gap: 10px;
  opacity: 0;
  translate: 0 -10px;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-out), translate 0.8s var(--ease-out);
}
.controls[hidden] { display: none; }
html.entered .controls {
  opacity: 1;
  translate: none;
  pointer-events: auto;
  transition-delay: 1.1s;
}
.ctl {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--chrome-size);
  height: var(--chrome-size);
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  border: 1px solid var(--chrome-border);
  background: var(--chrome-bg);
  -webkit-backdrop-filter: var(--chrome-blur);
  backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s var(--ease-back), border-color 0.25s ease, box-shadow 0.3s ease, color 0.25s ease;
}
@media (hover: hover) {
  .ctl:hover {
    transform: translateY(-2px);
    border-color: var(--chrome-border-hi);
    box-shadow: var(--chrome-shadow-hi);
  }
}
.ctl:active { transform: scale(0.92); }
.ctl:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 50%; }
/* подсказка под кнопкой — такая же, как у игрушек кота */
.ctl::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--tip-bg);
  border: 1px solid var(--tip-border);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ctl:not([data-tip])::after { display: none; }
@media (hover: hover) {
  .ctl:hover::after { opacity: 1; transform: none; transition-delay: 0.35s; }
}
.ctl:focus-visible::after { opacity: 1; transform: none; }
.ctl .ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ctl .ico path:first-child { fill: currentColor; fill-opacity: 0.18; }
.ctl--sound .ico--off { display: none; }
.ctl--sound[aria-pressed="false"] { color: var(--muted); }
.ctl--sound[aria-pressed="false"] .ico--on { display: none; }
.ctl--sound[aria-pressed="false"] .ico--off { display: block; }

.ctl--music .ico--note circle { fill: currentColor; fill-opacity: 0.18; }
.eq {
  display: none;
  align-items: flex-end;
  gap: 2.5px;
  height: 16px;
}
.eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(var(--hot), var(--violet));
  transform-origin: 50% 100%;
  animation: eq 0.9s ease-in-out infinite alternate;
}
.eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.6s; }
.eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.1s; }
@keyframes eq {
  0% { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}
.ctl--music[aria-pressed="true"] {
  border-color: var(--chrome-border-hi);
  background: var(--chrome-bg-on);
  box-shadow: var(--chrome-shadow-on);
}
.ctl--music[aria-pressed="true"] .ico--note { display: none; }
.ctl--music[aria-pressed="true"] .eq { display: flex; }
.controls.is-muted .eq i { animation-play-state: paused; opacity: 0.5; }

/* телефон: когда карточка уезжает под верхний ряд кнопок — притемняем полосу под ними,
   чтобы текст не мешался с кнопками */
.chrome-scrim { display: none; }
@media (max-width: 899.98px) {
  .chrome-scrim {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 79;
    height: calc(92px + env(safe-area-inset-top));
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--c-shade), 0.92) 0%, rgba(var(--c-shade), 0.7) 52%, rgba(var(--c-shade), 0) 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  html.entered.is-scrolled .chrome-scrim { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
}

/* =========================================================================
   5. Тост
   ========================================================================= */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 90;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 20px;
  border-radius: 999px;
  font: 600 14px/1.3 var(--f-body);
  color: var(--ink);
  text-align: center;
  overflow-wrap: anywhere;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(var(--c-tint), 0.12), transparent 60%),
    rgba(var(--c-base), 0.92);
  border: 1px solid rgba(var(--c-tint), 0.3);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.8), 0 0 34px -10px rgba(var(--c-glow), 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 26px) scale(0.94);
  transition: opacity 0.35s ease, transform 0.55s var(--ease-out), visibility 0s linear 0.55s;
  pointer-events: none;
}
#toast.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 0.35s ease, transform 0.55s var(--ease-out);
}
/* эмодзи в тостах (кот, вечеринка) вне вечеринки — серые */
html:not(.party) #toast { filter: grayscale(1); }

/* =========================================================================
   6. Курсор-светлячок + лепестки (без mix-blend-mode: смешивание заставляло
   браузер пересобирать всю страницу в отдельную текстуру каждый кадр)
   ========================================================================= */
.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 110;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--c-glow), 0.42) 0%, rgba(var(--c-glow), 0.13) 38%, rgba(var(--c-glow), 0) 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }
/* над карточкой светлячок почти гаснет — не мажет стекло и кнопки */
.cursor-glow.is-on.is-dim { opacity: 0.18; }
.trail-petal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 109;
  width: 10px;
  height: 8px;
  margin: -4px 0 0 -5px;
  border-radius: 85% 0 85% 0;
  pointer-events: none;
  background: linear-gradient(135deg, #ffffff 0%, #dedede 45%, #9a9a9a 100%);
  opacity: 0;
}
html.kex-laser .cursor-glow,
html.kex-laser .trail-petal { display: none; }

/* =========================================================================
   7. Заставка
   ========================================================================= */
#splash {
  --x: 50%;
  --y: 50%;
  --r: -120px;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* второй (статичный) отсвет теперь просто часть фона — минус огромный слой */
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(34, 34, 34, 0.8), transparent 70%),
    radial-gradient(45% 40% at 62% 58%, rgba(255, 255, 255, 0.045), transparent 70%),
    var(--bg);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.splash__fx,
.splash__fx > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* «луна»: мягкое пятно света медленно дрейфует (только transform, без blur) */
.splash__fx > .splash__glow {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 90vmax;
  height: 90vmax;
  margin: -45vmax 0 0 -45vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 35%, transparent 62%);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
  0% { transform: translate3d(-14vmax, -6vmax, 0) scale(1); }
  100% { transform: translate3d(12vmax, 8vmax, 0) scale(1.15); }
}
.splash__fx > .splash__lines {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 3px);
  -webkit-mask: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%);
  mask: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%);
}
.splash__fx > .splash__sweep {
  inset: auto 0 auto 0;
  top: 0;
  height: 22vh;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.035) 45%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.035) 55%, transparent);
  animation: sweep 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes sweep {
  from { transform: translate3d(0, -25vh, 0); }
  to { transform: translate3d(0, 105vh, 0); }
}

/* белые лепестки: без blur/box-shadow, «дальние» — просто прозрачнее и меньше */
.splash__petals i {
  position: absolute;
  top: 0;
  left: var(--x);
  width: calc(12px * var(--s, 1));
  height: calc(9px * var(--s, 1));
  border-radius: 85% 0 85% 0;
  background: linear-gradient(135deg, #ffffff 0%, #e2e2e2 45%, #9c9c9c 100%);
  opacity: var(--o, 0.75);
  animation: petalFall var(--d, 10s) linear var(--dl, 0s) infinite;
}
.splash__petals i:nth-child(1)  { --x: 6%;  --d: 11s; --dl: -1s;  --s: 1.1; --dx: 9vw; }
.splash__petals i:nth-child(2)  { --x: 15%; --d: 14s; --dl: -7s;  --s: 0.7; --dx: 6vw;  --o: 0.35; }
.splash__petals i:nth-child(3)  { --x: 24%; --d: 9s;  --dl: -4s;  --s: 1.3; --dx: 12vw; }
.splash__petals i:nth-child(4)  { --x: 33%; --d: 16s; --dl: -11s; --s: 0.6; --dx: 4vw;  --o: 0.3; }
.splash__petals i:nth-child(5)  { --x: 41%; --d: 12s; --dl: -2s;  --s: 0.9; --dx: 10vw; }
.splash__petals i:nth-child(6)  { --x: 52%; --d: 10s; --dl: -8s;  --s: 1.4; --dx: 7vw;  --o: 0.5; }
.splash__petals i:nth-child(7)  { --x: 60%; --d: 13s; --dl: -5s;  --s: 0.8; --dx: 11vw; }
.splash__petals i:nth-child(8)  { --x: 69%; --d: 15s; --dl: -13s; --s: 1;   --dx: 5vw;  --o: 0.45; }
.splash__petals i:nth-child(9)  { --x: 77%; --d: 9.5s;--dl: -6s;  --s: 1.2; --dx: 9vw; }
.splash__petals i:nth-child(10) { --x: 85%; --d: 12.5s;--dl: -9s; --s: 0.65;--dx: 6vw;  --o: 0.3; }
.splash__petals i:nth-child(11) { --x: 92%; --d: 10.5s;--dl: -3s; --s: 1;   --dx: 8vw; }
.splash__petals i:nth-child(12) { --x: 47%; --d: 17s; --dl: -14s; --s: 0.55;--dx: 3vw;  --o: 0.28; }
@keyframes petalFall {
  from { transform: translate3d(0, -6vh, 0) rotate(0deg) rotateX(0deg); }
  to { transform: translate3d(var(--dx, 8vw), 106vh, 0) rotate(560deg) rotateX(900deg); }
}

.splash__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 0 var(--gutter);
  text-align: center;
  transition: transform 0.9s var(--ease-out), opacity 0.6s ease;
}
.splash__kicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  animation: fadeUp 1.2s var(--ease-out) 0.1s both;
}
.splash__sep {
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, var(--hot), var(--violet));
}
.splash__title {
  position: relative;
  isolation: isolate;
  margin: 0;
  max-width: 100%;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(54px, 15.5vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: #fff;
  animation: titleIn 1.4s var(--ease-out) both;
}
.splash__title > span {
  position: relative;
  z-index: 2;
  display: inline-block;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.22), 0 0 120px rgba(255, 255, 255, 0.16);
  animation: glitchMain 4.2s steps(1) 1.4s infinite;
}
/* глитч: белый и графитовый «сдвиги» вместо розового/голубого */
.splash__title::before,
.splash__title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}
.splash__title::before {
  z-index: 1;
  color: #8f8f8f;
  transform: translate(-0.006em, 0);
  opacity: 0.5;
  animation: glitchA 4.2s steps(1) 1.4s infinite;
}
.splash__title::after {
  z-index: 3;
  color: #fff;
  transform: translate(0.006em, 0);
  opacity: 0.3;
  animation: glitchB 4.2s steps(1) 1.4s infinite;
}
@keyframes titleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: none; }
}
@keyframes glitchA {
  0%, 78%, 100% { clip-path: inset(-40% -6% -40% -6%); transform: translate(-0.006em, 0); opacity: 0.5; }
  80% { clip-path: inset(14% 0 62% 0); transform: translate(-0.09em, 0); opacity: 0.9; }
  82% { clip-path: inset(58% 0 18% 0); transform: translate(0.06em, 0.01em); opacity: 0.9; }
  84% { clip-path: inset(32% 0 44% 0); transform: translate(-0.05em, 0); opacity: 0.9; }
  86% { clip-path: inset(78% 0 4% 0); transform: translate(0.04em, 0); opacity: 0.9; }
  88% { clip-path: inset(-40% -6% -40% -6%); transform: translate(-0.006em, 0); opacity: 0.5; }
  93% { clip-path: inset(44% 0 40% 0); transform: translate(0.08em, 0); opacity: 0.9; }
  94% { clip-path: inset(-40% -6% -40% -6%); transform: translate(-0.006em, 0); opacity: 0.5; }
}
@keyframes glitchB {
  0%, 78%, 100% { clip-path: inset(-40% -6% -40% -6%); transform: translate(0.006em, 0); opacity: 0.3; }
  80% { clip-path: inset(66% 0 10% 0); transform: translate(0.08em, 0); opacity: 0.6; }
  82% { clip-path: inset(8% 0 70% 0); transform: translate(-0.07em, -0.01em); opacity: 0.6; }
  84% { clip-path: inset(40% 0 36% 0); transform: translate(0.05em, 0); opacity: 0.6; }
  86% { clip-path: inset(-40% -6% -40% -6%); transform: translate(0.006em, 0); opacity: 0.3; }
  92% { clip-path: inset(20% 0 64% 0); transform: translate(-0.06em, 0); opacity: 0.6; }
  93% { clip-path: inset(-40% -6% -40% -6%); transform: translate(0.006em, 0); opacity: 0.3; }
}
@keyframes glitchMain {
  0%, 79%, 100% { transform: none; }
  80% { transform: translate(0.012em, 0) skewX(-6deg); }
  82% { transform: translate(-0.02em, 0); }
  84% { transform: none; }
  92% { transform: translate(0.015em, 0) skewX(4deg); }
  93% { transform: none; }
}

.splash__hint {
  margin: 4px 0 0;
  animation: fadeUp 1.2s var(--ease-out) 0.5s both;
}
.splash__hint-text {
  position: relative;
  display: inline-block;
  padding: 13px 22px;
  border-radius: 999px;
  font: 500 12.5px/1 var(--f-mono);
  letter-spacing: 0.2em;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.05);
  opacity: 0.45;
  transition: opacity 0.4s ease, border-color 0.3s ease;
}
/* пульс — расходящееся кольцо (transform/opacity) вместо анимации box-shadow,
   которая перерисовывала кнопку каждый кадр */
.splash__hint-text::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.45);
  opacity: 0;
  pointer-events: none;
}
#splash.is-ready .splash__hint-text {
  opacity: 1;
  animation: hintPulse 2.4s ease-in-out infinite;
}
#splash.is-ready .splash__hint-text::after { animation: hintRing 2.4s ease-out infinite; }
#splash:hover .splash__hint-text,
#splash:focus-visible .splash__hint-text { border-color: rgba(255, 255, 255, 0.72); }
#splash:focus-visible .splash__hint-text { outline: 2px solid var(--pink); outline-offset: 4px; }
@keyframes hintPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
@keyframes hintRing {
  0% { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.08, 1.4); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.splash__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(26px + env(safe-area-inset-bottom));
  margin: 0;
  padding: 0 var(--gutter);
  text-align: center;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.65;
  animation: fadeUp 1.2s var(--ease-out) 0.8s both;
}

/* уход: дырка растёт из точки клика */
#splash.is-leaving {
  pointer-events: none;
  cursor: default;
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), transparent var(--r), #000 calc(var(--r) + 110px));
  mask-image: radial-gradient(circle at var(--x) var(--y), transparent var(--r), #000 calc(var(--r) + 110px));
  transition: --r 1.05s cubic-bezier(0.65, 0, 0.25, 1);
  --r: 150vmax;
}
#splash.is-leaving .splash__inner {
  transform: scale(1.14);
  opacity: 0;
}
/* пока дырка растёт — бесконечные эффекты заставки уже не нужны */
#splash.is-leaving .splash__petals,
#splash.is-leaving .splash__sweep,
#splash.is-fading .splash__petals,
#splash.is-fading .splash__sweep { display: none; }
#splash.is-fading {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}

/* =========================================================================
   8. Режим вечеринки (Konami) — единственное место, где есть цвет.
   Подменяем палитру на «ту самую» розово-фиолетовую + радуга
   ========================================================================= */
html.party {
  --pink: #ff8cc6;
  --hot: #ff3d9a;
  --violet: #9b7bff;
  --deep: #2a1446;
  --cyan: #6fdcff;
  --c-glow: 255, 61, 154;
  --c-tint: 255, 140, 198;
  --c-cool: 155, 123, 255;
  --c-base: 14, 8, 26;
  --c-shade: 7, 5, 12;
  --c-on: 64, 14, 52;
}
html.party .card::before {
  padding: 1.5px;
  opacity: 1;
  background: conic-gradient(from var(--rb), #ff3d9a, #ffb84d, #fff27a, #5dffb4, #5ad1ff, #9b7bff, #ff3d9a);
  animation: rainbowSpin 3s linear infinite;
}
html.party .card {
  box-shadow:
    0 40px 90px -34px rgba(0, 0, 0, 0.85),
    0 0 90px -20px rgba(255, 61, 154, 0.55),
    0 0 120px -40px rgba(90, 209, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
html.party .avatar__ring { background: conic-gradient(#ff3d9a, #ffb84d, #fff27a, #5dffb4, #5ad1ff, #9b7bff, #ff3d9a); animation-duration: 1.4s; }
html.party .avatar__glow { background: radial-gradient(closest-side, rgba(255, 61, 154, 0.45), rgba(90, 209, 255, 0.18) 62%, transparent 100%); }
html.party .name__text {
  background: linear-gradient(100deg, #fff 0%, #ffe6f2 18%, var(--pink) 34%, #fff 50%, #e2d8ff 64%, var(--violet) 80%, #fff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 1.6s linear infinite;
}
@media (hover: hover) {
  html.party .name:hover .name__text { animation: shimmer 1.6s linear infinite, nameJolt 1.1s steps(1) infinite; }
}
html.party .tagline { color: #ffd9ec; }
html.party .cursor-glow { background: radial-gradient(circle, rgba(255, 242, 122, 0.5) 0%, rgba(90, 209, 255, 0.25) 38%, transparent 70%); }
html.party .trail-petal { background: linear-gradient(135deg, #fff0f7 0%, #ffb6d9 45%, #ff6fb5 100%); }
/* настоящие цвета брендов */
html.party .link { --b: var(--pink); }
html.party .link[data-id="discord"] { --b: #5865F2; }
html.party .link[data-id="github"] { --b: #f0f6fc; }
html.party .link[data-id="steam"] { --b: #66c0f4; }
html.party .link[data-id="telegram"] { --b: #29A9EB; }
@keyframes rainbowSpin { to { --rb: 360deg; } }

/* =========================================================================
   9. Адаптив
   ========================================================================= */

/* невысокие ноутбуки */
@media (min-width: 900px) and (max-height: 820px) {
  /* сверху ≥ 128px — иначе коту (cat.js: 96px × масштаб 1.28) негде стоять на карточке и он уходит на пол */
  .ui { padding-top: 128px; padding-bottom: 24px; }
  .card { padding: 24px 26px 16px; }
  .avatar { width: 74px; height: 74px; }
  .tagline { margin-top: 16px; }
  .about { font-size: 14px; line-height: 1.55; }
  .links { margin-top: 16px; }
  .link { min-height: 56px; }
  .gh__head { margin: 14px 0 7px; }
  .card__foot { margin-top: 14px; padding-top: 11px; }
}

/* совсем невысокие окна (ноутбук 1366×768 / 1280×720 минус панели браузера) — карточка ещё плотнее,
   чтобы целиком влезала под котом без прокрутки */
@media (min-width: 900px) and (max-height: 720px), (min-width: 900px) and (max-width: 1100px) and (max-height: 820px) {
  .ui { padding-top: 126px; padding-bottom: 10px; }
  .card { padding: 20px 24px 12px; }
  .card__head { gap: 16px; }
  .avatar { width: 62px; height: 62px; }
  .name { font-size: clamp(32px, 2.7vw, 40px); }
  .status { margin-top: 9px; }
  .tagline { margin-top: 12px; font-size: 13px; }
  .about { margin-top: 6px; font-size: 14px; line-height: 1.5; }
  .links { margin-top: 12px; }
  .links__list { gap: 8px; }
  .link { min-height: 50px; padding-top: 7px; padding-bottom: 7px; }
  .link__icon { width: 36px; height: 36px; border-radius: 11px; }
  .gh__head { margin: 12px 0 7px; }
  .gh__recent { display: none !important; }
  .card__foot { margin-top: 11px; padding-top: 9px; }
}

/* большие мониторы — карточка чуть крупнее, чтобы не потерялась */
@media (min-width: 1680px) and (min-height: 940px) {
  .card { width: 520px; padding: 36px 36px 22px; }
  .avatar { width: 98px; height: 98px; }
  .card__head { gap: 22px; }
  .name { font-size: 58px; }
  .status { font-size: 12px; }
  .tagline { font-size: 14.5px; margin-top: 24px; }
  .about { font-size: 16px; }
  .links { margin-top: 24px; }
  .link { min-height: 68px; }
  .link__name { font-size: 14.5px; }
  .link__sub { font-size: 12px; }
  .link__icon { width: 44px; height: 44px; }
  .gh__stats, .gh__repo { font-size: 12px; }
}

@media (max-width: 899.98px) {
  .bg-shade {
    background:
      var(--grain),
      linear-gradient(180deg, rgba(var(--c-shade), 0) 0%, rgba(var(--c-shade), 0) 34%, rgba(var(--c-shade), 0.55) 62%, rgba(var(--c-shade), 0.84) 100%),
      radial-gradient(130% 80% at 50% 26%, rgba(var(--c-shade), 0) 45%, rgba(var(--c-shade), 0.72) 100%);
  }
  #bg-video { object-position: 68% 50%; }
  /* остров сверху (scene3d: центр на 22% высоты), карточка ниже — между ними воздух для кота */
  .ui {
    display: block;
    /* снизу запас под «полосу пола» кота: в самом низу страницы он не стоит поверх подвала карточки */
    padding: 44vh var(--gutter) calc(150px + env(safe-area-inset-bottom));
    padding-top: 44svh;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .card {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 26px 22px 18px;
    background:
      radial-gradient(120% 60% at 0% 0%, rgba(var(--c-glow), 0.07), transparent 60%),
      radial-gradient(110% 60% at 100% 100%, rgba(var(--c-cool), 0.07), transparent 60%),
      rgba(var(--c-base), 0.93);
  }
  .card__head { gap: 16px; }
  .avatar { width: 76px; height: 76px; }
  .name { font-size: clamp(32px, 9.4vw, 44px); }
  .about { font-size: 14.5px; }
  .link { min-height: 60px; }
  /* тост сверху, под рядом кнопок: внизу он закрывал бы ссылки карточки */
  #toast {
    top: calc(72px + env(safe-area-inset-top));
    bottom: auto;
    transform: translate(-50%, -18px) scale(0.94);
  }
  #toast.is-on { transform: translate(-50%, 0) scale(1); }
}

/* телефон боком: как на десктопе — карточка слева, остров справа (scene3d: центр на 75% ширины) */
@media (max-width: 899.98px) and (orientation: landscape) and (max-height: 560px) {
  .ui {
    padding-top: 122px;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: 0;
  }
  .card {
    width: min(52vw, 460px);
    margin: 0;
  }
  .bg-shade {
    background:
      var(--grain),
      linear-gradient(90deg, rgba(var(--c-shade), 0.82) 0%, rgba(var(--c-shade), 0.5) 40%, rgba(var(--c-shade), 0) 62%),
      radial-gradient(120% 95% at 70% 50%, rgba(var(--c-shade), 0) 52%, rgba(var(--c-shade), 0.7) 100%);
  }
}

@media (max-width: 374.98px) {
  .card { padding: 22px 18px 16px; border-radius: 24px; }
  .card__head { gap: 14px; }
  .avatar { width: 66px; height: 66px; }
  .status { font-size: 10.5px; padding: 5px 10px 5px 8px; }
  .tagline { font-size: 12.5px; }
  .splash__kicker { gap: 8px 10px; letter-spacing: 0.18em; }
}

@media (hover: none) {
  .avatar:hover .avatar__img img { transform: scale(1.7); }
}

/* =========================================================================
   10. Облегчённый режим (html.lite: ui.js ставит, если кадры не успевают) —
   гасим остатки бесконечных декоративных анимаций
   ========================================================================= */
html.lite .avatar__ring,
html.lite .tagline__caret,
html.lite .eq i { animation: none; }
html.lite .eq i:nth-child(odd) { transform: scaleY(0.55); }
html.lite .trail-petal { display: none; }
html.lite .card::before { transition: none; }

/* =========================================================================
   11. Меньше движения
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .avatar__ring,
  .name__text,
  .splash__glow,
  .splash__sweep,
  .splash__title,
  .splash__title > span,
  .splash__title::before,
  .splash__title::after,
  .splash__kicker,
  .splash__hint,
  .splash__foot,
  #splash.is-ready .splash__hint-text,
  #splash.is-ready .splash__hint-text::after,
  .tagline__caret,
  .link.is-ping,
  .avatar.is-boop { animation: none !important; }
  .splash__petals,
  .splash__sweep { display: none; }
  .eq i { animation: none; transform: scaleY(0.6); }
  .eq i:nth-child(2) { transform: scaleY(1); }
  .eq i:nth-child(3) { transform: scaleY(0.4); }
  .name:hover::before,
  .name:hover::after,
  .name:hover .name__text { animation: none; }
  html.js .reveal { translate: none; }
  html.js .card { translate: none; scale: none; }
  html.js.entered .reveal { transition: opacity 0.5s ease; transition-delay: calc(0.2s + var(--i, 0) * 40ms); }
  html.js.entered .card { transition: opacity 0.5s ease; }
  /* .link / .link__icon оставляем со своим translate3d: при reduced motion --mx/--my всегда 0 (ui.js
     не вешает «магнит»), а отдельный слой у кнопки убирает артефакты отрисовки градиентного фона */
  .link:hover .link__icon svg { transform: none; }
  html.party .bg-shade::after { animation: none; }
  html.party .card::before { animation: none; }
  html.party .name__text { animation: none; }
}