/*
 * SignalRadar roadmap wrapper layer.
 * The original cinematic stylesheet is preserved byte-for-byte and loaded
 * first; the rules below contain mobile compositor fixes and visual upgrades.
 */
@import url("./roadmap-v2.original.css?v=20260714-mobile-perf-3");

/* ------------------------------------------------------------
   Mobile App: force projected notifications onto a foreground 3D plane.
   ------------------------------------------------------------ */
.mobile-lab__stage--layered {
  isolation: isolate;
  transform-style: preserve-3d;
}

.mobile-lab__stage--layered .mobile-device {
  z-index: 8;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mobile-projection.mobile-projection--foreground {
  z-index: 30;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 12px, 90px) scale(.9);
}

.mobile-projection.mobile-projection--foreground.is-active {
  animation-name: mobile-projection-foreground;
}

@keyframes mobile-projection-foreground {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 90px) scale(.9);
  }
  14%, 74% {
    opacity: 1;
    transform: translate3d(0, 0, 90px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -10px, 90px) scale(.96);
  }
}

/* ------------------------------------------------------------
   Hero orb: retain the original design, remove the rotateY collapse,
   and add a low-cost neural lattice, scanner, satellites and telemetry.
   ------------------------------------------------------------ */
.roadmap-page .neural-orb.neural-orb--enhanced {
  isolation: isolate;
  animation: roadmap-orb-breathe 7.5s ease-in-out infinite !important;
  transform: none;
  transform-style: flat;
  contain: layout style;
}

@keyframes roadmap-orb-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -7px, 0) scale(1.018); }
}

.orb-wow {
  position: absolute;
  z-index: 7;
  inset: -9%;
  border-radius: 50%;
  pointer-events: none;
}

