.rift-network-surface {
  background: #0d0e11 !important;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.rift-network-surface::before,
.rift-network-surface::after {
  content: "";
  position: fixed;
  inset: -12vh -12vw;
  z-index: 0;
  pointer-events: none;
  filter: blur(42px);
  will-change: transform;
}

.rift-network-surface::before {
  background: radial-gradient(ellipse 34rem 28rem at 14% 18%, rgba(38, 189, 181, .23), transparent 72%), radial-gradient(ellipse 30rem 25rem at 78% 66%, rgba(125, 78, 200, .21), transparent 74%);
  animation: rift-splashes-a 15s ease-in-out infinite alternate;
}

.rift-network-surface::after {
  background: radial-gradient(ellipse 29rem 24rem at 82% 16%, rgba(138, 76, 191, .17), transparent 73%), radial-gradient(ellipse 33rem 28rem at 26% 80%, rgba(32, 146, 160, .16), transparent 76%);
  animation: rift-splashes-b 19s ease-in-out infinite alternate;
}

@keyframes rift-splashes-a {
  from { transform: translate3d(-7%, -5%, 0) scale(1); }
  to { transform: translate3d(9%, 7%, 0) scale(1.18); }
}

@keyframes rift-splashes-b {
  from { transform: translate3d(8%, -6%, 0) scale(1.12); }
  to { transform: translate3d(-9%, 8%, 0) scale(.94); }
}

.rift-network-surface > :not(.rift-network-canvas) {
  position: relative;
  z-index: 1;
}

/* Hero sections share the dark surface and its color fades. */
.rift-network-surface > .store-hero,
.rift-network-surface > .servers-hero,
.rift-network-surface > .cart-hero,
.rift-network-surface > .cart-main,
.rift-network-surface > .leaderboards-hero,
.rift-network-surface > .leaderboards-body {
  background: transparent !important;
}

.rift-network-surface > .store-hero::after,
.rift-network-surface > .servers-hero::after,
.rift-network-surface > .cart-hero::after,
.rift-network-surface > .leaderboards-hero::after {
  background: none !important;
}

.rift-network-canvas {
  display: none;
}

.checkout-network-band {
  height: 230px;
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
  background: #0d0e11;
}

.page-shell:has(> .checkout-network-band) {
  position: relative;
}

.page-shell:has(> .checkout-network-band) > :not(.checkout-network-band) {
  position: relative;
  z-index: 1;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: rift-page-out 240ms linear both;
}

::view-transition-new(root) {
  animation: rift-page-in 240ms ease-out both;
}

.rift-motion-enter {
  opacity: 0;
  transform: translate3d(56px, 0, 0);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rift-motion-delay, 0ms);
  will-change: opacity, transform;
}

.rift-motion-enter.is-rift-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.vip-detail-overview.rift-motion-enter,
.detail-overview.rift-motion-enter,
.kit-detail-overview.rift-motion-enter {
  transform: translate3d(-72px, 0, 0);
}

.vip-detail-overview.rift-motion-enter.is-rift-motion-visible,
.detail-overview.rift-motion-enter.is-rift-motion-visible,
.kit-detail-overview.rift-motion-enter.is-rift-motion-visible {
  transform: translate3d(0, 0, 0);
}

.vip-detail-kits.rift-motion-enter,
.detail-layout > aside.rift-motion-enter,
.kit-detail-layout > aside.rift-motion-enter {
  transform: translate3d(72px, 0, 0);
}

.vip-detail-kits.rift-motion-enter.is-rift-motion-visible,
.detail-layout > aside.rift-motion-enter.is-rift-motion-visible,
.kit-detail-layout > aside.rift-motion-enter.is-rift-motion-visible {
  transform: translate3d(0, 0, 0);
}

.store-product-section.rift-motion-enter,
.product-card.rift-motion-enter {
  transform: translate3d(26px, 18px, 0);
}

.store-product-section.rift-motion-enter.is-rift-motion-visible,
.product-card.rift-motion-enter.is-rift-motion-visible {
  transform: translate3d(0, 0, 0);
}

@keyframes rift-page-out {
  from { opacity: 1; }
  to { opacity: 1; }
}

@keyframes rift-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rift-network-surface::before,
  .rift-network-surface::after {
    animation: none;
  }

  .rift-network-canvas {
    display: none;
  }

  .rift-motion-enter,
  .store-product-section.rift-motion-enter,
  .product-card.rift-motion-enter {
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* Keep touch devices on a static viewport-sized background, without large blur layers. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .rift-network-surface {
    background: radial-gradient(ellipse 26rem 22rem at 12% 10rem, rgba(38,189,181,.15), transparent 72%), radial-gradient(ellipse 25rem 24rem at 85% 35rem, rgba(125,78,200,.14), transparent 74%), #0d0e11 !important;
  }
  .rift-network-surface::before, .rift-network-surface::after { display: none; animation: none; filter: none; will-change: auto; }
  .rift-motion-enter, .rift-motion-enter.is-rift-motion-visible { opacity: 1; transform: none !important; transition: none !important; will-change: auto; }
  .rift-nav__link--games, .site-footer__link--games, .server-card, .top-products-section { animation: none !important; filter: none !important; }
  .top-products-section::before { animation: none !important; will-change: auto; }
  @view-transition { navigation: none; }
}