.life-meaning-interlude {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  background: #020403;
  border-block: 1px solid rgba(121, 180, 175, .18);
}

.life-meaning-interlude::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .72), transparent 16%, transparent 84%, rgba(0, 0, 0, .72)),
    linear-gradient(180deg, rgba(0, 0, 0, .26), transparent 24%, transparent 78%, rgba(0, 0, 0, .34));
}

.life-meaning-interlude video {
  display: block;
  width: min(100%, 1440px);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.life-wave-descender {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: block;
  width: clamp(90px, 12vw, 180px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 20px rgba(50, 150, 210, .34));
  animation: life-wave-descent 9s cubic-bezier(.4,0,.3,1) infinite;
  will-change: transform, opacity;
}

.life-wave-descender-secondary {
  left: 24%;
  width: clamp(74px, 9vw, 138px);
  animation-delay: -3s;
}

.life-wave-descender-tertiary {
  left: 76%;
  width: clamp(68px, 8vw, 124px);
  animation-delay: -5.5s;
}

@keyframes life-wave-descent {
  0% { transform: translate(-50%, -115%) scale(.78); opacity: 0; }
  16% { opacity: .68; }
  58% { transform: translate(-50%, 105%) scale(1); opacity: .58; }
  86% { opacity: .34; }
  100% { transform: translate(-50%, 285%) scale(1.08); opacity: 0; }
}

@media (max-width: 680px) {
  .life-meaning-interlude video { width: 100%; }
  .life-wave-descender { width: 82px; }
  .life-wave-descender-secondary,
  .life-wave-descender-tertiary { width: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .life-wave-descender { animation: none; opacity: .42; transform: translate(-50%, 90%); }
}
