/* ============================================================
   RubickSlime — страница ссылок
   Желейная версия той же страницы: мятная слизь стекает сверху,
   карточки — глянцевый мармелад, который пружинит и дрожит.
   Палитра снята с эмоутов и артов: мятные волосы, тёмная одежда,
   золотые серёжки, румянец.
   ============================================================ */

:root {
  --slime-50:  #effbf6;
  --slime-100: #dcf5ea;
  --slime-200: #bdeedb;
  --slime-300: #8fe0c4;
  --slime-400: #5fcfb0;
  --slime-500: #36b394;
  --slime-600: #23947a;
  --slime-700: #17735f;
  --slime-800: #0f5446;
  --night:     #1b2421;
  --night-2:   #35433e;
  --gold:      #d6ae55;
  --gold-hi:   #ffe6a3;
  --blush:     #f5b9c0;
  --ink:       #12372e;
  --ink-soft:  #44685f;

  /* «толщина» желе — нижняя кромка под карточками */
  --lip: rgba(35, 148, 122, .34);

  --font-head: 'Rubik', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  /* пружина: там, где браузер не знает linear(), остаётся простой «перелёт» */
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* мятная бусина с бликом — стрелки и круглые кнопки */
  --bead:
    radial-gradient(60% 50% at 35% 25%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #e6f9f1, #9fe5cc);
  /* тёмная плитка под эмоут — цвет его одежды */
  --tile:
    radial-gradient(70% 45% at 34% 18%, rgba(255,255,255,.34), rgba(255,255,255,0) 62%),
    radial-gradient(90% 60% at 50% 118%, rgba(95,207,176,.55), rgba(95,207,176,0) 70%),
    linear-gradient(160deg, #35433e, #1b2421);
  /* полупрозрачный пузырёк: середина почти прозрачная, цвет только по краю */
  --bubble:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.9) 0 10%, rgba(255,255,255,.25) 20%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.4) 0 6%, rgba(255,255,255,0) 16%),
    radial-gradient(circle, rgba(189,238,219,.06) 0 48%, rgba(95,207,176,.26) 76%, rgba(35,148,122,.4) 100%);
  --bubble-blush:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.9) 0 10%, rgba(255,255,255,.25) 20%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.4) 0 6%, rgba(255,255,255,0) 16%),
    radial-gradient(circle, rgba(255,230,234,.06) 0 48%, rgba(245,185,192,.3) 76%, rgba(222,130,146,.4) 100%);
  /* капли по нижнему краю обложки */
  --drip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M0 0H120V6C112 6 111 14 104 14S96 6 88 6H70C63 6 64 20 57 20S51 6 44 6H30C24 6 24 11 19 11S14 6 8 6H0Z'/%3E%3C/svg%3E");
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #f1faf6; -webkit-tap-highlight-color: transparent; }
html.is-locked { overflow: hidden; }

body {
  position: relative;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* мятное сияние — статичный слой */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 560px at 88% 6%, rgba(143,224,196,.5), transparent 62%),
    radial-gradient(760px 520px at -8% 38%, rgba(189,238,219,.7), transparent 60%),
    radial-gradient(640px 460px at 80% 80%, rgba(245,185,192,.24), transparent 60%),
    radial-gradient(900px 600px at 40% 112%, rgba(95,207,176,.4), transparent 62%),
    linear-gradient(180deg, #f3fbf8 0%, #f6fbf4 55%, #e4f5ee 100%);
  transform: translateZ(0);
}
/* мелкие «пупырышки», как на поверхности мармелада */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(54,179,148,.12) 1.3px, transparent 1.8px);
  background-size: 24px 24px;
  transform: translateZ(0);
}

:focus-visible { outline: 3px solid var(--slime-600); outline-offset: 4px; border-radius: 12px; }

/* ---------- Слизь сверху ---------- */
.slime-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  pointer-events: none;
}
.slime-top svg { display: block; width: 100%; height: auto; overflow: visible; }
.slime-top .drip {
  transform-box: fill-box; transform-origin: 50% 0;
  animation: dripWobble 4.6s ease-in-out infinite;
}
@keyframes dripWobble {
  0%, 100% { transform: scale(1, 1); }
  40%      { transform: scale(.92, 1.12); }
  70%      { transform: scale(1.06, .95); }
}
/* капля отрывается от кончика и падает */
.drop {
  position: absolute; width: var(--ds); height: calc(var(--ds) * 1.12);
  margin-left: calc(var(--ds) / -2);
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,0) 32%),
    linear-gradient(180deg, #5fcfb0, #23947a);
  opacity: 0;
  animation: dropFall var(--dur, 6s) cubic-bezier(.5, 0, .9, .5) var(--delay, 0s) infinite;
}
@keyframes dropFall {
  0%   { translate: 0 0; scale: .15; opacity: 0; }
  12%  { opacity: 1; }
  50%  { translate: 0 calc(var(--ds) * .35); scale: 1 1; }
  58%  { scale: .82 1.25; }
  68%  { opacity: 1; }
  100% { translate: 0 42vh; scale: .7 1.2; opacity: 0; }
}

