/* ============================================================
   VINOACCS · MOTION SYSTEM
   Готовые motion-компоненты на наших токенах.
   Все используют var(--accent) — цвет автоматически из бренда.

   ⚠️ Включай только нужные блоки на странице (опционально).
   Все эффекты уважают prefers-reduced-motion.

   КАТАЛОГ:
     1. PULSE-RINGS    — расходящиеся кольца (доверие/связь)
     2. SHIELD-TICK    — щит с галочкой (защита/гарантия/качество)
     3. AURA           — мягкий пульс одного контура
     4. FLOW-LINE      — текущая горизонтальная линия (поток/процесс)
     5. DOTS           — 3 пульсирующие точки (загрузка/связь)
     6. TEXT-REVEAL    — поэтапное появление текста при скролле
     7. ICON-DRAW      — самопроявление SVG-иконки (stroke-dash trick)
     8. MARQUEE        — бегущая строка (бренды/категории)
     9. PARALLAX-HINT  — лёгкий parallax через transform (минимальный)
============================================================ */

/* ════════════════════════════════════════════════════
   1. PULSE-RINGS — символ доверия/связи (используется в CTA «Готовы обсудить договор»)
   HTML:
     <div class="m-pulse-rings" aria-hidden="true">
       <svg viewBox="0 0 240 240">
         <circle class="ring r1" cx="120" cy="120" r="28"/>
         <circle class="ring r2" cx="120" cy="120" r="50"/>
         <circle class="ring r3" cx="120" cy="120" r="74"/>
         <circle class="ring r4" cx="120" cy="120" r="100"/>
         <circle class="dot"      cx="120" cy="120" r="5"/>
       </svg>
     </div>
════════════════════════════════════════════════════ */
.m-pulse-rings { width:200px; height:200px; }
.m-pulse-rings svg { width:100%; height:100%; overflow:visible; }
.m-pulse-rings .ring {
  fill:none;
  stroke:var(--accent);
  stroke-width:1;
  transform-origin:center;
  transform-box:fill-box;
  opacity:0;
}
.m-pulse-rings .dot { fill:var(--accent); }
@keyframes m-pulse-out {
  0%   { transform:scale(0.65); opacity:0.7; }
  70%  { opacity:0.05; }
  100% { transform:scale(1.25); opacity:0; }
}
.m-pulse-rings .r1 { animation:m-pulse-out 4s ease-out infinite 0s; }
.m-pulse-rings .r2 { animation:m-pulse-out 4s ease-out infinite 1s; }
.m-pulse-rings .r3 { animation:m-pulse-out 4s ease-out infinite 2s; }
.m-pulse-rings .r4 { animation:m-pulse-out 4s ease-out infinite 3s; }


/* ════════════════════════════════════════════════════
   2. SHIELD-TICK — щит с самопроявляющейся галочкой + аура
   Смысл: защита, гарантия, качество подтверждено.
   HTML:
     <div class="m-shield" aria-hidden="true">
       <svg viewBox="0 0 200 200">
         <path class="shield" d="M100 28 L160 50 L160 110 C160 140 134 162 100 172 C66 162 40 140 40 110 L40 50 Z"/>
         <path class="tick"   d="M76 102 L92 118 L126 84"/>
         <path class="aura a1" d="M100 28 L160 50 L160 110 C160 140 134 162 100 172 C66 162 40 140 40 110 L40 50 Z"/>
         <path class="aura a2" d="M100 28 L160 50 L160 110 C160 140 134 162 100 172 C66 162 40 140 40 110 L40 50 Z"/>
       </svg>
     </div>
════════════════════════════════════════════════════ */
.m-shield { width:200px; height:200px; position:relative; }
.m-shield svg { width:100%; height:100%; overflow:visible; }
.m-shield .shield {
  fill:none;
  stroke:var(--accent);
  stroke-width:1.2;
  stroke-linejoin:round;
  opacity:0.9;
}
.m-shield .tick {
  fill:none;
  stroke:var(--accent);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:80;
  stroke-dashoffset:80;
  animation:m-tick 3.2s ease-out infinite;
}
.m-shield .aura {
  fill:none;
  stroke:var(--accent);
  stroke-width:1;
  stroke-linejoin:round;
  transform-origin:100px 100px;
  transform-box:fill-box;
  opacity:0;
}
@keyframes m-tick {
  0%   { stroke-dashoffset:80; }
  40%  { stroke-dashoffset:0; opacity:1; }
  85%  { stroke-dashoffset:0; opacity:1; }
  100% { stroke-dashoffset:80; opacity:0.6; }
}
@keyframes m-aura-out {
  0%   { transform:scale(0.95); opacity:0.5; }
  100% { transform:scale(1.15); opacity:0; }
}
.m-shield .a1 { animation:m-aura-out 3.2s ease-out infinite 0.6s; }
.m-shield .a2 { animation:m-aura-out 3.2s ease-out infinite 1.8s; }


