/**
 * Wave Effect - CSS Styles
 *
 * Styling for the wavy canvas background used in the home hero.
 *
 * Usage:
 * - Add: <link rel="stylesheet" href="js/wave.css" />
 * - Add: <canvas id="waveCanvas"></canvas>
 * - Add: <script src="js/wave.js" defer></script>
 */

#waveCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Ensure content above the canvas is properly layered */
.hero,
.hero .container,
.hero-title,
.hero-subtitle {
    position: relative;
    z-index: 1;
}