/* ============================================================
   main.css — Design tokens, resets, base typography
   To redesign: update :root variables and base element styles
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  /* Colors */
  --bg:              #030505;
  --bg-card:         rgba(255,255,255,0.045);
  --bg-card-hover:   rgba(157,255,39,0.075);
  --border:          rgba(255,255,255,0.075);
  --border-hover:    rgba(166,255,38,0.28);
  --text:            #edf2e8;
  --text-dim:        rgba(237,242,232,0.58);
  --text-muted:      rgba(237,242,232,0.34);

  /* Accent / Status */
  --accent:          #9cff1f;
  --accent-dim:      rgba(156,255,31,0.105);
  --accent-rgb:      156, 255, 31;
  --danger:          #ff4444;
  --success:         #9cff1f;
  --warning:         #ffaa00;

  /* Spacing & shape */
  --sidebar-w:       224px;
  --r:               18px;
  --r-sm:            12px;
  --surface-1:       rgba(9, 14, 10, 0.72);
  --surface-2:       rgba(17, 26, 15, 0.76);
  --surface-3:       rgba(28, 44, 20, 0.62);
  --border-soft:     rgba(255,255,255,0.075);
  --border-green:    rgba(var(--accent-rgb),0.22);
  --glow-soft:       0 0 34px rgba(var(--accent-rgb),0.12);
  --glow-strong:     0 0 54px rgba(var(--accent-rgb),0.27);
  --shadow-deep:     0 28px 90px rgba(0,0,0,0.54);

  /* Typography */
  --font:            'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:       'IBM Plex Mono', 'SFMono-Regular', monospace;
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── BASE ── */
html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input {
  font-family: inherit;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar          { width: 3px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(255,255,255,0.06); border-radius: 2px; }

/* ── ANIMATIONS ── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes croak-spin {
  to { transform: rotate(360deg); }
}

/* SVG server pulse (defined here so inline SVG can reference it) */
@keyframes srv-ping {
  0%   { opacity: 0.6; r: 4; }
  100% { opacity: 0; r: 14; }
}


/* ── V2 CINEMATIC BACKDROP ── */
body {
  background:
    radial-gradient(circle at 82% 8%, rgba(var(--accent-rgb),0.18) 0, rgba(var(--accent-rgb),0.06) 20%, transparent 42%),
    radial-gradient(circle at 22% 92%, rgba(var(--accent-rgb),0.08) 0, transparent 34%),
    linear-gradient(135deg, #020303 0%, #071007 45%, #020303 100%);
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 72% 25%, black 0%, transparent 58%);
  opacity: .8;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 75% 18%, rgba(var(--accent-rgb),0.18), transparent 26%),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 48%, rgba(var(--accent-rgb),.035));
  mix-blend-mode: screen;
  opacity: .8;
}

::selection { background: rgba(var(--accent-rgb),0.28); color: #fff; }

@keyframes soft-float {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-4px,0); }
}

@keyframes scan-line {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}


/* ============================================================
   V4 — Concept alignment: calmer cinematic neon, less global haze
   ============================================================ */
:root {
  --bg: #020303;
  --bg-card: rgba(12, 15, 12, 0.72);
  --bg-card-hover: rgba(156,255,31,0.075);
  --border: rgba(255,255,255,0.075);
  --border-hover: rgba(166,255,38,0.22);
  --text: #f3f6ef;
  --text-dim: rgba(243,246,239,0.62);
  --text-muted: rgba(243,246,239,0.38);
  --accent: #9cff1f;
  --accent-soft: #baff45;
  --accent-rgb: 156, 255, 31;
  --sidebar-w: 224px;
  --r: 22px;
  --r-sm: 14px;
  --surface-1: rgba(8, 10, 8, 0.88);
  --surface-2: rgba(15, 20, 14, 0.88);
  --surface-3: rgba(26, 38, 20, 0.62);
  --border-green: rgba(var(--accent-rgb),0.18);
  --glow-soft: 0 0 38px rgba(var(--accent-rgb),0.10);
  --glow-strong: 0 0 86px rgba(var(--accent-rgb),0.18);
  --shadow-deep: 0 38px 110px rgba(0,0,0,0.66);
}

