/* 2026-07-17: GSAP routing topology for the immersive homepage. */
.cjsr-motion-scene {
  position: absolute !important;
  z-index: 3 !important;
  top: 82px !important;
  right: 0 !important;
  bottom: 118px !important;
  left: 42% !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none !important;
  contain: layout paint !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 7%, #000 18%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 7%, #000 18%, #000 100%) !important;
}

.cjsr-motion-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  opacity: 0.88 !important;
}

.cjsr-motion-route,
.cjsr-motion-packet,
.cjsr-motion-ring,
.cjsr-motion-axis,
.cjsr-motion-scan {
  fill: none !important;
  vector-effect: non-scaling-stroke !important;
}

.cjsr-motion-route {
  stroke-width: 1 !important;
  stroke-dasharray: 7 15 !important;
  opacity: 0.3 !important;
}

.cjsr-motion-route-a { stroke: #22d3ee !important; }
.cjsr-motion-route-b { stroke: #3d8aff !important; }
.cjsr-motion-route-c { stroke: #7868ff !important; }
.cjsr-motion-route-d { stroke: #4ac9ff !important; opacity: 0.2 !important; }

.cjsr-motion-packet {
  stroke-width: 2.2 !important;
  stroke-linecap: square !important;
  stroke-dasharray: 18 982 !important;
  filter: drop-shadow(0 0 5px rgba(82, 218, 255, 0.7)) !important;
}

.cjsr-motion-packet-a { stroke: #8cf2ff !important; }
.cjsr-motion-packet-b { stroke: #68a4ff !important; }
.cjsr-motion-packet-c { stroke: #a59aff !important; }
.cjsr-motion-packet-d { stroke: #56d9ff !important; }

.cjsr-motion-ring {
  stroke: rgba(91, 194, 255, 0.38) !important;
  stroke-width: 1 !important;
  stroke-dasharray: 86 30 18 48 !important;
  transform-box: fill-box !important;
}

.cjsr-motion-ring-b {
  stroke: rgba(128, 111, 255, 0.3) !important;
  stroke-dasharray: 38 22 92 35 !important;
}

.cjsr-motion-axis {
  stroke: rgba(86, 188, 255, 0.14) !important;
  stroke-width: 0.7 !important;
  stroke-dasharray: 3 12 !important;
}

.cjsr-motion-nodes rect {
  fill: #78e9ff !important;
  opacity: 0.88 !important;
  transform-box: fill-box !important;
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.7)) !important;
}

.cjsr-motion-nodes rect:nth-child(3n + 2) { fill: #6599ff !important; }
.cjsr-motion-nodes rect:nth-child(3n) { fill: #9b8eff !important; }

.cjsr-motion-scan {
  stroke: rgba(101, 225, 255, 0.32) !important;
  stroke-width: 1 !important;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.42)) !important;
}

.cjsr-home[data-cjs-motion-v6="ready"] .cjsr-hero::before,
.cjsr-home[data-cjs-motion-v6="ready"] .cjsr-hero::after {
  animation: none !important;
}

.cjsr-capabilities,
.cjsr-flow,
.cjsr-value {
  isolation: isolate !important;
}

.cjsr-capabilities > .cjsr-wide,
.cjsr-flow > .cjsr-wide,
.cjsr-value > .cjsr-wide {
  position: relative !important;
  z-index: 2 !important;
}

.cjsr-section-motion {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  contain: paint !important;
}

.cjsr-section-motion-line {
  position: absolute !important;
  top: 24% !important;
  left: -34% !important;
  display: block !important;
  width: 34% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(69, 201, 255, 0.54), transparent) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.16) !important;
  opacity: 0;
  transform: rotate(-5deg);
  transform-origin: center !important;
  will-change: transform, opacity !important;
}

.cjsr-section-motion-line:nth-child(2) {
  top: 72% !important;
  transform: rotate(4deg);
}

.cjsr-flow .cjsr-section-motion-line {
  background: linear-gradient(90deg, transparent, rgba(31, 111, 255, 0.34), transparent) !important;
  box-shadow: 0 0 10px rgba(31, 111, 255, 0.1) !important;
}

.cjsr-value .cjsr-section-motion-line {
  background: linear-gradient(90deg, transparent, rgba(120, 104, 255, 0.4), rgba(34, 211, 238, 0.32), transparent) !important;
}

@media (max-width: 1024px) {
  .cjsr-motion-scene {
    left: 35% !important;
    opacity: 0.74 !important;
  }
}

@media (max-width: 780px) {
  .cjsr-motion-scene {
    top: 42% !important;
    right: 0 !important;
    bottom: 168px !important;
    left: 0 !important;
    opacity: 0.52 !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%) !important;
  }

  .cjsr-motion-svg {
    transform: translateX(22%) scale(0.86) !important;
    transform-origin: center !important;
  }

  .cjsr-motion-route-d,
  .cjsr-motion-packet-d,
  .cjsr-motion-ring-b,
  .cjsr-motion-nodes rect:nth-child(n + 7) {
    display: none !important;
  }

  .cjsr-section-motion-line:nth-child(2) {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .cjsr-motion-scene {
    top: 46% !important;
    opacity: 0.44 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cjsr-motion-scene,
  .cjsr-section-motion {
    display: none !important;
  }
}