/* VERUM: живі ефекти для всього сайту. Підключається після verum_theme.css.
   Усе вимикається, якщо в системі увімкнено "зменшити рухи". */
:root {
  --fx-violet: #8b5cf6;
  --fx-violet-t: #b4a0fb;
  --fx-amber: #ffb000;
  --fx-line: #272b55;
}

/* Смуга прокрутки зверху */
#vfx-bar {
  position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 99999;
  background: linear-gradient(90deg, var(--fx-violet), var(--fx-amber));
  box-shadow: 0 0 12px rgba(139, 92, 246, .9);
  pointer-events: none;
}

/* Кнопка "нагору" */
#vfx-top {
  position: fixed; right: 18px; bottom: 22px; z-index: 99998;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 1px solid var(--fx-violet); background: #11132a; color: var(--fx-amber);
  font: 700 20px/1 Roboto, Verdana, sans-serif; cursor: pointer;
  opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none;
  transition: opacity .3s, transform .3s, box-shadow .2s, background .2s;
}
#vfx-top.on { opacity: 1; transform: none; pointer-events: auto; }
#vfx-top:hover { background: var(--fx-violet); color: #fff; box-shadow: 0 0 22px rgba(139, 92, 246, .8); }
#vfx-top:focus-visible { outline: 2px solid var(--fx-amber); outline-offset: 3px; }

/* Хвиля на кнопках */
.vfx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .45); transform: scale(0);
  animation: vfx-ripple .65s ease-out forwards;
}
@keyframes vfx-ripple { to { transform: scale(1); opacity: 0; } }

/* Рядок змінився: коротка підсвітка */
@keyframes vfx-flash {
  0% { background-color: rgba(255, 176, 0, .38); }
  100% { background-color: transparent; }
}
.vfx-flash > td { animation: vfx-flash 1.8s ease-out; }

/* Підказка над графіком */
#vfx-tip {
  position: fixed; z-index: 99999; pointer-events: none; padding: 6px 10px; border-radius: 4px;
  background: #161938; border: 1px solid var(--fx-violet); color: #e8e9f6;
  font: 700 12px/1.3 Roboto, Verdana, sans-serif; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
#vfx-tip.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Плавний вхід сторінки */
  html.vfx body { animation: vfx-page .5s ease-out both; }
  @keyframes vfx-page { from { opacity: 0; } }

  /* Поява блоків під час прокрутки */
  html.vfx .vfx-pre {
    opacity: 0; transform: translateY(32px) scale(.98);
    transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1);
  }
  html.vfx .vfx-pre.vfx-in { opacity: 1; transform: none; }

  /* Бігучий блиск на смугах онлайну */
  html body .servers-online-line .progress-bar {
    background-image: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .45) 50%, transparent 75%) !important;
    background-size: 220% 100% !important;
    animation: vfx-shimmer 2.4s linear infinite;
    transition: width .9s cubic-bezier(.2, .7, .2, 1);
  }
  @keyframes vfx-shimmer { from { background-position: 220% 0; } to { background-position: -120% 0; } }

  /* Пульс на крапці "онлайн" (сторінка статистики) */
  .live.up .dot { animation: vfx-pulse 1.8s ease-out infinite; }
  @keyframes vfx-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 176, 0, .7); }
    100% { box-shadow: 0 0 0 12px rgba(255, 176, 0, 0); }
  }

  /* Рядки таблиць зʼявляються по черзі */
  .board:not([hidden]) tbody tr { animation: vfx-row .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--rd, 0ms); }
  @keyframes vfx-row { from { opacity: 0; transform: translateX(-14px); } }
  .board:not([hidden]) { animation: vfx-fade .35s ease-out; }
  @keyframes vfx-fade { from { opacity: .0; } }

  /* Стовпчики графіка підстрибують при наведенні */
  .hours li i { transition: filter .2s, transform .2s; }
  .hours li:hover i { filter: brightness(1.5) drop-shadow(0 0 6px rgba(255, 176, 0, .8)); transform: scaleY(1.06); }
}

