.scene::after, body[data-kind="hub"] .page-hero::after, body:not([data-kind="hub"]) .ambient::after {
  --beam-color: var(--accent);
  --beam-glow: var(--glow);
  --beam-strength: .15;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:     linear-gradient(112deg, transparent 43%, var(--beam-color) 49%, transparent 56%),     linear-gradient(72deg, transparent 45%, var(--beam-glow) 50%, transparent 57%);
  background-size: 260% 180%, 250% 200%;
  background-repeat: no-repeat;
  background-position: -75% 25%, 175% 70%;
  mix-blend-mode: screen;
  opacity: 0;
  animation: portal-light-sweep 18s ease-in-out infinite;
  animation-delay: -6s;
}

.scene::after {
  mask-image: linear-gradient(180deg, transparent, #000 120px,     #000 calc(100% - var(--bridge-height) - 90px),     transparent calc(100% - var(--bridge-height) - 5px));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 120px,     #000 calc(100% - var(--bridge-height) - 90px),     transparent calc(100% - var(--bridge-height) - 5px));
  animation-play-state: paused;
}

.scene.is-in-view::after {
  animation-play-state: running;
}

.scene.theme-tech::after {
  animation-delay: -3s;
}

.scene.theme-studio::after {
  --beam-strength: .12;
  animation-delay: -8s;
}

.scene.theme-doces::after {
  animation-delay: -11s;
}

.scene.theme-dev::after {
  animation-delay: -6s;
}

.scene.theme-gutz::after {
  animation-delay: -14s;
}

body[data-kind="hub"] .page-hero::after {
  mask-image: linear-gradient(180deg, transparent, #000 100px, #000 65%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 100px, #000 65%, transparent);
}

body:not([data-kind="hub"]) .ambient::after {
  z-index: 1;
  --beam-strength: .12;
  animation-duration: 24s;
}

.scene.theme-doces::after, body[data-theme="doces"] .ambient::after {
  --beam-color: #ffe2af;
  --beam-glow: #d7a069;
}

@keyframes portal-light-sweep {
  0% {
    background-position: -75% 25%, 175% 70%;
    opacity: 0;
  }
  14%, 86% {
    opacity: var(--beam-strength);
  }
  100% {
    background-position: 175% 65%, -75% 20%;
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .scene::after,   body[data-kind="hub"] .page-hero::after,   body:not([data-kind="hub"]) .ambient::after {
    --beam-strength: .1;
    animation-duration: 24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene::after,   body[data-kind="hub"] .page-hero::after,   body:not([data-kind="hub"]) .ambient::after {
    animation: none;
    opacity: 0;
  }
}

@media print {
  .scene::after,   body[data-kind="hub"] .page-hero::after,   body:not([data-kind="hub"]) .ambient::after {
    display: none;
  }
}