/* Native vector decoration around the existing product stage. */
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  transition: opacity .65s ease;
}
.hero-atmosphere svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  fill: none;
  stroke: none;
}
.circuit-field { position: absolute; inset: 0; }
.circuit-grid { opacity: .075; }
.circuit-floor { opacity: .3; }
.circuit-traces { opacity: .3; }
.circuit-endpoints { opacity: .6; }
.circuit-chip { opacity: .45; }
.circuit-satellites { opacity: .45; }
.neural-core {
  position: absolute;
  left: 36%;
  top: 8%;
  width: 59%;
  height: 82%;
  animation: neural-drift 20s ease-in-out infinite;
}
.neural-mesh { opacity: .23; }
.neural-links { opacity: .29; }
.neural-orbits { opacity: .6; }
.neural-nodes { opacity: .75; }
.neural-ticks { opacity: .5; }
.neural-stream {
  stroke: #d4fff1;
  stroke-width: 2;
  stroke-dasharray: 4 36;
  animation: neural-flow 22s linear infinite;
}
.neural-pulse {
  opacity: .12;
  transform-box: fill-box;
  transform-origin: center;
  animation: neural-pulse 6s ease-in-out infinite;
}
.pulse-late { animation-delay: -2s; }
.pulse-last { animation-delay: -4s; }
.atmosphere-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d5fff2;
  box-shadow: 0 0 14px 3px #9fffe945;
  opacity: .65;
  animation: atmosphere-twinkle 7s ease-in-out infinite;
}
.spark-one { left: 47%; top: 20%; }
.spark-two { left: 83%; top: 72%; animation-delay: -3s; }
.spark-three { left: 32%; top: 78%; animation-delay: -5s; }
.experience-stage.is-open .hero-atmosphere { opacity: 1; }
.experience-stage.is-open .neural-core { opacity: .4; animation-play-state: paused; }
.experience-stage.is-open .circuit-traces { opacity: .46; }
.neural-core { transition: opacity .65s ease; }
.atmosphere-symbols { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.workspace-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: #c3e7ec;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .75s ease;
}
.workspace-atmosphere svg, .section-atmosphere svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: none;
  max-width: none;
}
.workspace-connections { position: absolute; inset: 0; opacity: .56; }
.workspace-atmosphere .workspace-network { position: absolute; left: -2%; top: 44%; width: 32%; height: 51%; opacity: .75; }
.experience-stage.is-open .workspace-atmosphere { opacity: 1; }
/* Shared SVG symbols keep the visual language present through the whole page. */
.tech-section { position: relative; isolation: isolate; }
.section-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  color: #7452b4;
  opacity: .75;
}
.section-atmosphere .section-circuit-top,
.section-atmosphere .section-circuit-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 560px;
  aspect-ratio: 1.6;
}
.section-circuit-top { top: -25px; }
.section-circuit-bottom { bottom: -80px; transform: rotate(180deg); }
.section-signal {
  position: absolute;
  top: 96px;
  right: 7%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 7px #9176ce12, 0 0 0 15px #9176ce09;
}
.collection.tech-section {
  background: radial-gradient(ellipse at 96% 4%, #d8c5f777, transparent 37%),
    radial-gradient(ellipse at 2% 96%, #cbd7f366, transparent 35%),
    linear-gradient(150deg, #f5f2fc, #e9e4f4);
}
.collection.tech-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a08cdd, #7bd1c0, transparent);
}
.collection.tech-section .selected-product {
  margin-top: 24px;
  padding-bottom: 34px;
  border: 1px solid #aa95d550;
  border-radius: 18px;
  background: #ffffff52;
}
.local.tech-section, .questions.tech-section {
  background: linear-gradient(130deg, #f6f2fb, #eee8f8);
}
.local .section-atmosphere { opacity: .62; }
.questions .section-atmosphere { opacity: .5; }
.questions .section-circuit-top { top: -100px; transform: rotate(180deg); }
.workflow-showcase>.section-atmosphere,
.closing>.section-atmosphere { color: #cebef6; opacity: .8; margin: 0; }
.workflow-showcase .section-circuit-top { top: -40px; opacity: .64; }
.closing .section-circuit-top { top: -150px; opacity: .65; }
.section-atmosphere .closing-network { position: absolute; left: 40%; top: -70%; width: 42%; height: 230%; opacity: .6; }
@keyframes neural-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(-3deg); }
}
@keyframes neural-flow { to { stroke-dashoffset: -240; } }
@keyframes neural-pulse {
  0%, 100% { opacity: .08; transform: scale(.8); }
  50% { opacity: .2; transform: scale(1.2); }
}
@keyframes atmosphere-twinkle {
  0%, 100% { opacity: .3; transform: scale(.7); }
  50% { opacity: .85; transform: scale(1.2); }
}
@media (min-width: 1800px) {
  .neural-core { left: 36%; width: 58%; }
}
@media (max-width: 700px) {
  .neural-core { left: -18%; top: 31%; width: 136%; height: 49%; }
  .neural-mesh { opacity: .2; }
  .neural-links { opacity: .24; }
  .neural-orbits { opacity: .52; }
  .circuit-grid { opacity: .045; }
  .circuit-field { opacity: .58; }
  .spark-one { left: 85%; top: 33%; }
  .spark-two { left: 16%; top: 70%; }
  .spark-three { display: none; }
  .workspace-atmosphere .workspace-network { left: -29%; top: 55%; width: 125%; height: 40%; opacity: .6; }
  .workspace-connections { opacity: .3; }
  .section-atmosphere .section-circuit-top,
  .section-atmosphere .section-circuit-bottom { left: -43%; width: 186%; min-height: 440px; }
  .collection.tech-section .selected-product { padding-bottom: 28px; border-radius: 14px; }
  .section-signal { top: 42px; }
  .questions .section-circuit-top { top: -80px; }
  .section-atmosphere .closing-network { left: 38%; top: -10%; width: 90%; height: 120%; opacity: .48; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere, .hero-atmosphere *, .workspace-atmosphere, .workspace-atmosphere * {
    animation: none !important;
    transition: none !important;
  }
}