/* ---------- Желейные капли на фоне ---------- */
.blobs {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  contain: layout paint;
}
.blobs span {
  position: absolute; bottom: -18vh;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.35) 18%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 64% 72%, rgba(35,148,122,.35), rgba(35,148,122,0) 60%),
    linear-gradient(160deg, rgba(189,238,219,.8), rgba(95,207,176,.6));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    inset 0 -4px 10px rgba(35,148,122,.28),
    inset 0 3px 6px rgba(255,255,255,.7),
    0 6px 18px rgba(35,148,122,.18);
  opacity: 0;
  animation:
    blobRise var(--rise, 24s) linear var(--d1, 0s) infinite,
    blobWobble var(--wob, 4s) ease-in-out var(--d2, 0s) infinite alternate;
  will-change: transform, opacity;
}
@keyframes blobRise {
  0%   { translate: 0 0; opacity: 0; }
  8%   { opacity: var(--o, .5); }
  50%  { translate: var(--sway, 20px) -58vh; }
  92%  { opacity: var(--o, .5); }
  100% { translate: calc(var(--sway, 20px) * -.6) -126vh; opacity: 0; }
}
@keyframes blobWobble {
  0%   { scale: 1.1 .9;  rotate: -8deg; }
  50%  { scale: .92 1.08; rotate: 6deg; }
  100% { scale: 1.04 .96; rotate: -2deg; }
}

/* ---------- Каркас ---------- */
.page {
  position: relative; z-index: 2;
  width: 100%; max-width: 560px;
  margin: 0 auto; padding: 124px 20px 44px;
}

/* ---------- Общие желейные движения ---------- */
@keyframes jelly {
  0%   { scale: 1 1; }
  22%  { scale: 1.05 .9; }
  38%  { scale: .96 1.06; }
  54%  { scale: 1.025 .97; }
  70%  { scale: .99 1.015; }
  86%  { scale: 1.005 .995; }
  100% { scale: 1 1; }
}
@keyframes tileJelly {
  0%   { scale: 1 1; }
  25%  { scale: 1.18 .82; }
  42%  { scale: .88 1.14; }
  60%  { scale: 1.07 .94; }
  78%  { scale: .98 1.03; }
  100% { scale: 1 1; }
}
@keyframes boing {
  0%   { scale: 1 1; }
  20%  { scale: 1.2 .78; }
  40%  { scale: .86 1.16; translate: 0 -10px; }
  60%  { scale: 1.08 .93; translate: 0 0; }
  80%  { scale: .97 1.03; }
  100% { scale: 1 1; }
}
@keyframes morph {
  0%   { border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%; }
  33%  { border-radius: 58% 42% 55% 45% / 45% 56% 44% 55%; }
  66%  { border-radius: 43% 57% 42% 58% / 58% 42% 57% 43%; }
  100% { border-radius: 53% 47% 58% 42% / 46% 58% 42% 54%; }
}
@keyframes twinkle {
  0%, 100% { scale: .55; rotate: 0deg; opacity: .45; }
  50%      { scale: 1;   rotate: 45deg; opacity: 1; }
}

/* ---------- Профиль ---------- */
.profile {
  position: relative; text-align: center;
  padding: 0 26px 28px; margin-bottom: 34px;
  border-radius: 34px;
  background:
    radial-gradient(90% 45% at 50% 112%, rgba(95,207,176,.4), rgba(95,207,176,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(233,250,243,.92) 60%, rgba(208,243,229,.94));
  border: 2px solid #fff;
  box-shadow:
    inset 0 -10px 20px rgba(54,179,148,.18),
    0 8px 0 var(--lip),
    0 28px 44px -16px rgba(15,84,70,.42);
}

.profile__cover {
  position: relative;
  margin: 0 -26px;
  aspect-ratio: 1100 / 461;
  border-radius: 32px 32px 0 0;
  overflow: hidden;
  background: var(--slime-100);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat, var(--drip-mask) bottom left / 120px 22px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 20px) no-repeat, var(--drip-mask) bottom left / 120px 22px repeat-x;
}
.profile__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* мятная кромка, чтобы капли по краю обложки были видны на светлом баннере */
.profile__cover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: linear-gradient(180deg, rgba(143,224,196,0), rgba(95,207,176,.9));
}

