/* ============================================================================
   Buh AI · WOW Animation System
   [A] Mesh gradient   [B] Floating numbers  [D] Orbiting badges
   [F] SVG line draw   [I] Stagger entrance  [J] Hero doc loop
   ============================================================================ */

/* =========================================================
   [A] ANIMATED MESH GRADIENT
   Drops 3 huge blurred circles inside a .mesh-bg container
   ========================================================= */
.mesh-bg {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 0;
}
.mesh-blob {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .9;
  will-change: transform;
}
.mesh-blob.b1 { background: rgba(109, 40, 217, 0.15); top: -10%; left: -10%; animation: meshDrift1 22s ease-in-out infinite; }
.mesh-blob.b2 { background: rgba(34, 211, 238, 0.10); top: 10%; right: -15%; animation: meshDrift2 28s ease-in-out infinite; }
.mesh-blob.b3 { background: rgba(167, 139, 250, 0.08); bottom: -20%; left: 30%; animation: meshDrift3 25s ease-in-out infinite; }

/* On dark sections — double the opacity */
.section-dark .mesh-blob,
.mesh-bg.is-dark .mesh-blob { opacity: 1.8; }

@keyframes meshDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(160px, 80px) scale(1.1); }
  66%      { transform: translate(80px, 200px) scale(0.95); }
}
@keyframes meshDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-180px, 120px) scale(1.15); }
  70%      { transform: translate(-100px, 220px) scale(.9); }
}
@keyframes meshDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%      { transform: translate(140px, -130px) scale(1.05); }
  75%      { transform: translate(-90px, -80px) scale(1.1); }
}

/* =========================================================
   [B] FLOATING DECORATIVE NUMBERS
   ========================================================= */
.float-numbers {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 1;
}
.float-num {
  position: absolute;
  font-weight: 700;
  color: rgba(109, 40, 217, 0.10);
  filter: blur(0.5px);
  opacity: 0;
  white-space: nowrap;
  user-select: none;
  letter-spacing: -.5px;
  animation: floatDrift 20s ease-in-out infinite;
}
.section-dark .float-num { color: rgba(167, 139, 250, .14); }

@keyframes floatDrift {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); opacity: 0; }
  20%      { opacity: .12; }
  50%      { transform: translate(40px, -30px) rotate(4deg); opacity: .12; }
  80%      { opacity: .12; }
}

/* =========================================================
   [D] ORBITING FIELD BADGES (OCR hero)
   ========================================================= */
.orbit-stage {
  position: relative;
  width: 100%; max-width: 480px; aspect-ratio: 1 / 1;
  margin: 0 auto;
  perspective: 1200px;
}
.orbit-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(16,16,40,.18);
  padding: 16px;
  z-index: 5;
}
.orbit-center .doc-h { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.orbit-center .doc-title { font-size: 14px; font-weight: 700; color: var(--text); }
.orbit-center .doc-num { font-size: 11px; color: var(--text-hint); margin: 2px 0 12px; }
.orbit-center .doc-line { height: 6px; background: var(--page-bg); border-radius: 3px; margin: 6px 0; }
.orbit-center .doc-line.s1 { width: 80%; }
.orbit-center .doc-line.s2 { width: 60%; }
.orbit-center .doc-line.s3 { width: 90%; }
.orbit-center::after {
  content: ""; position: absolute; left: 8px; right: 8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.7), transparent);
  box-shadow: 0 0 14px rgba(34,211,238,.7);
  animation: scanY 2.6s ease-in-out infinite;
  top: 0;
  border-radius: 2px;
}
@keyframes scanY {
  0%, 100% { top: 12%; }
  50%      { top: 86%; }
}

