.find-yourself-interlude {
  position: relative;
  isolation: isolate;
  min-height: clamp(820px, 112svh, 1260px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(116px, 12vw, 190px) 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(144, 74, 67, .22), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(71, 189, 198, .08), transparent 47%),
    linear-gradient(180deg, #020303, #090707 48%, #020303);
  border-block: 1px solid rgba(222, 184, 111, .16);
}

.find-yourself-interlude::before,
.find-yourself-interlude::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.find-yourself-interlude::before {
  opacity: .24;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(225, 193, 135, .12) 59px, transparent 60px 84px),
    linear-gradient(90deg, transparent 49.9%, rgba(92, 219, 224, .1) 50%, transparent 50.1%);
  mask-image: radial-gradient(circle at center, #000, transparent 68%);
}

.find-yourself-interlude::after {
  background: radial-gradient(ellipse at center, transparent 24%, rgba(0, 0, 0, .8) 88%);
}

.find-yourself-stage {
  position: relative;
  z-index: 2;
  width: min(620px, 70vw);
  aspect-ratio: 3 / 4;
  filter: drop-shadow(0 38px 72px rgba(0, 0, 0, .84));
}

.find-yourself-notes {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: .78;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 1px rgba(91, 123, 196, .38));
}

.find-yourself-screen {
  position: absolute;
  z-index: 1;
  inset: 4% 7% 3%;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 2.5%;
  background: #020303;
  border: 1px solid rgba(234, 207, 152, .68);
  box-shadow:
    0 0 0 6px rgba(3, 5, 5, .92),
    0 0 0 7px rgba(94, 211, 217, .2),
    inset 0 0 46px rgba(0, 0, 0, .62),
    0 0 36px rgba(92, 207, 213, .12);
}

.find-yourself-screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .1), transparent 18% 78%, rgba(91, 218, 222, .06));
  mix-blend-mode: screen;
  box-shadow: inset 0 0 58px rgba(0, 0, 0, .42);
}

.find-yourself-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #020303;
  filter: contrast(1.04) saturate(.94) brightness(.96);
}

.find-yourself-frame {
  position: absolute;
  z-index: 4;
  inset: -20%;
  width: 140%;
  height: 140%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  filter:
    drop-shadow(0 28px 38px rgba(0, 0, 0, .92))
    drop-shadow(0 0 13px rgba(222, 184, 111, .28))
    drop-shadow(0 0 11px rgba(78, 204, 213, .18));
  animation: findYourselfResonance 6.4s ease-in-out infinite alternate;
}

@keyframes findYourselfResonance {
  from {
    filter: drop-shadow(0 28px 38px rgba(0, 0, 0, .92)) drop-shadow(0 0 9px rgba(222, 184, 111, .22)) drop-shadow(0 0 7px rgba(78, 204, 213, .13));
  }
  to {
    filter: drop-shadow(0 34px 48px rgba(0, 0, 0, .96)) drop-shadow(0 0 20px rgba(222, 184, 111, .42)) drop-shadow(0 0 17px rgba(78, 204, 213, .29));
  }
}

@media (max-width: 700px) {
  .find-yourself-interlude {
    min-height: 720px;
    padding-block: 126px;
  }

  .find-yourself-stage {
    width: 70vw;
  }

  .find-yourself-notes {
    opacity: .62;
  }
}

@media (prefers-reduced-motion: reduce) {
  .find-yourself-frame {
    animation: none;
  }
}