.profile__avatar {
  position: relative; z-index: 2; display: block;
  width: 124px; height: 124px; margin: -66px auto 12px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
  border-radius: 50%;
  transform-origin: 50% 100%;
  transition: translate .6s var(--spring);
}
.profile__avatar.is-boing { animation: boing .7s var(--ease-soft) both; }
.profile__blob {
  position: absolute; inset: 0;
  display: grid; place-items: center; overflow: hidden;
  border: 4px solid #fff;
  border-radius: 50%;
  background:
    radial-gradient(60% 45% at 34% 22%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(85% 70% at 50% 112%, var(--slime-600), rgba(35,148,122,0) 72%),
    linear-gradient(160deg, var(--slime-200), var(--slime-400));
  box-shadow:
    inset 0 -8px 14px rgba(15,84,70,.25),
    0 6px 0 var(--lip),
    0 18px 30px -10px rgba(15,84,70,.45);
  animation: morph 9s ease-in-out infinite alternate;
}
.profile__letter { font-family: var(--font-head); font-weight: 800; font-size: 50px; color: #fff; text-shadow: 0 3px 0 var(--slime-600); }
.profile__blob .art {
  position: absolute; z-index: 1;
  left: -7%; top: 2%; width: 114%; height: 114%;
}

/* блёстки-звёздочки, как на баннере */
.spark {
  position: absolute; z-index: 3; width: 18px; height: 18px;
  color: var(--gold); pointer-events: none;
  animation: twinkle 3.4s ease-in-out infinite;
}
.spark svg { display: block; width: 100%; height: 100%; }
.spark--a { left: 30px;  top: calc(50% + 10px); }
.spark--b { right: 34px; top: calc(50% - 4px); width: 14px; height: 14px; color: var(--slime-400); animation-delay: -1.2s; }
.spark--c { right: 62px; top: calc(50% + 40px); width: 10px; height: 10px; animation-delay: -2.3s; }

/* имя: каждая буква — отдельный мармеладный кубик (разбивает js/main.js) */
.profile__name {
  font-family: var(--font-head); font-weight: 800;
  font-size: 44px; line-height: 1.1; letter-spacing: .01em;
  color: var(--slime-600);
  filter: drop-shadow(0 3px 0 #1d8a6e) drop-shadow(0 10px 12px rgba(15,84,70,.26));
}
.profile__name .ch {
  display: inline-block;
  background: linear-gradient(180deg, #d2f8ea 0%, #74dcbb 36%, #34b490 70%, #1f9476 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transform-origin: 50% 90%;
  animation: letterIn .9s var(--ease-soft) calc(.3s + var(--i, 0) * 55ms) backwards;
}
.profile__name .ch.is-in { animation: none; }
.profile__name .ch.is-jiggle { animation: letterJelly .7s var(--ease-soft) both; }
@keyframes letterIn {
  0%   { opacity: 0; translate: 0 -40px; scale: .7 1.3; }
  45%  { opacity: 1; translate: 0 0;     scale: 1.25 .75; }
  65%  { scale: .9 1.12; }
  82%  { scale: 1.05 .95; }
  100% { opacity: 1; translate: 0 0; scale: 1 1; }
}
@keyframes letterJelly {
  0%   { scale: 1 1; }
  28%  { scale: 1.25 .78; }
  48%  { scale: .86 1.16; translate: 0 -7px; }
  68%  { scale: 1.07 .94; translate: 0 0; }
  84%  { scale: .98 1.02; }
  100% { scale: 1 1; }
}

.profile__handle {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 5px 15px 5px 11px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  color: var(--slime-200);
  background:
    radial-gradient(60% 70% at 30% 10%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, var(--night-2), var(--night));
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,.4),
    inset 0 1px 1px rgba(255,255,255,.25),
    0 3px 0 rgba(15,40,34,.3);
}
/* золотая точка — как серёжка */
.profile__handle::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 70%);
  box-shadow: 0 0 0 2px rgba(214,174,85,.28);
}
.profile__bio { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); text-wrap: balance; }
.profile__tagline {
  display: block; margin-bottom: 4px;
  font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: var(--slime-700);
}
.profile__tagline::before,
.profile__tagline::after { content: '★'; margin: 0 7px; font-size: 11px; color: var(--gold); vertical-align: 2px; }

/* плашка с временем стримов */
.profile__when {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 6px 14px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 500; font-size: 13px; color: var(--slime-800);
  background: var(--bead);
  border: 1.5px solid rgba(255,255,255,.95);
  box-shadow: inset 0 -3px 5px rgba(35,148,122,.24), 0 3px 0 var(--lip);
}
.profile__when-text { text-align: left; line-height: 1.35; }
.profile__when-text small { font-size: inherit; color: var(--slime-700); white-space: nowrap; }
.profile__when-text small::before { content: '· '; }
.profile__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #4fd1a9 40%, #1f9476);
  box-shadow: 0 0 0 0 rgba(54,179,148,.5);
  animation: live 2.4s ease-out infinite;
}
@keyframes live {
  0%   { box-shadow: 0 0 0 0 rgba(54,179,148,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(54,179,148,0); }
  100% { box-shadow: 0 0 0 0 rgba(54,179,148,0); }
}

/* ---------- Заголовки групп ---------- */
.group {
  display: flex; align-items: center; gap: 10px;
  margin: 36px 6px 16px;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slime-700);
}
.group::before {
  content: ''; flex: none; width: 14px; height: 16px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 16%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, var(--slime-300), var(--slime-600));
  box-shadow: 0 2px 0 var(--lip);
}
.group::after {
  content: ''; flex: 1; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--slime-200), rgba(189,238,219,0));
}

