# Hero #8

### Component Structure

* **COPY WRAPPER (div)**: Serves as the structural foundation, organizing Hero #8's content without specific styling.
* **HR8 COMPONENT (section)**: This is the main canvas of the hero, using the `hr8__component` class for styling, including full viewport height and flexible column direction.
* **HR8 ROWs and MASKs (block)**: Rows and masks within the component, identified by `hr8__row` and `hr8__mask`, create structured sections for content and visual effects.
* **HR8 HEADINGs (heading)**: Multiple headings (`FIRST`, `SECOND`, `THIRD`, `FOURTH`) use the `hr8__heading` class, positioned to draw attention with their content and animation.
* **HR8 SEPARATORs (block)**: Thin lines using `hr8__seperator`, visually dividing the hero's sections, enhancing the design's clarity and organization.
* **HR8 IMAGE (image)**: A background or key visual element, styled with `hr8__image`, sets the tone and atmosphere for the hero.

### Animation Structure

**HR8 - PAGELOAD** outlines the sequence of animations for the hero component upon the page's load:

* **Separators Animation**: Increases the width of `.hr8__seperator` elements to full width, creating a dynamic unveiling effect.
* **Image Fade-in**: Brings the `.hr8__image` from opacity 0 to 1, gently introducing the visual element to the viewers.
* **Masks Scaling**: Applies a transformation to `.hr8__mask`, scaling down in a staggered manner to reveal the hero content artistically.
* **Headings Movement**: Moves `.hr8__heading` elements from below (y: 120%) to their original position, ensuring the text captures attention through motion.