landing: неон бежит по периметру карточки (running fire — вращающийся conic-gradient в маске-рамке, @property)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs/consult_landing.html

@@ -124,7 +124,7 @@
     background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;
     padding: 28px; transition: all .2s ease-in-out;
   }
-  .feature-card:hover { background: #233148; border-color: #10B981; box-shadow: 0 0 0 1px #10B981, 0 0 18px rgba(16,185,129,.5), 0 0 44px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); }
+  /* hover feature-card — см. общий блок «бегущий огонь» ниже */
   .feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s, box-shadow .3s; }
   .feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.08); background: rgba(16,185,129,0.18); box-shadow: 0 8px 22px rgba(16,185,129,.28); }
   .feature-card:hover .feature-icon svg { stroke: #10B981; }
@@ -220,12 +220,34 @@
   @keyframes drawPulse { to { stroke-dashoffset: 0; } }
   .pulse-chip svg polyline { stroke-dasharray: 70; stroke-dashoffset: 70; animation: drawPulse 1.4s ease-out .3s forwards; }
 
-  /* Спокойный hover карточек (timeweb-style: осветление фона + мягкая тень) */
+  /* Hover карточек: осветление фона + мягкая тень */
   .problem-card, .funnel-step, .demo-card { transition: all .2s ease-in-out; }
-  .problem-card:hover, .funnel-step:hover, .demo-card:hover { background: #233148; border-color: #10B981; box-shadow: 0 0 0 1px #10B981, 0 0 18px rgba(16,185,129,.5), 0 0 44px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); }
+  .feature-card:hover, .problem-card:hover, .funnel-step:hover, .demo-card:hover {
+    background: #233148; border-color: #2D3A52;
+    box-shadow: 0 0 26px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28);
+  }
+
+  /* «Бегущий огонь» — неон пробегает по периметру (вращающийся конический градиент в маске-рамке) */
+  @property --nflow { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
+  .feature-card, .problem-card, .funnel-step, .demo-card { position: relative; }
+  .feature-card::after, .problem-card::after, .funnel-step::after, .demo-card::after {
+    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
+    pointer-events: none; z-index: 2; opacity: 0; transition: opacity .25s ease;
+    background: conic-gradient(from var(--nflow),
+      transparent 0deg, transparent 250deg,
+      rgba(16,185,129,.25) 285deg, #10B981 320deg, #6EE7B7 340deg, #10B981 355deg, transparent 360deg);
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor; mask-composite: exclude;
+  }
+  .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after {
+    opacity: 1; animation: nflowRun 1.15s linear infinite;
+  }
+  @keyframes nflowRun { to { --nflow: 360deg; } }
 
   @media (prefers-reduced-motion: reduce) {
     .hero-content > *, .reveal, .pulse-chip, .pulse-chip svg polyline { animation: none !important; transition: none !important; opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important; }
+    .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after { animation: none !important; background: #10B981; opacity: .9; }
   }
 </style>
 </head>

docs/main.html

@@ -124,7 +124,7 @@
     background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;
     padding: 28px; transition: all .2s ease-in-out;
   }
-  .feature-card:hover { background: #233148; border-color: #10B981; box-shadow: 0 0 0 1px #10B981, 0 0 18px rgba(16,185,129,.5), 0 0 44px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); }
+  /* hover feature-card — см. общий блок «бегущий огонь» ниже */
   .feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s, box-shadow .3s; }
   .feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.08); background: rgba(16,185,129,0.18); box-shadow: 0 8px 22px rgba(16,185,129,.28); }
   .feature-card:hover .feature-icon svg { stroke: #10B981; }
@@ -220,12 +220,34 @@
   @keyframes drawPulse { to { stroke-dashoffset: 0; } }
   .pulse-chip svg polyline { stroke-dasharray: 70; stroke-dashoffset: 70; animation: drawPulse 1.4s ease-out .3s forwards; }
 
-  /* Спокойный hover карточек (timeweb-style: осветление фона + мягкая тень) */
+  /* Hover карточек: осветление фона + мягкая тень */
   .problem-card, .funnel-step, .demo-card { transition: all .2s ease-in-out; }
-  .problem-card:hover, .funnel-step:hover, .demo-card:hover { background: #233148; border-color: #10B981; box-shadow: 0 0 0 1px #10B981, 0 0 18px rgba(16,185,129,.5), 0 0 44px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28); }
+  .feature-card:hover, .problem-card:hover, .funnel-step:hover, .demo-card:hover {
+    background: #233148; border-color: #2D3A52;
+    box-shadow: 0 0 26px rgba(16,185,129,.22), 0 16px 40px rgba(0,0,0,.28);
+  }
+
+  /* «Бегущий огонь» — неон пробегает по периметру (вращающийся конический градиент в маске-рамке) */
+  @property --nflow { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
+  .feature-card, .problem-card, .funnel-step, .demo-card { position: relative; }
+  .feature-card::after, .problem-card::after, .funnel-step::after, .demo-card::after {
+    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
+    pointer-events: none; z-index: 2; opacity: 0; transition: opacity .25s ease;
+    background: conic-gradient(from var(--nflow),
+      transparent 0deg, transparent 250deg,
+      rgba(16,185,129,.25) 285deg, #10B981 320deg, #6EE7B7 340deg, #10B981 355deg, transparent 360deg);
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor; mask-composite: exclude;
+  }
+  .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after {
+    opacity: 1; animation: nflowRun 1.15s linear infinite;
+  }
+  @keyframes nflowRun { to { --nflow: 360deg; } }
 
   @media (prefers-reduced-motion: reduce) {
     .hero-content > *, .reveal, .pulse-chip, .pulse-chip svg polyline { animation: none !important; transition: none !important; opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important; }
+    .feature-card:hover::after, .problem-card:hover::after, .funnel-step:hover::after, .demo-card:hover::after { animation: none !important; background: #10B981; opacity: .9; }
   }
 </style>
 </head>