.server-menu .tab { transition: all 0.3s ease; }
.server-menu .tab:hover { background-color: #111; color: var(--orange); }	
.server-menu .tab-off { color: var(--grey-50); pointer-events: none; }

.cover_bg {	
  height: 150px; 
  border-bottom-left-radius: 0px; 
  border-bottom-right-radius: 0px;
  margin-bottom: 0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--orange);
  
  /* Добавляем для контроля отступов */
  display: block;
  padding: 0;
}

.cover_bg.manage { border-bottom: none; border-radius: var(--base-radius); height: 142px; }
@media screen and (max-width: 1024px){ .cover_bg { height: 130px; } }
@media screen and (max-width: 768px) { .cover_bg { height: 110px; } }
@media screen and (max-width: 480px) { .cover_bg { height: 62px;  } }
@media screen and (max-width: 360px) { .cover_bg { height: 62px;  } }

@keyframes reduceRadius { 0% { border-bottom-left-radius: 120px; border-bottom-right-radius: 120px; }
100% { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } }

.cover_bg.pulse{ position:relative;overflow:hidden; }
.cover_bg.pulse::before{ content:'';position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;will-change:transform,filter;animation:bg-smooth-scale 5s infinite ease-in-out; }

.cover_bg.pulse>*{ position:relative;z-index:1; }

@keyframes bg-smooth-scale{0%{transform:scale(1);filter:brightness(1);}50%{transform:scale(1.03);filter:brightness(1.10);}100%{transform:scale(1);filter:brightness(1);}}

.cover_bg.wave{ position:relative;overflow:hidden; }

.cover_bg.wave::before{ 
  content:'';position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;will-change:transform;
  animation: bg-zoom-sync 6s infinite linear; /* Увеличили общее время до 6 секунд */
}

.cover_bg.wave::after{ 
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);z-index:1;pointer-events:none;transform:translateX(-100%);
  animation: wave-shine-sync 6s infinite linear; /* Увеличили общее время до 6 секунд */
}

.cover_bg.wave>*{ position:relative;z-index:2; }

/* Зум отрабатывает в самом начале (первые 20% времени), а остальные 80% времени — пауза */
@keyframes bg-zoom-sync{
  0% { transform: scale(1); }
  8% { transform: scale(1.01); }
  20% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Блик пролетает с 0% до 22% времени, а с 22% до 100% стоит на месте (пауза) */
@keyframes wave-shine-sync{
  0% { transform: translateX(-100%); }
  22% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.cover_bg.glitch{ position:relative;overflow:hidden; }
.cover_bg.glitch::before{ content:'';position:absolute;inset:-4px;background-image:inherit;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;opacity:0;mix-blend-mode:screen;filter:drop-shadow(6px 0 rgba(255,0,60,0.95)) hue-rotate(30deg) contrast(180%) saturate(150%);animation:glitch-break-1 3.5s infinite cubic-bezier(0.25,1,0.5,1); }

.cover_bg.glitch::after{ content:'';position:absolute;inset:-4px;background-image:inherit;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:1;opacity:0;mix-blend-mode:screen;filter:drop-shadow(-6px 0 rgba(0,240,255,0.95)) hue-rotate(-35deg) contrast(180%) saturate(150%);animation:glitch-break-2 3.5s infinite cubic-bezier(0.25,1,0.5,1); }

.cover_bg.glitch .matrix-scanline{ content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,0,60,0.3) 0%,rgba(0,240,255,0.3) 50%,rgba(0,0,0,0.8) 51%),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,0.4) 3px,transparent 4px);background-size:100% 100%,100% 12px;z-index:2;opacity:0;pointer-events:none;mix-blend-mode:overlay;animation:glitch-slices 3.5s infinite steps(6,end); }

.cover_bg.glitch>*{ position:relative;z-index:3; }

@keyframes glitch-break-1{0%,40%,100%{transform:translate(0) scale(1) skew(0deg);clip-path:inset(0 0 100% 0);opacity:0;}3%{transform:translate(-12px,5px) skew(12deg) scale(1.02);clip-path:inset(5% 0 75% 0);opacity:0.9;}8%{transform:translate(15px,-8px) skew(-15deg);clip-path:inset(45% 0 15% 0);opacity:1;}14%{transform:translate(-8px,12px) skew(5deg) scale(0.98);clip-path:inset(80% 0 2% 0);opacity:0.8;}20%{transform:translate(10px,-4px) skew(-8deg);clip-path:inset(20% 0 50% 0);opacity:0.95;}27%{transform:translate(-5px,2px) skew(3deg);clip-path:inset(60% 0 25% 0);opacity:0.6;}33%{transform:translate(2px,-1px);clip-path:inset(0 0 0 0);opacity:0.3;}}

