/* ============================================================
   alple.ru — base styles (минимум поверх Tailwind CDN)
   Дизайн-система: editorial-tech, тёмная база, acid green.
   ============================================================ */

:root {
  --bg:           #0a0b0f;
  --bg-elev:      #11131a;
  --bg-card:      #14171f;
  --bg-card-hov:  #181c26;

  --border:       #232838;
  --border-soft:  #1a1e2a;

  --text:         #f1f3f8;
  --text-soft:    #c5cad8;
  --muted:        #8a93a8;
  --muted-soft:   #6a7388;

  --accent:       #A3FF12;
  --accent-soft:  rgba(163, 255, 18, 0.10);
  --accent-glow:  rgba(163, 255, 18, 0.25);

  --warn:         #FF6B35;
  --success:      #4ADE80;
}

/* ============================================================
   Базовая типографика и поведение
   ============================================================ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* iOS safe-area */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* tabular numbers для цифр KPI */
.tabular-nums,
.font-mono {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* x-cloak — скрываем Alpine-элементы до инициализации */
[x-cloak] { display: none !important; }

/* ============================================================
   Reveal state-machine (progressive enhancement)
   - Контент видим по умолчанию.
   - .js-anim на <html> добавляется animations.js ТОЛЬКО при успехе.
   - Если скрипт не загрузился / упал — класса нет → opacity:1.
   ============================================================ */
.js-anim [data-hero-anim],
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.21,.61,.35,1),
              transform .6s cubic-bezier(.21,.61,.35,1);
  will-change: opacity, transform;
}
.js-anim [data-hero-anim].is-visible,
.js-anim [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Reduced-motion: контент видим даже под .js-anim */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-hero-anim],
  .js-anim [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Ambient background — acid green + warm orange + breathing
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 45% at 25% 10%, rgba(163, 255, 18, 0.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(255, 107, 53, 0.07), transparent 60%);
  z-index: -1;
  pointer-events: none;
  animation: breathing 40s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes breathing {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}

/* ============================================================
   Buttons — единый стиль, чтобы переиспользовать в HTML и JS
   ============================================================ */
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, color 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.2;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 4px 18px rgba(163, 255, 18, 0.25);
}
.btn-primary:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 8px 28px rgba(163, 255, 18, 0.4), 0 0 0 1px rgba(163, 255, 18, 0.6);
  color: var(--bg);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--bg-card-hov);
  border-color: var(--accent);
  color: var(--text);
}

.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 14px;
}

@media (max-width: 480px) {
  .btn-primary, .btn-ghost { min-height: 44px; }
  .btn-lg { min-height: 48px; }
}

/* ============================================================
   Hero — H1 accent-words highlight (gradient swipe)
   ============================================================ */
.hero-h1 .accent-word {
  position: relative;
  display: inline;
  padding: 0 4px;
  background-image: linear-gradient(120deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
  background-repeat: no-repeat;
  background-size: 0% 60%;
  background-position: 0 80%;
  transition: background-size 0.7s cubic-bezier(0.65, 0, 0.35, 1), color 0.4s ease;
  border-radius: 4px;
  color: var(--accent);
  font-weight: inherit;
}
.hero-h1 .accent-word--revealed {
  background-size: 100% 60%;
}

/* ============================================================
   Служебное
   ============================================================ */
.is-hidden { display: none !important; }

/* ============================================================
   Фильтры — кейсы (#projects-filters) и стек (#stack-filters)
   Активная кнопка помечена aria-pressed, стиль идёт от него,
   чтобы состояние в разметке и на экране не разъезжались.
   ============================================================ */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-soft);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.filter-chip:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--bg-card-hov);
}
.filter-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.filter-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 5px;
  height: 18px;
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}
.filter-chip[aria-pressed="true"] .filter-chip-count {
  background: rgba(10, 11, 15, 0.22);
  color: var(--bg);
}

/* ============================================================
   Превью кейса в карточке
   Скриншоты 1.6-1.83:1 — режем по 16/10 и держим верх кадра,
   там у сайтов первый экран и смысл.
   ============================================================ */
.project-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border-soft);
}
.project-thumb picture,
.project-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.project-thumb img {
  object-fit: cover;
  object-position: top center;
  transition: transform .5s cubic-bezier(.21,.61,.35,1);
}
.project-card:hover .project-thumb img { transform: scale(1.035); }

/* Мягкий переход скриншота в тело карточки */
.project-thumb::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, var(--bg-card), rgba(20, 23, 31, 0));
  pointer-events: none;
}

/* Фолбэк, когда у кейса нет картинки: крупная монограмма цветом карточки */
.project-thumb--empty {
  display: grid;
  place-items: center;
}
.project-thumb-mono {
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1;
  color: var(--card-accent, var(--accent));
  opacity: 0.85;
}

