/* Анимация «радар» — фоновый декор блока 6 («Комплексное сопровождение»).
   Селекторы исходника заскоуплены в .radar-demo, превью-стили <body> убраны.
   Фон прозрачный, границ нет — блок ложится на голубую плашку .plate--how.
   Палитра: #FFFFFF, #F4F4F4, #bcc3d0.
   Источник: animation/radar-pulse.html */

  .radar-demo {
    --c-white: #FFFFFF;
    --c-gray: #F4F4F4;
    --c-blue-gray: #bcc3d0;
  }
  .radar-demo * { box-sizing: border-box; }

  /* ====== ВСТАВЛЯЕМЫЙ БЛОК ====== */
  .radar-demo{
    position:relative;
    width:650px; height:480px;
    background:transparent;   /* без фона */
    border:0;                 /* без границ */
    overflow:hidden;
    pointer-events:none;
  }

  /* --- расходящиеся волны --- */
  .radar-demo .wave{
    position:absolute; left:50%; top:50%;
    width:440px; height:440px; margin:-220px 0 0 -220px;
    border-radius:50%;
    border:1.5px solid var(--c-white);
    opacity:0;
    animation:radar-wave-out var(--T,6s) cubic-bezier(.18,.62,.3,1) infinite;
  }
  .radar-demo .wave.soft{border-color:var(--c-blue-gray); border-width:1px}
  @keyframes radar-wave-out{
    0%   {transform:scale(.06); opacity:0}
    12%  {opacity:.85}
    55%  {opacity:.45}
    100% {transform:scale(1);   opacity:0}
  }

  /* --- опорное кольцо: единственная статичная деталь --- */
  .radar-demo .ring-static{
    position:absolute; left:50%; top:50%;
    width:250px; height:250px; margin:-125px 0 0 -125px;
    border-radius:50%;
    border:1px dashed var(--c-blue-gray);
    opacity:.4;
    animation:radar-ring-breathe 9s ease-in-out infinite;
  }
  @keyframes radar-ring-breathe{
    0%,100%{transform:scale(1);    opacity:.28}
    50%    {transform:scale(1.045); opacity:.48}
  }

  /* --- центр: точка-источник --- */
  .radar-demo .core{
    position:absolute; left:50%; top:50%;
    width:16px; height:16px; margin:-8px 0 0 -8px;
    border-radius:50%;
    background:var(--c-white);
    box-shadow:0 0 0 6px rgba(255,255,255,.16), 0 0 22px 6px rgba(255,255,255,.35);
    animation:radar-core-beat var(--T,6s) ease-out infinite;
  }
  @keyframes radar-core-beat{
    0%  {transform:scale(1)}
    6%  {transform:scale(1.4)}
    20% {transform:scale(1)}
    100%{transform:scale(1)}
  }

  /* --- засветки: найденные тендеры --- */
  .radar-demo .blip{
    position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
    border-radius:50%;
    background:var(--c-white);
    opacity:0;
    transform:scale(.4);
  }
  .radar-demo .blip::after{          /* расходящийся ореол находки */
    content:""; position:absolute; inset:-5px;
    border-radius:50%;
    border:1.5px solid var(--c-gray);
    opacity:0;
  }
  .radar-demo .blip.hit{animation:radar-blip-in 2.1s cubic-bezier(.2,.7,.3,1) forwards}
  .radar-demo .blip.hit::after{animation:radar-blip-halo 2.1s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes radar-blip-in{
    0%  {opacity:0;  transform:scale(.4)}
    10% {opacity:1;  transform:scale(1.25)}
    26% {opacity:1;  transform:scale(1)}
    72% {opacity:.85}
    100%{opacity:0;  transform:scale(.9)}
  }
  @keyframes radar-blip-halo{
    0%  {opacity:0;   transform:scale(.6)}
    14% {opacity:.9;  transform:scale(1)}
    100%{opacity:0;   transform:scale(3.1)}
  }

  /* пауза, когда блок вне экрана */
  .radar-demo.is-paused .wave,
  .radar-demo.is-paused .core,
  .radar-demo.is-paused .ring-static,
  .radar-demo.is-paused .blip,
  .radar-demo.is-paused .blip::after{animation-play-state:paused}

  @media (prefers-reduced-motion:reduce){
    .radar-demo .wave,
    .radar-demo .core,
    .radar-demo .ring-static{animation:none}
    .radar-demo .wave:nth-of-type(1){opacity:.5; transform:scale(.55)}
    .radar-demo .wave:nth-of-type(3){opacity:.28; transform:scale(.85)}
  }

  /* ============================================================
     ВАРИАНТ ДЛЯ БЛОКА 10 («Наш результат показательнее обещаний»)
     Та же механика, другая пластика: поле компактнее, ход медленнее,
     опорные кольца сплошные, а центр и засветки — ромбы вместо точек.
     Гамма серо-стальная под фон .plate--cases-list.
     ============================================================ */

  .radar-demo--scan{
    width:520px; height:420px;
  }
  .radar-demo--scan{
    --c-white:#b9c0c9;
    --c-gray:#ccd2da;
    --c-blue-gray:#c6ccd4;
  }

  /* волны тоньше и чуть овальные — поле читается как «поиск по базе» */
  .radar-demo--scan .wave{
    width:380px; height:320px; margin:-160px 0 0 -190px;
    border-radius:50%;
    border-width:1px;
  }
  .radar-demo--scan .wave.soft{border-style:dashed}

  /* два сплошных опорных кольца вместо одного пунктирного */
  .radar-demo--scan .ring-static{
    width:210px; height:180px; margin:-90px 0 0 -105px;
    border-style:solid;
    opacity:.5;
  }
  .radar-demo--scan .ring-static::after{
    content:""; position:absolute; left:50%; top:50%;
    width:64%; height:64%; margin:-32% 0 0 -32%;
    border-radius:50%;
    border:1px solid var(--c-blue-gray);
    opacity:.7;
  }

  /* центр и засветки — ромбы: маркер найденного кейса, а не точка радара */
  .radar-demo--scan .core{
    width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
    border-radius:2px;
    transform:rotate(45deg);
    box-shadow:0 0 0 5px rgba(185,192,201,.16);
  }
  @keyframes radar-core-beat-scan{
    0%  {transform:rotate(45deg) scale(1)}
    6%  {transform:rotate(45deg) scale(1.4)}
    20% {transform:rotate(45deg) scale(1)}
    100%{transform:rotate(45deg) scale(1)}
  }
  .radar-demo--scan .core{animation-name:radar-core-beat-scan}

  .radar-demo--scan .blip{
    width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
    border-radius:2px;
  }
  .radar-demo--scan .blip::after{border-radius:3px}