/* ╔══════════════════════════════════════
   ASIDKVN — ANIMATIONS LAYER (6-15, 17)
   ╚══════════════════════════════════════ */

/* ── 6. Hero SVG: пульсация серверных точек ── */
.hero-illustration .server-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: server-dot-pulse 2.8s ease-in-out infinite;
}
.hero-illustration .server-dot.d2 { animation-delay: 0.7s; }
.hero-illustration .server-dot.d3 { animation-delay: 1.4s; }
.hero-illustration .server-dot.d4 { animation-delay: 2.1s; }
@keyframes server-dot-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.7); }
}

/* ── 7. Marquee для платёжных бейджей ── */
.payment-marquee {
  position: relative; overflow: hidden;
  margin: 0 0 40px;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.payment-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-flow 28s linear infinite;
  will-change: transform;
}
.payment-marquee-group {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 12px;
}
.payment-marquee-track > * { flex-shrink: 0; }
.payment-marquee:hover .payment-marquee-track { animation-play-state: paused; }
@keyframes marquee-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-distance, -50%)); }
}

.auto-protocol-card,
.protocol-card,
.server-card {
  will-change: transform;
}

/* ── 10. Шаги 01/02/03 + рисуемая линия ── */
.how-grid::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.how-grid.drawn::before { transform: scaleX(1); }
.how-step .how-num {
  perspective: 600px;
  backface-visibility: hidden;
}
.how-step.flipped .how-num {
  animation: step-flip 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes step-flip {
  0%   { transform: rotateY(180deg) scale(0.4); opacity: 0; }
  60%  { transform: rotateY(0deg)   scale(1.18); opacity: 1; }
  100% { transform: rotateY(0deg)   scale(1); opacity: 1; }
}

/* ── 11. FAQ — упругая стрелка ── */
.faq-q .arrow {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s !important;
}

/* ── 12. Cursor glow (тише + прячется при скролле) ── */
.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 50;
  width: 280px; height: 280px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(168,85,247,0.22) 0%, rgba(108,0,255,0.08) 40%, transparent 70%);
  transform: translate3d(-200px, -200px, 0);
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform, opacity;
  filter: blur(36px);
  mix-blend-mode: screen;
}
.cursor-glow.active { opacity: 1; }
.cursor-glow.scrolling { opacity: 0 !important; transition: opacity 0.15s ease; }
[data-theme="light"] .cursor-glow { display: none; }
@media (max-width: 1024px) { .cursor-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }

/* ── 14. Theme switch — view-transition reveal ── */
@supports (view-transition-name: root) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) {
    z-index: 2;
    animation: theme-clip-in 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  }
}
@keyframes theme-clip-in {
  from { clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); }
  to   { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); }
}

/* ── 15. Scroll snap (только desktop, только index) ── */
@media (min-width: 1025px) {
}

/* ── 17. Серверная карта ── */
.server-map {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 22px;
  margin-bottom: 24px;
  overflow: hidden;
}
.server-map::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(168,85,247,0.14) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
}
.server-map svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.map-ring {
  fill: none;
  stroke: rgba(108,0,255,0.20);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.map-line {
  stroke: var(--accent2);
  stroke-width: 1.6;
  fill: none;
  opacity: 0.7;
  stroke-dasharray: 6 7;
  animation: traffic-flow 1.4s linear infinite;
}
.map-line.soon {
  opacity: 0.22;
  animation-duration: 3.2s;
}
@keyframes traffic-flow { to { stroke-dashoffset: -26; } }
.map-pin .pin-pulse {
  fill: rgba(34,197,94,0.45);
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-pulse 2.4s ease-out infinite;
}
.map-pin.soon .pin-pulse {
  fill: rgba(102,102,170,0.4);
  animation-duration: 4s;
}
@keyframes pin-pulse {
  0%   { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(3.6); opacity: 0; }
}
.map-pin .pin-dot {
  fill: #22c55e;
  filter: drop-shadow(0 0 6px rgba(34,197,94,0.6));
}
.map-pin.soon .pin-dot {
  fill: var(--text3);
  filter: none;
}
.map-label {
  fill: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12px;
}
.map-label-sub {
  fill: var(--text3);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
}
.map-center {
  fill: var(--accent2);
  filter: drop-shadow(0 0 10px rgba(168,85,247,0.7));
}
.map-center-ring {
  fill: none;
  stroke: var(--accent2);
  stroke-width: 1;
  opacity: 0.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: center-ring 2.6s ease-out infinite;
}
@keyframes center-ring {
  0%   { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(8);   opacity: 0; }
}
.server-map-meta {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 0.78rem; color: var(--text3);
}
.server-map-meta-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 2s infinite;
}

@media (max-width: 768px) {
  .server-map { padding: 20px 16px 16px; }
  .map-label { font-size: 11px; }
  .map-label-sub { display: none; }
}