/* ---------- Ссылки ---------- */
.links { display: grid; gap: 16px; }

.link {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 15px 16px 15px 15px;
  border-radius: 26px;
  color: inherit; text-decoration: none;
  /* полупрозрачный мармелад: фоновые капли просвечивают */
  background:
    radial-gradient(90% 70% at 50% 128%, rgba(95,207,176,.45), rgba(95,207,176,0) 70%),
    linear-gradient(180deg, rgba(236,251,245,.9) 0%, rgba(214,244,232,.88) 55%, rgba(193,236,219,.9) 100%);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -7px 14px rgba(54,179,148,.22),
    0 6px 0 var(--lip),
    0 18px 28px -14px rgba(15,84,70,.42);
  transform-origin: 50% 100%;
  transition: translate .6s var(--spring), box-shadow .4s var(--ease-soft);
}
/* глянцевый блик сверху */
.link::before {
  content: ''; position: absolute; top: 5px; left: 84px; width: 34%; height: 7px;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.link::after {
  content: ''; position: absolute; top: 5px; left: calc(84px + 34% + 7px);
  width: 7px; height: 7px; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.9);
}
.link.is-jiggle { animation: jelly .8s var(--ease-soft) both; }
.link.is-jiggle .link__ico { animation: tileJelly .8s var(--ease-soft) .05s both; }

.link__ico {
  position: relative; flex: none;
  width: 54px; height: 54px; border-radius: 19px;
  display: grid; place-items: center; color: var(--slime-300);
  background: var(--tile);
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.35),
    inset 0 2px 2px rgba(255,255,255,.22),
    0 4px 0 rgba(15,40,34,.3),
    0 10px 16px -6px rgba(15,40,34,.45);
  transform-origin: 50% 100%;
}
.link__glyph { width: 26px; height: 26px; display: block; transition: opacity .2s; }
.has-art > .link__glyph { opacity: 0; }

/* эмоут поверх плитки: макушка вылезает за край, как из банки с желе.
   Нет файла — картинки нет, остаётся рисованная иконка сервиса. */
.art {
  display: block; pointer-events: none; user-select: none; -webkit-user-drag: none;
  object-fit: contain; object-position: 50% 100%;
  transform-origin: 50% 100%;
  transition: scale .6s var(--spring), translate .6s var(--spring);
}
.link__ico .art {
  position: absolute; z-index: 2;
  left: -12%; bottom: 0; width: 124%; height: 124%;
  /* низ эмоута обрезан скруглением плитки, верх свободен */
  clip-path: inset(-40% -20% 0 -20% round 0 0 19px 19px);
}

/* маленький значок сервиса в углу плитки — виден, когда на плитке эмоут */
.link__mini {
  position: absolute; z-index: 3; right: -7px; bottom: -7px;
  width: 24px; height: 24px; border-radius: 50%;
  display: none; place-items: center;
  color: #fff; background: var(--brand, var(--slime-600));
  border: 2px solid #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,.14);
}
.link__mini svg { width: 13px; height: 13px; display: block; }
.has-art .link__mini { display: grid; }

.link__text { flex: 1; min-width: 0; }
.link__title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--ink); }
.link__sub { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; word-break: break-word; }

.link__arrow {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1;
  color: var(--slime-700);
  background: var(--bead);
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: inset 0 -3px 5px rgba(35,148,122,.3), 0 3px 0 var(--lip);
  transition: translate .6s var(--spring);
}

@media (hover: hover) {
  .link:hover {
    translate: 0 -5px;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.9),
      inset 0 -7px 14px rgba(54,179,148,.22),
      0 10px 0 var(--lip),
      0 28px 34px -14px rgba(15,84,70,.46);
  }
  .link:hover .link__arrow { translate: 5px 0; }
  .link:hover .art { scale: 1.1; translate: 0 -3px; }
  .profile__avatar:hover { translate: 0 -4px; }
  .profile__avatar:hover .art { scale: 1.06; }
}
/* нажатие — желе проминается */
.link:active {
  translate: 0 5px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -5px 12px rgba(54,179,148,.26),
    0 1px 0 var(--lip),
    0 6px 12px -8px rgba(15,84,70,.4);
  transition-duration: .12s;
}