/* ════════════════════════════════════════════════════
   3. AURA — мягкий одиночный пульс контура
   Смысл: акцент, дыхание, активность.
   HTML:
     <div class="m-aura" aria-hidden="true">
       <span class="aura-ring"></span>
       <span class="aura-dot"></span>
     </div>
════════════════════════════════════════════════════ */
.m-aura {
  display:inline-block;
  position:relative;
  width:14px; height:14px;
}
.m-aura .aura-dot {
  position:absolute; inset:4px;
  border-radius:50%;
  background:var(--accent);
}
.m-aura .aura-ring {
  position:absolute; inset:0;
  border-radius:50%;
  background:var(--accent);
  opacity:0.6;
  animation:m-aura-soft 1.8s ease-out infinite;
}
@keyframes m-aura-soft {
  0%   { transform:scale(0.7); opacity:0.5; }
  100% { transform:scale(2.2); opacity:0; }
}


/* ════════════════════════════════════════════════════
   4. FLOW-LINE — текущая горизонтальная линия (поток / процесс)
   Смысл: движение, процесс, путь.
   HTML:
     <span class="m-flow-line" aria-hidden="true"></span>
════════════════════════════════════════════════════ */
.m-flow-line {
  display:block;
  height:1px;
  width:100%;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%);
  background-size:200% 100%;
  animation:m-flow 3.2s linear infinite;
  opacity:0.6;
}
@keyframes m-flow {
  0%   { background-position:100% 0; }
  100% { background-position:-100% 0; }
}


/* ════════════════════════════════════════════════════
   5. DOTS — 3 пульсирующие точки (typing / status / connection)
   Смысл: связь, обработка, активность.
   HTML:
     <div class="m-dots" aria-hidden="true">
       <span></span><span></span><span></span>
     </div>
════════════════════════════════════════════════════ */
.m-dots {
  display:inline-flex; gap:6px; align-items:center;
}
.m-dots span {
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  opacity:0.4;
  animation:m-dot 1.4s ease-in-out infinite;
}
.m-dots span:nth-child(2) { animation-delay:0.2s; }
.m-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes m-dot {
  0%, 80%, 100% { opacity:0.4; transform:scale(1); }
  40%           { opacity:1;   transform:scale(1.4); }
}


/* ════════════════════════════════════════════════════
   6. TEXT-REVEAL — текст всплывает при скролле (с задержкой каскадно)
   Использует IntersectionObserver — добавляй `.is-in` через JS
   (или используй наш глобальный reveal-observer).
   HTML:
     <h2 class="m-reveal">Заголовок</h2>
     <p class="m-reveal" style="--m-delay:120ms">Параграф</p>
════════════════════════════════════════════════════ */
.m-reveal {
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity 1.1s var(--ease-apple) var(--m-delay, 0ms),
    transform 1.1s var(--ease-apple) var(--m-delay, 0ms);
}
.m-reveal.is-in,
.is-in .m-reveal {
  opacity:1;
  transform:none;
}


/* ════════════════════════════════════════════════════
   7. ICON-DRAW — самопроявляющаяся SVG-линия (stroke-dash trick)
   Смысл: «рисование», создание, мастерство.
   HTML:
     <svg class="m-icon-draw" viewBox="0 0 24 24">
       <path d="..."/>
     </svg>
   После появления — на постоянке остаётся нарисованной.
════════════════════════════════════════════════════ */
.m-icon-draw path {
  fill:none;
  stroke:var(--accent);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:200;
  stroke-dashoffset:200;
  animation:m-draw 1.6s ease-out forwards;
}
@keyframes m-draw {
  to { stroke-dashoffset:0; }
}


/* ════════════════════════════════════════════════════
   8. MARQUEE — бегущая строка (логотипы клиентов, категории)
   HTML:
     <div class="m-marquee">
       <div class="m-marquee-track">
         <span>Контент</span><span>Контент</span> ... (дублируй для seamless loop)
       </div>
     </div>
════════════════════════════════════════════════════ */
.m-marquee {
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.m-marquee-track {
  display:flex;
  width:max-content;
  animation:m-marquee 28s linear infinite;
}
.m-marquee:hover .m-marquee-track { animation-play-state:paused; }
@keyframes m-marquee {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}


/* ════════════════════════════════════════════════════
   9. PARALLAX-HINT — лёгкий параллакс через scroll-driven (CSS @scroll)
   Современный браузерный API. Fallback — без эффекта.
   HTML:
     <div class="m-parallax">контент</div>
════════════════════════════════════════════════════ */
@supports (animation-timeline: scroll()) {
  .m-parallax {
    animation:m-parallax-up linear;
    animation-timeline:scroll();
  }
  @keyframes m-parallax-up {
    from { transform:translateY(20px); }
    to   { transform:translateY(-20px); }
  }
}


/* ════════════════════════════════════════════════════
   GLOBAL: уважение к reduced-motion (a11y)
════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .m-pulse-rings .ring,
  .m-shield .tick,
  .m-shield .aura,
  .m-aura .aura-ring,
  .m-flow-line,
  .m-dots span,
  .m-icon-draw path,
  .m-marquee-track,
  .m-parallax {
    animation:none !important;
  }
  .m-pulse-rings .ring,
  .m-shield .aura { opacity:0.2; }
  .m-shield .tick { stroke-dashoffset:0; opacity:1; }
  .m-icon-draw path { stroke-dashoffset:0; }
  .m-reveal { opacity:1; transform:none; transition:none; }
}