/* ==========================================================================
   hero-visual.css — первый экран «Орбита дизайнов»
   Строгий чёрно-белый экран, единственный цвет — фирменный градиент
   (голубой → фиолетовый). По центру — круговая 3D-карусель: примеры сайтов
   стоят на внутренней стороне цилиндра, между ними — «дутые» фигуры
   в градиенте. Сверху и снизу карусель обводят орбиты — проекция круга,
   по которому она вращается; по орбитам бегут светящиеся точки.

   Слои снизу вверх:
     свечение и сетка → орбиты (SVG) → карточки и фигуры → контент.
   Геометрию и вращение считает js/hero-visual.js; без JS карусель
   показывается статичной лентой (см. раздел 5).
   ========================================================================== */

/* ---------- Токены: свой набор у каждой темы ---------- */
:root {
  --hv-bg:        255, 255, 255;              /* фон экрана в RGB — для затемнения краёв */
  --hv-line:      rgba(0, 0, 0, .05);
  --hv-card-edge: rgba(0, 0, 0, .08);
  --hv-card-sh:   0 30px 60px -28px rgba(20, 30, 60, .45), 0 12px 24px -16px rgba(20, 30, 60, .25);
  --hv-glow-a:    rgba(56, 189, 248, .16);
  --hv-glow-b:    rgba(167, 139, 250, .18);
  --hv-orbit-op:  .55;
  --hv-grad:      linear-gradient(120deg, #38BDF8 0%, #7C9CF6 50%, #A78BFA 100%);
}
html.dark {
  --hv-bg:        0, 0, 0;
  --hv-line:      rgba(255, 255, 255, .045);
  --hv-card-edge: rgba(255, 255, 255, .1);
  --hv-card-sh:   0 30px 70px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .04);
  --hv-glow-a:    rgba(56, 189, 248, .14);
  --hv-glow-b:    rgba(167, 139, 250, .17);
  --hv-orbit-op:  .7;
}

/* ==========================================================================
   1. РАСКЛАДКА ПЕРВОГО ЭКРАНА: текст сверху по центру, орбита — ниже
   ========================================================================== */
.hero--v3 {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}

/* --- Фон: мягкое свечение под каруселью + тонкая сетка, гаснущая к краям --- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hc-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--hv-line) 1px, transparent 1px) 50% 0 / 72px 72px,
    linear-gradient(90deg, var(--hv-line) 1px, transparent 1px) 50% 0 / 72px 72px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 62%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 62%, #000 0%, transparent 75%);
}
.hc-glow {
  position: absolute;
  left: 50%;
  bottom: -28%;
  width: min(1100px, 140vw);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 38% 50%, var(--hv-glow-a), transparent),
    radial-gradient(closest-side at 64% 50%, var(--hv-glow-b), transparent);
  filter: blur(10px);
  animation: hcBreath 14s ease-in-out infinite alternate;
}
@keyframes hcBreath {
  from { opacity: .75; transform: translateX(-50%) scale(.96); }
  to   { opacity: 1;   transform: translateX(-50%) scale(1.04); }
}

/* ==========================================================================
   2. КОНТЕНТ ПЕРВОГО ЭКРАНА
   ========================================================================== */
.hero__top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.4vh, 1.6rem);
  padding: clamp(1.75rem, 6vh, 4rem) var(--gutter) 0;
  text-align: center;
}

/* Текст с градиентом — единый приём для акцентов */
.hw--grad {
  background: var(--hv-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Заголовок: три строки мягко проявляются одна за другой */
.hero__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1rem + 4.6vw, 4.6rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--color-text);
}
/* Раньше строки выезжали из-под маски (overflow: hidden) — при таком приёме
   первой из-под края показывалась самая высокая деталь, «крышечка» Й,
   и казалось, что она появляется раньше остального текста.
   Теперь маски нет: каждая строка целиком всплывает, проявляется из
   прозрачности и фокусируется из лёгкого размытия — все детали букв
   движутся вместе. fill-mode both держит стартовый кадр (невидимый)
   всё время задержки и заставки. */