/* главная ссылка */
.link--featured {
  padding: 22px 18px 22px 18px; border-radius: 30px;
  background:
    radial-gradient(120% 80% at 50% -34%, rgba(255,255,255,.8), rgba(255,255,255,0) 56%),
    radial-gradient(90% 70% at 50% 128%, rgba(23,115,95,.34), rgba(23,115,95,0) 70%),
    linear-gradient(170deg, rgba(186,240,219,.95), rgba(128,221,190,.94) 58%, rgba(92,205,170,.95));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -8px 16px rgba(15,84,70,.24),
    0 8px 0 rgba(23,115,95,.42),
    0 24px 36px -14px rgba(15,84,70,.5);
}
.link--featured::before { left: 100px; }
.link--featured::after  { left: calc(100px + 34% + 7px); }
.link--featured .link__ico { width: 62px; height: 62px; border-radius: 21px; }
.link--featured .link__ico .art { clip-path: inset(-40% -20% 0 -20% round 0 0 21px 21px); }
.link--featured .link__glyph { width: 30px; height: 30px; }
.link--featured .link__title { font-size: 20px; }
.link--featured .link__sub { font-size: 13.5px; color: #20574a; }
.link--featured .link__arrow { width: 36px; height: 36px; }
@media (hover: hover) {
  .link--featured:hover {
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.85),
      inset 0 -8px 16px rgba(15,84,70,.24),
      0 12px 0 rgba(23,115,95,.42),
      0 32px 40px -14px rgba(15,84,70,.52);
  }
}
.link--featured:active {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -6px 14px rgba(15,84,70,.28),
    0 2px 0 rgba(23,115,95,.42),
    0 8px 14px -8px rgba(15,84,70,.45);
}
/* золотой стикер — цвет серёжек */
.link__badge {
  position: absolute; z-index: 4; top: -11px; right: 20px;
  padding: 3px 12px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: #3b2a07;
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--gold-hi), var(--gold));
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: inset 0 -2px 3px rgba(120,80,10,.25), 0 3px 0 rgba(140,100,30,.35);
  rotate: 3deg;
}

/* ---------- Галерея артов ---------- */
.gallery { position: relative; margin: 0 -20px; }
.gallery__track {
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
  padding: 10px 20px 22px;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.gallery__track::-webkit-scrollbar { display: none; }

.shot {
  position: relative; flex: none;
  width: 140px; aspect-ratio: 3 / 4; padding: 0;
  border: 3px solid #fff; border-radius: 24px; overflow: hidden;
  cursor: zoom-in; background: var(--slime-100);
  scroll-snap-align: start;
  box-shadow: 0 5px 0 var(--lip), 0 14px 20px -10px rgba(15,84,70,.45);
  transform-origin: 50% 100%;
  transition: translate .6s var(--spring);
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--spring); }
.shot::after {
  content: ''; position: absolute; top: 7px; left: 12px; width: 42%; height: 7px;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,0));
}
.shot.is-jiggle { animation: jelly .7s var(--ease-soft) both; }
@media (hover: hover) {
  .shot:hover { translate: 0 -5px; }
  .shot:hover img { scale: 1.08; }
}
.shot:active { translate: 0 3px; transition-duration: .12s; }

.gallery__nav {
  position: absolute; z-index: 3; top: calc(50% - 26px);
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #fff; padding: 0; cursor: pointer;
  display: none; place-items: center;
  color: var(--slime-800); background: var(--bead);
  box-shadow: inset 0 -4px 6px rgba(35,148,122,.32), 0 4px 0 var(--lip), 0 10px 16px -6px rgba(15,84,70,.4);
  transition: opacity .3s, scale .5s var(--spring), translate .5s var(--spring);
}
.gallery__nav svg { width: 20px; height: 20px; display: block; }
.gallery__nav--prev { left: 6px; }
.gallery__nav--next { right: 6px; }
.gallery__nav:disabled { opacity: 0; pointer-events: none; }
.gallery__nav:active { translate: 0 3px; }
@media (hover: hover) {
  .gallery__nav { display: grid; }
  .gallery__nav:hover { scale: 1.12; }
}