/* Each orbiter: two-step transform — rotate(angle) translateX(radius) rotate(-angle) */
.orbiter {
  position: absolute; left: 50%; top: 50%;
  --radius: 100px;
  --angle: 0deg;
  --dur: 6s;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle)));
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(16,16,40,.12);
  animation: orbit var(--dur) linear infinite, badgeFlyIn 900ms cubic-bezier(.16,1,.3,1) both;
  z-index: 6;
  white-space: nowrap;
}
.orbiter b { font-weight: 700; }
.orbiter::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--badge-color, var(--purple-700));
  box-shadow: 0 0 8px var(--badge-color, var(--purple-700));
}
.orbiter.b-purple { --badge-color: #6d28d9; color: #4c1d95; }
.orbiter.b-green  { --badge-color: #15803d; color: #15803d; }
.orbiter.b-blue   { --badge-color: #1d4ed8; color: #1d4ed8; }
.orbiter.b-amber  { --badge-color: #b45309; color: #92400e; }

@keyframes orbit {
  from { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle))); }
  to   { transform: translate(-50%, -50%) rotate(calc(var(--angle) + 360deg)) translateX(var(--radius)) rotate(calc(-1 * (var(--angle) + 360deg))); }
}
@keyframes badgeFlyIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* =========================================================
   [F] SVG LINE DRAW for timeline
   ========================================================= */
.timeline-svg {
  position: absolute; left: 0; right: 0; top: 32px;
  height: 4px; pointer-events: none;
  z-index: 0;
}
.timeline-svg path {
  stroke: url(#tl-grad);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1400ms ease-in-out;
}
.timeline.is-in .timeline-svg path { stroke-dashoffset: 0; }
.timeline { position: relative; }
/* Hide the old CSS line, SVG takes over */
.timeline::before { display: none; }
.timeline-step { opacity: 0; transform: translateY(30px); transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1); position: relative; z-index: 1; }
.timeline-step.is-in { opacity: 1; transform: translateY(0); }

/* =========================================================
   [I] STAGGER CARD ENTRANCE — new easing + variable
   ========================================================= */
.stagger-item {
  opacity: 0; transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1);
}
.stagger-item.entered {
  opacity: 1; transform: translateY(0);
}

/* Override existing reveal to use same easing */
.reveal { transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1); }

/* =========================================================
   [E] Counter glow while counting
   ========================================================= */
.is-counting { filter: drop-shadow(0 0 8px rgba(109, 40, 217, 0.5)); }

/* =========================================================
   [H] 3D TILT on feature cards
   ========================================================= */
.tilt {
  transform-style: preserve-3d;
  transition: transform 600ms ease, box-shadow 300ms ease;
  position: relative;
}
.tilt-parent { perspective: 600px; }
.tilt-shine {
  position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  mix-blend-mode: screen;
}
.tilt.is-tilting .tilt-shine { opacity: .9; }
.tilt > * { transform: translateZ(1px); }
.tilt .tilt-lift { transform: translateZ(20px); }

/* =========================================================
   [J] HERO DOCUMENT PROCESSING LOOP — exact timing
   Full cycle = 4800ms
   ========================================================= */
.heroLoop { position: relative; height: 520px; }
@media (max-width: 980px) { .heroLoop { height: 480px; } }
@media (max-width: 480px) { .heroLoop { height: 420px; } }

.heroLoop .hl-stage { position: absolute; inset: 0; }

