HeadingAnimated heading

---
/**
 * HeadingAnimated — sectiekop met eyebrow, titel en sub. De titel krijgt een
 * underline die bij hover van links naar rechts uitschuift.
 *
 * Props:
 * - eyebrow?: string
 * - title?: string
 * - sub?: string
 */
interface Props {
  eyebrow?: string;
  title?: string;
  sub?: string;
}

const { eyebrow, title, sub } = Astro.props;
---

<section class="bl-section hd-anim-section">
  <div class="bl-inner hd-anim">
    {eyebrow && <span class="hd-anim__eyebrow">{eyebrow}</span>}
    {title && <h2 class="hd-anim__title">{title}</h2>}
    {sub && <p class="hd-anim__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-anim__eyebrow{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.5rem}
.hd-anim__title{margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;line-height:1.15;color:var(--color-primary);display:inline-block;position:relative;cursor:default}
.hd-anim__title:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:3px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.hd-anim__title:hover:after{transform:scaleX(1)}
.hd-anim__sub{margin:0;font-size:1.0625rem;color:#444;line-height:1.6;max-width:520px}
</style>