/* --------------Circle-Card-Animation------------------- */
:root {
    --easing: cubic-bezier(0.5, 0, 0.5, 1);
  }

  .cards-container {
    display: grid;
    gap: 1rem;
    transform-style: preserve-3d;
    perspective: 1500px;
    min-height: 450px;

  }

  .cards-container>* {
    grid-area: layer;
  }

  @property --offset {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }

  @property --card-spin {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
  }

  @property --card-tilt {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
  }

  @property --alpha {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }

  @keyframes rotate-card {

    0%,
    25% {
        --card-spin: 0turn;
        --card-tilt: -0.01turn;
        --offset: 80%;
        --alpha: 0;
    }

    50% {
        --card-spin: 0turn;
        --card-tilt: -0.1turn;
        --offset: 80%;
        --alpha: 0.2;
    }

    75% {
        --card-spin: 1turn;
        --card-tilt: -0.1turn;
        --offset: 100%;
        --alpha: 0.2;
    }

    100% {
        --card-spin: 1turn;
        --card-tilt: -0.01turn;
        --offset: 80%;
        --alpha: 0;
    }
  }

  .card-animation {
    --height: 6em;
    --width: calc(var(--height) * 1.625);
    --d: var(--i) / var(--total);
    --rotate-z-static: calc(var(--d) * 1turn);
    --offset: 90%;
    --card-tilt: 0turn;
    --card-spin: 0turn;
    width: var(--width);
    height: var(--height);
    transform-style: preserve-3d;
    will-change: transform;
    transform: rotateZ(var(--rotate-z-static)) translateX(var(--offset)) translateZ(calc(var(--i) * -1px)) rotateX(var(--card-tilt));
    animation: rotate-card 6s var(--easing) infinite both;
    animation-delay: calc(50ms * var(--i));
    border: solid 0px red;
    border-radius: 1em;
  }

  .card-animation:nth-child(1) .card-inner {
    background: url('https://vkardz.com/storage/images/assets/bgm-min.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .card-animation:nth-child(2) .card-inner {
    background: url("https://vkardz.com/uploads/site_images/gold.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .card-animation:nth-child(3) .card-inner {
    background: url("https://vkardz.com/uploads/site_images/black-metal.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .card-animation:nth-child(4) .card-inner {
    background: url("https://vkardz.com/uploads/site_images/black.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .card-animation:nth-child(5) .card-inner {
    background: url("https://vkardz.com/uploads/site_images/wood.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .card-animation:nth-child(6) .card-inner {
    background: url("https://vkardz.com/uploads/site_images/batman.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .card-inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 0 2px 0 #000;
    transform-style: preserve-3d;
    will-change: transform;
    transform: rotateZ(var(--card-spin));
    overflow: hidden;
  }

  .card-inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
   opacity: var(--alpha);
    border-radius: inherit;
  }