@keyframes glitch-break-2{0%,40%,100%{transform:translate(0) scale(1) skew(0deg);clip-path:inset(100% 0 0 0);opacity:0;}4%{transform:translate(14px,-6px) skew(-10deg) scale(1.03);clip-path:inset(55% 0 20% 0);opacity:0.9;}9%{transform:translate(-12px,10px) skew(14deg);clip-path:inset(10% 0 65% 0);opacity:1;}15%{transform:translate(9px,-10px) skew(-6deg);clip-path:inset(35% 0 40% 0);opacity:0.85;}22%{transform:translate(-10px,5px) skew(8deg);clip-path:inset(70% 0 10% 0);opacity:0.95;}28%{transform:translate(4px,-3px) skew(-2deg);clip-path:inset(15% 0 50% 0);opacity:0.5;}34%{transform:translate(-2px,1px);clip-path:inset(0 0 0 0);opacity:0.2;}}

@keyframes glitch-slices{0%,40%,100%{opacity:0;}3%{opacity:0.8;transform:skewX(20deg);}9%{opacity:1;transform:skewX(-20deg) translateY(4px);}16%{opacity:0.6;transform:translateY(-4px);}25%{opacity:0.9;transform:skewX(10deg);}33%{opacity:0.2;}}

.cover_bg.scanner{ position:relative;overflow:hidden; }
.cover_bg.scanner>*{ position:relative;z-index:3; }
.cover_bg.scanner::after{ content:'';position:absolute;left:0;right:0;height:140px;top:-160px;background:linear-gradient(to bottom,rgba(0,240,255,0) 0%,rgba(0,255,170,0.1) 40%,rgba(0,240,255,0.25) 75%,rgba(0,255,200,0.8) 100%);mix-blend-mode:overlay;box-shadow:0 0 35px rgba(0,255,170,0.4),0 0 15px rgba(0,240,255,0.35),inset 0 0 15px rgba(0,255,200,0.6);z-index:2;pointer-events:none;opacity:0;animation:luxury-scan-loop 9s infinite cubic-bezier(0.4,0,0.2,1); }

@keyframes luxury-scan-loop{0%{top:-160px;opacity:0;transform:scaleY(1);}6%{opacity:1;}44%{opacity:1;}50%{top:100%;opacity:0;transform:scaleY(1);}50.001%{top:100%;opacity:0;transform:scaleY(-1);}56%{opacity:1;}94%{opacity:1;}100%{top:-160px;opacity:0;transform:scaleY(-1);}}

.cover_bg.cyber{ position:relative;overflow:hidden; }
.cover_bg.cyber::after{ content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,235,205,0.45) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,235,205,0.45) 1.5px,transparent 1.5px),linear-gradient(rgba(255,215,0,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,215,0,0.2) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(255,185,0,0.28) 0%,transparent 75%);background-size:50px 50px,50px 50px,50px 50px,50px 50px,100% 100%;mix-blend-mode:overlay;filter:drop-shadow(0 0 2px rgba(255,220,150,0.35));z-index:2;pointer-events:none;animation:luxury-grid-pan 30s infinite linear; }

@keyframes luxury-grid-pan{0%{background-position:0 0,0 0,0 0,0 0,center;}100%{background-position:100px 100px,100px 100px,100px 100px,100px 100px,center;}}







/* Модификатор грозы — полностью изолирован от изменений в основном классе */
.cover_bg.thunder {
  position: relative;
  overflow: hidden;
  
  /* Перебиваем базовый background-size на процентный аналог cover, чтобы работала анимация */
  background-size: 100% 100%; 
  background-position: center;
  background-repeat: no-repeat;
  
  /* Анимация масштаба картинки, дыхания туч и шокового фильтра */
  animation: storm-rumbling 2.5s infinite ease-in-out, thunder-shockwave 5s infinite linear;
}