.hl-doc {
  position: absolute;
  top: 24px; left: 0;
  width: 60%; max-width: 360px;
  height: 360px;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 18px 40px rgba(16,16,40,.10);
  animation: hlDoc 4800ms ease-in-out infinite;
}
.hl-doc .doc-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
.hl-doc .doc-title { font-size: 14px; font-weight: 700; }
.hl-doc .doc-num   { font-size: 11px; color: var(--text-hint); margin-bottom: 14px; }
.hl-doc .doc-row   { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.hl-doc .doc-row:last-child { border-bottom: 0; }
.hl-doc .doc-row .lbl { color: var(--text-muted); }
.hl-doc .doc-row .val { color: var(--text); font-weight: 600; position: relative; padding: 1px 6px; margin: -1px -6px; border-radius: 4px; transition: background-color .3s; }
.hl-doc .v1 { animation: hlField1 4800ms ease infinite; }
.hl-doc .v2 { animation: hlField2 4800ms ease infinite; }
.hl-doc .v3 { animation: hlField3 4800ms ease infinite; }
.hl-doc .v4 { animation: hlField4 4800ms ease infinite; }

@keyframes hlDoc {
  0%   { transform: translateX(60px); opacity: 0; }
  10%  { transform: translateX(0); opacity: 1; }      /* t=480ms */
  89%  { transform: translateX(0); opacity: 1; }      /* t=4272ms */
  98%  { transform: translateX(60px); opacity: 0; }   /* t=4704ms */
  100% { transform: translateX(60px); opacity: 0; }
}

/* Field timing (4800ms total): highlights at 1600/1900/2200/2500 */
@keyframes hlField1 {
  0%, 33%   { background: transparent; color: var(--text); }
  34%, 44%  { background: rgba(109,40,217,.16); color: var(--purple-700); }
  46%, 100% { background: transparent; color: var(--text); }
}
@keyframes hlField2 {
  0%, 39%   { background: transparent; color: var(--text); }
  40%, 50%  { background: rgba(21,128,61,.16); color: var(--success-fg); }
  52%, 100% { background: transparent; color: var(--text); }
}
@keyframes hlField3 {
  0%, 45%   { background: transparent; color: var(--text); }
  46%, 56%  { background: rgba(29,78,216,.16); color: var(--info-fg); }
  58%, 100% { background: transparent; color: var(--text); }
}
@keyframes hlField4 {
  0%, 51%   { background: transparent; color: var(--text); }
  52%, 62%  { background: rgba(146,64,14,.16); color: var(--warning-fg); }
  64%, 100% { background: transparent; color: var(--text); }
}

/* Green scan line over doc (t=600 → 1600) */
.hl-scan {
  position: absolute;
  left: 0; right: calc(40% + 0px);
  top: 24px; height: 360px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 14px;
  z-index: 4;
}
.hl-scan::after {
  content: ""; position: absolute; left: 6%; right: 6%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.8), transparent);
  box-shadow: 0 0 16px rgba(34,211,238,.7);
  animation: hlScan 4800ms ease-in-out infinite;
}
@keyframes hlScan {
  0%, 12.5%   { top: 0%;  opacity: 0; }
  13%         { opacity: 1; }
  33%         { top: 92%; opacity: 1; } /* t=1600 */
  34%, 100%   { top: 92%; opacity: 0; }
}

