.hero-art {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  overflow: hidden;
  pointer-events: none;
}

.hero-art .art-scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-art .art-ribbon {
  stroke-dasharray: 1;
  animation: ligne-draw-hero 1.15s cubic-bezier(.25, .75, .35, 1) both;
}

.hero-art .art-piece {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ligne-appear .78s cubic-bezier(.22, 1.3, .55, 1) both;
}

.hero-art .art-piece--logiciel {
  animation-delay: .08s;
}

.hero-art .art-piece--ia {
  animation-delay: .20s;
}

.hero-art .art-piece--web {
  animation-delay: .32s;
}

.hero-art .art-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: ligne-spark 3.6s ease-in-out infinite alternate;
}

.hero-art .art-spark--late {
  animation-delay: -1.8s;
}

.page-thread {
  position: absolute;
  inset-inline: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-thread svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.page-thread path {
  fill: none;
  stroke: var(--thread-green, #8bc95d);
  stroke-width: clamp(1.2rem, 4.9vw, 4.9rem);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.thread-track { opacity: .16; }
.thread-progress { opacity: .8; }

@keyframes ligne-draw-hero {
  from { stroke-dashoffset: .85; }
  to { stroke-dashoffset: 0; }
}

@keyframes ligne-appear {
  from { opacity: 0; transform: translateY(36px) rotate(-5deg) scale(.94); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes ligne-spark {
  from { transform: scale(.86) rotate(-8deg); }
  to { transform: scale(1.08) rotate(6deg); }
}

@media (max-width: 42rem) {
  .page-thread path {
    stroke-width: clamp(1rem, 5vw, 1.95rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art .art-ribbon,
  .hero-art .art-piece,
  .hero-art .art-spark {
    animation: none;
  }
}