/* HTML: <div class="loader"></div> */
.loader {
    display: inline-flex;
    gap: 7px;
  }
  .loader-card {
    width: 35px;
    height: 45px;
    overflow: hidden;
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-block;
    position: relative;
  }
  
  .loader-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 19px;
    height: 400px;
    background: 
      url('banks/sber.svg') no-repeat center 0px / 19px 19px,
      url('banks/t-bank.svg') no-repeat center 40px / 19px 19px,
      url('banks/alfa.svg') no-repeat center 80px / 19px 19px,
      url('banks/vtb.svg') no-repeat center 120px / 19px 19px,
      url('banks/ozon.svg') no-repeat center 160px / 19px 19px,
      url('banks/yandex.svg') no-repeat center 200px / 19px 19px,
      url('banks/wb.svg') no-repeat center 240px / 19px 19px,
      url('banks/raif.svg') no-repeat center 280px / 19px 19px,
      url('banks/sbp.svg') no-repeat center 320px / 19px 19px,
      url('banks/gazprombank.svg') no-repeat center 360px / 19px 19px;
    animation: icons-scroll 2s infinite linear;
  }
  
  .loader-card:nth-child(1)::before {
    animation-duration: 1s;
  }
  .loader-card:nth-child(2)::before {
    animation-duration: 0.33s;
  }
  .loader-card:nth-child(3)::before {
    animation-duration: 0.67s;
  }
  .loader-card:nth-child(4)::before {
    animation-duration: 0.5s;
  }
  
  @keyframes icons-scroll {
    100% { transform: translateX(-50%) translateY(-360px); }
  }
  
  .loader.stopped .loader-card:nth-child(1)::before {
    animation: icons-stop-1 0.5s forwards !important;
  }
  .loader.stopped .loader-card:nth-child(2)::before {
    animation: icons-stop-2 0.8s forwards !important;
    animation-delay: 0.3s;
  }
  .loader.stopped .loader-card:nth-child(3)::before {
    animation: icons-stop-3 1s forwards !important;
    animation-delay: 0.6s;
  }
  .loader.stopped .loader-card:nth-child(4)::before {
    animation: icons-stop-4 1.2s forwards !important;
    animation-delay: 0.9s;
  }
  
  @keyframes icons-stop-1 {
    100% { transform: translateX(-50%) translateY(-26px); }
  }
  @keyframes icons-stop-2 {
    100% { transform: translateX(-50%) translateY(-66px); }
  }
  @keyframes icons-stop-3 {
    100% { transform: translateX(-50%) translateY(14px); }
  }
  @keyframes icons-stop-4 {
    100% { transform: translateX(-50%) translateY(-306px); }
  }
  
  /* Эффект вибрации */
  .loader.vibration {
    animation: vibration 0.5s ease-in-out;
  }
  
  @keyframes vibration {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-2px) rotate(-1deg); }
    20% { transform: translateX(2px) rotate(1deg); }
    30% { transform: translateX(-2px) rotate(-1deg); }
    40% { transform: translateX(2px) rotate(1deg); }
    50% { transform: translateX(-1px) rotate(-0.5deg); }
    60% { transform: translateX(1px) rotate(0.5deg); }
    70% { transform: translateX(-1px) rotate(-0.5deg); }
    80% { transform: translateX(1px) rotate(0.5deg); }
    90% { transform: translateX(-0.5px) rotate(-0.25deg); }
  }