/* СЛОЙ ДОЖДЯ 1 + ПЕРВЫЙ ЛУЧ МОЛНИИ */
.cover_bg.thunder::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  right: -200px;
  bottom: -200px;
  z-index: 1;
  background: repeating-linear-gradient(
    108deg,
    transparent,
    transparent 55px,
    rgba(255, 255, 255, 0.24) 55px,
    rgba(255, 255, 255, 0.24) 56.5px,
    transparent 56.5px,
    transparent 120px
  );
  background-size: 140px 320px;
  pointer-events: none;
  animation: rain-movement-fast 0.38s infinite linear, lightning-flash-layer1 5s infinite linear;
}

/* СЛОЙ ДОЖДЯ 2 + ФИНАЛЬНЫЙ ЛУЧ МОЛНИИ */
.cover_bg.thunder::after {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  right: -200px;
  bottom: -200px;
  z-index: 2;
  background: repeating-linear-gradient(
    103deg,
    transparent,
    transparent 40px,
    rgba(255, 255, 255, 0.16) 40px,
    rgba(255, 255, 255, 0.16) 41.2px,
    transparent 41.2px,
    transparent 85px
  );
  background-size: 110px 260px;
  pointer-events: none;
  animation: rain-movement-medium 0.52s infinite linear, lightning-flash-layer2 5s infinite linear;
}

/* Контент карточки (панель с кнопками) на самом верху — НЕ ТРЯСЕТСЯ */
.cover_bg.thunder > div {
  position: relative;
  z-index: 3;
}

/* ─── КИНЕМАТОГРАФИЧЕСКИЕ АНИМАЦИИ ДВИЖЕНИЯ И ВСПЫШЕК ─── */

/* Движение 1-го слоя дождя */
@keyframes rain-movement-fast {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-60px, 240px); }
}

/* Движение 2-го слоя дождя */
@keyframes rain-movement-medium {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-35px, 200px); }
}

/* 1. ПРЕДВЕЩАНИЕ БУРИ (Фоновое дыхание туч каждые 2.5 секунды) */
@keyframes storm-rumbling {
  0%, 100% { filter: brightness(0.95) contrast(1.05) saturate(0.95); }
  50% { filter: brightness(0.76) contrast(1.24) saturate(0.75); }
}

/* 2. ДИНАМИКА КАРТИНКИ ВНУТРИ БЛОКА (Безопасный зум без изменения основного класса) */
@keyframes thunder-shockwave {
  /* Спокойное состояние: подстраиваемся под фиксированную высоту */
  0%, 12%, 18%, 25%, 40%, 52%, 100% { background-size: 100% 100%; }
  
  /* УДАР 1: Картинка внутри слегка увеличивается */
  14% { 
    filter: brightness(1.5) contrast(1.6) saturate(1.4) !important; 
    background-size: 104% 104%; 
  }
  15.5% { 
    filter: brightness(1.1) contrast(1.2) !important; 
    background-size: 100% 100%; 
  }
  
  /* УДАР 2: Второе содрогание внутри */
  20% { 
    filter: brightness(1.6) contrast(1.7) saturate(1.6) !important; 
    background-size: 106% 106%; 
  }
  22% { 
    filter: brightness(1.1) contrast(1.1) !important; 
    background-size: 100% 100%; 
  }
  
  /* УДАР 3: ФИНАЛЬНЫЙ МОЩНЫЙ ВЗРЫВ */
  42% { 
    filter: brightness(2.4) contrast(2.4) saturate(2.2) invert(0.18) !important; 
    background-size: 112% 112%; 
  }
  43.2% { 
    filter: brightness(1.6) contrast(1.5) saturate(1.8) invert(0) !important; 
    background-size: 106% 106%; 
  }
  44.5% { 
    filter: brightness(1.9) contrast(1.8) saturate(2) !important; 
    background-size: 108% 108%; 
  }
  
  /* Плавный возврат картинки к исходному размеру */
  47% { 
    filter: brightness(1.3) contrast(1.2) saturate(1.3) !important; 
    background-size: 104% 104%; 
  }
  50% { 
    filter: brightness(1.05) contrast(1.1) saturate(1) !important; 
    background-size: 100% 100%; 
  }
}

