# Masked hero

Masked hero is a full-width section with a large masked visual (logo-shaped mask) and copy (heading, postHeading, body, links) that animates in on scroll. The visual fills the mask area; copy sits in a content grid below. Use for impactful hero blocks with brand-shaped imagery.

## What it looks like

- **Default:** A tall section with a sticky mask (logo shape) containing the visual; below, heading (h1/h2), postHeading, body, and links in the content grid. Content is in col-start-2 col-span-1 on a content-cols-grid. No section-level background or text colour fields.
- **No visual:** Same layout; mask area has no image.

(Visual description from code; scroll-based animation is not fully represented in static screenshots.)

## Typography

- **Heading:** Typography class `h2` from sizingInformation. Semantic level: first block on page → `<h1>`, otherwise `<h2>`.
- **Post-heading:** Typography class `h2` with text shadow.
- **Body:** Rich text with `p1` and text shadow.

## Colours

**How colours are applied:** This component does **not** use `backgroundColour` or `textColour`. No colour hint for the section.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `heading` | Symbol | Main title (h2) | No heading |
| `postHeading` | Symbol | Subtitle below heading (h2) | No postHeading |
| `body` | RichText | Body copy below postHeading (p1) | No body |
| `visual` | EntryLink | Image/video inside the mask | Mask area empty |
| `links` | Array | Buttons/links below body (white buttons) | No links |
| `preHeading` | Symbol | In used fields; not rendered in this component | No visible effect |
| `additionalCopy` | RichText | In used fields; not rendered in this component | No visible effect |
| `icon` | AssetLink | In used fields; not rendered in this component | No visible effect |
| `anchor` | Symbol | HTML `id` for linking | No anchor |
| `cmsLabel` | Symbol | Internal label | No visible effect |

## Behaviour

- **Position (index):** Heading semantic level follows index (first block → h1, else h2).
- **Mask:** The visual is displayed inside a CSS mask (logo shape); mask size and position are fixed. Section has a tall scroll area (200vh) with sticky mask for scroll effect.
- **Section:** Section uses content-cols-grid; inner content in col-start-2 col-span-1. No backgroundColour or textColour in used fields.

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove visual | Mask shows image or is empty |
| Add/remove heading, postHeading, body | Copy blocks appear or disappear |
| Add/remove links | Link row appears or disappears |

## Screenshots to capture

Recommended variants: default, no-visual, no-links, minimal.