/*
Theme Name: Wave Background
Theme URI: https://example.com/wave-background
Author: yungpark
Author URI: https://example.com
Description: An interactive animated wave (flow-field) background theme. Ported from a React/Next.js + simplex-noise component to dependency-free vanilla JavaScript. The front page renders a full-screen, mouse/touch-reactive SVG wave field with thin top/bottom rules, matching the original 16:9 demo layout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wave-background
Tags: one-column, custom-background, custom-colors, full-width-template
*/

/* ---- Base reset ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: #000000;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
        Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

/* ---- Front-page hero (mirrors the original demo layout) ---- */
.wave-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background: #000000;
}

.wave-hero__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* thin white rules above/below the stage */
.wave-hero__rule {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.8);
}

/* full-width 16:9 stage that holds the wave field */
.wave-hero__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* optional centered overlay (site title / tagline) */
.wave-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    padding: 1rem;
}

.wave-hero__title {
    margin: 0;
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}

.wave-hero__tagline {
    margin: 0.5rem 0 0;
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    opacity: 0.85;
}