/* Блок «Антифрод система «Шерлок»

xs  < 576px — базовые стили
sm  ≥ 576px
md  ≥ 768px
lg  ≥ 992px
xl  ≥ 1200px
xxl ≥ 1400px
*/


.antifraud-sherlock-section {

  .antifraud-black-circle {
    position: absolute;
    z-index: -1;
    background: #101a18;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(-40%) translateY(-60%);
    width: 755px;
    height: 755px;
  }


  .sherlock-collage {
    display: flex;
    justify-content: right;
    width: 100%;
    .passport {
      width: 280px;
      height: auto;
    }

    .passport-magnifier {
      position: absolute;
      display: none;
    }
  }
}

/* ========================================
   (≥ 576px)
   ======================================== */
@media only screen and (min-width: 576px) {

}

/* ========================================
   (≥ 768px)
   ======================================== */
@media only screen and (min-width: 768px) {

  .antifraud-sherlock-section {
    margin-bottom: 270px;
    padding-top: 150px;

    .antifraud-black-circle {
      top: 50%;
      left: 0;
      transform: translateX(-50%) translateY(-50%);
      width: 1227px;
      height: 1227px;
    }


    .sherlock-collage {
      display: block;
      top: 20px;

      .woman-video {
        width: 384px;
      }

      .big-green-frame {
        width: 144px;
        height: 216px;
        left: 94px;
        top: 44px;
        border: 6px solid #00b09a;

        --point-1-x: 94px;
        --point-1-y: 44px;
        --point-2-x: 92px;
        --point-2-y: 46px;
        --point-3-x: 92px;
        --point-3-y: 42px;
        --animation-speed: 2s;
        --animation-timing: linear;

        animation: moveFrames var(--animation-speed) var(--animation-timing) infinite;
      }

      .small-green-frame {
        width: 110px;
        height: 143px;
        border: 6px solid #00b09a;
        --point-1-x: 198px;
        --point-1-y: 92px;
        --point-2-x: 200px;
        --point-2-y: 94px;
        --point-3-x: 200px;
        --point-3-y: 90px;
        --animation-speed: 2s;
        --animation-timing: linear;

        animation: moveFrames var(--animation-speed) var(--animation-timing) infinite;
      }

      .recognised-fields {
        top: 253px;
        left: -100px;
      }

      .passport {
        position: absolute;
        max-width: none;
        top: 225px;
        width: 436px;
      }

      .passport-magnifier {
        --point-1-x: 102px;
        --point-1-y: 81px;
        --point-2-x: 241px;
        --point-2-y: 285px;
        --point-3-x: 80px;
        --point-3-y: 433px;
        --point-4-x: -86px;
        --point-4-y: 370px;
        --animation-speed: 4s;
        --animation-timing: cubic-bezier(0.53, 0, 0.42, 0.99);

        animation: moveMagnifier var(--animation-speed) var(--animation-timing) infinite;


        display: block;
        width: 125px;
        height: auto;
      }
    }
  }
}

@keyframes moveMagnifier {
  0% {
    left: var(--point-1-x);
    top: var(--point-1-y);
  }
  25% {
    left: var(--point-2-x);
    top: var(--point-2-y);
  }
  50% {
    left: var(--point-3-x);
    top: var(--point-3-y);
  }
  75% {
    left: var(--point-4-x);
    top: var(--point-4-y);
  }
  100% {
    left: var(--point-1-x);
    top: var(--point-1-y);
  }
}

@keyframes moveFrames {
  0% {
    left: var(--point-1-x);
    top: var(--point-1-y);
  }
  33% {
    left: var(--point-2-x);
    top: var(--point-2-y);
  }
  66% {
    left: var(--point-3-x);
    top: var(--point-3-y);
  }
  100% {
    left: var(--point-1-x);
    top: var(--point-1-y);
  }
}

/* ========================================
   (≥ 992px)
   ======================================== */
@media only screen and (min-width: 992px) {
  .antifraud-sherlock-section {

    .antifraud-black-circle {
      top: 50%;
      left: 0;
      transform: translateX(-30%) translateY(-50%);
      width: 1227px;
      height: 1227px;
    }

    .antifraud-white-circle {
      position: absolute;
      z-index: -1;
      background: white;
      border-radius: 50%;
      top: 50%;
      right: 0;
      transform: translateX(100%) translateY(-50%);
      width: 440px;
      height: 440px;
    }

    .sherlock-collage {
      width: 100%;
      max-width: 584px;
      top: -175px;
      right: -80px;
      .woman-video {
        width: 384px;
      }

      .big-green-frame {
        width: 167px;
        height: 250px;
        border: 6px solid #00b09a;

        --point-1-x: 101px;
        --point-1-y: 48px;
        --point-2-x: 99px;
        --point-2-y: 46px;
        --point-3-x: 103px;
        --point-3-y: 50px;
      }

      .small-green-frame {
        width: 123px;
        height: 167px;
        border: 6px solid #00b09a;

        --point-1-x: 223px;
        --point-1-y: 104px;
        --point-2-x: 225px;
        --point-2-y: 106px;
        --point-3-x: 221px;
        --point-3-y: 102px;
      }

      .recognised-fields {
        top: 253px;
      }

      .passport {
        top: 262px;
        width: 495px;
      }

      .passport-magnifier {
        --point-1-x: 131px;
        --point-1-y: 122px;
        --point-2-x: 271px;
        --point-2-y: 323px;
        --point-3-x: 101px;
        --point-3-y: 495px;
        --point-4-x: -86px;
        --point-4-y: 370px;
      }
    }
  }

  .antifraud-sherlock-section .antifraud-black-circle {
    transform: translateX(-1200px) translateY(-50%) scale(1);
    opacity: 0;
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .antifraud-sherlock-section.animation-on .antifraud-black-circle {
    transform: translateX(-30%) translateY(-50%);
    opacity: 1;
  }

  .antifraud-sherlock-section .antifraud-white-circle {
    transform: translateX(1200px) scale(1);
    opacity: 0;
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .antifraud-sherlock-section.animation-on .antifraud-white-circle {
    transform: translateX(100%) translateY(-50%)  scale(1);
    opacity: 1;
  }
}

/* ========================================
   (≥ 1200px)
   ======================================== */
@media only screen and (min-width: 1200px) {

}

/* ========================================
   (≥ 1400px)
   ======================================== */
@media only screen and (min-width: 1400px) {

}