/* v1.css — светлая версия с «лавалампой» на #31dd95 ↔ #fff */

/* --- Анимируемые кастом-свойства для плавной смены цветов/позиций --- */
@property --g1 { syntax: '<color>'; inherits: false; initial-value: #31dd95; } /* зелёный */
@property --g2 { syntax: '<color>'; inherits: false; initial-value: #ffffff; } /* белый */
@property --x1 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --y1 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --x2 { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
@property --y2 { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --x3 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --y3 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
@property --h  { syntax: '<angle>'; inherits: false; initial-value: 0deg; }    /* подстраховка через hue-rotate */

/* Живой мультиградиентный фон — светлый «лавалампа» */
#bg-anim{
  position: fixed; inset: -30% -20% -20% -20%;

  /* чуть более зелёная светлая база */
  --base: color-mix(in oklab, #ffffff 86%, #31dd95 14%);
  background-color: #ffffff; /* фолбэк, если что-то из ниже не поддерживается */

  background:
    radial-gradient(50% 50% at var(--x1) var(--y1),
      color-mix(in oklab, var(--g1) 44%, transparent) 0%, transparent 60%),
    radial-gradient(40% 40% at var(--x2) var(--y2),
      color-mix(in oklab, var(--g2) 30%, transparent) 0%, transparent 55%),
    radial-gradient(60% 60% at var(--x3) var(--y3),
      color-mix(in oklab, var(--g1) 36%, transparent) 0%, transparent 60%),
    linear-gradient(var(--base), var(--base));

  filter: blur(5px) saturate(100%) brightness(1.03) hue-rotate(var(--h));
  transform: translateZ(0);
  animation:
    floaty 18s ease-in-out infinite alternate,
    lava   22s ease-in-out infinite alternate,
    hue    60s ease-in-out infinite;
  z-index: 0;
}

/* Небольшое «плавание» полотна */
@keyframes floaty{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,-2vh,0) scale(1.04); }
}

/* Лавалампа: перемещаем пятна и меняем зелёный с белым местами */
@keyframes lava{
  0%{
    --g1:#31dd95; --g2:#ffffff;
    --x1:18%; --y1:22%;
    --x2:78%; --y2:28%;
    --x3:50%; --y3:88%;
  }
  50%{
    --g1:#3af0a4; --g2:#f6fff9; /* чуть ярче зелёный в середине цикла */
    --x1:26%; --y1:18%;
    --x2:72%; --y2:36%;
    --x3:46%; --y3:92%;
  }
  100%{
    --g1:#ffffff; --g2:#31dd95; /* своп цветов */
    --x1:22%; --y1:24%;
    --x2:82%; --y2:26%;
    --x3:58%; --y3:86%;
  }
}

/* Лёгкая подстройка оттенка как страховка, если @property(colors) не анимируются */
@keyframes hue{
  0%   { --h: 0deg; }
  50%  { --h: 12deg; }
  100% { --h: 0deg; }
}

/* Фиксированная шапка со стеклянным фоном — светлая */
.v1 .site-header{
  position: fixed; top:0; left:0; right:0;
  backdrop-filter: saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72) 60%, rgba(255,255,255,0) 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* Автоматический отступ под высоту шапки */
.v1 #content{ padding-top: calc(var(--header-h, 72px) + 18px); }

/* Подсветка активной вкладки: линейный индикатор (брендовый градиент) */
.main-nav::after{
  content:""; position:absolute; height:2px; left: var(--nav-x, 0px); width: var(--nav-w, 0px);
  bottom:-2px; background: linear-gradient(90deg, #31dd95, #ffffff);
  border-radius: 2px; transition: left .35s ease, width .35s ease;
}

/* При прокрутке — чуть плотнее, остаётся светлым */
body.scrolled .v1 .site-header{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86) 60%, rgba(255,255,255,0) 100%);
  border-bottom-color: rgba(0,0,0,.10);
  box-shadow: 0 10px 36px rgba(0,0,0,.12);
}