/* Выставочный слой лендинга /landing по приёмам Cognitive OS: объёмные
   орбиты со сферами и дугами-кометами вокруг ядра галактики, лазерный проход
   по первому экрану, проявление текста, голографические уголки карточек,
   пакеты по проводам сигналов, проявление разделов при прокрутке, сияние и
   метеоры. Декор не изображает данных. Reduced motion (системный и из демо)
   выключает движение правилами landing.css; базовые позы законченные. */
.landing {
  --holo: #9fd0ff;
  --holo-rgb: 159, 208, 255;
}

/* --- Небо первого экрана. */
.landing-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.landing-sky__aurora {
  position: absolute;
  left: -10%;
  right: -10%;
  top: -12%;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(var(--mint-rgb), 0.06) 35%, rgba(var(--lav-rgb), 0.1) 60%, transparent);
  filter: blur(30px);
  animation: landing-aurora 28s ease-in-out infinite alternate;
}
@keyframes landing-aurora {
  from {
    transform: translateX(-4%) skewX(-7deg);
    opacity: 0.7;
  }
  to {
    transform: translateX(4%) skewX(7deg);
    opacity: 1;
  }
}
.landing-sky__meteor {
  position: absolute;
  top: var(--y);
  left: -14%;
  width: 170px;
  height: 1px;
  opacity: 0;
  transform-origin: left center;
  transform: rotate(var(--tilt));
  background: linear-gradient(90deg, transparent, #e7dcfa 70%, #fff);
  box-shadow: 0 0 8px #ddd2ff88;
  animation: landing-meteor var(--period) linear var(--delay) infinite;
}
@keyframes landing-meteor {
  0%,
  92% {
    opacity: 0;
    transform: rotate(var(--tilt)) translateX(0);
  }
  93.5% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--tilt)) translateX(128vw);
  }
}

/* --- Объёмные орбиты вокруг ядра галактики. Плоскость наклонена в 3D,
   кольца вращаются по-своему, сферы компенсируют вращение и наклон. */
.landing-cosmos {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 0;
  height: 0;
  perspective: 1400px;
  pointer-events: none;
}
.landing-cosmos__plane {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: rotateX(72deg) rotateZ(-14deg);
}
.landing-ring {
  --r: 210px;
  --period: 70s;
  --dir: 1;
  position: absolute;
  left: calc(var(--r) * -1);
  top: calc(var(--r) * -1);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  transform-style: preserve-3d;
  animation: landing-ring-spin var(--period) linear infinite;
  animation-direction: var(--play, normal);
}
.landing-ring[data-ring="1"] {
  --r: 300px;
  --period: 105s;
  --play: reverse;
}
.landing-ring[data-ring="2"] {
  --r: 395px;
  --period: 150s;
}
@keyframes landing-ring-spin {
  to {
    transform: rotateZ(360deg);
  }
}
.landing-ring__line {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--lav-rgb), 0.24);
  box-shadow: 0 0 22px rgba(var(--lav-rgb), 0.08);
}
.landing-ring[data-ring="1"] .landing-ring__line {
  border-color: rgba(var(--mint-rgb), 0.22);
}
.landing-ring[data-ring="2"] .landing-ring__line {
  border-color: rgba(var(--gold-rgb), 0.24);
}
/* Светящийся отрезок бежит по кольцу вместе с его вращением. */
.landing-ring__comet {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(var(--gold-rgb), 0.85) 88%, #fff 90%, transparent 91%);
  -webkit-mask: radial-gradient(circle, transparent calc(70.4%), #000 calc(70.6%), #000 calc(71%), transparent calc(71.2%));
  mask: radial-gradient(circle, transparent 70.4%, #000 70.6%, #000 71%, transparent 71.2%);
}
.landing-ring__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateZ(var(--a)) translateX(var(--r));
}
.landing-orb {
  --tone: var(--gold);
  --tone-rgb: var(--gold-rgb);
  position: absolute;
  left: -27px;
  top: -27px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--tone);
  transform: rotateZ(calc(var(--a) * -1)) rotateX(-72deg);
  animation: landing-orb-face var(--period) linear infinite;
  animation-direction: var(--play, normal);
}
.landing-orb[data-tone="lav"] {
  --tone: var(--lav);
  --tone-rgb: var(--lav-rgb);
}
.landing-orb[data-tone="mint"] {
  --tone: var(--mint);
  --tone-rgb: var(--mint-rgb);
}
@keyframes landing-orb-face {
  from {
    transform: rotateZ(calc(var(--a) * -1)) rotateX(-72deg);
  }
  to {
    transform: rotateZ(calc(var(--a) * -1 - 360deg)) rotateX(-72deg);
  }
}
.landing-orb__glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 27%, #ffffff70, #ffffff10 14%, transparent 30%),
    radial-gradient(circle, rgba(var(--tone-rgb), 0.08), rgba(var(--tone-rgb), 0.02) 45%, #05081030 72%, rgba(var(--tone-rgb), 0.2));
  box-shadow:
    inset 0 0 14px rgba(var(--tone-rgb), 0.12),
    0 0 22px rgba(var(--tone-rgb), 0.12);
}
.landing-orb__arc {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--tone) 0 110deg, #fff 118deg 120deg, transparent 120deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%);
  filter: drop-shadow(0 0 4px rgba(var(--tone-rgb), 0.9));
  animation: landing-spin 14s linear infinite;
  animation-delay: calc(var(--k) * -2.1s);
}
.landing-orb:nth-child(even) .landing-orb__arc {
  animation-direction: reverse;
}
.landing-orb .ui-icon {
  position: relative;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 6px rgba(var(--tone-rgb), 0.7));
}
@keyframes landing-spin {
  to {
    transform: rotate(360deg);
  }
}
.landing-cosmos__core {
  position: absolute;
  left: -70px;
  top: -70px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7e6aa, rgba(var(--gold-rgb), 0.25) 30%, transparent 70%);
  mix-blend-mode: screen;
  animation: landing-core 5.5s ease-in-out infinite;
}
@keyframes landing-core {
  50% {
    transform: scale(1.12);
    opacity: 0.75;
  }
}