@media (hover: hover) {
  /* Підсвітка блоку, що слідує за курсором */
  html.vfx body .block, html.vfx .panel { transition: box-shadow .3s, background-color .3s; }
  html.vfx body .block:hover, html.vfx .panel:hover {
    background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, .20), transparent 65%) !important;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .55), 0 16px 44px -14px rgba(139, 92, 246, .65) !important;
  }

  /* Кнопки: підйом і сяйво */
  html body .btn, html body .verum-connect, html body .verum-copy, html body .tabs button {
    transition: transform .15s, box-shadow .2s, background-color .2s, border-color .2s, color .2s;
  }
  html body .btn:hover, html body a.verum-connect:hover, html body .verum-copy:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -6px rgba(139, 92, 246, .85);
  }
  html body .btn:active, html body a.verum-connect:active, html body .verum-copy:active { transform: translateY(0) scale(.97); }

  /* Меню: сяйво при наведенні */
  html body .wapper .header ul.collapsible-menu > li > a:hover {
    text-shadow: 0 0 14px rgba(255, 176, 0, .85);
  }
}

/* Підсвітка рядків таблиць (сервери, форум, статистика) */
html body .monitoring-table > table > tbody > tr,
html body .block table.table > tbody > tr,
.board tbody tr { transition: background-color .2s; }
html body .monitoring-table > table > tbody > tr:hover,
html body .block table.table > tbody > tr:hover,
.board tbody tr:hover { background-color: rgba(139, 92, 246, .14) !important; }
html body .monitoring-table > table > tbody > tr:hover > td:first-child,
html body .block table.table > tbody > tr:hover > td:first-child,
.board tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--fx-amber); }

/* Заголовки новин та теми форуму: підкреслення, що виїжджає */
html body #new_news div:not(.loader) a h3, html body .news div:not(.loader) a h3,
html body #forum .row .col-lg-8 > div h3 a, html body #forum_topics .row .col-lg-8 > div h3 a {
  background: linear-gradient(var(--fx-amber), var(--fx-amber)) no-repeat 0 100% / 0 2px;
  transition: background-size .35s, color .2s;
}
html body #new_news div:not(.loader) a:hover h3, html body .news div:not(.loader) a:hover h3,
html body #forum .row .col-lg-8 > div h3 a:hover, html body #forum_topics .row .col-lg-8 > div h3 a:hover {
  background-size: 100% 2px;
}

/* Поле пошуку в статистиці */
.board-search { position: relative; flex: 1 1 200px; max-width: 280px; min-width: 150px; }
.board-search input {
  width: 100%; padding: 9px 12px 9px 34px; border-radius: 4px; border: 1px solid #272b55;
  background: #0d0f20; color: #e8e9f6; font: 14px/1.2 Roboto, Verdana, sans-serif;
  transition: border-color .2s, box-shadow .2s;
}
.board-search input::placeholder { color: #9a9fc6; }
.board-search input:focus { outline: 0; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .3); }
.board-search::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 11px; height: 11px; margin-top: -8px;
  border: 2px solid #9a9fc6; border-radius: 50%;
}
.board-search::after {
  content: ""; position: absolute; left: 21px; top: 50%; width: 2px; height: 6px; margin-top: 2px;
  background: #9a9fc6; transform: rotate(-45deg);
}
tr.vfx-hide { display: none; }
.board-none td { text-align: center !important; color: #9a9fc6; padding: 22px !important; }

/* Сортування стовпців */
.board th:not(:first-child) { cursor: pointer; user-select: none; transition: color .2s; }
.board th:not(:first-child):hover { color: #e8e9f6; }
.board th[aria-sort="descending"]::after { content: " \25BE"; color: var(--fx-amber); }
.board th[aria-sort="ascending"]::after { content: " \25B4"; color: var(--fx-amber); }
.board th[aria-sort] { color: var(--fx-amber); }