.hw { display: block; }
.hw > span {
  display: block;
  animation: hxWord 1.2s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(.2s + var(--w) * .16s);
}
@keyframes hxWord {
  0%   { opacity: 0; transform: translate3d(0, .42em, 0) scale(.98); filter: blur(12px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Строка под заголовком: описание и ссылка — по центру */
.hero__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.hero__desc {
  margin: 0;
  max-width: 440px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: .62;
}

/* Кнопка «Обсудить проект»: градиентная пилюля, круглая иконка со стрелкой
   вниз — ведёт к контактам в подвале. При наведении градиент «переливается»,
   стрелка покачивается вниз. */
.hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: .35rem;
  padding: .5rem .5rem .5rem 1.6rem;
  border-radius: 999px;
  background: var(--accent-fill);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(20, 30, 70, .22);
  box-shadow: var(--shadow-accent);
  isolation: isolate;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
              background-position .7s cubic-bezier(.22, 1, .36, 1),
              box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}
/* Мягкий ореол, который «дышит» — кнопку видно сразу */
.hero__cta::before {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent-fill);
  filter: blur(16px);
  opacity: .35;
  animation: heroCtaGlow 3.2s ease-in-out infinite;
}
@keyframes heroCtaGlow {
  0%, 100% { opacity: .22; transform: scale(.96); }
  50%      { opacity: .5;  transform: scale(1.03); }
}
.hero__cta-icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #3B82F6;
  box-shadow: 0 4px 12px -4px rgba(20, 30, 70, .35);
}
.hero__cta-icon svg { width: 18px; height: 18px; }
.hero__cta:hover {
  transform: translateY(-2px) scale(1.03);
  background-position: 100% 50%;
}
.hero__cta:hover .hero__cta-icon svg { animation: heroCtaArrow .9s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes heroCtaArrow {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}
.hero__cta:active { transform: scale(.97); }
.hero__cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }

@media (hover: none) {
  .hero__cta:hover { transform: none; background-position: 0% 50%; }
  .hero__cta:hover .hero__cta-icon svg { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cta::before { animation: none; }
}

@media (min-width: 768px) {
  .hero__desc { font-size: 13px; }
  .hero__cta { font-size: 1.1rem; padding-left: 1.85rem; }
  .hero__cta-icon { width: 42px; height: 42px; }
}

/* ==========================================================================
   3. ОРБИТА: круговая 3D-карусель
   ========================================================================== */
.hero-orbit {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: clamp(250px, 46vh, 520px);
  margin-top: clamp(.5rem, 2vh, 1.5rem);
  outline: none;
  touch-action: pan-y;                /* вертикальный скролл пальцем не блокируем */
  -webkit-user-select: none;
          user-select: none;
  cursor: grab;
  /* края сцены растворяются в фоне */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  animation: hcIn 1.2s cubic-bezier(.22, 1, .36, 1) both .45s;
}
.hero-orbit.is-dragging { cursor: grabbing; }
.hero-orbit:focus-visible .hc-orbit { opacity: 1; }
@keyframes hcIn {
  from { opacity: 0; transform: translateY(40px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Орбиты — SVG под карточками, пути рисует JS */
.hc-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: var(--hv-orbit-op);
  transition: opacity .4s ease;
}
.hc-orbit path { fill: none; stroke-width: 1.25; }
.hc-orbit .hc-orbit__glow { stroke-width: 6; opacity: .18; filter: blur(3px); }
.hc-comet { fill: #fff; filter: drop-shadow(0 0 5px #7C9CF6) drop-shadow(0 0 12px #A78BFA); }

/* Сцена с перспективой: каждый элемент получает свой 3D-transform из JS */
.hc-stage {
  position: absolute;
  inset: 0;
  perspective: 1100px;          /* JS уточняет под ширину экрана */
  perspective-origin: 50% 50%;
}
.hc-item {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.hero-orbit.is-ready .hc-item { visibility: hidden; }   /* до первого кадра JS */

/* --- Карточка-пример сайта --- */
.hc-card {
  width: var(--card-w, 340px);
  aspect-ratio: 16 / 10;
  border-radius: clamp(10px, 1.1vw, 16px);
  overflow: hidden;
  background: #111;
  border: 1px solid var(--hv-card-edge);
  box-shadow: var(--hv-card-sh);
  cursor: pointer;
}
.hc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* Затемнение к краям орбиты — величину пишет JS в --dim (0…1) */
.hc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(var(--hv-bg));
  opacity: var(--dim, 0);
  pointer-events: none;
}
/* Блик-«стекло» поверх скриншота */
.hc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

/* --- «Дутая» фигура между слайдами --- */
.hc-shape {
  width: var(--shape-w, 130px);
  aspect-ratio: 1;
  pointer-events: none;
}
.hc-shape img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}
/* мягкий цветной отсвет под фигурой */
.hc-shape::before {
  content: '';
  position: absolute;
  left: 16%; right: 16%;
  bottom: -4%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 156, 246, .5), transparent);
  filter: blur(6px);
}

/* Подсказка управления под каруселью */
.hc-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(.6rem, 2.4vh, 1.4rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: .4;
  white-space: nowrap;
  pointer-events: none;
}
.hc-hint::before,
.hc-hint::after {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--hv-grad);
}