/* ---------- Слайд-шоу артов по бокам (только широкий экран) ---------- */
.side { display: none; }
@media (min-width: 1180px) {
  .group--arts, .gallery { display: none; }
  .side {
    /* ширина рамки — сколько влезает между краем экрана и колонкой, но не выше экрана */
    --side-w: min(clamp(210px, calc((100vw - 560px) / 2 - 110px), 340px), calc((100vh - 190px) * .75));
    display: block; position: fixed; z-index: 2; top: 53%;
    width: var(--side-w);
    pointer-events: none;
  }
  .side--left  { left: calc((100vw - 560px) / 4);  translate: -50% -50%; rotate: -3deg; }
  .side--right { right: calc((100vw - 560px) / 4); translate: 50% -50%;  rotate: 3deg; }
}
.side__float { animation: sideFloat 7s ease-in-out infinite; }
.side--right .side__float { animation-delay: -3.5s; }
@keyframes sideFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
.side__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  padding: 0; border: 5px solid #fff; border-radius: 34px; overflow: hidden;
  cursor: zoom-in; pointer-events: auto;
  background:
    radial-gradient(60% 40% at 35% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, var(--slime-100), var(--slime-300));
  box-shadow:
    0 8px 0 var(--lip),
    0 32px 46px -16px rgba(15,84,70,.48);
  transform-origin: 50% 100%;
  opacity: 0;
}
.side.is-ready .side__frame { opacity: 1; }
.side__frame.is-jiggle { animation: jelly .8s var(--ease-soft) both; }
.side__frame.is-pop    { animation: popIn .8s var(--ease-soft) both; }
/* глянцевый блик поверх арта */
.side__frame::after {
  content: ''; position: absolute; z-index: 3; top: 34px; left: 20px; width: 36%; height: 9px;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,0));
}
.side__img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
  transition: scale .8s var(--spring);
}
/* новый арт проявляется расползающейся каплей */
.side__img.is-enter { z-index: 2; animation: blobReveal 1s var(--ease-soft) both; }
@keyframes blobReveal {
  0%   { clip-path: circle(0% at 50% 58%);  scale: 1.25; }
  100% { clip-path: circle(85% at 50% 58%); scale: 1; }
}
@media (hover: hover) {
  .side__frame:hover .side__img { scale: 1.05; }
}
/* слизь, стекающая с верхнего края рамки */
.side__cap {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 26px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0 3px, rgba(255,255,255,0) 6px),
    linear-gradient(180deg, #b2eed8, #3fbb98);
  -webkit-mask: var(--drip-mask) top left / 120px 26px repeat-x;
          mask: var(--drip-mask) top left / 120px 26px repeat-x;
}
/* трубочка, которая наполняется слизью до смены арта */
.side__meta {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 12px 0;
}
.side__bar {
  position: relative; flex: 1; height: 13px; overflow: hidden;
  border-radius: 99px; border: 2px solid #fff;
  background: rgba(220,245,234,.8);
  box-shadow: inset 0 2px 3px rgba(15,84,70,.2), 0 3px 0 var(--lip);
}
.side__bar i {
  position: absolute; inset: 0; border-radius: inherit;
  transform-origin: 0 50%;
  background:
    radial-gradient(70% 45% at 50% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--slime-300), var(--slime-600));
  animation: sideBar 5.6s linear both;
}
@keyframes sideBar {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}
.side:hover .side__bar i,
.is-locked .side__bar i { animation-play-state: paused; }
.side__count {
  flex: none; padding: 2px 10px; border-radius: 99px;
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  color: var(--slime-700); background: var(--bead);
  border: 1.5px solid #fff;
  box-shadow: 0 2px 0 var(--lip);
}

