/* ============================================================================
   HOME.CSS — главная страница в 3-колоночном app-shell.
   ----------------------------------------------------------------------------
   Секции центральной колонки: hero (тёплый градиент + сдержанные плавающие
   круги), сетка направлений, карусель «Почему выбирают Somnium». Референс —
   doc/system_design/Переосмысление дизайна Somnium.

   Подключается на главной после site.css. Инлайн-стили запрещены CSP; движение —
   классами и под prefers-reduced-motion. Только токены.
   ============================================================================ */

.home { padding: clamp(20px, 3vw, 34px) clamp(18px, 3vw, 34px) clamp(40px, 6vw, 64px); }

/* ────────────────────────────────────────────────────────────────────────
   1. HERO
   ──────────────────────────────────────────────────────────────────────── */
.home-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--warm) 0%, var(--warm-dark) 100%);
  box-shadow: var(--shadow-warm-strong);
  padding: clamp(26px, 3.4vw, 46px);
}
.home-hero__inner { position: relative; z-index: 1; max-width: 640px; }

/* Появление содержимого hero: элементы всплывают по очереди при загрузке.
   Гасится при prefers-reduced-motion (см. секцию 6). */
.home-hero__eyebrow,
.home-hero__title,
.home-hero__lead,
.home-hero__actions,
.home-hero__caps {
  animation: home-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home-hero__eyebrow { animation-delay: 0.05s; }
.home-hero__title   { animation-delay: 0.15s; }
.home-hero__lead    { animation-delay: 0.28s; }
.home-hero__actions { animation-delay: 0.40s; }
.home-hero__caps    { animation-delay: 0.52s; }

.home-hero__decor { position: absolute; inset: 0; pointer-events: none; }
.home-hero__orb { position: absolute; border-radius: 50%; }
.home-hero__orb--a {
  top: -30%; right: 4%; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(255,255,255,0.2), rgba(255,255,255,0) 70%);
  animation: home-float-a 15s ease-in-out infinite;
}
.home-hero__orb--b {
  bottom: -40%; right: 22%; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(240,220,210,0.28), rgba(240,220,210,0) 70%);
  animation: home-float-b 19s ease-in-out infinite;
}
/* Холст симуляции (js/home-hero.js): схема инфраструктуры справа от текста.
   Маска слева гасит линии там, где идёт заголовок, — сцена не спорит с текстом.
   Ниже 1180px холст скрыт: колонка узкая, схеме там тесно (JS это замечает
   через IntersectionObserver и останавливает цикл). */
.home-hero__sim {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: clamp(12px, 2.5vw, 36px); transform: translateY(-50%);
  width: min(42%, 440px); aspect-ratio: 16 / 11;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
}

.home-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
  padding: 7px 14px; border-radius: var(--radius-full);
  font-family: var(--font-family-mono); font-size: var(--font-size-xs);
  letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 22px;
}
.home-hero__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--warm-pale);
  animation: home-pulse 2.4s ease-in-out infinite;
}
.home-hero__title {
  margin: 0; color: #fff; font-weight: var(--font-weight-black);
  font-size: clamp(32px, 4vw, 52px); line-height: 1.03; letter-spacing: -0.03em;
}
.home-hero__title .accent { color: var(--warm-pale); }
.home-hero__lead {
  margin: 20px 0 0; max-width: 34em;
  font-size: var(--font-size-lg); line-height: 1.55; color: #f3e2da;
}
.home-hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.home-hero__cta { background: #fff; color: var(--warm); box-shadow: var(--shadow-lg); }
.home-hero__cta:hover { background: var(--warm-pale); color: var(--warm-dark); transform: translateY(-2px); }
.home-hero__ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.55); color: #fff; }
.home-hero__ghost:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* Карточки компетенций: вход в направления каталога, а не витрина цифр. */
.home-hero__caps {
  margin-top: 30px; max-width: 580px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.home-cap {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; transition: var(--transition);
}
.home-cap:hover {
  background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.42);
  transform: translateY(-2px); color: #fff;
}
.home-cap__ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.16); color: var(--warm-pale);
  font-size: var(--font-size-md); transition: var(--transition-fast);
}
.home-cap:hover .home-cap__ico { background: #fff; color: var(--warm); }
.home-cap__body { min-width: 0; }
.home-cap__title { display: block; font-weight: var(--font-weight-bold); font-size: var(--font-size-base); letter-spacing: -0.01em; }
.home-cap__text { display: block; margin-top: 3px; font-size: var(--font-size-sm); line-height: 1.45; color: #edd9cf; }

/* ────────────────────────────────────────────────────────────────────────
   2. ЗАГОЛОВКИ СЕКЦИЙ
   ──────────────────────────────────────────────────────────────────────── */
.home-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-md);
  margin: clamp(32px, 4vw, 44px) 0 20px; flex-wrap: wrap;
}
.home-head__title { font-size: clamp(22px, 2.6vw, 26px); letter-spacing: -0.02em; scroll-margin-top: 84px; }
.home-head__link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--font-weight-bold); font-size: var(--font-size-base); color: var(--warm); }
.home-intro { margin: -8px 0 24px; max-width: 62ch; font-size: var(--font-size-md); line-height: 1.6; color: var(--ink-soft); }

/* ────────────────────────────────────────────────────────────────────────
   3. СЕТКА НАПРАВЛЕНИЙ
   ──────────────────────────────────────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
/* Явный display:grid перебивает атрибут [hidden] — при проваливании прячем сетку. */
.svc-grid[hidden] { display: none; }
.svc-tile {
  display: flex; gap: var(--spacing-md); align-items: center;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--spacing-lg); color: var(--ink); box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.svc-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--warm-soft); color: var(--ink); }