/* ==========================================================================
   4. ПОЯВЛЕНИЕ КОНТЕНТА И ШАПКИ
   ========================================================================== */
.hx-up {
  animation: hxUp .6s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--i) * .1s);
}
@keyframes hxUp {
  from { opacity: 0; transform: translateY(24px); }
}

.header__inner > .logo,
.header .nav__link,
.header__actions > * {
  animation: hxDown .5s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--hd, 0) * .1s);
}
.header__inner > .logo { --hd: 0; }
.header .nav__link:nth-child(1) { --hd: 1; }
.header .nav__link:nth-child(2) { --hd: 2; }
.header .nav__link:nth-child(3) { --hd: 3; }
.header .nav__link:nth-child(4) { --hd: 4; }
.header__actions > * { --hd: 5; }
@keyframes hxDown {
  from { opacity: 0; transform: translateY(-20px); }
}

/* Пока идёт заставка pixart — всё ждёт и стартует сразу после неё */
html.intro .hx-up,
html.intro .hw > span,
html.intro .hero-orbit,
html.intro .header__inner > .logo,
html.intro .header .nav__link,
html.intro .header__actions > * { animation-play-state: paused; }

/* ==========================================================================
   5. АДАПТИВ, БЕЗ JS, ПАУЗА И «УМЕНЬШИТЬ ДВИЖЕНИЕ»
   ========================================================================== */
@media (max-width: 640px) {
  .hero-orbit {
    min-height: clamp(240px, 42vh, 360px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .hc-hint { display: none; }
  .hero__desc { max-width: 320px; }
}

/* Вертикальные экраны (телефоны, планшеты): первый экран по высоте контента,
   чтобы под каруселью не оставалось пустоты */
@media (max-aspect-ratio: 4/5) {
  .hero--v3 { min-height: 0; padding-bottom: clamp(1rem, 4vw, 2.5rem); }
  .hero-orbit { flex: none; min-height: 0; height: clamp(300px, 64vw, 600px); }
}
@media (max-aspect-ratio: 4/5) and (max-width: 640px) {
  .hero-orbit { height: clamp(290px, 90vw, 380px); }
}

/* Невысокие широкие экраны (ноутбуки 1366×768 и т.п.) — ужимаем текст */
@media (min-width: 900px) and (max-height: 780px) {
  .hero__heading { font-size: clamp(1.9rem, 1rem + 3.4vw, 3.5rem); }
  .hero__top { padding-top: 1.25rem; gap: .8rem; }
  .hc-hint { display: none; }
}

/* JS не загрузился — показываем примеры обычной лентой */
.hero-orbit:not(.is-ready) .hc-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.hero-orbit:not(.is-ready) .hc-item {
  position: relative;
  left: auto;
  top: auto;
  flex: none;
  width: 260px;
}
.hero-orbit:not(.is-ready) .hc-shape { width: 90px; }
.hero-orbit:not(.is-ready) .hc-orbit { display: none; }

.hero.hv-paused .hero__bg *,
.hero.hv-paused .hc-orbit * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .hx-up,
  .hw > span,
  .hero-orbit,
  .header__inner > .logo,
  .header .nav__link,
  .header__actions > * { animation: none !important; transform: none; }
  .hc-glow { animation: none !important; }
}