body {
  background:
    radial-gradient(circle at 78% 9%, rgba(var(--accent-rgb),0.145) 0, rgba(var(--accent-rgb),0.045) 23%, transparent 43%),
    radial-gradient(circle at 16% 78%, rgba(var(--accent-rgb),0.055) 0, transparent 34%),
    linear-gradient(135deg, #020303 0%, #061006 52%, #020303 100%);
}

body::before {
  background-image:
    linear-gradient(rgba(var(--accent-rgb),0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.016) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 72% 21%, black 0%, transparent 52%);
  opacity: .62;
}

body::after {
  background:
    radial-gradient(circle at 76% 16%, rgba(var(--accent-rgb),0.13), transparent 24%),
    radial-gradient(circle at 54% 40%, rgba(var(--accent-rgb),0.045), transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 56%);
  opacity: .62;
}

/* FINAL PATCH — remove site-wide green grid overlay */
body::before {
  display: none !important;
  background-image: none !important;
}


/* Final polish: no grid texture site-wide */
body::before {
  display: none !important;
  background: none !important;
  background-image: none !important;
}


/* CLEAN FIX — stable dark theme before/after font load, no grid overlay */
html, body {
  background-color: #020303 !important;
}
body {
  background:
    radial-gradient(circle at 78% 9%, rgba(var(--accent-rgb),0.13) 0, rgba(var(--accent-rgb),0.04) 24%, transparent 44%),
    radial-gradient(circle at 16% 78%, rgba(var(--accent-rgb),0.05) 0, transparent 34%),
    linear-gradient(135deg, #020303 0%, #061006 52%, #020303 100%) !important;
}
body::before {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* ============================================================
   CROAK PATCH — Resend-like static abstract background
   Никаких картинок: только CSS-градиенты в фирменной зелёной гамме.
   ============================================================ */
html,
body {
  background-color: #020403 !important;
}

body {
  background:
    radial-gradient(circle at 78% 16%, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0.035) 24%, transparent 48%),
    radial-gradient(circle at 16% 88%, rgba(184,255,82, 0.07) 0%, transparent 36%),
    linear-gradient(135deg, #020403 0%, #050806 44%, #071108 66%, #020403 100%) !important;
}

.app {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.topbar,
.main {
  position: relative;
  z-index: 2;
}

/* Верхняя правая “матовая волна”, как на референсе Resend */
.app::before {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  width: min(72vw, 1050px);
  height: min(72vw, 1050px);
  top: -42vw;
  right: -22vw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, rgba(235,255,218,.22) 0%, rgba(165,255,82,.15) 18%, rgba(49,94,30,.16) 33%, transparent 58%),
    conic-gradient(from 225deg at 45% 48%, transparent 0deg, rgba(255,255,255,.12) 40deg, rgba(156,255,31,.12) 76deg, rgba(8,18,9,.22) 118deg, transparent 172deg, transparent 360deg);
  filter: blur(.4px);
  opacity: .72;
  transform: rotate(-16deg);
  box-shadow:
    inset 34px -28px 88px rgba(255,255,255,.10),
    inset -70px 78px 140px rgba(0,0,0,.78),
    0 0 120px rgba(var(--accent-rgb), .07);
}

/* Нижняя левая “световая складка” */
.app::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  width: min(58vw, 850px);
  height: min(34vw, 520px);
  left: -16vw;
  bottom: -14vw;
  background:
    linear-gradient(32deg, transparent 0 34%, rgba(230,255,218,.16) 42%, rgba(156,255,31,.10) 48%, rgba(11,24,11,.38) 62%, transparent 76%),
    radial-gradient(ellipse at 64% 42%, rgba(255,255,255,.11), transparent 54%);
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  opacity: .82;
  filter: blur(.35px);
  box-shadow: 0 0 110px rgba(var(--accent-rgb), .08);
}

/* Едва заметная “зернистость”, чтобы фон не был пластиковым */
.main::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .18;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.08) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 62%, rgba(var(--accent-rgb),.055) 0 1px, transparent 1.6px);
  background-size: 42px 42px, 58px 58px;
  mix-blend-mode: screen;
}

