/* Hand-drawn Accents */

/* ── Wavy SVG underline for section titles ── */
.section-title,
section h2 {
  position: relative;
  width: fit-content;
}

.section-title::after,
section h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q10 0 20 5 Q30 10 40 5 Q50 0 60 5 Q70 10 80 5 Q90 0 100 5 Q110 10 120 5 Q130 0 140 5 Q150 10 160 5 Q170 0 180 5 Q190 10 200 5' fill='none' stroke='%23a78bfa' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.6;
  /* Draw-in via clip-path */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s ease-out;
}

/* When visible (toggled by IntersectionObserver adding .in-view) */
.section-title.in-view::after,
section h2.in-view::after {
  clip-path: inset(0 0% 0 0);
}

/* ── Stroke-dasharray draw-in variant (for SVG-inline titles) ── */
.hand-drawn-underline {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1s ease-out;
}

.in-view .hand-drawn-underline {
  stroke-dashoffset: 0;
}

/* ── Dark mode ── */
[data-theme="dark"] .section-title::after,
[data-theme="dark"] section h2::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q10 0 20 5 Q30 10 40 5 Q50 0 60 5 Q70 10 80 5 Q90 0 100 5 Q110 10 120 5 Q130 0 140 5 Q150 10 160 5 Q170 0 180 5 Q190 10 200 5' fill='none' stroke='%2367e8f9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* ── IntersectionObserver auto-init ── */