.orb-wow__lattice,
.orb-wow__scan,
.orb-wow__pulse,
.orb-wow__signal,
.orb-wow__satellites,
.orb-wow__telemetry {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.orb-wow__lattice {
  inset: 9%;
  background:
    radial-gradient(circle, transparent 0 26%, rgba(0,245,213,.1) 26.4% 26.8%, transparent 27.2% 47%, rgba(18,179,255,.09) 47.4% 47.8%, transparent 48.2%),
    repeating-conic-gradient(from 12deg, rgba(111,231,255,.12) 0 1deg, transparent 1deg 18deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 18%, #000 22% 72%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 0 18%, #000 22% 72%, transparent 76%);
  opacity: .72;
  animation: orb-lattice-spin 28s linear infinite;
}

.orb-wow__scan {
  inset: 15%;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(0,245,213,.2) 86%, rgba(18,179,255,.06) 94%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 37%, #000 39% 58%, transparent 60%);
  mask-image: radial-gradient(circle, transparent 0 37%, #000 39% 58%, transparent 60%);
  opacity: .86;
  animation: orb-scan-spin 8.5s linear infinite;
}

.orb-wow__pulse {
  inset: 31%;
  border: 1px solid rgba(111,231,255,.26);
  box-shadow: 0 0 24px rgba(0,245,213,.09), inset 0 0 22px rgba(18,179,255,.08);
  animation: orb-wow-pulse 3.4s ease-out infinite;
}

.orb-wow__signal {
  inset: 6%;
  border: 1px solid transparent;
  border-top-color: rgba(43,255,125,.55);
  border-left-color: rgba(18,179,255,.22);
  transform: rotate(-24deg);
  filter: drop-shadow(0 0 7px rgba(43,255,125,.28));
  animation: orb-signal-sweep 10s linear infinite reverse;
}

.orb-satellite {
  --satellite-angle: calc(var(--satellite-index) * 72deg);
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border: 1px solid rgba(189,255,247,.82);
  border-radius: 50%;
  background: #04151d;
  box-shadow: 0 0 0 4px rgba(0,245,213,.06), 0 0 15px rgba(0,245,213,.7);
  transform: rotate(var(--satellite-angle)) translateX(176px);
  animation: orb-satellite-ping 3.6s ease-in-out infinite var(--satellite-delay);
}

.orb-satellite::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(18,179,255,.28);
  border-radius: inherit;
  animation: orb-satellite-wave 3.6s ease-out infinite var(--satellite-delay);
}

.orb-telemetry {
  position: absolute;
  min-width: 92px;
  padding: 7px 9px;
  border: 1px solid rgba(111,231,255,.2);
  border-radius: 9px;
  background: rgba(2,10,18,.78);
  box-shadow: inset 0 0 18px rgba(18,179,255,.035), 0 8px 24px rgba(0,0,0,.25);
  font-family: var(--font-mono);
  text-align: left;
  animation: orb-telemetry-float 5s ease-in-out infinite;
}

.orb-telemetry small,
.orb-telemetry strong {
  display: block;
}

.orb-telemetry small {
  color: rgba(199,240,255,.58);
  font-size: .48rem;
  letter-spacing: .08em;
}

.orb-telemetry strong {
  margin-top: 3px;
  color: #bafff5;
  font-size: .72rem;
  text-shadow: 0 0 10px rgba(0,245,213,.42);
}

.orb-telemetry--1 { left: -3%; top: 16%; }
.orb-telemetry--2 { right: -2%; top: 33%; animation-delay: -1.5s; }
.orb-telemetry--3 { left: 8%; bottom: 4%; animation-delay: -3s; }

@keyframes orb-lattice-spin {
  to { transform: rotate(360deg); }
}

@keyframes orb-scan-spin {
  to { transform: rotate(360deg); }
}

@keyframes orb-wow-pulse {
  0% { opacity: .75; transform: scale(.82); }
  75%, 100% { opacity: 0; transform: scale(1.48); }
}

@keyframes orb-signal-sweep {
  to { transform: rotate(336deg); }
}

@keyframes orb-satellite-ping {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; box-shadow: 0 0 0 7px rgba(0,245,213,.04), 0 0 18px rgba(0,245,213,.85); }
}

@keyframes orb-satellite-wave {
  0% { opacity: .75; transform: scale(.35); }
  100% { opacity: 0; transform: scale(2); }
}

@keyframes orb-telemetry-float {
  50% { transform: translateY(-5px); }
}

/* ------------------------------------------------------------
   Mobile compositor profile.
   ------------------------------------------------------------ */
body.roadmap-mobile-performance {
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

body.roadmap-mobile-performance #matrixRain,
body.roadmap-mobile-performance #shaderCanvas {
  display: none !important;
}

body.roadmap-mobile-performance .roadmap-page,
body.roadmap-mobile-performance.roadmap-page {
  background-attachment: scroll;
}

body.roadmap-mobile-performance .roadmap-scroll-progress {
  width: 100% !important;
  background-size: var(--roadmap-scroll, 0%) 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  contain: strict;
}

body.roadmap-mobile-performance .progress-line,
body.roadmap-mobile-performance .progress-glow {
  transition: none !important;
}

body.roadmap-mobile-performance.is-scrolling .progress-glow {
  opacity: 0;
}

body.roadmap-mobile-performance .roadmap-atmosphere__aurora {
  filter: none;
  opacity: .56;
  animation-duration: 30s;
}

body.roadmap-mobile-performance .roadmap-atmosphere__mesh {
  opacity: .4;
  animation-duration: 42s;
}

body.roadmap-mobile-performance .roadmap-atmosphere__scan {
  mix-blend-mode: normal;
  opacity: .22;
  animation-duration: 20s;
}

body.roadmap-mobile-performance .roadmap-atmosphere__stars {
  display: none;
}

body.roadmap-mobile-performance .site-header,
body.roadmap-mobile-performance .glass-card,
body.roadmap-mobile-performance .timeline-card,
body.roadmap-mobile-performance .mobile-projection {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.roadmap-mobile-performance .site-header {
  background: rgba(2,9,17,.97) !important;
}

body.roadmap-mobile-performance .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.roadmap-mobile-performance .timeline-card,
body.roadmap-mobile-performance .timeline-card:nth-child(odd) {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  animation: none !important;
  background:
    linear-gradient(145deg, rgba(3,12,23,.985), rgba(4,17,31,.95)) padding-box,
    linear-gradient(135deg, rgba(0,245,213,.28), color-mix(in srgb, var(--phase-accent) 64%, rgba(18,179,255,.24)), rgba(168,85,247,.2)) border-box !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -18px 48px rgba(0,0,0,.15) !important;
  contain: layout style;
}

body.roadmap-mobile-performance .timeline-card::before {
  display: none;
}

body.roadmap-mobile-performance .timeline-card::after {
  inset: 8px;
  box-shadow: inset 0 0 28px color-mix(in srgb, var(--phase-accent) 3%, transparent);
}

body.roadmap-mobile-performance .card-visual {
  contain: layout paint;
  box-shadow:
    inset 0 0 32px rgba(0,0,0,.44),
    inset 0 0 44px color-mix(in srgb, var(--phase-accent) 4%, transparent),
    0 12px 30px rgba(0,0,0,.24) !important;
}

body.roadmap-mobile-performance .card-visual::before {
  z-index: 19;
  mix-blend-mode: normal;
  opacity: .36;
  animation-duration: 13s;
}

body.roadmap-mobile-performance .card-visual::after {
  mix-blend-mode: normal;
  opacity: .55;
}

body.roadmap-mobile-performance .card-icon-animated,
body.roadmap-mobile-performance .mobile-chart__line,
body.roadmap-mobile-performance .orb-wow__signal {
  filter: none;
}

body.roadmap-mobile-performance .timeline-card:not(.perf-near-view) .roadmap-scene *,
body.roadmap-mobile-performance .timeline-card:not(.perf-near-view) .card-visual::before {
  animation-play-state: paused !important;
}

body.roadmap-mobile-performance.is-scrolling .roadmap-atmosphere *,
body.roadmap-mobile-performance.is-scrolling .roadmap-scene *,
body.roadmap-mobile-performance.is-scrolling .card-visual::before,
body.roadmap-mobile-performance.is-scrolling .neural-orb *,
body.roadmap-mobile-performance.is-scrolling .neural-orb::before,
body.roadmap-mobile-performance.is-scrolling .neural-orb::after {
  animation-play-state: paused !important;
}

body.roadmap-mobile-performance.is-scrolling .timeline-card,
body.roadmap-mobile-performance.is-scrolling .timeline-card * {
  transition-duration: 0s !important;
}

body.roadmap-mobile-performance .mobile-projection.mobile-projection--foreground {
  background: rgba(2,10,18,.96);
  box-shadow: 0 0 18px color-mix(in srgb, var(--projection-color) 13%, transparent), inset 0 0 12px rgba(255,255,255,.016);
}

@media (max-width: 720px) {
  .orb-wow {
    inset: -4%;
  }

  .orb-satellite {
    transform: rotate(var(--satellite-angle)) translateX(136px);
  }

  .orb-telemetry {
    min-width: 76px;
    padding: 6px 7px;
  }

  .orb-telemetry small { font-size: .41rem; }
  .orb-telemetry strong { font-size: .61rem; }
  .orb-telemetry--1 { left: -2%; top: 17%; }
  .orb-telemetry--2 { right: -1%; top: 37%; }
  .orb-telemetry--3 { left: 7%; bottom: 4%; }

  .mobile-lab__stage--layered .mobile-projection--left {
    left: 0;
    top: 23%;
  }

  .mobile-lab__stage--layered .mobile-projection--right {
    right: 0;
    top: 46%;
  }

  .mobile-lab__stage--layered .mobile-projection--bottom {
    right: 2%;
    bottom: 10%;
  }
}

@media (max-width: 480px) {
  .orb-satellite:nth-child(4),
  .orb-satellite:nth-child(5) {
    display: none;
  }

  .orb-telemetry--3 {
    display: none;
  }

  .mobile-projection.mobile-projection--foreground {
    width: 94px;
    padding: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-page .neural-orb.neural-orb--enhanced,
  .orb-wow *,
  .mobile-projection.mobile-projection--foreground {
    animation: none !important;
  }

  .mobile-projection.mobile-projection--foreground.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 90px) scale(1);
  }
}