@media (max-width: 768px) {
  .app::before {
    width: 880px;
    height: 880px;
    top: -520px;
    right: -520px;
    opacity: .55;
  }

  .app::after {
    width: 620px;
    height: 380px;
    left: -280px;
    bottom: -180px;
    opacity: .58;
  }
}

/* ============================================================
   CROAK PATCH — dynamic Resend-like waves
   Лёгкое движение фона без картинок. Не трогает контент.
   ============================================================ */
.app::before {
  animation: croak-wave-top 18s ease-in-out infinite alternate;
  will-change: transform, opacity, filter;
}

.app::after {
  animation: croak-wave-bottom 22s ease-in-out infinite alternate;
  will-change: transform, opacity, filter;
}

body::after {
  animation: croak-ambient-glow 24s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

@keyframes croak-wave-top {
  0% {
    transform: translate3d(0, 0, 0) rotate(-16deg) scale(1);
    opacity: .66;
    filter: blur(.4px);
  }
  50% {
    transform: translate3d(-18px, 14px, 0) rotate(-13deg) scale(1.035);
    opacity: .78;
    filter: blur(.8px);
  }
  100% {
    transform: translate3d(12px, -10px, 0) rotate(-18deg) scale(1.015);
    opacity: .70;
    filter: blur(.55px);
  }
}

@keyframes croak-wave-bottom {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: .72;
    filter: blur(.35px);
  }
  50% {
    transform: translate3d(22px, -10px, 0) rotate(1.8deg) scale(1.04);
    opacity: .84;
    filter: blur(.65px);
  }
  100% {
    transform: translate3d(-10px, 8px, 0) rotate(-1.2deg) scale(1.02);
    opacity: .76;
    filter: blur(.45px);
  }
}

