/* Motion policy: preserve the visual layers, but only animate visible content. */
.ambient__noise,
.live-wave span {
  animation-play-state: paused;
}

.live-telemetry.is-streaming .live-wave span {
  animation-play-state: running;
}

html[data-motion-profile="full"] .hero:not(.is-motion-active) .hero__visual::before,
html[data-motion-profile="full"] .hero:not(.is-motion-active) .hero-title-brand u,
html[data-motion-profile="full"] .clarity-strip:not(.is-motion-active) .clarity-strip__track,
html[data-motion-profile="full"] .lifecycle:not(.is-motion-active) .funnel-path__line i,
html[data-motion-profile="full"] .lifecycle:not(.is-motion-active) .funnel-path__line b,
html[data-motion-profile="full"] .control-room:not(.is-motion-active) .current-screen__spark,
html[data-motion-profile="full"] .philosophy:not(.is-motion-active) .cycle__halo,
html[data-motion-profile="full"] .philosophy:not(.is-motion-active) .cycle__light,
html[data-motion-profile="full"] .philosophy:not(.is-motion-active) .cycle__steps,
html[data-motion-profile="full"] .journey-end:not(.is-motion-active) .journey-end__light i {
  animation-play-state: paused;
}

/* Avoid layout on every wave frame while preserving the same visual rhythm. */
.live-wave span {
  height: 64px;
}

.funnel-path__line {
  left: 26px;
  right: calc(20% - 36px);
}

.clarity-strip__track {
  gap: 0;
  width: max-content;
}

.clarity-strip__group {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 32px;
  justify-content: space-evenly;
  min-width: 100vw;
}

/* Static CSS replacement for the hero canvas: no JavaScript frame loop or raster work. */
.hero__signal-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero__signal-trails {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: visible;
}

.hero__signal-particles {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 11% 76%, rgba(145, 222, 238, .35) 0 1px, transparent 2px),
    radial-gradient(circle at 17% 72%, rgba(145, 222, 238, .24) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 68%, rgba(145, 222, 238, .48) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 64%, rgba(145, 222, 238, .32) 0 1px, transparent 2px),
    radial-gradient(circle at 39% 60%, rgba(145, 222, 238, .52) 0 1px, transparent 2px),
    radial-gradient(circle at 47% 55%, rgba(145, 222, 238, .28) 0 1px, transparent 2px),
    radial-gradient(circle at 56% 49%, rgba(145, 222, 238, .52) 0 1px, transparent 2px),
    radial-gradient(circle at 65% 43%, rgba(145, 222, 238, .34) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 37%, rgba(145, 222, 238, .52) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 29%, rgba(211, 247, 166, .62) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 87% 22%, rgba(211, 247, 166, .76) 0 1.5px, transparent 2.5px);
}

.hero__corner-glow {
  position: absolute;
  top: 14.5%;
  left: 92.5%;
  width: 220px;
  height: 220px;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 248, .78) 0 2%, rgba(187, 238, 242, .42) 8%, rgba(114, 230, 255, .09) 30%, transparent 72%);
}

@keyframes waveSignal {

  0%,
  100% {
    opacity: .18;
    transform: scaleY(.125);
  }

  35% {
    opacity: .78;
    transform: scaleY(1);
  }

  55% {
    opacity: .35;
    transform: scaleY(.3125);
  }

  72% {
    opacity: .58;
    transform: scaleY(.65625);
  }
}

/* Keep the composition intact on constrained devices; freeze only decoration. */
html[data-motion-profile="lite"] .ambient__noise,
html[data-motion-profile="lite"] .signal-spine__pulse,
html[data-motion-profile="lite"] .hero__visual::before,
html[data-motion-profile="lite"] .hero-title-brand u,
html[data-motion-profile="lite"] .clarity-strip__track,
html[data-motion-profile="lite"] .signal-route__beam i,
html[data-motion-profile="lite"] .signal-route__beam b,
html[data-motion-profile="lite"] .current-screen__spark,
html[data-motion-profile="lite"] .funnel-path__line i,
html[data-motion-profile="lite"] .funnel-path__line b,
html[data-motion-profile="lite"] .live-wave span,
html[data-motion-profile="lite"] .cycle__halo,
html[data-motion-profile="lite"] .cycle__light,
html[data-motion-profile="lite"] .cycle__steps,
html[data-motion-profile="lite"] .journey-end__light i {
  animation: none;
}