/* Lanorix Cloud: «живые» ambient-анимации (идут сами, пока человек смотрит страницу).
   Подключение: <link rel="stylesheet" href="/ambient.css"> + <script src="/ambient.js" defer></script>.
   Только transform/opacity/rotate/translate (кроме бликов текста: background-position у нескольких слов).
   Не трогает transform у .panel/.btn/.nav a: свои эффекты — в отдельных элементах и псевдоэлементах.
   Палитра site.css не меняется: используются её переменные. */

:root {
  --amb-glint: #9ecbff;      /* светлый блик */
}

/* ---------- пауза вне экрана и в скрытой вкладке (классы ставит ambient.js) ---------- */
.amb-off, .amb-off *, .amb-off *::before, .amb-off *::after,
html.amb-hidden *, html.amb-hidden *::before, html.amb-hidden *::after {
  animation-play-state: paused !important;
}

/* ---------- (1) hero: плавающие «узлы сети», кольца, орбиты ---------- */
.hero { position: relative; isolation: isolate; }
.amb-hero {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  color: var(--accent, #2f81f7);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 84%, transparent 100%);
}
.amb-par { position: absolute; inset: 0; will-change: translate; }
.amb-orbit {
  --s: clamp(280px, 38vw, 440px);
  position: absolute; right: 6%; top: 50%; width: var(--s); height: var(--s); margin-top: calc(var(--s) / -2);
  animation: amb-breathe 9s ease-in-out infinite alternate;
}
.amb-orbit::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 129, 247, .16), rgba(47, 129, 247, 0));
}
.amb-ring { position: absolute; inset: 0; }
.amb-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.amb-ring.r1 { animation: amb-rot 110s linear infinite; opacity: .55; }
.amb-ring.r2 { animation: amb-rot 70s linear infinite reverse; inset: 10%; opacity: .8; }
.amb-ring.r3 { animation: amb-rot 46s linear infinite; inset: 28%; opacity: .75; }
.amb-ring svg .halo, .amb-mesh .halo {
  transform-box: fill-box; transform-origin: center; fill: currentColor; stroke: none;
  animation: amb-halo 3.6s ease-out infinite;
}
.amb-core { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.amb-core i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .85; }
.amb-core i + i { background: none; border: 1px solid currentColor; opacity: 0; animation: amb-core 4s ease-out infinite; }
.amb-core i + i + i { animation-delay: 2s; }

.amb-disc {
  position: absolute; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 18px 2px rgba(47, 129, 247, .35);
  animation: amb-drift 9s ease-in-out infinite alternate;
}
.amb-disc.d1 { left: 5%; top: 66%; width: 12px; height: 12px; opacity: .5; }
.amb-disc.d2 { left: 52%; top: 10%; width: 7px; height: 7px; opacity: .55; animation-duration: 7s; animation-delay: -3s; }
.amb-disc.d3 { right: 3%; top: 84%; width: 9px; height: 9px; opacity: .4; animation-duration: 11s; animation-delay: -5s; }
.amb-mesh { position: absolute; left: 40%; top: 6%; width: 120px; height: 100px; opacity: .55; animation: amb-sway 16s ease-in-out infinite alternate; }
.amb-mesh svg { display: block; width: 100%; height: 100%; overflow: visible; }