/* --- Первый экран: лазерный проход, подъём текста, перелив строки цели. */
.landing-hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background: #fff;
  box-shadow:
    0 0 6px 2px rgba(var(--holo-rgb), 0.9),
    0 0 26px 10px rgba(var(--gold-rgb), 0.35),
    0 0 70px 24px rgba(var(--lav-rgb), 0.2);
  animation: landing-scan 1.7s cubic-bezier(0.3, 0, 0.2, 1) 0.3s both;
}
@keyframes landing-scan {
  0% {
    left: 0;
    opacity: 0;
  }
  8%,
  92% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
.landing-hero__copy > * {
  animation: landing-rise 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--k, 0) * 100ms + 160ms);
}
.landing-hero__copy > :nth-child(2) {
  --k: 1;
}
.landing-hero__copy > :nth-child(3) {
  --k: 2;
}
.landing-hero__copy > :nth-child(4) {
  --k: 3;
}
.landing-hero__copy > :nth-child(5) {
  --k: 4;
}
@keyframes landing-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
}
.landing-hero h1 > span:last-child {
  background: linear-gradient(100deg, var(--gold) 0 38%, #fff8e2 46%, #f8e2b0 50%, #ddd2ff 54%, var(--gold) 62% 100%);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: landing-sheen 9s ease-in-out 1.6s infinite;
}
@keyframes landing-sheen {
  0%,
  25% {
    background-position: 100% 0;
  }
  70%,
  100% {
    background-position: 0 0;
  }
}
/* Метки сцены: голографические уголки и пульс точки. */
.landing-hero__coordinate {
  background: #090d17b8;
  border-color: rgba(var(--holo-rgb), 0.18);
  backdrop-filter: blur(4px);
}
.landing-hero__coordinate::before {
  content: "";
  position: absolute;
  inset: -4px;
  pointer-events: none;
  --c: 9px;
  --line: rgba(var(--holo-rgb), 0.8);
  background:
    linear-gradient(var(--line), var(--line)) 0 0 / var(--c) 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 0 / 1.5px var(--c) no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 100% / var(--c) 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 100% / 1.5px var(--c) no-repeat;
}
.landing-hero__coordinate i {
  animation: landing-dot 2.6s ease-in-out infinite;
}
.landing-hero__coordinate--context i {
  animation-delay: -0.9s;
}
.landing-hero__coordinate--step i {
  animation-delay: -1.7s;
}
@keyframes landing-dot {
  50% {
    box-shadow: 0 0 0 6px transparent, 0 0 14px currentColor;
    transform: scale(1.4);
  }
}

/* --- Кнопки ловят блик. */
.landing-button--gold,
.landing-top__demo {
  position: relative;
  overflow: hidden;
}
.landing-button--gold::after,
.landing-top__demo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: landing-btn-sheen 6.5s ease-in-out 2s infinite;
}
@keyframes landing-btn-sheen {
  0% {
    transform: translateX(-120%);
  }
  18%,
  100% {
    transform: translateX(120%);
  }
}

