# Hero #9

### Component Structure

* **COPY WRAPPER (div)**: Provides a structural foundation for Hero #9.
* **HR9 COMPONENT (section)**: The main section of the hero, characterized by `hr9__component`, organizing the layout and visual hierarchy of the content.
* **HR9 CONTAINER (container)**: Central container, `hr9__container`, houses the hero's headline and descriptive text.
  * **HR9 HEADING (heading)**: Displays the main message of the hero with `hr9__heading`.
  * **HR9 TEXT (text-basic)**: Offers additional detail or context with `hr9__text`.
* **HR9 GALLERY SPACER and WRAPPER (block/section)**: Constructs a space for the gallery `hr9__gallery-spacer` and `hr9__gallery-wrapper`, setting up the interactive image gallery.
* **HR9 GALLERY (div)**: Comprises multiple sections, including overlay `hr9__gallery-overlay`, gallery images `hr9__gallery-img`, and inner gallery layout `hr9__gallery-inner`, which organizes the images into a coherent visual narrative.

### Animation Structure

**HR9 - Scroll**:

* Engages the gallery overlay `.hr9__gallery-overlay` to become fully visible with clip-path adjustments as the user scrolls.
* Moves gallery sections `.hr9__gallery-left` and `.hr9__gallery-right` off-screen to emphasize the central images.

**HR9 - Pageload**:

* Animates elements within `.hr9__container` and `.hr9__gallery-inner`, gradually introducing them with vertical movement and opacity changes to draw attention to each piece of content.