.page-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, var(--color-decorative-mist), transparent 32%),
    linear-gradient(180deg, var(--color-bg-strong) 0%, var(--color-bg) 42%, var(--color-bg) 100%);
}

.page-backdrop__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.72;
}

.page-backdrop__orb--one {
  top: -8rem;
  right: -6rem;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, var(--color-accent-soft) 0%, transparent 72%);
  animation: drift 16s ease-in-out infinite;
}

.page-backdrop__orb--two {
  left: -8rem;
  bottom: -10rem;
  width: 24rem;
  height: 24rem;
  background: radial-gradient(circle, var(--color-decorative-secondary) 0%, transparent 72%);
  animation: driftReverse 20s ease-in-out infinite;
}

.page-backdrop__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      var(--color-decorative-grid) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, var(--color-decorative-grid) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 75%);
}

.shell-main {
  display: grid;
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-1.5rem, 1.5rem, 0) scale(1.06);
  }
}

@keyframes driftReverse {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(1.5rem, -1rem, 0) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-backdrop__orb,
  .carousel__track {
    animation: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}