# Custom Cursor #1

### Component Structure

* **CC1 CURSOR WRAPPER (Div)**: The main container that holds the custom cursor elements, ensuring they are positioned correctly and ready to interact with user movements and actions.
* **CC1 CURSOR (Div)**: These div elements represent the custom cursor's various states and animations, layered to create a depth effect. The cursors vary in opacity, creating a trailing animation effect.
* **CC1 TARGET SECTION (Section)**: Designated area where the custom cursor effect is active, allowing for specific interactions such as hover effects on links and buttons.
* **CC1 CONTAINER (Container)**: Contains interactive elements like links and buttons that the custom cursor will interact with, showcasing the cursor's dynamic effects upon hover or click.

### Animation and Interaction Details

* **CURSOR - MOVE**: This event triggers the custom cursor to follow the user's mouse movements within the CC1 TARGET SECTION, with a slight delay and stagger for a smooth animation effect.
* **CURSOR - HOVER IN & OUT**: These events define the cursor's transformation when hovering over interactive elements (links and buttons). The cursor scales up on hover in, creating a highlight effect, and returns to its original state on hover out, ensuring a clear indication of interactive areas.
* **ON PAGELOAD**: Sets the initial state of the custom cursor to be hidden until the page is fully loaded, ensuring a clean and uninterrupted page loading experience.