/* brighten.css — общий «украшатель» стенда: яркие цветные акценты на всех страницах.
   Подключается последним в <head>, поэтому мягко перекрывает фон и заголовки.
   Ничего в разметке не меняет — только декор, читаемость сохраняется. */

/* цветные градиентные пятна на фоне (слой поверх базового цвета, под контентом) */
body {
  background-image:
    radial-gradient(820px 480px at 6% -8%, rgba(124,58,237,.34), transparent 60%),
    radial-gradient(780px 460px at 100% 0%, rgba(236,72,153,.30), transparent 58%),
    radial-gradient(720px 540px at 90% 104%, rgba(14,165,233,.28), transparent 60%),
    radial-gradient(700px 540px at 4% 102%, rgba(34,197,94,.26), transparent 60%),
    radial-gradient(640px 420px at 52% 48%, rgba(245,158,11,.16), transparent 62%) !important;
  background-attachment: fixed !important;
}

/* радужная анимированная полоска сверху */
html::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  z-index: 2147483646; pointer-events: none;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #f59e0b, #22c55e, #0ea5e9, #7c3aed);
  background-size: 300% 100%;
  animation: brightbar 10s linear infinite;
}
@keyframes brightbar { to { background-position: 300% 0; } }

/* градиентные заголовки h1 */
h1 {
  background-image: linear-gradient(100deg, #7c3aed, #ec4899 45%, #f59e0b 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* чуть живее ссылки-вкладки при наведении */
nav.tabs a:hover { color: #ec4899 !important; }

/* ── мягкая полировка (добавочно, вёрстку не меняет) ── */
html { scroll-behavior: smooth; }

/* аккуратное появление страницы */
.wrap { animation: pageIn .55s ease-out both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* доступность: видимая рамка при навигации с клавиатуры */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #ec4899; outline-offset: 2px; border-radius: 6px;
}

/* мягкий подъём карточек при наведении */
figure, .fact, .stat { transition: transform .15s ease, box-shadow .15s ease; }
figure:hover, .fact:hover, .stat:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20,20,40,.18); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html::before { animation: none; }
  .wrap { animation: none; }
  figure, .fact, .stat { transition: none; }
  figure:hover, .fact:hover, .stat:hover { transform: none; }
}