/* Shared scene for the selected homepage animation and the comparison lab. */
.hero-thread-scene {
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  width: 100%;
  height: 52%;
  pointer-events: none;
  stroke: none;
}
.hero-thread { fill: none; stroke: var(--fil-petrol); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.hero-thread--accent { stroke: var(--fil-cyan); }
.hero-thread--depth { stroke: url(#hero-depth-ink); }
.hero-thread--cyan-depth { stroke: url(#hero-depth-cyan); }
.hero-thread--sweep { stroke: url(#hero-thread-sweep); }
.thread-ink-stop { stop-color: var(--fil-petrol); }
.thread-cyan-stop { stop-color: var(--fil-cyan); }
.thread-soft-stop { stop-color: var(--fil-cyan-soft); }
.hero-thread-scene[data-thread-variant="profondeur"] .thread-edge-stop--bottom { stop-opacity: 1; }
.hero-thread-scene[data-thread-variant="profondeur"] [data-thread-paths] { opacity: .7; }
.hero-thread-particle { fill: none; stroke: var(--fil-cyan-ink); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-thread-scene[hidden] { display: none; }
@media (max-width: 1000px) {
  .hero-thread-scene { height: 48%; }
}