/* 3. ВСПЫШКИ ПЕРВОГО СЛОЯ ДОЖДЯ */
@keyframes lightning-flash-layer1 {
  0%, 12%, 16%, 18%, 22%, 40%, 50%, 100% { background-color: transparent; mix-blend-mode: normal; }
  14% { background-color: rgba(180, 215, 255, 0.35); mix-blend-mode: color-dodge; }
  20% { background-color: rgba(210, 235, 255, 0.45); mix-blend-mode: color-dodge; }
}

/* 4. ВСПЫШКИ ВТОРОГО СЛОЯ ДОЖДЯ */
@keyframes lightning-flash-layer2 {
  0%, 40%, 46%, 50%, 100% { background-color: transparent; mix-blend-mode: normal; }
  42% { background-color: rgba(255, 255, 255, 0.6); mix-blend-mode: color-dodge; }
  43.2% { background-color: rgba(255, 255, 255, 0.15); }
  44.5% { background-color: rgba(200, 225, 255, 0.5); }
}





/* Премиальный модификатор волнового радиационного излучения */
.cover_bg.radiation {
  position: relative;
  overflow: hidden;
  /* Корректная сквозная анимация изменения цвета и насыщенности */
  animation: rad-wave-sensor 9s infinite ease-in-out;
}

/* Слой 1: Зеленый радиационный растр и кипящая зернистость */
.cover_bg.radiation::before {
  content: '';
  position: absolute;
  top: -50px; left: -50px; right: -50px; bottom: -50px;
  z-index: 1;
  background: 
    repeating-linear-gradient(
      0deg, 
      transparent, transparent 2px, 
      rgba(0, 255, 68, 0.06) 2px, rgba(0, 255, 68, 0.06) 3px
    ),
    repeating-radial-gradient(
      rgba(0, 30, 5, 0.3) 0px, 
      rgba(0, 255, 68, 0.15) 2px, 
      rgba(255, 255, 255, 0.12) 4px,
      transparent 6px
    );
  background-size: 100% 6px, 12px 12px;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: 
    rad-particle-boiling 0.06s infinite linear,
    rad-wave-raster 9s infinite ease-in-out;
}

/* Слой 2: Глубокая нейтральная виньетка по краям */
.cover_bg.radiation::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: radial-gradient(
    circle at 50% 50%,
    transparent 35%,
    rgba(10, 18, 12, 0.4) 70%,
    rgba(5, 8, 6, 0.95) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: rad-wave-vignette 9s infinite ease-in-out;
}

/* Контент полностью изолирован на верхнем слое */
.cover_bg.radiation > div {
  position: relative;
  z-index: 3;
}

/* ─── АНИМАЦИИ ВНУТРЕННИХ ИЗМЕНЕНИЙ ─── */

/* 1. Эффект искажения матрицы (Фильтры объединены в одну строку) */
@keyframes rad-wave-sensor {
  0%, 11% {
    filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
  }
  /* НАКАТ: Картинка теряет цветность до 0.45 и ОДНОВРЕМЕННО уходит в зеленый спектр */
  28% {
    filter: brightness(1.1) contrast(1.3) saturate(0.45) hue-rotate(-35deg);
  }
  /* ПИК: Удержание эффекта обесцвечивания и тонирования */
  55% {
    filter: brightness(1.1) contrast(1.3) saturate(0.45) hue-rotate(-35deg);
  }
  100% {
    filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
  }
}

/* 2. Проявление сканирующего растра и зерна на пике мощности */
@keyframes rad-wave-raster {
  0%, 11% {
    opacity: 0.1;
    transform: scale(1.05);
  }
  28%, 55% {
    opacity: 0.95;
    transform: scale(1);
  }
  100% {
    opacity: 0.1;
    transform: scale(1.05);
  }
}

/* 3. Сжатие темной виньетки по углам */
@keyframes rad-wave-vignette {
  0%, 11% {
    opacity: 0.15;
    background-size: 135% 135%;
    background-position: center;
  }
  28%, 55% {
    opacity: 1;
    background-size: 100% 100%;
    background-position: center;
  }
  100% {
    opacity: 0.15;
    background-size: 135% 135%;
    background-position: center;
  }
}

/* 4. Высокочастотное кипение зернистости */
@keyframes rad-particle-boiling {
  0% { background-position: 0px 0px, 0px 0px; }
  25% { background-position: 4px -2px, 2px 3px; }
  50% { background-position: -3px 4px, -1px -2px; }
  75% { background-position: 2px -3px, 4px 1px; }
  100% { background-position: 0px 0px, 0px 0px; }
}