@keyframes croak-ambient-glow {
  0% {
    opacity: .46;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: .62;
    transform: translate3d(-10px, 8px, 0) scale(1.02);
  }
  100% {
    opacity: .52;
    transform: translate3d(8px, -6px, 0) scale(1.01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app::before,
  .app::after,
  body::after {
    animation: none !important;
  }
}

/* ============================================================
   CROAK FIX — real Resend-style neon fabric waves, not blobs
   Large diagonal folds with bright green edges, CSS-only.
   ============================================================ */
html,
body {
  background-color: #010302 !important;
}

body {
  background:
    radial-gradient(ellipse at 68% 36%, rgba(var(--accent-rgb), .07) 0%, rgba(var(--accent-rgb), .025) 27%, transparent 58%),
    linear-gradient(135deg, #010302 0%, #020504 42%, #061006 68%, #010302 100%) !important;
}

.app {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 100vh;
}

.topbar,
.main {
  position: relative !important;
  z-index: 5 !important;
}

/* выключаем старую точечную/сеточную грязь */
.main::before {
  display: none !important;
  content: none !important;
}

/* общая мягкая подсветка под волнами */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: -20% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(ellipse at 88% 8%, rgba(var(--accent-rgb), .18), transparent 28%),
    radial-gradient(ellipse at 6% 92%, rgba(var(--accent-rgb), .12), transparent 30%),
    radial-gradient(ellipse at 54% 42%, rgba(var(--accent-rgb), .035), transparent 42%);
  opacity: .72 !important;
  mix-blend-mode: screen;
  animation: croak-bg-breathe 16s ease-in-out infinite alternate !important;
}

/* верхняя правая складка: две тёмные ленты + яркая зелёная кромка */
.app::before {
  content: '' !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 1 !important;
  width: 980px !important;
  height: 980px !important;
  top: -560px !important;
  right: -270px !important;
  border-radius: 50% !important;
  background:
    linear-gradient(116deg,
      transparent 0 42%,
      rgba(190, 255, 115, .08) 45%,
      rgba(156, 255, 31, .88) 47.2%,
      rgba(70, 130, 24, .26) 49%,
      rgba(2, 6, 3, .78) 55%,
      transparent 67%),
    linear-gradient(134deg,
      transparent 0 49%,
      rgba(255,255,255,.10) 51%,
      rgba(156,255,31,.40) 53%,
      rgba(7,20,8,.78) 61%,
      transparent 75%),
    radial-gradient(ellipse at 42% 62%, rgba(255,255,255,.14) 0%, rgba(156,255,31,.08) 22%, rgba(4,10,5,.72) 43%, transparent 68%);
  box-shadow:
    inset 80px -120px 160px rgba(0,0,0,.82),
    inset -28px 38px 110px rgba(210,255,178,.10),
    0 0 110px rgba(var(--accent-rgb), .12);
  filter: blur(.25px) saturate(1.12);
  opacity: .92 !important;
  transform: rotate(-18deg) scale(1) !important;
  animation: croak-top-wave 20s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}

/* нижняя левая складка: широкая диагональная лента с glow edge */
.app::after {
  content: '' !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 1 !important;
  width: 880px !important;
  height: 540px !important;
  left: -310px !important;
  bottom: -250px !important;
  background:
    linear-gradient(38deg,
      transparent 0 35%,
      rgba(210,255,160,.10) 41%,
      rgba(156,255,31,.82) 43.5%,
      rgba(75,140,26,.28) 46%,
      rgba(3,9,4,.80) 56%,
      transparent 72%),
    radial-gradient(ellipse at 68% 44%, rgba(255,255,255,.12), rgba(156,255,31,.07) 28%, transparent 58%);
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  box-shadow:
    inset 70px -80px 130px rgba(0,0,0,.82),
    0 0 95px rgba(var(--accent-rgb), .12);
  filter: blur(.18px) saturate(1.15);
  opacity: .90 !important;
  transform: rotate(0deg) scale(1) !important;
  animation: croak-bottom-wave 24s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}

@keyframes croak-top-wave {
  0%   { transform: translate3d(0,0,0) rotate(-18deg) scale(1); opacity: .84; }
  50%  { transform: translate3d(-34px,18px,0) rotate(-15deg) scale(1.035); opacity: .96; }
  100% { transform: translate3d(18px,-12px,0) rotate(-20deg) scale(1.018); opacity: .88; }
}

@keyframes croak-bottom-wave {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: .82; }
  50%  { transform: translate3d(34px,-18px,0) rotate(1.6deg) scale(1.045); opacity: .94; }
  100% { transform: translate3d(-14px,10px,0) rotate(-1deg) scale(1.02); opacity: .86; }
}

@keyframes croak-bg-breathe {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .52; }
  50%  { transform: translate3d(-16px,10px,0) scale(1.02); opacity: .70; }
  100% { transform: translate3d(10px,-8px,0) scale(1.01); opacity: .58; }
}