@keyframes amb-rot { to { rotate: 360deg; } }
@keyframes amb-breathe { from { transform: scale(.97); } to { transform: scale(1.04); } }
@keyframes amb-drift {
  from { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(8px, -16px, 0); }
  to   { transform: translate3d(-6px, -6px, 0); }
}
@keyframes amb-sway { from { transform: translate3d(0, 0, 0) rotate(-5deg); } to { transform: translate3d(10px, 12px, 0) rotate(6deg); } }
@keyframes amb-halo { from { transform: scale(.6); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }
@keyframes amb-core { from { transform: scale(1); opacity: .6; } to { transform: scale(6); opacity: 0; } }

/* ---------- (2) блик на акцентных словах и логотипе ---------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand > span:not(.brand-sub) {
    background-image: linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, var(--amb-glint) 50%, var(--accent) 62%, var(--accent) 100%);
    background-size: 260% 100%; background-position: 100% 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: amb-shine 6s ease-in-out infinite;
  }
  .amb-word {
    background-image: linear-gradient(100deg, var(--text) 0%, var(--text) 40%, var(--amb-glint) 50%, var(--text) 60%, var(--text) 100%);
    background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: amb-shine 7s ease-in-out 1.2s infinite;
  }
}
@keyframes amb-shine {
  0%, 30% { background-position: 100% 0; }
  70%, 100% { background-position: 0% 0; }
}

/* ---------- (3) бегущий блик по границе карточек и основной кнопки ---------- */
.panel.feature, .panel.plan, a.btn.primary, button.primary { position: relative; }
.amb-edge {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.amb-edge i {
  position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(rgba(47, 129, 247, 0) 0 250deg, var(--accent, #2f81f7) 322deg, #cfe5ff 355deg, rgba(47, 129, 247, 0) 360deg);
}
a.btn.primary > .amb-edge, button.primary > .amb-edge { padding: 2px; }
a.btn.primary > .amb-edge i, button.primary > .amb-edge i {
  background: conic-gradient(rgba(255, 255, 255, 0) 0 250deg, rgba(255, 255, 255, .45) 322deg, #fff 355deg, rgba(255, 255, 255, 0) 360deg);
}
button:disabled > .amb-edge, button[aria-busy="true"] > .amb-edge { display: none; }

/* ---------- (4) «живые» индикаторы у тегов-статусов ---------- */
.tag.ok, .tag.warn, .tag.bad { position: relative; }
.tag.ok::before, .tag.warn::before, .tag.bad::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  margin-right: 6px; vertical-align: middle; position: relative; top: -1px;
}
.tag.ok::after, .tag.warn::after, .tag.bad::after {
  content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: currentColor; opacity: 0; pointer-events: none; animation: amb-ripple 2.6s ease-out infinite;
}
.tag.warn::after { animation-duration: 1.8s; }
.tag.bad::after { animation-duration: 1.4s; }
@keyframes amb-ripple { from { transform: scale(1); opacity: .6; } to { transform: scale(3.4); opacity: 0; } }

/* ---------- (5) микро-иллюстрации в карточках функций ---------- */
.panel.feature h3 { padding-right: 38px; }
.amb-ico {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center; pointer-events: none; color: var(--accent, #2f81f7);
  background: rgba(47, 129, 247, .09); border: 1px solid rgba(47, 129, 247, .28);
}
.amb-ico svg { width: 23px; height: 23px; display: block; overflow: visible; }
.amb-ico svg * { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.amb-ico svg .f { fill: currentColor; stroke: none; }

/* 1. Список ПК: бегущий пульс-график на мониторе */
.amb-ico .pulse { stroke-width: 1.3; animation: amb-pulse 2.4s linear infinite; }
@keyframes amb-pulse { to { transform: translate3d(-14px, 0, 0); } }
/* 2. Обращения: печать и мигающий курсор */
.amb-ico .ln2 { transform-box: fill-box; transform-origin: left center; animation: amb-type 4s steps(8, end) infinite; }
.amb-ico .cur { animation: amb-cur-move 4s steps(8, end) infinite, amb-blink 1s steps(1, end) infinite; }
@keyframes amb-type { 0% { transform: scaleX(.06); } 70%, 100% { transform: scaleX(1); } }
@keyframes amb-cur-move { 0% { transform: translate3d(-6px, 0, 0); } 70%, 100% { transform: translate3d(0, 0, 0); } }
@keyframes amb-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* 3. Просмотр экрана: бегущая линия и курсор */
.amb-ico .scan { animation: amb-scan 2.8s ease-in-out infinite; }
.amb-ico .ptr { animation: amb-ptr 5s ease-in-out infinite; }
@keyframes amb-scan { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translate3d(0, 8px, 0); opacity: 0; } }
@keyframes amb-ptr {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(-5px, -3px, 0); }
  65% { transform: translate3d(-2px, -6px, 0); }
}
/* 4. Сетевые устройства: пакеты по линиям + пульс хаба */
.amb-ico .pk { fill: currentColor; stroke: none; animation: amb-pkt 2.6s ease-in-out infinite; }
.amb-ico .pk.a { --tx: -7.5px; --ty: -6px; }
.amb-ico .pk.b { --tx: 7.5px; --ty: -6px; animation-delay: .87s; }
.amb-ico .pk.c { --tx: 0px; --ty: 8px; animation-delay: 1.74s; }
.amb-ico .hub { transform-box: fill-box; transform-origin: center; animation: amb-halo 2.6s ease-out infinite; stroke: none; fill: currentColor; }
@keyframes amb-pkt {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate3d(var(--tx), var(--ty), 0); opacity: 0; }
}
/* 5. Общий доступ: синхронизация внутри папки */
.amb-ico .sync { transform-box: fill-box; transform-origin: center; animation: amb-rot 3.4s linear infinite; }
/* 6. Хранилище паролей: замок открывается и закрывается */
.amb-ico .shackle { animation: amb-lock 5s ease-in-out infinite; }
.amb-ico .key { animation: amb-key 2.5s ease-in-out infinite; }
@keyframes amb-lock {
  0%, 38%, 100% { transform: translate3d(0, 0, 0); }
  48%, 66% { transform: translate3d(0, -2.4px, 0); }
  76% { transform: translate3d(0, 0, 0); }
}
@keyframes amb-key { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- (7) shimmer загрузочных состояний и плавающая тень модалок ---------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .loading {
    background-image: linear-gradient(100deg, var(--muted) 0%, var(--muted) 38%, #dbe5ef 50%, var(--muted) 62%, var(--muted) 100%);
    background-size: 260% 100%; background-position: 100% 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: amb-sweep 2.2s linear infinite;
  }
}
@keyframes amb-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.skeleton, .skel, [data-skeleton] { position: relative; overflow: hidden; background: var(--panel2, #1e2631); border-radius: 8px; color: transparent; }
.skeleton::after, .skel::after, [data-skeleton]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .07) 50%, transparent 80%);
  transform: translate3d(-100%, 0, 0); animation: amb-skel 1.6s ease-in-out infinite;
}
@keyframes amb-skel { to { transform: translate3d(100%, 0, 0); } }

dialog[open] {
  box-shadow: 0 30px 80px -12px rgba(0, 0, 0, .65), 0 10px 30px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(47, 129, 247, .08), 0 0 70px -24px rgba(47, 129, 247, .35);
}

@media (max-width: 480px) {
  .panel.feature h3 { padding-right: 34px; }
  .amb-ico { top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 8px; }
  .amb-ico svg { width: 20px; height: 20px; }
}

/* ---------- узкие экраны: упрощённо ---------- */
@media (max-width: 699px) {
  .amb-hero { opacity: .75; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%); }
  .amb-orbit { --s: min(76vw, 300px); right: -22%; top: 38%; animation: none; }
  .amb-ring.r1, .amb-mesh, .amb-disc.d2, .amb-disc.d3 { display: none; }
  .amb-par { will-change: auto; }
  .panel.feature > .amb-edge, .panel.plan > .amb-edge { display: none; }
}

/* ---------- reduced motion: всё статично ---------- */
@media (prefers-reduced-motion: reduce) {
  .amb-hero, .amb-hero *, .amb-ico, .amb-ico *, .skeleton::after, .skel::after, [data-skeleton]::after,
  .tag::before, .tag::after { animation: none !important; }
  .amb-edge, .tag.ok::after, .tag.warn::after, .tag.bad::after { display: none !important; }
  .amb-core i + i, .amb-ring svg .halo, .amb-mesh .halo, .amb-ico .pk, .amb-ico .hub { display: none; }
  .brand > span:not(.brand-sub), .amb-word, .loading {
    background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important;
  }
  .brand > span:not(.brand-sub) { color: var(--accent) !important; }
  .amb-word { color: inherit !important; }
  .loading { color: var(--muted) !important; }
}