/* =======================================================
   STROKE TEXT (REACT BITS PORT)
   SVG Text Outline Drawing & Wipe Fill Animation
   ======================================================= */
.stroke-text-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  user-select: none;
  cursor: default;
  position: relative;
  line-height: 1;
}

.stroke-text-wrap.no-transition,
.stroke-text-wrap.no-transition * {
  transition: none !important;
}

.stroke-text-svg {
  display: block;
  overflow: visible;
}

/* Outline Group & Characters (Purple drawing outline) */
.stroke-outline-group {
  opacity: 1;
  transition: opacity 0s;
  will-change: opacity;
}

.stroke-char-outline {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  fill: none;
  will-change: stroke-dashoffset;
}

/* Fill Layer: Wipe Fill Animation via standard CSS clip-path inset */
.stroke-fill-layer {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

/* Drawn State: trigger stroke drawing, wipe fill unmask, and smoothly dissolve purple outline */
.stroke-text-wrap.drawn .stroke-char-outline {
  stroke-dashoffset: 0;
}

.stroke-text-wrap.drawn .stroke-fill-layer {
  clip-path: inset(0 0% 0 0);
}

.stroke-text-wrap.drawn .stroke-outline-group {
  opacity: 0;
  transition: opacity 0.4s ease var(--stroke-fade-delay, 1.4s);
  pointer-events: none;
}