@media (max-width: 900px) {
  .app::before {
    width: 780px !important;
    height: 780px !important;
    top: -470px !important;
    right: -390px !important;
  }

  .app::after {
    width: 700px !important;
    height: 440px !important;
    left: -340px !important;
    bottom: -230px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app::before,
  .app::after,
  body::after {
    animation: none !important;
  }
}

/* ============================================================
   CROAK FINAL — concept waves like the mockup, SVG + CSS only
   Убираем старые blob/laser-слои и рисуем мягкие fabric-waves.
   ============================================================ */
html,
body {
  background-color: #010302 !important;
}

body {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(var(--accent-rgb), .055) 0%, transparent 42%),
    radial-gradient(ellipse at 8% 94%, rgba(var(--accent-rgb), .04) 0%, transparent 34%),
    linear-gradient(135deg, #010302 0%, #020504 48%, #061006 70%, #010302 100%) !important;
}

/* выключаем все прошлые попытки фона */
body::before,
body::after,
.app::before,
.app::after,
.main::before {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

.app {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 100vh;
}

.topbar,
.main,
.mobile-header,
.overlay {
  position: relative;
  z-index: 5 !important;
}

.croak-bg-waves {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  opacity: .98;
}

.croak-bg-waves .fabric {
  filter: url(#croakSoftBlur);
  transform-box: fill-box;
  transform-origin: center;
}

.croak-bg-waves .fabric-top-main {
  fill: url(#croakTopMist);
  opacity: .76;
}

.croak-bg-waves .fabric-top-shadow {
  fill: url(#croakFabric);
  opacity: .46;
  mix-blend-mode: screen;
}

.croak-bg-waves .fabric-bottom-main {
  fill: url(#croakFabric);
  opacity: .66;
}

.croak-bg-waves .edge {
  fill: none;
  stroke: url(#croakEdge);
  stroke-linecap: round;
  filter: url(#croakGlow);
  opacity: .72;
}

.croak-bg-waves .edge-top-1 {
  stroke-width: 4.5;
}

.croak-bg-waves .edge-top-2 {
  stroke-width: 2.6;
  opacity: .48;
}

.croak-bg-waves .edge-bottom-1 {
  stroke-width: 4;
  opacity: .62;
}

.croak-bg-waves .dim-fold {
  fill: none;
  stroke: rgba(6, 16, 7, .58);
  stroke-width: 62;
  stroke-linecap: round;
  filter: blur(18px);
  opacity: .55;
}

.croak-bg-waves .wave-top {
  animation: croakConceptTop 24s ease-in-out infinite alternate;
  transform-origin: 82% 10%;
  will-change: transform, opacity;
}

.croak-bg-waves .wave-bottom {
  animation: croakConceptBottom 28s ease-in-out infinite alternate;
  transform-origin: 0% 100%;
  will-change: transform, opacity;
}

@keyframes croakConceptTop {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: .82;
  }
  50% {
    transform: translate3d(-28px, 18px, 0) scale(1.025) rotate(-1.6deg);
    opacity: .96;
  }
  100% {
    transform: translate3d(18px, -10px, 0) scale(1.012) rotate(.8deg);
    opacity: .88;
  }
}

@keyframes croakConceptBottom {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: .72;
  }
  50% {
    transform: translate3d(30px, -14px, 0) scale(1.03) rotate(1deg);
    opacity: .88;
  }
  100% {
    transform: translate3d(-16px, 8px, 0) scale(1.014) rotate(-.7deg);
    opacity: .78;
  }
}

@media (max-width: 900px) {
  .croak-bg-waves {
    width: 150vw;
    height: 120vh;
    left: -18vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .croak-bg-waves .wave-top,
  .croak-bg-waves .wave-bottom {
    animation: none !important;
  }
}

/* ============================================================
   CROAK V6 — WebP liquid-fabric background + soft breathing
   Честная версия: сложные волны — картинка, движение — CSS.
   Интерфейс/карточки/layout не трогаем.
   ============================================================ */
html,
body {
  background-color: #010302 !important;
}

body {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(var(--accent-rgb), .045) 0%, transparent 46%),
    linear-gradient(135deg, #010302 0%, #020504 48%, #061006 72%, #010302 100%) !important;
}

/* выключаем старые CSS/SVG-волны, которые давали плоские дуги */
.croak-bg-waves {
  display: none !important;
}

.croak-liquid-bg {
  position: fixed;
  inset: -4vmax;
  z-index: 0;
  pointer-events: none;

  background-image: url('/static/img/croak-liquid-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: .74;
  filter: saturate(1.08) contrast(1.04) brightness(.92);
  transform: translate3d(0, 0, 0) scale(1.035);
  transform-origin: center;
  animation: croakLiquidBgBreath 34s ease-in-out infinite alternate;
  will-change: transform, opacity, filter;
}

/* затемняем центр под контент, чтобы фон не спорил с карточками */
.croak-liquid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 48% 45%, rgba(0,0,0,.78) 0%, rgba(0,0,0,.54) 35%, rgba(0,0,0,.18) 68%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.34));
  opacity: .92;
}

/* лёгкое стеклянное свечение, без лазеров и клубной кислоты */
.croak-liquid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 88% 10%, rgba(var(--accent-rgb), .12) 0%, transparent 33%),
    radial-gradient(ellipse at 5% 92%, rgba(var(--accent-rgb), .10) 0%, transparent 32%);
  mix-blend-mode: screen;
  opacity: .52;
  animation: croakLiquidGlow 26s ease-in-out infinite alternate;
}

/* контент поверх фона */
.app,
.mobile-header,
.topbar,
.main,
.overlay {
  position: relative;
}

.app {
  isolation: isolate;
  z-index: 1;
}

.mobile-header,
.topbar,
.main,
.overlay {
  z-index: 5 !important;
}

@keyframes croakLiquidBgBreath {
  0% {
    transform: translate3d(0, 0, 0) scale(1.035);
    opacity: .68;
    filter: saturate(1.04) contrast(1.03) brightness(.88);
  }
  45% {
    transform: translate3d(-1.4%, .9%, 0) scale(1.075);
    opacity: .78;
    filter: saturate(1.11) contrast(1.05) brightness(.94);
  }
  100% {
    transform: translate3d(1.1%, -1.0%, 0) scale(1.055);
    opacity: .72;
    filter: saturate(1.07) contrast(1.04) brightness(.91);
  }
}

@keyframes croakLiquidGlow {
  0% {
    opacity: .38;
    transform: translate3d(0,0,0) scale(1);
  }
  50% {
    opacity: .58;
    transform: translate3d(-1%, .6%, 0) scale(1.025);
  }
  100% {
    opacity: .46;
    transform: translate3d(.8%, -.5%, 0) scale(1.012);
  }
}

@media (prefers-reduced-motion: reduce) {
  .croak-liquid-bg,
  .croak-liquid-bg::after {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .croak-liquid-bg {
    inset: -10vmax;
    background-position: 58% center;
    opacity: .58;
  }
}

/* ============================================================
   CROAK V7 — visible liquid breathing fix
   Усиливаем дыхание: раньше оно было слишком незаметным.
   Интерфейс не трогаем, двигается только фоновый слой.
   ============================================================ */
.croak-liquid-bg {
  inset: -12vmax !important;
  opacity: .82 !important;
  background-size: 112% 112% !important;
  background-position: 50% 50% !important;
  transform-origin: 58% 42% !important;
  animation: croakLiquidBreathVisible 18s ease-in-out infinite alternate !important;
  will-change: transform, opacity, filter, background-position !important;
}

.croak-liquid-bg::before {
  background:
    radial-gradient(ellipse at 46% 44%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.50) 34%, rgba(0,0,0,.18) 66%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28)) !important;
  opacity: .88 !important;
}

/* отдельный полупрозрачный дубль картинки — он даёт заметный drift/перелив */
.croak-liquid-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: -4vmax !important;
  background:
    url('/static/img/croak-liquid-bg.webp') center / cover no-repeat,
    radial-gradient(ellipse at 86% 12%, rgba(var(--accent-rgb), .16) 0%, transparent 34%),
    radial-gradient(ellipse at 5% 92%, rgba(var(--accent-rgb), .12) 0%, transparent 30%) !important;
  mix-blend-mode: screen !important;
  opacity: .22 !important;
  filter: blur(10px) saturate(1.35) contrast(1.08) !important;
  transform-origin: 45% 55% !important;
  animation: croakLiquidLayerDrift 24s ease-in-out infinite alternate !important;
  will-change: transform, opacity, filter !important;
}

@keyframes croakLiquidBreathVisible {
  0% {
    transform: translate3d(-1.8vw, .9vh, 0) scale(1.035) rotate(-.18deg);
    background-position: 48% 51%;
    opacity: .74;
    filter: saturate(1.05) contrast(1.03) brightness(.88);
  }
  38% {
    transform: translate3d(1.1vw, -1.1vh, 0) scale(1.075) rotate(.12deg);
    background-position: 52% 48%;
    opacity: .86;
    filter: saturate(1.14) contrast(1.06) brightness(.96);
  }
  100% {
    transform: translate3d(2.4vw, 1.4vh, 0) scale(1.055) rotate(.28deg);
    background-position: 54% 52%;
    opacity: .79;
    filter: saturate(1.09) contrast(1.04) brightness(.91);
  }
}

@keyframes croakLiquidLayerDrift {
  0% {
    transform: translate3d(2.4vw, -1.5vh, 0) scale(1.02) rotate(.35deg);
    opacity: .12;
  }
  45% {
    transform: translate3d(-1.8vw, 1.2vh, 0) scale(1.075) rotate(-.18deg);
    opacity: .30;
  }
  100% {
    transform: translate3d(-3.2vw, -.6vh, 0) scale(1.045) rotate(-.32deg);
    opacity: .18;
  }
}

@media (max-width: 768px) {
  .croak-liquid-bg {
    inset: -16vmax !important;
    background-size: 145% 145% !important;
    animation-duration: 22s !important;
  }
}

/* ============================================================
   CROAK V8 — calmer breathing, no zoom-jump
   Фон не масштабируется туда-сюда: только мягкий drift + световой вдох.
   ============================================================ */
.croak-liquid-bg {
  inset: -6vmax !important;
  opacity: .72 !important;
  background-size: 108% 108% !important;
  background-position: 50% 50% !important;
  transform: translate3d(0, 0, 0) scale(1.025) !important;
  transform-origin: center center !important;
  filter: saturate(1.08) contrast(1.04) brightness(.90) !important;
  animation: croakLiquidCalmDrift 42s cubic-bezier(.45,0,.2,1) infinite alternate !important;
  will-change: background-position, opacity, filter !important;
}

.croak-liquid-bg::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 48% 42%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.28) 66%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.36)) !important;
  opacity: .90 !important;
  animation: croakLiquidCenterBreath 36s ease-in-out infinite alternate !important;
}

