/* ============================================================
   LAB SVG AVANCÉ — Module styles
   ============================================================ */

/* ---- Bouton commun ---- */
.svg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.svg-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, var(--surface-hi));
}
.svg-btn [data-lucide] { width: 0.9rem; height: 0.9rem; }

/* ---- Cadre commun des démos SVG ---- */
.feature__demo svg[class^="svg-"],
.feature__demo svg[class*=" svg-"] {
  display: block;
  width: 100%;
  height: auto;
  max-width: 340px;
  margin-inline: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

/* ============================================================
   01 stroke-dashoffset — tracé animé
   ============================================================ */
.svg-trace path {
  fill: none;
  stroke: var(--owl-gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.svg-trace.play path {
  animation: svg-draw 1.8s ease forwards;
}
@keyframes svg-draw {
  to { stroke-dashoffset: 0; }
}

/* ============================================================
   05 Filtres — mouvement de l'effet goo
   ============================================================ */
.svg-goo-mover {
  animation: svg-goo 2.8s ease-in-out infinite alternate;
}
@keyframes svg-goo {
  from { transform: translateX(0); }
  to   { transform: translateX(-32px); }
}

/* ============================================================
   06 offset-path — mobile le long du tracé
   ============================================================ */
.svg-motion-mover {
  offset-path: path("M20,60 C80,-10 120,130 180,60 S280,15 300,60");
  offset-distance: 0%;
  offset-rotate: 0deg;
  animation: svg-travel 3s linear infinite;
}
@keyframes svg-travel {
  to { offset-distance: 100%; }
}
.svg-motion.is-paused .svg-motion-mover {
  animation-play-state: paused;
}

/* ---- Respect des préférences moteur (a11y) ---- */
@media (prefers-reduced-motion: reduce) {
  .svg-trace.play path,
  .svg-goo-mover,
  .svg-motion-mover {
    animation: none;
  }
  .svg-trace path { stroke-dashoffset: 0; }
}