/* ═══════════════════════════════════════════════════════════════════════
   GrowoAI — GitVerse Premium Layer (gp-*)
   Экстракция премиум-DNA gitverse.ru (03.09, 4 vision-агента: motion/taste/
   anti-slop/webmaster — отчёты в workspace/gitverse-extraction/).

   Канон слоя:
   • ДИСПЛЕЙ ≠ UI: Onest (400/500, кирилlica-native) для крупных заголовков,
     Geist остаётся шрифтом интерфейса — аналог пары GitVerse Onest+Inter.
   • Hover = СВЕТ, не масштаб: glow-ореол + сдвиг стрелки, без translateY-lift.
   • Ритм: эпиграфы-стикеры, fade-маски потоков, ревилы со стаггером.
   • Всё моушн-обогащение — за prefers-reduced-motion.
   • Аддитивность: слой не переопределяет компоненты, только расширяет
     (исключение — документированный hover-канон primary-кнопок ниже).

   Параметризация бренда: акцент наследует --color-brand/emerald платформы.
   Для Flowmasters слой переиспользуется as-is (сменить --gp-accent-*).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Onest: self-host, вариативный 400–800, cyrillic+latin (85KB суммарно) ── */

/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  src: url('fonts/Onest-cyrillic-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Onest';
  src: url('fonts/Onest-cyrillic.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  src: url('fonts/Onest-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Onest';
  src: url('fonts/Onest-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Токены слоя ── */
:root {
  /* Дисплейная типографика (секрет GitVerse: вес 400 при крупном кегле) */
  --gp-font-display: 'Onest', var(--font-sans);
  --gp-fs-display-xl: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);   /* до 60px */
  --gp-fs-display-lg: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);     /* до 48px */
  --gp-tracking-display: -0.025em;
  --gp-lh-display: 1.05;

  /* Glow-канон (hover = свет): альфа-оребол вокруг акцента */
  --gp-accent: var(--color-emerald, #059669);
  --gp-accent-2: var(--color-emerald-light, #34d399);
  --gp-glow-hover: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 8px 32px rgba(5, 150, 105, 0.35);
  --gp-glow-active: 0 0 0 1px rgba(52, 211, 153, 0.55), 0 4px 20px rgba(5, 150, 105, 0.45);

  /* Сцены/эпиграфы */
  --gp-epigraph-alpha: 0.065;
  --gp-epigraph-size: clamp(5rem, 12vw, 10rem);

  /* Свечения фона секций (замена PNG-слоёв GitVerse на градиенты) */
  --gp-glow-top: radial-gradient(60% 50% at 50% 0%, rgba(5, 150, 105, 0.14), transparent 70%);
  --gp-glow-bottom: radial-gradient(50% 40% at 50% 100%, rgba(6, 182, 212, 0.10), transparent 70%);

  /* Тайминги GitVerse: фирменная кривая + шкала длительностей */
  --gp-ease: cubic-bezier(0.165, 0.84, 0.44, 1);   /* их подпись: линки/маски */
  --gp-ease-io: cubic-bezier(0.77, 0, 0.175, 1);   /* меню/дроверы */
  --gp-dur-fast: 0.15s;
  --gp-dur: 0.3s;
  --gp-dur-slow: 0.4s;

  /* Fade-маска потоков (края растворяются в фон) */
  --gp-mask-x: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

/* ═══ 1. Дисплейная типографика ════════════════════════════════════════
   Применение: заголовки страниц-лендингов, hero, крупные цифры.
   НЕ для UI-заголовков консоли (там Geist остаётся ради плотности). */
.gp-display {
  font-family: var(--gp-font-display);
  font-weight: 400;                 /* секрет GitVerse: контраст кеглем, не жирностью */
  letter-spacing: var(--gp-tracking-display);
  line-height: var(--gp-lh-display);
  font-size: var(--gp-fs-display-lg);
  text-wrap: balance;               /* без висячих слов в 2-строчных */
  color: var(--text-primary);
}
.gp-display--xl { font-size: var(--gp-fs-display-xl); }
.gp-display em, .gp-display .gp-accent-text {
  font-style: normal;
  background: linear-gradient(100deg, var(--gp-accent-2), #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gp-accent-2);        /* фолбэк-цвет, если clip недоступен */
}
@supports not (background-clip: text) {
  .gp-display em { background: none; -webkit-text-fill-color: currentColor; }
}

/* ═══ 2. Кэпс-оверлайн-бейдж («AI-FIRST ПЛАТФОРМА» у GitVerse) ═══════ */
.gp-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(52, 211, 153, 0.22);
  background: rgba(5, 150, 105, 0.10);
  color: var(--gp-accent-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-sans);    /* бейдж — это UI, не дисплей */
}

/* ═══ 3. Hover-канон primary-кнопок: СВЕТ вместо подъёма ══════════════
   Документированное исключение из аддитивности: канон GitVerse — кнопка
   «твёрдая», реагирует ореолом; lift (translateY) убираем, тактильность
   остаётся в :active scale(.97). Легко откатить — удалить этот блок. */
.btn-primary:not(:disabled):not([aria-disabled="true"]):hover,
.fm-btn-primary:not(:disabled):not([aria-disabled="true"]):hover {
  transform: none;                                   /* ← вместо translateY(-1px) */
  filter: none;                                      /* ← вместо brightness */
  border-color: rgba(52, 211, 153, 0.35);
  box-shadow: var(--gp-glow-hover), inset 0 1px 0 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:not(:disabled):not([aria-disabled="true"]):active,
.fm-btn-primary:not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(0.97);                            /* нажим остаётся тактильным */
}
/* Сдвиг стрелки в CTA (GitVerse: стрелка едет на 3–4px, кнопка — нет) */
.gp-cta-arrow { display: inline-block; transition: transform var(--gp-dur) var(--gp-ease); }
.btn-primary:hover .gp-cta-arrow,
.fm-btn-primary:hover .gp-cta-arrow,
.gp-glow-btn:hover .gp-cta-arrow { transform: translateX(4px); }

/* ═══ 4. Roll-up текста (фирменный микро-паттерн GitVerse) ════════════
   data-gp-rollup: JS (gitverse-premium.js) оборачивает символы в .gp-ch;
   на hover глифы прокатываются посимвольно, стаггер 5ms/символ. */
[data-gp-rollup] .gp-ch { display: inline-block; position: relative; }
[data-gp-rollup] .gp-ch::after {
  content: attr(data-ch);
  position: absolute; inset: 0;
  transform: translateY(110%);
  opacity: 0;
  transition: transform var(--gp-dur) var(--gp-ease), opacity var(--gp-dur) var(--gp-ease);
  transition-delay: calc(var(--i, 0) * 5ms);
}
[data-gp-rollup] .gp-ch > span {
  display: inline-block;
  transition: transform var(--gp-dur) var(--gp-ease), opacity var(--gp-dur) var(--gp-ease);
  transition-delay: calc(var(--i, 0) * 5ms);
}
[data-gp-rollup]:hover .gp-ch > span { transform: translateY(-110%); opacity: 0; }
[data-gp-rollup]:hover .gp-ch::after { transform: translateY(0); opacity: 1; }

/* ═══ 5. Стекло-карточка с верхним бликом ═════════════════════════════ */
.gp-glass {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
}
.gp-glass:hover {
  border-color: rgba(52, 211, 153, 0.25);
  box-shadow: var(--shadow-md), inset 0 1px 0 0 rgba(255, 255, 255, 0.10);
}

/* ═══ 6. Эпиграф-стикер (гигантское слово-фон, обрезается краем) ══════ */
.gp-epigraph {
  position: absolute;
  z-index: 0;
  top: -0.18em;
  left: -0.04em;
  font-family: var(--gp-font-display);
  font-weight: 500;
  font-size: var(--gp-epigraph-size);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  opacity: var(--gp-epigraph-alpha);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
[data-theme="light"] .gp-epigraph { opacity: 0.05; }

/* ═══ 7. Поток с fade-маской (лента логотипов/превью) ═════════════════ */
.gp-marquee {
  overflow: hidden;
  -webkit-mask-image: var(--gp-mask-x);
  mask-image: var(--gp-mask-x);
}
.gp-marquee__track {
  display: flex; gap: 3rem;
  width: max-content;
  animation: gp-scroll-x var(--gp-marquee-duration, 60s) linear infinite;
}
.gp-marquee:hover .gp-marquee__track { animation-play-state: paused; }
@keyframes gp-scroll-x { to { transform: translateX(-50%); } }

/* ═══ 8. Аккордеон без height-хаков (0fr → 1fr) ═══════════════════════ */
.gp-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--gp-dur-slow) var(--gp-ease-io);
}
.gp-accordion__panel > * { overflow: hidden; min-height: 0; }
.gp-accordion.is-open .gp-accordion__panel { grid-template-rows: 1fr; }
.gp-accordion__chevron { transition: transform var(--gp-dur-slow) var(--gp-ease-io); }
.gp-accordion.is-open .gp-accordion__chevron { transform: rotate(180deg); }
.gp-accordion.is-open {
  border-color: rgba(52, 211, 153, 0.30);
  background: rgba(5, 150, 105, 0.05);
}

/* ═══ 9. Ревил при входе в вьюпорт (fade + 16px, стаггер) ═════════════
   data-gp-reveal[="delay-ms"] — инициализация в gitverse-premium.js;
   без JS контент виден сразу (прогрессивное улучшение). */
[data-gp-reveal] {
  opacity: 1;
  transform: none;
}
.gp-reveal-ready [data-gp-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--gp-dur-slow) var(--gp-ease), transform var(--gp-dur-slow) var(--gp-ease);
  transition-delay: var(--gp-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.gp-reveal-ready [data-gp-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ═══ 10. Секция с верхним свечением ══════════════════════════════════ */
.gp-scene { position: relative; }
.gp-scene::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gp-glow-top);
  pointer-events: none;
  border-radius: inherit;
}
.gp-scene > * { position: relative; }

/* ═══ Доступность: весь обогащённый моушн — за prefers-reduced-motion ══ */
@media (prefers-reduced-motion: reduce) {
  .gp-marquee__track { animation: none; }
  .gp-reveal-ready [data-gp-reveal] { opacity: 1; transform: none; transition: none; }
  [data-gp-rollup] .gp-ch::after,
  [data-gp-rollup] .gp-ch > span { transition: none; }
  .gp-cta-arrow { transition: none; }
}