/* ═══════════════════════════════════════════════════════════════════════════
   KROOG — интерфейс платформы клубов
   Три колонки: навигация слева, лента в центре, контекст справа.
   Базовые токены и компоненты — ниже; страницы не должны вводить свои цвета.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Mesh gradient animated properties ── */
@property --mesh-x1{ syntax:'<percentage>'; inherits:false; initial-value:20% }
@property --mesh-y1{ syntax:'<percentage>'; inherits:false; initial-value:30% }
@property --mesh-x2{ syntax:'<percentage>'; inherits:false; initial-value:80% }
@property --mesh-y2{ syntax:'<percentage>'; inherits:false; initial-value:60% }

:root{
  --bg:#fff;
  --surface:#fff;
  --bg-hover:rgba(0,0,0,0.1);
  --bg-hover-light:rgba(0,0,0,0.05);
  --bg-input:#eff3f4;
  --bg-card:#f7f9f9;
  --text:#0f1419;
  --text-gray:#536471;
  --text-muted:#8899a6;
  --border:#eff3f4;
  --border-gray:rgba(107,114,128,0.4);
  --accent:#1d9bf0;
  --accent-hover:#1a8cd8;
  --accent-bg:rgba(29,155,240,0.1);
  --danger:#f4212e;
  --danger-bg:rgba(244,33,46,0.1);
  --success:#00ba7c;
  --success-bg:rgba(0,186,124,0.1);
  --warning:#ff7a00;
  --warning-bg:rgba(255,122,0,0.1);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius-xl:16px;
  --radius-2xl:20px;
  --radius-3xl:24px;
  --radius-sm:8px;
  --radius-full:9999px;
  --t:0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ═══════════════════════════════════════════════════════════════
   MESH GRADIENT BACKGROUND — animated soft gradient spots
   ═══════════════════════════════════════════════════════════════ */
@keyframes meshDrift{
  0%  {--mesh-x1:20%;--mesh-y1:30%;--mesh-x2:80%;--mesh-y2:60%}
  25% {--mesh-x1:75%;--mesh-y1:20%;--mesh-x2:25%;--mesh-y2:70%}
  50% {--mesh-x1:80%;--mesh-y1:70%;--mesh-x2:15%;--mesh-y2:35%}
  75% {--mesh-x1:30%;--mesh-y1:75%;--mesh-x2:70%;--mesh-y2:25%}
  100%{--mesh-x1:20%;--mesh-y1:30%;--mesh-x2:80%;--mesh-y2:60%}
}

body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at var(--mesh-x1,20%) var(--mesh-y1,30%), rgba(29,155,240,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at var(--mesh-x2,80%) var(--mesh-y2,60%), rgba(29,155,240,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 80%, rgba(0,186,124,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 25% 15%, rgba(239,243,244,0.5) 0%, transparent 70%);
  animation:meshDrift 40s ease-in-out infinite;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:clip}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.5;font-size:15px;min-height:100vh;
  /* Здесь НЕ flex. Центрирование контейнера делается margin:0 auto на
     .app-layout: как только flex-контейнером становится body, каждый его
     ребёнок — флекс-элемент. Нижняя навигация (она появляется на мобильном)
     вставала в один ряд с .app-layout, сжималась в 166px и растягивалась
     на всю высоту документа, а сам layout уезжал влево на 83px. */
  position:relative;
}

/* Global links — inherit text colour (no browser blue/violet), underline on hover */
a,a:visited{color:inherit;text-decoration:none;transition:color var(--t);}
a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:2px;}
/* Кнопки-ссылки: подчёркивание на наведении и фокусе им не нужно. */
a.btn:hover,a.btn:focus-visible{text-decoration:none;}

/* ═══════════════════════════════════════════════════════════════
   NOISE TEXTURE OVERLAY — subtle film-grain via SVG feTurbulence
   ═══════════════════════════════════════════════════════════════ */
.noise-overlay{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.004;
}
.noise-overlay::before{
  content:'';display:block;width:100%;height:100%;
  filter:url(#noise-filter);
}

/* ═══════════════════════════════════════════════════════════════
   RIPPLE EFFECT
   ═══════════════════════════════════════════════════════════════ */
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(29,155,240,0.2);
  transform:scale(0);animation:rippleOut 0.6s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleOut{
  to{transform:scale(4);opacity:0}
}

/* ═══════════════════════════════════════════════════════════════
   PAGE LOAD ANIMATION — smooth fade-in on load
   ═══════════════════════════════════════════════════════════════ */
/* Только прозрачность: transform на .app-layout делает его containing block
   и на время анимации ломает position: sticky у шапки — страница «плывёт»
   под хедером и потом встаёт на место. */
@keyframes pageFadeIn{
  from{opacity:0}
  to{opacity:1}
}
body.loaded .app-layout{animation:pageFadeIn 0.55s ease-out;opacity:1}