/* Не дублируем саму картинку — от этого было ощущение странного масштаба.
   Здесь только мягкий световой слой, который слегка “дышит”. */
.croak-liquid-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 86% 12%, rgba(var(--accent-rgb), .12) 0%, rgba(var(--accent-rgb), .045) 22%, transparent 46%),
    radial-gradient(ellipse at 6% 92%, rgba(var(--accent-rgb), .10) 0%, rgba(var(--accent-rgb), .035) 24%, transparent 48%),
    linear-gradient(115deg, transparent 0%, rgba(var(--accent-rgb), .028) 43%, rgba(255,255,255,.018) 50%, rgba(var(--accent-rgb), .022) 57%, transparent 100%) !important;
  mix-blend-mode: screen !important;
  opacity: .42 !important;
  filter: blur(8px) saturate(1.16) !important;
  transform: translate3d(0, 0, 0) !important;
  animation: croakLiquidSoftLight 34s ease-in-out infinite alternate !important;
  will-change: opacity, filter, background-position !important;
}

@keyframes croakLiquidCalmDrift {
  0% {
    background-position: 49.4% 50.6%;
    opacity: .68;
    filter: saturate(1.04) contrast(1.03) brightness(.88);
  }
  50% {
    background-position: 50.7% 49.5%;
    opacity: .76;
    filter: saturate(1.10) contrast(1.045) brightness(.93);
  }
  100% {
    background-position: 51.2% 50.4%;
    opacity: .71;
    filter: saturate(1.07) contrast(1.04) brightness(.90);
  }
}

@keyframes croakLiquidCenterBreath {
  0% { opacity: .94; }
  50% { opacity: .84; }
  100% { opacity: .91; }
}

@keyframes croakLiquidSoftLight {
  0% {
    opacity: .30;
    background-position: 50% 50%, 50% 50%, 48% 50%;
    filter: blur(9px) saturate(1.08);
  }
  50% {
    opacity: .48;
    background-position: 51% 49%, 49% 51%, 51% 50%;
    filter: blur(7px) saturate(1.20);
  }
  100% {
    opacity: .36;
    background-position: 50.5% 50.5%, 49.5% 49.5%, 53% 50%;
    filter: blur(8px) saturate(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .croak-liquid-bg,
  .croak-liquid-bg::before,
  .croak-liquid-bg::after {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .croak-liquid-bg {
    inset: -10vmax !important;
    background-size: 128% 128% !important;
    animation-duration: 48s !important;
  }
}