Atlantis.js

# Atlantis.js Video Player for GreenThumb Nursery

## HTML Structure
```html
<div class="video-container">
  <video id="marketing-video" controls>
    <source src="gardening-tips.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="video-overlay">
    <h2>Expert Gardening Tips</h2>
    <p>Watch our latest video for seasonal planting advice</p>
  </div>
</div>
```

## CSS Styling
```css
.video-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
```

## JavaScript Integration
```javascript
const video = document.getElementById('marketing-video');

video.addEventListener('play', () => {
  document.querySelector('.video-overlay').style.opacity = '0';
});

video.addEventListener('pause', () => {
  document.querySelector('.video-overlay').style.opacity = '1';
});
```

## Engagement Features
- **Interactive Overlay**: Fades away when video plays
- **Responsive Design**: Adapts to all screen sizes
- **Custom Controls**: Styled to match brand identity
- **Autoplay Option**: Can be configured for homepage use

This Atlantis.js implementation creates an engaging video experience that captures attention and provides valuable content to GreenThumb Nursery customers.