/* ============================================================
   DATA HOUSE — ЛЕНДИНГ v6 · «влёт во вселенную» (поверх v5)
   1) Boot: знак собирается быстрее, затем камера летит СКВОЗЬ
      знак (масштаб + растворение), полотно тает — под ним canvas
      живого космоса, и в этот момент стартует гиперпрыжок.
   2) Живой космос: cosmos.js (дрейф, мерцание, кометы, планеты,
      Млечный Путь) — canvas #cosmos на весь hero.
   3) Сакральная геометрия: градуированная шкала-астролябия
      вычерчивается «тук-тук-тук», соединяет звёзды и стрелкой
      указывает на терракотовую звезду-инсайт (html.const-go).
   4) Чистый hero: без нижней базы, группа по центру.
   Тайминг лоадера — чистый CSS (гаснет даже без JS);
   классы boot-done / hero-go / const-go ставит land-v6.js.
   ============================================================ */
@import url("land-v5.css");

/* ============================================================
   HERO · сцена: canvas → дымка → геометрия → текст
   ============================================================ */
#cosmos { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%); }
/* подложка с запасом вверх (при пине к вьюпорту нет среза сверху);
   градиенты пересчитаны под двойную высоту — видимая часть та же */
#hero .wash { z-index: 1; opacity: .14; will-change: transform, opacity;
  top: -100%; height: 200%;
  background: radial-gradient(52% 32% at 84% 46%, #C9714F, transparent 62%),
              radial-gradient(46% 30% at -4% 104%, #41529C, transparent 64%); }
#hero .in { justify-content: center; }
#hero .hero-eyerow { margin-top: 0; }
@media print { #cosmos { display: none; } }

/* ============================================================
   BOOT v6 — быстрее собрался, «влетели сквозь знак»
   0–1.45s знак и имя · 1.5s камера летит сквозь знак ·
   1.55s полотно тает (под ним уже космос) · 1.62s JS: warp
   3.4s CSS-страховка: слой полностью скрыт
   ============================================================ */
html.v6 .boot { background: #15120C;
  animation: bootBgV6 .5s ease 1.55s both, bootGoneV6 .01s linear 3.4s both; }
html.v6 .boot-in { animation: bootFlyV6 .6s cubic-bezier(.55, 0, .8, .4) 1.5s both; }
@keyframes bootBgV6 { to { background: rgba(21, 18, 12, 0); } }
@keyframes bootFlyV6 { to { transform: scale(3); opacity: 0; } }
@keyframes bootGoneV6 { to { opacity: 0; visibility: hidden; } }

/* знак рисуется плотнее, всё готово к 1.45s */
html.v6 .boot-mark .b-ring { animation-duration: .75s; animation-delay: .1s; }
html.v6 .boot-mark .b-l { animation-duration: .42s; animation-delay: .5s; }
html.v6 .boot-mark .b-l.l2 { animation-delay: .62s; }
html.v6 .boot-mark .b-l.l3 { animation-delay: .74s; }
html.v6 .boot-mark .b-n { animation-duration: .35s; animation-delay: .78s; }
html.v6 .boot-mark .b-n.n2 { animation-delay: .88s; }
html.v6 .boot-mark .b-a { animation-duration: .45s; animation-delay: .98s; }
html.v6 .boot-word { animation-duration: 1s; animation-delay: .2s; }
html.v6 .boot-sub { animation-delay: .55s; }
html.v6 .boot-line i { animation-duration: .95s; animation-delay: .25s; }

/* ============================================================
   Очередь hero после прыжка (hero-go ставится на торможении)
   ============================================================ */
html.v6.hero-go #hero .lead.is-in { transition-delay: .5s; }
html.v6.hero-go #hero .cta-row.is-in { transition-delay: .7s; }
html.v6 #hero .in { animation-delay: 2.5s; animation-duration: 2.8s; }

/* ============================================================
   САКРАЛЬНАЯ ГЕОМЕТРИЯ · шкала-астролябия над звёздами
   кольцо → деления «тук-тук-тук» → узлы-звёзды → триангуляция →
   стрелка → звезда-инсайт с эхом. Потом шкала медленно вращается.
   ============================================================ */
.hgeo { position: absolute; right: 1.5%; top: 50%;
  width: min(46vw, 78vh, 660px); aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: 1; pointer-events: none; }
.hgeo svg { width: 100%; height: 100%; display: block; overflow: visible; }

.hgeo .gring { stroke: rgba(245, 241, 234, .20); stroke-width: 1.1; }
.hgeo .tk { stroke: rgba(245, 241, 234, .30); stroke-width: 1; }
.hgeo .tk.big { stroke: rgba(245, 241, 234, .48); }
.hgeo .gorb { stroke: rgba(245, 241, 234, .13); stroke-width: 1; }
.hgeo .gl { stroke: rgba(245, 241, 234, .17); stroke-width: 1; }
.hgeo .gn { fill: rgba(245, 241, 234, .82); }
.hgeo .gtail { stroke: rgba(232, 180, 155, .3); stroke-width: 1.1; }
.hgeo .gneedle { stroke: rgba(232, 180, 155, .62); stroke-width: 1.2; }
.hgeo .gphi { stroke: rgba(232, 180, 155, .45); stroke-width: 1; }
.hgeo .gglow { fill: rgba(212, 124, 88, .16); }
.hgeo .gstar { fill: #D47C58; }
.hgeo .ghalo { fill: none; stroke: rgba(212, 124, 88, .55); stroke-width: 1; }
.hgeo .gcross { stroke: rgba(232, 180, 155, .5); stroke-width: 1; }

/* --- скрытое состояние до const-go (только при motion on) --- */
html.v6:not(.const-go) .hgeo { opacity: 0; }
html.v6 .hgeo { transition: opacity .7s ease; }
html.v6:not(.const-go) .hgeo .gring,
html.v6:not(.const-go) .hgeo .gl,
html.v6:not(.const-go) .hgeo .gtail,
html.v6:not(.const-go) .hgeo .gneedle { stroke-dashoffset: 1; }
.hgeo .gring, .hgeo .gl, .hgeo .gtail, .hgeo .gneedle { stroke-dasharray: 1; }
html.v6:not(.const-go) .hgeo .tk,
html.v6:not(.const-go) .hgeo .gn,
html.v6:not(.const-go) .hgeo .gorb,
html.v6:not(.const-go) .hgeo .gphi,
html.v6:not(.const-go) .hgeo .gglow,
html.v6:not(.const-go) .hgeo .gstar,
html.v6:not(.const-go) .hgeo .ghalo,
html.v6:not(.const-go) .hgeo .gcross { opacity: 0; }

/* --- хореография вычерчивания --- */
html.v6.const-go .hgeo .gring { animation: geoDraw .95s var(--ease-io) .05s both; }
html.v6.const-go .hgeo .tk { animation: geoIn .22s var(--ease-out) both;
  animation-delay: calc(.5s + var(--i) * .016s); }
html.v6.const-go .hgeo .gn { animation: geoPop .4s var(--ease-out) both;
  animation-delay: calc(1.55s + var(--i) * .13s);
  transform-box: fill-box; transform-origin: center; }
html.v6.const-go .hgeo .gl { animation: geoDraw .34s var(--ease-io) both;
  animation-delay: calc(1.75s + var(--i) * .15s); }
html.v6.const-go .hgeo .gtail { animation: geoDraw .3s var(--ease-out) 3.15s both; }
html.v6.const-go .hgeo .gneedle { animation: geoDraw .5s cubic-bezier(.2, .9, .25, 1) 3.1s both; }
html.v6.const-go .hgeo .gphi { animation: geoIn .4s ease 3.5s both; }
html.v6.const-go .hgeo .gcross { animation: geoIn .4s ease 3.72s both; }
html.v6.const-go .hgeo .gglow { animation: geoIn .8s ease 3.62s both; }
html.v6.const-go .hgeo .gstar { animation: geoStar .5s var(--ease-out) 3.58s both;
  transform-box: fill-box; transform-origin: center; }
html.v6.const-go .hgeo .ghalo.h1 { animation: geoHalo 1s var(--ease-out) 3.66s both;
  transform-box: fill-box; transform-origin: center; }
html.v6.const-go .hgeo .ghalo.h2 { animation: geoHalo 1.1s var(--ease-out) 4.15s both;
  transform-box: fill-box; transform-origin: center; }
html.v6.const-go .hgeo .gorb { animation: geoIn 1.2s ease 3.95s both; }

/* --- после сборки инструмент живёт: шкала дрейфует --- */
html.v6.const-go .hgeo .grot { transform-box: view-box; transform-origin: 50% 50%;
  animation: geoSpin 170s linear 4.8s infinite; }
html.v6.const-go .hgeo .gorb { transform-box: view-box; transform-origin: 50% 50%;
  animation: geoIn 1.2s ease 3.95s both, geoSpinBack 120s linear 3.95s infinite; }

@keyframes geoDraw { from { stroke-dashoffset: 1; } }
@keyframes geoIn { from { opacity: 0; } }
@keyframes geoPop { 0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.7); } 100% { opacity: 1; transform: scale(1); } }
@keyframes geoStar { 0% { opacity: 0; transform: scale(0); }
  55% { opacity: 1; transform: scale(1.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes geoHalo { from { opacity: .55; transform: scale(1); }
  to { opacity: 0; transform: scale(5.2); } }
@keyframes geoSpin { to { transform: rotate(360deg); } }
@keyframes geoSpinBack { to { transform: rotate(-360deg); } }

@media (max-width: 900px) { .hgeo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html.v6 .hgeo, html.v6 .hgeo * { animation: none !important; opacity: 1 !important;
    stroke-dashoffset: 0 !important; }
}
html[data-motion="off"] .hgeo, html[data-motion="off"] .hgeo * { opacity: 1; stroke-dashoffset: 0; }


/* ============================================================
   v6.1 · ЛОГО-ЛОК как в гайдбуке: DATA-HOUSE капсом,
   INTELLIGENCE моноширинной подписью ПОД словом.
   ============================================================ */
.brand .bt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.brand .bt .bw { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: 15px; line-height: 1; }
.brand .suf { align-self: auto; margin-top: 0; }

/* Знак-созвездие: «подкрутка» ~30° при наведении, с пружиной */
.brand .dhmark.const { transform-origin: 50% 50%; transition: transform .85s cubic-bezier(.3, 1.55, .45, 1); }
.brand:hover .dhmark.const,
.brand:focus-visible .dhmark.const { transform: rotate(33deg); }
html[data-motion="off"] .brand .dhmark.const { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .brand .dhmark.const { transition: none; transform: none !important; }
}

/* 02 · Суть: терракотовая строка-принцип под лидом */
.core-note { position: relative; margin: 46px 0 0; padding-left: 22px; font-size: 18.5px; line-height: 1.55; color: var(--accent); max-width: 58ch; }
.core-note::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* 08 · Почему к нам идут: 4 колонки с верхними линейками */
.why-grid { margin-top: 84px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.why { border-top: 1px solid var(--ink); padding-top: 18px; }
.why .wn { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.why h3 { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; margin: 14px 0 10px; line-height: 1.25; }
.why p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 34ch; }
@media (max-width: 1080px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; gap: 36px; } }

/* 09 · Продуктовая матрица — фотокарточки */
#products { background: var(--paper); }
.pm-grid { margin-top: 84px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 40px; }
.pm-img { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.pm-img image-slot { display: block; width: 100%; height: 100%; filter: grayscale(1); }
.pm h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3; margin: 26px 0 0; max-width: 20ch; }
.pm p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; max-width: 46ch; }
@media (max-width: 1080px) { .pm-grid { grid-template-columns: repeat(2, 1fr); gap: 52px 32px; } }
@media (max-width: 620px) { .pm-grid { grid-template-columns: 1fr; gap: 44px; } }