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

.rift-network-surface::before,
.rift-network-surface::after {
  background: none !important;
}

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

/* These children share the parent canvas instead of starting a second blue surface. */
.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 {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

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

.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-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;
  }
}