.asymmetric-rift {
  --rift-a: rgba(104, 243, 238, .78);
  --rift-b: rgba(230, 191, 115, .62);
  --rift-image-1: url("./assets/new-archives/black-veil-still-06.webp");
  --rift-image-2: url("./assets/cute-nightmare-worldboard-a.webp");
  --rift-image-3: url("./assets/new-archives/black-veil-still-03.webp");
  position: relative;
  z-index: 16;
  height: clamp(118px, 13vw, 198px);
  margin-block: -28px -30px;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: #000;
}

.asymmetric-rift::before,
.asymmetric-rift::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.asymmetric-rift::before {
  inset: 3% -4%;
  opacity: .72;
  clip-path: polygon(0 63%, 9% 38%, 22% 53%, 39% 17%, 53% 46%, 70% 24%, 86% 52%, 100% 32%, 100% 72%, 87% 69%, 72% 54%, 55% 77%, 40% 47%, 23% 83%, 10% 61%, 0 86%);
  background:
    linear-gradient(96deg, transparent 0 10%, var(--rift-a) 10.1% 10.3%, transparent 10.5% 39%, var(--rift-b) 39.1% 39.3%, transparent 39.5% 71%, var(--rift-a) 71.1% 71.3%, transparent 71.5%),
    linear-gradient(90deg, rgba(4, 21, 24, .76), rgba(35, 20, 17, .5), rgba(4, 18, 23, .78));
  filter: drop-shadow(0 0 18px rgba(104, 243, 238, .2));
}

.asymmetric-rift::after {
  left: -4%;
  top: 51%;
  width: 108%;
  height: 1px;
  opacity: .66;
  background: linear-gradient(90deg, transparent, var(--rift-a) 14%, var(--rift-b) 51%, var(--rift-a) 84%, transparent);
  transform: rotate(-2.8deg);
  box-shadow: 0 0 18px rgba(104, 243, 238, .5);
}

.asymmetric-rift i {
  position: absolute;
  z-index: 2;
  display: block;
  width: 39%;
  height: 82%;
  opacity: .58;
  background-position: center;
  background-size: cover;
  filter: saturate(.8) contrast(1.16) brightness(.72);
  box-shadow: inset 0 0 0 1px rgba(226, 248, 246, .2), 0 0 32px rgba(54, 210, 213, .1);
  animation: asymmetricRiftBreathe 9s ease-in-out infinite alternate;
  will-change: transform, filter;
}

.asymmetric-rift i:nth-child(1) {
  left: -3%;
  top: 18%;
  clip-path: polygon(0 22%, 90% 0, 100% 65%, 13% 100%);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent), var(--rift-image-1);
  transform: rotate(-2.6deg) translate3d(-1%, 0, 0);
}

.asymmetric-rift i:nth-child(2) {
  left: 30%;
  top: 5%;
  width: 43%;
  height: 92%;
  clip-path: polygon(8% 19%, 91% 0, 100% 77%, 0 100%);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(4, 28, 31, .1)), var(--rift-image-2);
  transform: rotate(1.8deg) translate3d(0, 0, 0);
  animation-delay: -3.2s;
}

.asymmetric-rift i:nth-child(3) {
  right: -4%;
  top: 16%;
  clip-path: polygon(5% 0, 100% 21%, 88% 100%, 0 70%);
  background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .36)), var(--rift-image-3);
  transform: rotate(-1.2deg) translate3d(1%, 0, 0);
  animation-delay: -6.1s;
}

.asymmetric-rift-b {
  --rift-a: rgba(230, 191, 115, .72);
  --rift-b: rgba(104, 243, 238, .52);
  --rift-image-1: url("./assets/graphic-novels/covers/the-eleventh-staff.webp");
  --rift-image-2: url("./assets/graphic-novels/covers/the-silent-witness.webp");
  --rift-image-3: url("./assets/graphic-novels/covers/fusion-of-abandoned-timelines.webp");
}

.asymmetric-rift-b i:nth-child(1) { transform: rotate(2.1deg) translate3d(-1%, 0, 0); }
.asymmetric-rift-b i:nth-child(2) { transform: rotate(-2.4deg); }
.asymmetric-rift-b i:nth-child(3) { transform: rotate(1.7deg) translate3d(1%, 0, 0); }

.asymmetric-rift-c {
  --rift-a: rgba(192, 48, 61, .68);
  --rift-b: rgba(230, 191, 115, .64);
  --rift-image-1: url("./assets/new-archives/restricted-journal-charred.webp");
  --rift-image-2: url("./assets/new-archives/restricted-journal-open-experiments.webp");
  --rift-image-3: url("./assets/new-archives/restricted-journal-macro.webp");
}

@keyframes asymmetricRiftBreathe {
  from { filter: saturate(.72) contrast(1.12) brightness(.58); }
  to { filter: saturate(1.02) contrast(1.26) brightness(.84); }
}

@media (max-width: 760px) {
  .asymmetric-rift {
    height: 104px;
    margin-block: -16px -18px;
  }

  .asymmetric-rift i {
    width: 47%;
  }

  .asymmetric-rift i:nth-child(1) { left: -14%; }
  .asymmetric-rift i:nth-child(2) { left: 27%; width: 49%; }
  .asymmetric-rift i:nth-child(3) { right: -15%; }
}

@media (prefers-reduced-motion: reduce) {
  .asymmetric-rift i {
    animation: none;
  }
}