/* ==========================================================================
   003 — Border Draw Button · boutons
   La bordure se dessine autour du bouton au survol : un <rect> SVG normalisé
   (pathLength=100) animé en stroke-dashoffset, doublé d'un écho flouté qui
   suit le tracé avec un léger retard — le glow "poursuit" la ligne. Le trait
   net porte un drop-shadow : le halo n'existe que là où la ligne est dessinée.
   Le dégradé du trait est défini dans snippet.html (#grad-border-draw-button).
   ========================================================================== */

.draw-btn {
  --draw-btn-ink: var(--ml-muted, #8b91a3);
  --draw-btn-ink-hover: var(--ml-fg, #e8eaf2);
  --draw-btn-stroke: var(--ml-accent, #7c8cff);
  --draw-btn-stroke-2: var(--ml-accent-2, #2dd4bf);
  --draw-btn-radius: 16px;
  --draw-btn-ease-draw: cubic-bezier(0.66, 0, 0.18, 1);
  --draw-btn-ease-erase: cubic-bezier(0.55, 0, 0.68, 0.19);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.5rem;
  border: 0;
  border-radius: var(--draw-btn-radius);
  background-color: color-mix(in srgb, var(--ml-surface, #151a24) 75%, transparent);
  color: var(--draw-btn-ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.45s ease,
    background-color 0.6s ease,
    transform 0.2s ease;
}

.draw-btn:hover,
.draw-btn:focus-visible {
  color: var(--draw-btn-ink-hover);
  background-color: color-mix(in srgb, var(--draw-btn-stroke) 9%, var(--ml-surface, #151a24));
}

.draw-btn:focus-visible {
  outline: 2px solid var(--ml-accent-2, #2dd4bf);
  outline-offset: 3px;
}

.draw-btn:active {
  transform: scale(0.985);
}

/* --- Cadre SVG -------------------------------------------------------------
   Le rect épouse le bouton (géométrie en CSS), le trait déborde d'un
   demi-pixel de part et d'autre du bord → overflow visible. */

.draw-btn__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.draw-btn__track,
.draw-btn__stroke,
.draw-btn__echo {
  x: 0;
  y: 0;
  width: 100%;
  height: 100%;
  rx: var(--draw-btn-radius);
  fill: none;
}

/* Rail discret, toujours visible : donne la forme au repos */
.draw-btn__track {
  stroke: color-mix(in srgb, var(--ml-fg, #e8eaf2) 12%, transparent);
  stroke-width: 1px;
}

/* Trait net (dégradé) + écho flouté qui le poursuit */
.draw-btn__stroke,
.draw-btn__echo {
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-dasharray: 100.5; /* pathLength=100 + marge anti-artefact de jointure */
  stroke-dashoffset: 100.5;
  transition: stroke-dashoffset 0.55s var(--draw-btn-ease-erase);
}

.draw-btn__stroke {
  stroke: url(#grad-border-draw-button);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--draw-btn-stroke) 75%, transparent));
}

.draw-btn__echo {
  stroke: var(--draw-btn-stroke);
  opacity: 0.4;
  filter: blur(3px);
}

.draw-btn:hover .draw-btn__stroke,
.draw-btn:focus-visible .draw-btn__stroke {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.05s var(--draw-btn-ease-draw);
}

.draw-btn:hover .draw-btn__echo,
.draw-btn:focus-visible .draw-btn__echo {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.05s var(--draw-btn-ease-draw) 0.08s;
}

/* Stops du dégradé — thémables via custom properties */
.draw-btn__grad-a {
  stop-color: var(--ml-accent, #7c8cff);
}

.draw-btn__grad-b {
  stop-color: var(--ml-accent-2, #2dd4bf);
}

/* --- Label ------------------------------------------------------------------ */

.draw-btn__label {
  position: relative;
}

/* --- Wrapper de démo (galerie) ----------------------------------------------- */

.draw-btn-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Accessibilité ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* Pas de tracé animé : la bordure complète apparaît en fondu. */
  .draw-btn__stroke,
  .draw-btn__echo {
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity 0.25s ease-out;
  }

  .draw-btn:hover .draw-btn__stroke,
  .draw-btn:focus-visible .draw-btn__stroke {
    opacity: 1;
    transition: opacity 0.25s ease-out;
  }

  .draw-btn:hover .draw-btn__echo,
  .draw-btn:focus-visible .draw-btn__echo {
    opacity: 0.4;
    transition: opacity 0.25s ease-out;
  }
}