/* ============================================================
   Доп. слой анимаций (поверх базовых)
   ============================================================ */

/* ---------- hero aurora ---------- */
.hero { position: relative; }
.hero .aurora {
  position: absolute; inset: -10% -5% auto -5%; height: 120%;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.hero .aurora i {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5; mix-blend-mode: screen;
}
.hero .aurora i:nth-child(1) { width: 520px; height: 520px; top: -12%; right: 6%;
  background: radial-gradient(circle, var(--accent), transparent 62%);
  animation: auroraA 16s ease-in-out infinite; }
.hero .aurora i:nth-child(2) { width: 360px; height: 360px; top: 24%; left: -4%;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 60%, #3de0f2), transparent 65%);
  opacity: .28; animation: auroraB 21s ease-in-out infinite; }
@keyframes auroraA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,40px) scale(1.12); } }
@keyframes auroraB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-30px) scale(1.08); } }
.hero-grid, .hero .wrap { position: relative; z-index: 1; }

/* мягкое отключение для редьюс-моушн */
@media (prefers-reduced-motion: reduce) {
  .hero .aurora i, .marquee-track { animation: none !important; }
}

/* ---------- highlight underline sweep ---------- */
.hero h1 .hl { position: relative; }
.hero h1 .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .09em;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left; border-radius: 2px;
  animation: underlineSweep 1s var(--ease) .5s forwards;
}
@keyframes underlineSweep { to { transform: scaleX(1); } }

/* ---------- trust marquee ---------- */
.trust .logos.marquee { overflow: hidden; margin-left: auto; max-width: 70%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 14px 28px; align-items: center; width: max-content; animation: marquee 26s linear infinite; }
.trust .logos.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- card cursor glow + tilt ---------- */
.card { transform-style: preserve-3d; }
.card .glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--accent-faint), transparent 70%);
}
.card:hover .glow { opacity: 1; }
.card > *:not(.glow) { position: relative; z-index: 1; }

/* ---------- CTA pulse ---------- */
.btn-primary.pulse { animation: ctaPulse 2.6s var(--ease) infinite; }
@keyframes ctaPulse {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  60% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- process fill line ---------- */
.process-grid { position: relative; }
.process-grid .proc-line {
  position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 30%, transparent));
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width 1.4s var(--ease); z-index: 1;
}
.process-grid.in .proc-line { width: 100%; }
.step .pmark { transition: background .4s var(--ease) calc(var(--si,0) * .18s), box-shadow .4s var(--ease) calc(var(--si,0) * .18s); }
.process-grid.in .step .pmark { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }

/* ---------- case big number pop ---------- */
.case .big { transition: transform .5s var(--ease); }
.case.in .big { animation: bigPop .6s var(--ease); }
@keyframes bigPop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* ---------- dashboard live values flicker ---------- */
.dash-tile .v { transition: color .3s; }

/* ---------- scroll-to-top / section nav dots (right rail) ---------- */
.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px; }
.rail a {
  position: relative;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line); border: 1px solid var(--line-soft);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.rail a::before { /* увеличенная зона клика */
  content: ""; position: absolute; inset: -7px;
}
.rail a:hover { transform: scale(1.4); background: var(--text-dim); }
.rail a.active { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); transform: scale(1.35); }

.rail .rail-label {
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  font-weight: 600;
}
.rail a:hover .rail-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail a.active .rail-label { border-color: var(--accent-line); color: var(--accent); }

@media (max-width: 1100px) { .rail { display: none; } }