.project-kind-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(10, 11, 15, 0.72);
  backdrop-filter: blur(6px);
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .04em;
}

/* Линия и рамка карточки — поверх картинки */
.project-card-line,
.project-card-ring { z-index: 3; }

/* Подзаголовок кейса длинный — режем на двух строках, иначе карточки разной высоты */
.project-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* ============================================================
   «Показано N из M» + «Показать ещё»
   ============================================================ */
.projects-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.projects-count {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
}

/* ============================================================
   Стек: позиция + нота (чем подтверждена работой)
   ============================================================ */
.stack-group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.stack-group-head:not(:first-child) { margin-top: 20px; }
.stack-group-count {
  font-size: 12px;
  color: var(--muted-soft);
}

.stack-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.stack-item:hover {
  border-color: var(--chip-color, var(--accent));
  background: var(--bg-card-hov);
  transform: translateY(-1px);
}
.stack-item-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--chip-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color, var(--accent)) 18%, transparent);
}
.stack-item-body { min-width: 0; }
.stack-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.stack-item-note {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* ============================================================
   Project / service cards — small refinements
   ============================================================ */
.service-card,
.pkg-card,
.project-card,
.manifesto-card,
.cert-card {
  transform-style: preserve-3d;
}

/* Базовый CTA-стиль для anchor-ссылок без класса .btn — чтобы 'Z' акцент работал на любых линках */
.section-head a:hover { color: var(--accent); }

/* Узкий экран: тач-хит фильтра 44px и более плотные позиции стека.
   Блок стоит ПОСЛЕ базовых правил — иначе проигрывает им по порядку. */
@media (max-width: 480px) {
  .filter-chip { min-height: 44px; padding: 10px 14px; }
  .stack-item { padding: 12px 13px; }
  .projects-more { margin-top: 24px; }
}

/* ============================================================
   Scrollbar — тонкий, dark
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }

/* ============================================================
   Touch devices — отключаем hover-преобразования
   ============================================================ */
@media (hover: none) {
  .project-card:hover,
  .service-card:hover,
  .pkg-card:hover,
  .manifesto-card:hover,
  .cert-card:hover {
    transform: none;
  }
  .btn-primary:hover {
    transform: none;
    box-shadow: 0 4px 18px rgba(163, 255, 18, 0.25);
  }
  .project-card:hover .project-thumb img { transform: none; }
  .stack-item:hover { transform: none; }
}

/* ============================================================
   Reduced motion — отключаем все анимации
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::before { animation: none !important; }
  .hero-h1 .accent-word { background-size: 100% 60%; }
  .project-card:hover .project-thumb img { transform: none !important; }
}

/* ============================================================
   Print — скрываем интерактив
   ============================================================ */
@media print {
  header, footer, [x-data], [x-show] { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
}

/* ============================================================
   Хиро на планшетном десктопе 1024-1279
   ============================================================
   С lg хиро становится двухколоночным (1.6fr_1fr), и текстовая колонка
   сужается до ~575 px, а размер шрифта H1 в этот момент ещё растёт по
   6.4vw (на 1024 это 65 px). «бизнес-процессов» перестаёт влезать и рвётся
   по дефису: строка «бизнес-» повисает одна. Сбавляем кегль только в этой
   вилке — с 1280 колонка уже широкая, там всё как было.
   !important обязателен: размер задан инлайновым style="" прямо в <h1>. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-h1 { font-size: clamp(40px, 5.2vw, 56px) !important; }
}

/* ============================================================
   Пакеты: выравнивание карточек по нижнему краю
   ============================================================
   Крупная строка карточки (поле price_from) у одних пакетов встаёт в две
   строки, у других — в одну: «Абонемент» против «Карта автоматизации».
   Из-за этого подпись со сроком, список и кнопка в третьей карточке уезжали
   на 36 px выше соседних, и ряд визуально разъезжался. На lg, где карточки
   стоят плечом к плечу, держим этой строке минимум два ряда.
   leading-none в разметке даёт line-height 1, поэтому 2em — ровно две строки. */
@media (min-width: 1024px) {
  .pkg-card .font-display { min-height: 2em; }
}

/* ============================================================
   Карточка кейса на телефоне: заголовок в две строки
   ============================================================
   .truncate режет заголовок в ОДНУ строку, и на 360-390 px половина кейсов
   обрывалась на полуслове: «Лендинг Arctic Hub на Т…» — движок, ради которого
   кейс и открывают, в название не влезал. Ниже sm даём две строки с
   многоточием; выше — оставляем однострочный вариант, там он влезает целиком. */
@media (max-width: 639px) {
  .project-card h3 {
    white-space: normal;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}