/* Анимация «конвейер тендеров» для блока 4.
   Селекторы в исходнике уже заскоуплены в .line-demo; здесь дополнительно
   уведены в скоуп :root-переменные и сброс box-sizing.
   Источник: animation/assembly-line.html. */

  .line-demo{
    --bg:#f7f9fc;
    --ink:#10131a;
    --muted:#8d95a3;
    --line:#e3e7ef;
    --accent:#2563eb;
    --accent-soft:#e9f0ff;
    --win:#16a34a;
    --win-soft:#e8f7ee;
    --gold:#d69e2e;
  }
  .line-demo *{box-sizing:border-box}

  /* ====== ВСТАВЛЯЕМЫЙ БЛОК ====== */
  .line-demo{
    width:540px; height:270px;
    position:relative; overflow:hidden;
    background:transparent;   /* встраивается в блок «Боли» — фон даёт секция */
    border:0;
    border-radius:16px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink);
    user-select:none;
  }
  /* мягкая сетка-подложка */
  .line-demo .grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(to right,rgba(37,99,235,.045) 1px,transparent 1px),
      linear-gradient(to bottom,rgba(37,99,235,.045) 1px,transparent 1px);
    background-size:27px 27px;
    -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 35%,transparent 85%);
            mask-image:radial-gradient(120% 90% at 50% 40%,#000 35%,transparent 85%);
  }
  .line-demo .caption{
    position:absolute; top:14px; left:18px; z-index:6;
    font-size:11px; font-weight:700; letter-spacing:.2px;
  }
  .line-demo .caption span{
    display:block; margin-top:2px;
    font-size:9.5px; font-weight:500; color:var(--muted); letter-spacing:.1px;
  }

  /* ====== ЛЕНТА ====== */
  .belt{
    position:absolute; left:-10px; right:-10px; top:198px; height:13px; z-index:2;
    background:#eef1f6;
    border-top:1px solid #dfe4ee; border-bottom:1px solid #dfe4ee;
    border-radius:3px;
    overflow:hidden;
  }
  .belt .stripes{
    position:absolute; inset:0;
    background:repeating-linear-gradient(90deg,
      rgba(141,149,163,.22) 0 1.5px, transparent 1.5px 16px);
    animation:belt-run 1.1s linear infinite;
  }
  @keyframes belt-run{to{transform:translateX(-16px)}}
  /* ролики */
  .roller{
    position:absolute; top:212px; width:15px; height:15px; z-index:1;
    border:1.5px solid #dfe4ee; border-radius:50%;
    background:#f2f4f9;
  }
  .roller i{
    position:absolute; left:50%; top:50%; width:1.5px; height:5px;
    background:#cdd4e0; border-radius:2px;
    transform-origin:50% 0;
    animation:spin 1.1s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .belt-shadow{
    position:absolute; left:0; right:0; top:211px; height:16px; z-index:0;
    background:radial-gradient(60% 100% at 50% 0%,rgba(16,19,26,.07),transparent 70%);
  }

  /* ====== СТАНЦИИ ====== */
  .station{position:absolute; top:0; height:198px; width:0; z-index:3}
  .arm{
    position:absolute; left:50%; top:34px;
    transform:translateX(-50%);
    transition:transform .32s cubic-bezier(.34,1.3,.5,1);
  }
  .station.fire .arm{transform:translateX(-50%) translateY(13px)}
  .arm .rod{
    width:3px; height:82px; margin:0 auto;
    background:linear-gradient(180deg,#dfe4ee,#cfd6e3);
    border-radius:3px;
  }
  .arm .head{
    width:34px; height:20px; margin:0 auto;
    background:#fff; border:1.5px solid #d7dce7; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 8px -4px rgba(16,19,26,.25);
  }
  .arm .head svg{display:block; color:var(--muted); transition:color .25s ease}
  .station.fire .arm .head{border-color:var(--accent)}
  .station.fire .arm .head svg{color:var(--accent)}
  .arm .tip{
    width:6px; height:6px; margin:-3px auto 0;
    background:#cfd6e3; border-radius:0 0 3px 3px;
    transition:background .25s ease;
  }
  .station.fire .arm .tip{background:var(--accent)}

  /* луч */
  .beam{
    position:absolute; left:50%; top:142px;
    width:46px; height:58px; margin-left:-23px;
    background:linear-gradient(180deg,rgba(37,99,235,.24),rgba(37,99,235,0));
    clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
    opacity:0; transition:opacity .18s ease;
  }
  .station.fire .beam{opacity:1; animation:beam-flick .5s ease-out}
  @keyframes beam-flick{
    0%{opacity:.15} 20%{opacity:1} 60%{opacity:.7} 100%{opacity:0}
  }

  /* подпись этапа */
  .st-label{
    position:absolute; top:224px; left:50%; transform:translateX(-50%);
    text-align:center; white-space:nowrap;
    font-size:9.5px; font-weight:650; color:var(--muted);
    transition:color .25s ease;
  }
  .st-label b{
    display:block; font-size:8px; font-weight:700; color:#bcc3d0;
    letter-spacing:.6px; margin-bottom:2px;
  }
  .station.fire .st-label{color:var(--accent)}

  /* ====== ОБЪЕКТ НА ЛЕНТЕ ====== */
  .items{position:absolute; inset:0; z-index:4}
  .item{
    position:absolute; top:145px; left:0; width:44px; height:53px;
    background:#fff; border:1.5px dashed #d2d8e3; border-radius:8px;
    padding:6px 5px 0;
    box-shadow:0 4px 10px -7px rgba(16,19,26,.4);
    transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
  }
  .item.lv1{border-style:solid; border-color:#cbd2de}
  .item.lv2{border-color:#b7c6ea}
  .item.lv3{border-color:var(--accent)}
  .item.lv4{
    border-color:var(--win); background:var(--win-soft);
    box-shadow:0 5px 14px -7px rgba(22,163,74,.55);
  }
  .item.pop{animation:pop .34s cubic-bezier(.34,1.4,.5,1)}
  @keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}

  /* слои содержимого */
  .lay{opacity:0; transition:opacity .3s ease}
  .item.lv1 .l1,.item.lv2 .l1,.item.lv3 .l1,.item.lv4 .l1{opacity:1}
  .item.lv2 .l2,.item.lv3 .l2,.item.lv4 .l2{opacity:1}
  .item.lv3 .l3,.item.lv4 .l3{opacity:1}
  .item.lv4 .l4{opacity:1}
  .item.lv4 .l1,.item.lv4 .l2,.item.lv4 .l3{opacity:.28}

  .l1 i{display:block; height:2.5px; border-radius:2px; background:#dfe3ea; margin-bottom:3px}
  .l1 i:nth-child(1){width:88%}
  .l1 i:nth-child(2){width:64%}

  .l2{display:flex; align-items:flex-end; gap:2.5px; height:14px; margin-top:4px}
  .l2 i{flex:1; background:var(--accent); border-radius:1.5px; opacity:.85}
  .l2 i:nth-child(1){height:38%}
  .l2 i:nth-child(2){height:66%}
  .l2 i:nth-child(3){height:52%}
  .l2 i:nth-child(4){height:92%}

  .l3{
    position:absolute; right:5px; bottom:5px;
    width:15px; height:15px; border-radius:50%;
    border:1.5px solid var(--accent); background:var(--accent-soft);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent);
  }
  .l4{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--win);
  }

  /* ====== ВЫЛЕТАЮЩИЕ ДЕНЬГИ ====== */
  .fx{position:absolute; inset:0; z-index:7; pointer-events:none}
  .coin{
    position:absolute; top:150px;
    font-size:13px; font-weight:800; color:var(--win);
    text-shadow:0 1px 0 #fff;
    animation:coin-up 1.5s cubic-bezier(.22,.7,.3,1) forwards;
  }
  .coin.gold{color:var(--gold)}
  @keyframes coin-up{
    0%{transform:translate(0,6px) scale(.55); opacity:0}
    18%{transform:translate(0,-6px) scale(1.12); opacity:1}
    60%{opacity:.9}
    100%{transform:translate(var(--dx,0px),-86px) scale(.95); opacity:0}
  }
  .spark{
    position:absolute; top:168px;
    width:4px; height:4px; border-radius:50%; background:var(--win);
    animation:spark-out .7s ease-out forwards;
  }
  @keyframes spark-out{
    0%{transform:translate(0,0) scale(1); opacity:.9}
    100%{transform:translate(var(--sx,0px),var(--sy,-26px)) scale(0); opacity:0}
  }

  /* ====== ИТОГ СПРАВА ====== */
  .total{
    position:absolute; right:16px; top:16px; z-index:6;
    text-align:right;
  }
  .total b{
    display:block; font-size:8px; font-weight:700; letter-spacing:.6px;
    color:#bcc3d0;
  }
  .total span{
    display:block; margin-top:2px;
    font-size:15px; font-weight:800; letter-spacing:-.3px; color:var(--win);
    font-variant-numeric:tabular-nums;
  }
  .total.bump span{animation:bump .4s cubic-bezier(.34,1.4,.5,1)}
  @keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.13)}100%{transform:scale(1)}}

  @media (prefers-reduced-motion:reduce){
    .belt .stripes,.roller i{animation:none}
    .item,.coin,.spark{transition:none}
  }