/* Badges that fly in for each field — sit to the right of the doc */
.hl-badge {
  position: absolute;
  right: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 700;
  box-shadow: 0 12px 24px rgba(16,16,40,.10);
  opacity: 0;
  transform: translateX(20px);
}
.hl-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bcol, var(--purple-700)); box-shadow: 0 0 6px var(--bcol, var(--purple-700)); }
.hl-badge.bb1 { top: 113.5px; --bcol: #6d28d9; color: #4c1d95; animation: hlBadge1 4800ms ease-in-out infinite; }
.hl-badge.bb2 { top: 148.5px; --bcol: #15803d; color: #15803d; animation: hlBadge2 4800ms ease-in-out infinite; }
.hl-badge.bb3 { top: 183.5px; --bcol: #1d4ed8; color: #1d4ed8; animation: hlBadge3 4800ms ease-in-out infinite; }
.hl-badge.bb4 { top: 218.5px; --bcol: #b45309; color: #92400e; animation: hlBadge4 4800ms ease-in-out infinite; }
@keyframes hlBadge1 {
  0%, 33%   { opacity: 0; transform: translateX(20px); }
  35%, 89%  { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; transform: translateX(20px); }
}
@keyframes hlBadge2 {
  0%, 39%   { opacity: 0; transform: translateX(20px); }
  41%, 89%  { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; transform: translateX(20px); }
}
@keyframes hlBadge3 {
  0%, 45%   { opacity: 0; transform: translateX(20px); }
  47%, 89%  { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; transform: translateX(20px); }
}
@keyframes hlBadge4 {
  0%, 51%   { opacity: 0; transform: translateX(20px); }
  53%, 89%  { opacity: 1; transform: translateX(0); }
  98%, 100% { opacity: 0; transform: translateX(20px); }
}

/* "Проводка создана" success pill */
.hl-success {
  position: absolute;
  left: 18px; bottom: 76px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--success-bg);
  color: var(--success-fg);
  border-radius: 999px;
  font-weight: 700; font-size: 13px;
  border: 1px solid rgba(21,128,61,.25);
  opacity: 0; transform: scale(.6);
  animation: hlSuccess 4800ms ease infinite;
}
.hl-success svg { width: 14px; height: 14px; }
@keyframes hlSuccess {
  0%, 62%   { opacity: 0; transform: scale(.6); }
  64%, 67%  { opacity: 1; transform: scale(1.1); }
  70%, 89%  { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(.9); }
}

/* Progress bar — Отправлено в 1С */
.hl-progress {
  position: absolute;
  right: 0; top: 276px;
  width: 40%; max-width: 220px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  opacity: 0; transform: translateY(10px);
  animation: hlProg 4800ms ease infinite;
  box-shadow: 0 10px 24px rgba(16,16,40,.08);
}
.hl-progress .lbl { display:flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.hl-progress .bar { height: 4px; background: var(--purple-light); border-radius: 999px; overflow: hidden; }
.hl-progress .bar i { display: block; height: 100%; width: 0%; background: var(--purple-700); border-radius: 999px; animation: hlProgFill 4800ms ease infinite; }
@keyframes hlProg {
  0%, 72%   { opacity: 0; transform: translateY(10px); }
  74%, 89%  { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(10px); }
}
@keyframes hlProgFill {
  0%, 73%   { width: 0%; }
  86%, 100% { width: 100%; }
}

/* =========================================================
   [C] APPLE 3D SCROLL ROTATION
   ========================================================= */
.stage-3d-v2 {
  perspective: 1200px;
  position: relative;
}
.stage-3d-v2 .lander {
  --p: 0;
  transform:
    rotateX(calc(-18deg + 18deg * var(--p)))
    rotateY(calc(12deg - 12deg * var(--p)))
    scale(calc(0.88 + 0.12 * var(--p)))
    translateY(calc(30px - 30px * var(--p)));
  transition: transform 60ms linear, box-shadow 200ms ease;
  will-change: transform;
  border-radius: 16px;
  box-shadow:
    0 calc(40px - 20px * var(--p)) calc(80px - 40px * var(--p)) rgba(109, 40, 217, calc(0.4 - 0.3 * var(--p)));
}
.stage-3d-v2 .lander-overlay {
  position: absolute; inset: 0;
  border-radius: 16px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(109,40,217,.18), transparent 70%);
  opacity: calc(0.35 - 0.35 * var(--p));
  pointer-events: none;
  transition: opacity 60ms linear;
}

/* =========================================================
   [G] Typewriter — thinking dots + cursor
   ========================================================= */
.chat-thinking {
  display: inline-flex; gap: 4px; padding: 8px 12px;
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  vertical-align: middle;
}
.chat-thinking i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-mid);
  animation: thinkPulse 1.2s ease-in-out infinite;
}
.chat-thinking i:nth-child(2) { animation-delay: .15s; }
.chat-thinking i:nth-child(3) { animation-delay: .30s; }
@keyframes thinkPulse {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%      { opacity: 1; transform: scale(1.2); }
}

.bubble.user.slide-in { animation: slideInRight 300ms cubic-bezier(.16,1,.3,1) both; }
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* =========================================================
   [K] Page transition — body intro/outro
   ========================================================= */
body { transition: opacity 300ms ease, transform 300ms ease; }
body.is-fading { opacity: 0; transform: translateY(16px); }
body.is-ready  { opacity: 1; transform: translateY(0); transition-delay: 150ms; }
body.is-leaving { opacity: 0; transform: translateY(-16px); transition-duration: 200ms; transition-delay: 0ms; }

/* Reduced motion — kill everything heavy */
@media (prefers-reduced-motion: reduce) {
  .mesh-blob, .float-num, .orbiter, .hl-doc, .hl-badge, .hl-success, .hl-progress, .hl-progress .bar i, .hl-scan::after { animation: none !important; }
  body { transition: none !important; opacity: 1 !important; transform: none !important; }
  .timeline-svg path { transition: none !important; stroke-dashoffset: 0 !important; }
}

/* ─── Mobile responsive ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Shrink heroLoop height */
  .heroLoop { height: 400px; }
  /* Reduce doc width so badges (right:0) don't overlap */
  .hl-doc   { width: 52%; }
  .hl-scan  { right: 48%; }
  /* Smaller badge text to fit narrower gap */
  .hl-badge { font-size: 11px; padding: 5px 10px; }
  /* Легче GPU на телефоне — меньше радиус blur у фоновых блобов (плавнее скролл) */
  .mesh-blob { filter: blur(80px); }
}
@media (max-width: 480px) {
  /* heroLoop hidden — too many absolute elements for tiny screens */
  .heroLoop  { display: none; }
  /* Smaller mesh blobs + лёгкий blur for perf on low-end phones */
  .mesh-blob { width: 350px; height: 350px; filter: blur(55px); }
}