/* ---------- Просмотр арта ---------- */
.lightbox {
  margin: auto; padding: 0; border: 0;
  background: transparent; color: var(--ink);
  max-width: 100vw; max-height: 100vh; overflow: visible;
}
.lightbox[open] { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lightbox::backdrop {
  background: rgba(10, 44, 36, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox__stage { position: relative; }
.lightbox__frame {
  position: relative; overflow: hidden;
  border-radius: 30px; border: 5px solid #fff;
  background: var(--slime-100);
  box-shadow: 0 9px 0 rgba(23,115,95,.6), 0 30px 60px rgba(0,0,0,.35);
  transform-origin: 50% 60%;
  touch-action: pan-y;
}
.lightbox__frame::after {
  content: ''; position: absolute; top: 10px; left: 18px; width: 30%; height: 9px;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,0));
}
.lightbox__frame.is-pop    { animation: popIn .7s var(--ease-soft) both; }
.lightbox__frame.is-jiggle { animation: jelly .7s var(--ease-soft) both; }
@keyframes popIn {
  0%   { scale: .35; opacity: 0; }
  40%  { scale: 1.08 .92; opacity: 1; }
  60%  { scale: .96 1.05; }
  80%  { scale: 1.02 .98; }
  100% { scale: 1 1; opacity: 1; }
}
.lightbox__img {
  display: block; width: auto; height: auto;
  max-width: min(88vw, 760px); max-height: calc(100vh - 150px);
  min-width: 180px; min-height: 180px; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.lb-btn {
  position: absolute; z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid #fff; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  color: var(--slime-800); background: var(--bead);
  box-shadow: inset 0 -4px 6px rgba(15,84,70,.3), 0 4px 0 rgba(23,115,95,.55), 0 10px 18px rgba(0,0,0,.25);
  transition: scale .5s var(--spring), translate .5s var(--spring);
}
.lb-btn svg { width: 22px; height: 22px; display: block; }
.lb-btn:active { translate: 0 3px; }
@media (hover: hover) { .lb-btn:hover { scale: 1.12; } }
.lb-btn--close { top: -18px; right: -18px; }
.lb-btn--prev  { left: -24px;  top: 50%; margin-top: -24px; }
.lb-btn--next  { right: -24px; top: 50%; margin-top: -24px; }
.lightbox__count {
  padding: 3px 14px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: #fff; background: rgba(10,44,36,.55);
}

/* ---------- Донат ---------- */
.donate-wrap { position: relative; margin-top: 92px; }
/* эмоут с сердечком выглядывает из-за кнопки: над ней видно лицо и сердце */
.peek {
  position: absolute; z-index: 1; right: 30px; top: -90px;
  width: 108px; height: 108px; pointer-events: none;
  transform-origin: 50% 100%;
  animation: peekSway 3.4s ease-in-out infinite;
  transition: translate .6s var(--spring);
}
@keyframes peekSway {
  0%, 100% { rotate: -6deg; }
  50%      { rotate: 6deg; }
}
.donate {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 24px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 19px;
  color: #fff; text-decoration: none;
  text-shadow: 0 2px 0 rgba(10,70,56,.45);
  background:
    radial-gradient(50% 70% at 28% 8%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #47c9a5, #1c8a6f);
  border: 2px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 -7px 12px rgba(10,60,48,.35),
    inset 0 3px 2px rgba(255,255,255,.5),
    0 7px 0 #146b56,
    0 22px 30px -10px rgba(15,84,70,.55);
  transform-origin: 50% 100%;
  animation: donatePulse 4.2s ease-in-out infinite;
  transition: translate .6s var(--spring), box-shadow .4s var(--ease-soft);
}
.donate::before {
  content: ''; position: absolute; top: 6px; left: 40px; width: 28%; height: 8px;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,0));
}
.donate svg { width: 22px; height: 22px; flex: none; }
.donate.is-jiggle { animation: jelly .8s var(--ease-soft) both; }
@keyframes donatePulse {
  0%, 70%, 100% { scale: 1 1; }
  76% { scale: 1.04 .92; }
  83% { scale: .97 1.05; }
  90% { scale: 1.015 .985; }
}
@media (hover: hover) {
  .donate:hover {
    translate: 0 -4px;
    box-shadow:
      inset 0 -7px 12px rgba(10,60,48,.35),
      inset 0 3px 2px rgba(255,255,255,.5),
      0 11px 0 #146b56,
      0 30px 34px -10px rgba(15,84,70,.6);
  }
  .donate-wrap:hover .peek { translate: 0 -16px; }
}
.donate:active {
  translate: 0 6px;
  box-shadow:
    inset 0 -5px 10px rgba(10,60,48,.4),
    inset 0 3px 2px rgba(255,255,255,.5),
    0 1px 0 #146b56,
    0 8px 14px -8px rgba(15,84,70,.5);
  transition-duration: .12s;
}

.donate-note {
  margin: 16px 10px 0; text-align: center;
  font-size: 14px; line-height: 1.5; color: var(--ink-soft); text-wrap: balance;
}

/* ---------- Подвал ---------- */
.foot {
  margin-top: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; font-size: 13px; color: var(--ink-soft);
}
.foot__sleepy {
  width: 72px; height: 72px;
  transform-origin: 50% 100%;
  animation: snooze 3.8s ease-in-out infinite;
}
@keyframes snooze {
  0%, 100% { scale: 1 1; }
  50%      { scale: 1.05 .95; }
}

/* ---------- Пузырьки по клику на пустое место ---------- */
.splat { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
/* мягкое кольцо расходится от точки клика, как круг на воде */
.splat::before {
  content: ''; position: absolute;
  left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255,255,255,0) 60%,
    rgba(95,207,176,.2) 78%,
    rgba(255,255,255,.5) 91%,
    rgba(255,255,255,0) 100%);
  opacity: 0;
  animation:
    splatRingGrow 1.3s cubic-bezier(.16, 1, .3, 1) forwards,
    splatRingFade 1.3s cubic-bezier(.4, 0, .7, .2) forwards;
}
/* пузырьки плавно отплывают от точки клика, чуть всплывают и тают */
.splat i {
  position: absolute;
  left: calc(var(--ds) / -2); top: calc(var(--ds) / -2); width: var(--ds); height: var(--ds);
  border-radius: 50%;
  background: var(--bubble);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  opacity: 0;
  animation:
    splatDrift 1.4s cubic-bezier(.16, 1, .3, 1) both,
    splatFade 1.4s ease-out both;
}
.splat i.is-blush { background: var(--bubble-blush); }
@keyframes splatRingGrow {
  from { scale: .2; }
  to   { scale: 1.6; }
}
@keyframes splatRingFade {
  from { opacity: .85; }
  to   { opacity: 0; }
}
@keyframes splatDrift {
  from { translate: 0 0; scale: .3; }
  to   { translate: var(--dx) var(--dy); scale: 1; }
}
@keyframes splatFade {
  0%   { opacity: 0; }
  14%  { opacity: var(--o, .65); }
  50%  { opacity: var(--o, .65); }
  100% { opacity: 0; }
}

