/*
 * Aurora landing shell. Дизайн держит оформление в инлайн-стилях (так он и авторился в
 * Claude Design) — здесь остаётся только то, что инлайном не выражается: фон страницы,
 * шрифтовая база и кейфреймы раскрытий. Шрифты объявлены в theme.css, он подключён рядом.
 */

html, body { margin: 0; padding: 0; background: #070B14; }
* { box-sizing: border-box; }

body {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color: #EEF3FF;
  font-size: 13px;
  line-height: 1.6;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(245, 158, 11, .20), transparent 60%),
    radial-gradient(1000px 800px at 92% 0%, rgba(139, 92, 246, .22), transparent 62%),
    radial-gradient(1400px 900px at 50% 120%, rgba(15, 165, 117, .16), transparent 60%),
    #070B14;
  min-height: 100vh;
}

a { color: #F59E0B; text-decoration: none; }
a:hover { text-decoration: underline; }

/*
 * iOS Safari: резиновый скролл и анимация адресной строки приоткрывают щель НАД липкой
 * шапкой — она «съезжает вниз», а в щели виден голый фон. Дотягиваем фон шапки на экран
 * вверх: дыра показывает продолжение шапки, а не провал.
 */
header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: #070B14;
  pointer-events: none;
}

/* Якоря меню учитывают высоту липкой шапки: без отступа заголовок секции ныряет под неё. */
#equity, #portfolios, #trades { scroll-margin-top: 82px; }
html { scroll-behavior: smooth; }
table { border-collapse: collapse; }
button { font-family: inherit; }

/* Раскрытие любого блока: разворачивается сверху вниз, без прыжка контента. */
@keyframes revealIn {
  from { opacity: 0; transform: translateY(-10px); clip-path: inset(0 0 22% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes pfIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
/* Две одинаковые анимации не опечатка: смена ветки не перемонтирует панель мнения,
   и чередование имён — единственный способ проиграть появление заново. */
@keyframes revealA { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes revealB { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Смена экрана админки: подъезд снизу, чтобы переход вкладки читался как переход. */
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Подсказка первого визита: мягкий кивок вниз, гаснет после первого клика. */
@keyframes hintNudge { 0%, 100% { transform: translateY(0); opacity: .8; } 50% { transform: translateY(2.5px); opacity: 1; } }
@keyframes hintIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/*
 * Шапка на узком экране.
 *
 * Разметка шапки — инлайн-стили макета (он авторился в одну широкую строку), и целиком она
 * требует около 1000px: логотип, меню, отметка времени, бегущая плашка и кнопка. Уже —
 * элементы переносились поштучно, и получалось три-четыре строки, четверть экрана до первых
 * данных. Ниже — ровно две строки: 1) логотип, меню, время; 2) плашка и кнопка у правого края.
 * Перебивать инлайн-стили можно только через !important.
 *
 * Порог 1000px — про раскладку, а не про телефон: JS-функция phone() (<760px) отвечает за
 * содержимое (какие подписи рисовать вообще), и эти два порога намеренно разные.
 */
@media (max-width: 1000px) {
  header {
    gap: 14px !important;
    row-gap: 8px !important;
  }
  #stamp { margin-left: auto !important; }
  #header-side { flex-basis: 100% !important; }
  #header-side a[href^="https://t.me"] { margin-left: auto !important; }
  /* Плашка отдаёт подпись бренда и слово «за день»: остаются кривая, процент и логотип. */
  #day-plate { gap: 8px !important; }
  #day-plate [data-plate-label], #day-plate [data-plate-cap] { display: none !important; }
  /* Шапка здесь в две строки — якорям нужен отступ повыше. */
  #equity, #portfolios, #trades { scroll-margin-top: 118px; }
}

/* Телефон: та же раскладка, но всё мельче — иначе первая строка не держится в 390px. */
@media (max-width: 760px) {
  header {
    gap: 10px !important;
    padding: 9px 14px !important;
    row-gap: 6px !important;
  }
  header a[href="#top"] { font-size: 15px !important; }
  header nav { gap: 14px !important; font-size: 11.5px !important; }
  #stamp { font-size: 10.5px !important; gap: 6px !important; }
  #stamp span:first-child { width: 6px !important; height: 6px !important; }
  #header-side { gap: 12px !important; }
  #day-plate { gap: 7px !important; }
  #day-plate svg { width: 52px !important; }
  header a[href^="https://t.me"] {
    padding: 8px 12px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }
}