.svc-tile__ico {
  width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius-sm);
  background: var(--warm-bg); color: var(--warm);
  display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl);
  transition: var(--transition-fast);
}
.svc-tile:nth-child(3n) .svc-tile__ico { background: var(--sky-bg); color: var(--sky-muted); }
.svc-tile:nth-child(3n+1) .svc-tile__ico { background: var(--sage-bg); color: var(--sage); }
.svc-tile__body { flex: 1; min-width: 0; }
.svc-tile__title { display: block; font-weight: var(--font-weight-black); font-size: var(--font-size-lg); letter-spacing: -0.01em; }
.svc-tile__text { display: block; margin-top: 5px; font-size: var(--font-size-sm); line-height: 1.5; color: var(--ink-soft); }
.svc-tile__more {
  flex: 0 0 auto; align-self: flex-start;
  border: 1px solid var(--border-s); color: var(--ink); border-radius: var(--radius-full);
  padding: 7px 15px; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm);
  transition: var(--transition-fast);
}
.svc-tile:hover .svc-tile__more { background: var(--warm); color: #fff; border-color: var(--warm); }
.svc-tile { cursor: pointer; }

/* ── Проваливание в каталог на главной ─────────────────────────────────────
   Область серфинга: наверху — сетка плиток (.svc-grid), при проваливании она
   прячется и в .svc-drill подгружается фрагмент уровня (крошки + карточки). */
.svc-drill { animation: home-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.svc-drill[aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s ease; }
.drill-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--font-size-sm); color: var(--ink-soft); margin-bottom: 18px;
}
.drill-crumbs a { color: var(--warm); font-weight: var(--font-weight-semibold); }
.drill-crumbs a:hover { text-decoration: underline; }
.drill-crumbs__sep { color: var(--ink-faint); }
.drill-crumbs [aria-current="page"] { color: var(--ink); font-weight: var(--font-weight-semibold); }
.drill-head { margin-bottom: 22px; }
.drill-head__eyebrow {
  font-family: var(--font-family-mono); font-size: var(--font-size-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--warm); margin-bottom: 8px;
}
.drill-head__title { margin: 0; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -0.02em; }
.drill-head__lead { margin: 8px 0 0; max-width: 62ch; font-size: var(--font-size-md); line-height: 1.55; color: var(--ink-soft); }
.drill-error {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--spacing-lg); color: var(--ink-soft);
}
.drill-error a { color: var(--warm); font-weight: var(--font-weight-bold); }
/* Карточка услуги внизу: не липкий сайдбар, а блок под контентом на всю ширину. */
.svc-aside--bottom { position: static; margin-top: 28px; }

/* ────────────────────────────────────────────────────────────────────────
   4. ПРОЦЕСС (шаги 01–04)
   ──────────────────────────────────────────────────────────────────────── */
.proc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-md); }
.proc-step {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--spacing-lg); box-shadow: var(--shadow-sm); transition: var(--transition);
}
.proc-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--warm-soft); }
.proc-step__num {
  font-family: var(--font-family-serif); font-style: italic; font-weight: var(--font-weight-light);
  font-size: 44px; line-height: 1; color: var(--warm); margin-bottom: 14px;
}
.proc-step__title { margin: 0 0 8px; font-size: var(--font-size-lg); letter-spacing: -0.01em; }
.proc-step__text { margin: 0; font-size: var(--font-size-sm); line-height: 1.55; color: var(--ink-soft); }

/* ────────────────────────────────────────────────────────────────────────
   5. ТЕХНОЛОГИЧЕСКИЙ ПАРТНЁР (позиционирование)
   ──────────────────────────────────────────────────────────────────────── */
.pos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
.pos-card {
  display: flex; gap: var(--spacing-md); align-items: flex-start;
  background: linear-gradient(135deg, var(--ink) 0%, #2c322e 100%);
  border-radius: var(--radius-lg); padding: clamp(24px, 2.6vw, 34px);
  box-shadow: var(--shadow-lg);
}
.pos-card__ico {
  width: 54px; height: 54px; flex: 0 0 auto; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1); color: var(--warm-pale);
  display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl);
}
.pos-card__body { min-width: 0; }
.pos-card__title { margin: 0 0 8px; color: #fff; font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em; }
.pos-card__text { margin: 0; font-size: var(--font-size-md); line-height: 1.6; color: #c9d1cb; }

/* ────────────────────────────────────────────────────────────────────────
   6. АНИМАЦИИ (гасятся при reduced-motion)
   ──────────────────────────────────────────────────────────────────────── */
@keyframes home-float-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-24px) scale(1.1); } }
@keyframes home-float-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-26px,20px) scale(1.12); } }
@keyframes home-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes home-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes home-pulse { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.9); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .home-hero__orb,
  .home-hero__dot,
  .home-hero__eyebrow,
  .home-hero__title,
  .home-hero__lead,
  .home-hero__actions,
  .home-hero__caps { animation: none !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   7. АДАПТИВ
   ──────────────────────────────────────────────────────────────────────── */
/* Пока схема на месте — держим текст в своей половине, чтобы строки заголовка
   не наезжали на узлы. */
@media (min-width: 1181px) {
  .home-hero__inner { max-width: min(640px, 56%); }
}
@media (max-width: 1180px) {
  .home-hero__sim { display: none; }
}
@media (max-width: 1080px) {
  .proc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .svc-grid { grid-template-columns: 1fr; }
  .proc-grid { grid-template-columns: 1fr; }
  .pos-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .home-hero__caps { grid-template-columns: 1fr; }
}