/* ---------- Полупрозрачные пузырьки за курсором ---------- */
.cursor-bubbles {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none; overflow: hidden; contain: strict;
}
.cb {
  position: absolute;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: var(--bubble);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  opacity: 0;
  animation: cbRise var(--life, 1.3s) cubic-bezier(.25, .7, .4, 1) forwards;
}
/* изредка — розоватый, как румянец на эмоутах */
.cb.is-blush { background: var(--bubble-blush); }
@keyframes cbRise {
  0%   { opacity: 0;        scale: .3;       translate: 0 0; }
  12%  { opacity: var(--o); scale: 1.12 .88; }
  30%  { scale: .92 1.08; }
  50%  { scale: 1.05 .95;   translate: calc(var(--dx) * .5) calc(var(--dy) * .45); }
  72%  { scale: .98 1.02;   opacity: var(--o); }
  100% { opacity: 0;        scale: 1.15;     translate: var(--dx) var(--dy); }
}

/* ---------- Появление: карточки плюхаются и пружинят ---------- */
@keyframes riseIn {
  0%   { opacity: 0; translate: 0 28px; scale: .94 1.06; }
  55%  { opacity: 1; translate: 0 -4px; scale: 1.03 .96; }
  78%  { translate: 0 1px; scale: .99 1.01; }
  100% { opacity: 1; translate: 0 0; scale: 1 1; }
}
.reveal { animation: riseIn .8s var(--ease-soft) backwards; transform-origin: 50% 100%; }
.link--featured.reveal { animation-delay: .1s; }
.links .link:nth-child(1) { animation-delay: .16s; }
.links .link:nth-child(2) { animation-delay: .22s; }
.links .link:nth-child(3) { animation-delay: .28s; }
.links .link:nth-child(4) { animation-delay: .34s; }
.gallery.reveal { animation-delay: .4s; }
.donate-wrap.reveal { animation-delay: .46s; }

/* ---------- Экраны поуже ---------- */
@media (max-width: 600px) {
  .page { padding-top: 92px; }
  .lb-btn--prev  { left: 8px; }
  .lb-btn--next  { right: 8px; }
  .lb-btn--close { top: -16px; right: -8px; }
}
@media (max-width: 420px) {
  .page { padding: 88px 14px 32px; }
  .gallery { margin: 0 -14px; }
  .gallery__track { padding-inline: 14px; scroll-padding-inline: 14px; }
  .profile { padding: 0 18px 24px; }
  .profile__cover { margin: 0 -18px; }
  .profile__avatar { width: 108px; height: 108px; margin-top: -56px; }
  .profile__name { font-size: 35px; }
  /* на узком экране расписание в две строки: время и график под ним */
  .profile__when { gap: 9px; padding: 7px 14px 7px 11px; border-radius: 22px; font-size: 12.5px; }
  .profile__when-text small { display: block; font-size: 12px; }
  .profile__when-text small::before { content: none; }
  .spark--a { left: 16px; }
  .spark--b { right: 18px; }
  .spark--c { right: 36px; }
  .link { gap: 13px; padding: 13px 13px 13px 12px; border-radius: 24px; }
  .link::before { left: 70px; }
  .link::after  { left: calc(70px + 34% + 7px); }
  .link__ico { width: 48px; height: 48px; border-radius: 17px; }
  .link__ico .art { clip-path: inset(-40% -20% 0 -20% round 0 0 17px 17px); }
  .link__title { font-size: 16px; }
  .link__sub { font-size: 12.5px; }
  .link__arrow { width: 28px; height: 28px; font-size: 14px; }
  .link--featured { padding: 20px 14px; }
  .link--featured::before { left: 84px; }
  .link--featured::after  { left: calc(84px + 34% + 7px); }
  .link--featured .link__ico { width: 56px; height: 56px; border-radius: 19px; }
  .link--featured .link__ico .art { clip-path: inset(-40% -20% 0 -20% round 0 0 19px 19px); }
  .link--featured .link__title { font-size: 18px; }
  .link--featured .link__arrow { width: 30px; height: 30px; }
  .shot { width: 124px; border-radius: 22px; }
  .donate { font-size: 18px; padding: 17px 20px; }
  .peek { width: 84px; height: 84px; top: -58px; right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; }
}