<section class="hero">
  <h2 class="brush-title">
    Un sito che lascia
    <span class="brush-word">
      il segno
      <svg class="brush-stroke" viewBox="0 0 300 60" preserveAspectRatio="none" aria-hidden="true">
          <path d="M10 35 C70 10, 150 55, 290 25" pathLength="1"/>
      </svg>
    </span>
  </h2>
  <svg class="signature-shape" viewBox="0 0 360 360" aria-hidden="true">
    <path pathLength="1"
      d="
        M 300 180
        C 300 100, 235 50, 160 60
        C 85 70, 45 135, 65 205
        C 85 275, 160 310, 225 280
        C 285 252, 300 185, 270 140
        C 240 95, 175 95, 145 135
        C 115 175, 135 225, 180 235
        C 220 245, 250 215, 240 180
        C 232 150, 200 140, 178 155
      "
    />
  </svg>
</section>

.hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:3rem;background:#f4f0e8}
.brush-title{font-family:Arial,sans-serif;font-size:clamp(2rem,6vw,5rem);line-height:1.1}
.brush-word{position:relative;display:inline-block;isolation:isolate}
.brush-word .brush-stroke{position:absolute;z-index:-1;left:-5%;bottom:-10%;width:110%;height:55%;overflow:visible}
.brush-stroke path{fill:none;stroke:#00d9ff;stroke-width:28;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw-brush 1.2s cubic-bezier(.65,0,.35,1) forwards;animation-delay:.4s}
@keyframes draw-brush {
to{stroke-dashoffset:0}
}
@media (prefers-reduced-motion: reduce) {
.brush-stroke path{animation:none;stroke-dashoffset:0}
}
/* forma astratta */
.signature-shape{position:absolute;right:clamp(-70px,2vw,40px);top:50%;width:clamp(180px,25vw,340px);height:auto;transform:translateY(-50%) rotate(8deg);z-index:1;pointer-events:none}
.signature-shape path{fill:none;stroke:#d5523c;stroke-width:18;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw-signature 1.8s cubic-bezier(.65,0,.35,1) forwards}
@keyframes draw-signature {
to{stroke-dashoffset:0}
}
@media (prefers-reduced-motion: reduce) {
.signature-shape path{animation:none;stroke-dashoffset:0}
}