/* --- Карточки и цитаты: голографические уголки, кромка на наведении. */
:where(.landing-feature, .landing-say, .landing-case, .landing-pain) {
  position: relative;
}
:where(.landing-feature, .landing-say)::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  --c: 16px;
  --line: rgba(var(--holo-rgb), 0.7);
  background:
    linear-gradient(var(--line), var(--line)) 0 0 / var(--c) 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 0 / 1.5px var(--c) no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 0 / var(--c) 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 0 / 1.5px var(--c) no-repeat,
    linear-gradient(var(--line), var(--line)) 0 100% / var(--c) 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 100% / 1.5px var(--c) no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 100% / var(--c) 1.5px no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 100% / 1.5px var(--c) no-repeat;
  opacity: 0.5;
  transition: opacity 0.3s;
  animation: landing-corner 6s ease-in-out infinite;
}
.landing-feature:hover::before,
.landing-say:hover::before {
  opacity: 1;
}
@keyframes landing-corner {
  50% {
    opacity: 0.85;
  }
}
.landing-feature {
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s;
}
.landing-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px #0007, 0 0 34px rgba(var(--gold-rgb), 0.08);
}
/* Значки разделов: дуга-комета в треть окружности. */
.landing-feature__top > .ui-icon,
.landing-case__avatar,
.landing-say__mark {
  position: relative;
  overflow: visible;
}
.landing-case__avatar::after,
.landing-say__mark::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold) 0 110deg, #fff 118deg 120deg, transparent 120deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%);
  animation: landing-spin 14s linear infinite;
  animation-delay: calc(var(--k, 0) * -1.7s);
}
.landing-case:nth-child(even) .landing-case__avatar::after {
  animation-direction: reverse;
}

/* --- Сигналы: пакеты света бегут по проводам к центру, центр дышит. */
.landing-signals__packets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.landing-signals__packets path {
  stroke: #fff6dd;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 3 22;
  filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.9));
  animation: landing-packets 3.6s linear infinite;
}
@keyframes landing-packets {
  to {
    stroke-dashoffset: -25;
  }
}
.landing-signals__center {
  position: relative;
}
.landing-signals__center::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.6);
  animation: landing-ripple 3.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes landing-ripple {
  from {
    opacity: 0.9;
    transform: scale(0.85);
  }
  70%,
  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* --- Разделы проявляются при прокрутке: заголовок поднимается, по нему
   проходит световая кромка. Только там, где браузер умеет scroll-timeline. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .landing-section__head,
    .landing-feature,
    .landing-case,
    .landing-say,
    .landing-pain {
      animation: landing-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    .landing-section__head h2 {
      position: relative;
    }
  }
}
/* Отдельное свойство translate не спорит с transform подъёма на наведении. */
@keyframes landing-reveal {
  from {
    opacity: 0;
    translate: 0 34px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

/* --- Узкие экраны: орбиты меньше, метеоры и лазер не отвлекают. */
@media (max-width: 1150px) {
  .landing-ring {
    --r: 170px;
  }
  .landing-ring[data-ring="1"] {
    --r: 240px;
  }
  .landing-ring[data-ring="2"] {
    --r: 310px;
  }
}
@media (max-width: 760px) {
  .landing-sky__meteor,
  .landing-hero::after {
    display: none;
  }
  .landing-ring {
    --r: 110px;
  }
  .landing-ring[data-ring="1"] {
    --r: 150px;
  }
  .landing-ring[data-ring="2"] {
    --r: 190px;
  }
  .landing-orb {
    left: -18px;
    top: -18px;
    width: 36px;
    height: 36px;
  }
  .landing-orb .ui-icon {
    width: 16px;
    height: 16px;
  }
}