@property --item-iterator {
  initial-value: 1;
  inherits: true;
  syntax: "<integer>";
}

@keyframes card-tilt-a {
  from {
    filter: drop-shadow(0 0 0 rgb(0 0 0 / .25));
    translate: 0 calc(-50% - var(--item-iterator, 1) * -10%);
    backdrop-filter: blur(0px) contrast(var(--backdrop-contrast, 100%));
  }
  to {
    filter: drop-shadow(
      calc((100px - 30px * var(--item-iterator, 1)) * -1) calc(100px - 30px * var(--item-iterator, 1)) calc(20px - 5px * var(--item-iterator, 1)) rgb(0 0 0 / .25)
    );
    translate: 0 calc(-150% - var(--item-iterator, 1) * -33%);
    backdrop-filter: blur(var(--backdrop-blur, 0px)) contrast(var(--backdrop-contrast, 100%));
  }
}

@keyframes card-tilt-b {
  from {
    filter: drop-shadow(0 0 0 rgb(0 0 0 / .25));
    translate: calc(30% - var(--item-iterator, 1) * 8%) calc(-30% - var(--item-iterator, 1) * -8%);
    backdrop-filter: blur(0px) contrast(var(--backdrop-contrast, 100%));
  }
  to {
    filter: drop-shadow(
      calc((100px - 30px * var(--item-iterator, 1)) * -1) calc(100px - 30px * var(--item-iterator, 1)) calc(20px - 5px * var(--item-iterator, 1)) rgb(0 0 0 / .25)
    );
    translate: calc(60% - var(--item-iterator, 1) * 12%) calc(-60% - var(--item-iterator, 1) * -12%);
    backdrop-filter: blur(var(--backdrop-blur, 0px)) contrast(var(--backdrop-contrast, 100%));
  }
}

.cards-animation-canvas {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  container-name: animation;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;

  &:has(.device.device-tilt-a) {
    width: 120%;
    margin-left: -10%;
    margin-top: -10%;
    padding-top: 30%;
  }

  &:has(.device.device-tilt-b) {
    width: 90%;
    margin-inline: auto;
    margin-block: 10%;
  }

  .device {
    z-index: 0;
    width: 100%;
    height: auto;
  }

  .device-screen {
    position: absolute;
  }
}

.cards-animation {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  isolation: isolate;
  aspect-ratio: 532 / 355;

  > * {
    --item-iterator: 1;
    --start-opacity: 1;
    --end-opacity: 1;
    --backdrop-contrast: 100%;
    --backdrop-blur: 0px;
    position: absolute;
    z-index: calc(var(--item-iterator, 1) * -1);
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    will-change: transform, filter, backdrop-filter;
  }
}

.device-tilt-a {
  ~ .device-screen {
    width: 57.5%;
    bottom: 26%;
    left: 22%;
  }

  ~ .cards-animation {
    width: 37.25%;
    bottom: 38%;
    left: 34.5%;

    > * {
      width: 100%;
      transform-origin: left bottom;
      transform: rotateX(55deg) rotateZ(-38deg);
      animation-name: card-tilt-a;
      animation-fill-mode: both;
      @supports (animation-timeline: view(block 50% 0)) {
        animation-timeline: view(block 50% 0);
      }
      @supports not (animation-timeline: view(block 50% 0)) {
        animation-timing-function: ease;
        animation-play-state: running;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-duration: 1.5s;
      }
    }
  }
}

.device-tilt-b {
  ~ .device-screen {
    width: 65.5%;
    bottom: 33%;
    left: 15.5%;
  }

  ~ .cards-animation {
    width: 57.25%;
    bottom: 62.7%;
    left: 23.5%;
    perspective: 163cqw;
    perspective-origin: left;

    > * {
      width: 100%;
      transform-origin: left bottom;
      transform: rotate3d(1.5, 1.5, -0.1, 31deg);
      animation-fill-mode: both;
      animation-name: card-tilt-b;
      @supports (animation-timeline: view(block 50% 0)) {
        animation-timeline: view(block 50% 0);
      }
      @supports not (animation-timeline: view(block 50% 0)) {
        animation-timing-function: ease;
        animation-play-state: running;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-duration: 1.5s;
      }
    }
  }
}

.card-cover-backdrop {
  --backdrop-blur: 10px;
  --backdrop-contrast: 150%;
  --end-opacity: 0;
  border-radius: 2cqw;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: .25;
  }
}

.card-cover {
  --end-opacity: 0;
  width: 100%;
  aspect-ratio: 532 / 355;
  position: absolute;
  isolation: isolate;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: end;
  border-radius: 2cqw;
  overflow: hidden;
  color: #fff;

  :is(strong,span) {
    padding-inline: 2cqw;
    opacity: .75;
  }

  span {
    padding-bottom: 2cqw;
  }
}

.card-cover__feratel {
  position: absolute;
  left: 2cqw;
  top: 2cqw;
  width: 4cqw;
}

.card-cover__qrcode {
  position: absolute;
  right: 2cqw;
  top: 2cqw;
  width: 7cqw;
}

/*# sourceMappingURL=cards-animation.css.map */