/*
 * Systems & Pricing — ambient galaxy and stronger edge language.
 * Continuous motion is limited to fixed transform/opacity layers and stops on
 * mobile and reduced-motion devices.
 */

/* ══ PAGE-WIDE DRIFTING SPACE GAS ═════════════════════════════════════════ */
.route-systems-pricing .sp-space-gas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.82;
}

.route-systems-pricing .sp-space-gas__cloud {
  position: absolute;
  width: min(72vw, 68rem);
  aspect-ratio: 2.25 / 1;
  border-radius: 50%;
  filter: blur(76px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.route-systems-pricing .sp-space-gas__cloud--cyan {
  top: 5%;
  left: -24%;
  opacity: 0.16;
  background:
    radial-gradient(ellipse at center, rgba(0, 174, 239, 0.62), rgba(0, 110, 174, 0.2) 42%, transparent 72%);
  animation: sp-gas-cyan 34s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

.route-systems-pricing .sp-space-gas__cloud--violet {
  top: 41%;
  right: -28%;
  opacity: 0.14;
  background:
    radial-gradient(ellipse at center, rgba(111, 91, 214, 0.62), rgba(51, 37, 120, 0.22) 46%, transparent 74%);
  animation: sp-gas-violet 41s cubic-bezier(0.37, 0, 0.63, 1) -12s infinite alternate;
}

.route-systems-pricing .sp-space-gas__cloud--orange {
  bottom: -8%;
  left: 4%;
  opacity: 0.1;
  background:
    radial-gradient(ellipse at center, rgba(255, 111, 0, 0.5), rgba(139, 48, 0, 0.15) 45%, transparent 72%);
  animation: sp-gas-orange 46s cubic-bezier(0.37, 0, 0.63, 1) -22s infinite alternate;
}

@keyframes sp-gas-cyan {
  0% { transform: translate3d(-8%, -5%, 0) rotate(-8deg) scale(0.92); opacity: 0.11; }
  48% { transform: translate3d(42%, 14%, 0) rotate(4deg) scale(1.1); opacity: 0.19; }
  100% { transform: translate3d(78%, 30%, 0) rotate(12deg) scale(0.96); opacity: 0.13; }
}

@keyframes sp-gas-violet {
  0% { transform: translate3d(15%, -12%, 0) rotate(10deg) scale(1); opacity: 0.1; }
  52% { transform: translate3d(-34%, 12%, 0) rotate(-3deg) scale(1.13); opacity: 0.18; }
  100% { transform: translate3d(-70%, 24%, 0) rotate(-12deg) scale(0.94); opacity: 0.12; }
}

@keyframes sp-gas-orange {
  0% { transform: translate3d(-12%, 12%, 0) rotate(-5deg) scale(0.94); opacity: 0.07; }
  50% { transform: translate3d(26%, -24%, 0) rotate(6deg) scale(1.08); opacity: 0.13; }
  100% { transform: translate3d(58%, -42%, 0) rotate(14deg) scale(0.98); opacity: 0.09; }
}

/* ══ STRONGER MACHINED EDGES ═════════════════════════════════════════════ */
.route-systems-pricing .sp-stage::before,
.route-systems-pricing .sp-hub-card--featured::before {
  padding: 2px;
  opacity: 0.92;
}

.route-systems-pricing .sp-hub-card,
.route-systems-pricing .sp-path-card,
.route-systems-pricing .sp-how__layer,
.route-systems-pricing .sp-tile,
.route-systems-pricing .sp-usage__item {
  border-color: rgba(127, 224, 255, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(127, 224, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 58px -36px rgba(0, 0, 0, 0.9);
}

.route-systems-pricing .sp-hub-card--featured {
  border-width: 2px;
  border-color: rgba(0, 174, 239, 0.66);
}

.route-systems-pricing .sp-hub-card__energy {
  width: 52%;
  height: 3px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(0, 174, 239, 0.95), 0 0 24px rgba(0, 174, 239, 0.62);
}

.route-systems-pricing .sp-compare__stage,
.route-systems-pricing .sp-access__card,
.route-systems-pricing .sp-access__visual,
.route-systems-pricing .sp-faq__stage,
.route-systems-pricing .sp-early__card {
  border-width: 2px;
  border-color: rgba(127, 224, 255, 0.25);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 32px 82px -38px rgba(0, 0, 0, 0.92);
}

.route-systems-pricing .sp-early__card {
  border-color: rgba(255, 111, 0, 0.48);
}

/* A thicker traveling current on the largest scene frames. */
.route-systems-pricing .sp-compare__stage::after,
.route-systems-pricing .sp-access__visual::after,
.route-systems-pricing .sp-faq__stage::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 24%;
  height: 4px;
  border-radius: 999px;
  transform: translate3d(-130%, 0, 0);
  background: linear-gradient(90deg, transparent, #7fe0ff 35%, var(--ar-cyan) 66%, transparent);
  box-shadow:
    0 0 10px rgba(0, 174, 239, 1),
    0 0 28px rgba(0, 174, 239, 0.72);
  opacity: 0.95;
  pointer-events: none;
  animation: sp-border-current 6.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.route-systems-pricing .sp-access__visual::after { animation-delay: -2.1s; }
.route-systems-pricing .sp-faq__stage::after { animation-delay: -4.2s; }

@keyframes sp-border-current {
  0% { transform: translate3d(-130%, 0, 0); opacity: 0; }
  12% { opacity: 0.95; }
  82% { opacity: 0.95; }
  100% { transform: translate3d(545%, 0, 0); opacity: 0; }
}

@media (max-width: 760px) {
  .route-systems-pricing .sp-space-gas {
    opacity: 0.55;
  }

  .route-systems-pricing .sp-space-gas__cloud {
    width: 130vw;
    filter: blur(58px);
    animation: none;
    will-change: auto;
  }

  .route-systems-pricing .sp-hub-card__energy {
    height: 2px;
  }

  .route-systems-pricing .sp-compare__stage::after,
  .route-systems-pricing .sp-access__visual::after,
  .route-systems-pricing .sp-faq__stage::after {
    height: 3px;
    animation-duration: 8s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-systems-pricing .sp-space-gas__cloud,
  .route-systems-pricing .sp-compare__stage::after,
  .route-systems-pricing .sp-access__visual::after,
  .route-systems-pricing .sp-faq__stage::after {
    animation: none;
  }

  .route-systems-pricing .sp-space-gas__cloud {
    will-change: auto;
  }

  .route-systems-pricing .sp-compare__stage::after,
  .route-systems-pricing .sp-access__visual::after,
  .route-systems-pricing .sp-faq__stage::after {
    display: none;
  }
}