/* ==============================================
   AEROFIELD — WAVE SYSTEM
   Glowing wave dividers, canvas overlay,
   and ambient flowing glow effects.
   ============================================== */

/* --- Canvas wave layer (behind hero) --- */
.wave-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.hero {
    position: relative;
    overflow: hidden;
}

.hero > *:not(.wave-canvas):not(.hero-scroll) {
    position: relative;
    z-index: 2;
}

/* --- SVG wave dividers between sections --- */
.wave-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 60px;
}

.wave-divider--flip {
    transform: scaleY(-1);
}

/* --- Glow line that runs across wave crests --- */
.wave-glow-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 3;
    pointer-events: none;
}

.wave-glow-line::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    animation: waveGlowSweep 4s ease-in-out infinite;
}

.wave-glow-line--amber::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 160, 74, 0)   20%,
        rgba(212, 160, 74, 0.6) 50%,
        rgba(212, 160, 74, 0)   80%,
        transparent 100%
    );
}

.wave-glow-line--teal::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(45, 212, 168, 0)   20%,
        rgba(45, 212, 168, 0.5) 50%,
        rgba(45, 212, 168, 0)   80%,
        transparent 100%
    );
}

.wave-glow-line--indigo::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(99, 102, 241, 0)   20%,
        rgba(99, 102, 241, 0.5) 50%,
        rgba(99, 102, 241, 0)   80%,
        transparent 100%
    );
}

.wave-glow-line--violet::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(139, 92, 246, 0)   20%,
        rgba(139, 92, 246, 0.5) 50%,
        rgba(139, 92, 246, 0)   80%,
        transparent 100%
    );
}

@keyframes waveGlowSweep {
    0%   { transform: translateX(-60%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(60%); opacity: 0; }
}

/* --- Glow blur halos behind wave crests --- */
.wave-divider::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    height: 30px;
    bottom: 20px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
    opacity: 0;
    animation: waveHaloFade 6s ease-in-out infinite;
}

.wave-divider--amber::after  { background: rgba(212, 160, 74, 0.12); opacity: 1; }
.wave-divider--teal::after   { background: rgba(45, 212, 168, 0.10); opacity: 1; }
.wave-divider--indigo::after { background: rgba(99, 102, 241, 0.10); opacity: 1; }
.wave-divider--violet::after { background: rgba(139, 92, 246, 0.10); opacity: 1; }

@keyframes waveHaloFade {
    0%, 100% { opacity: 0.3; transform: scaleX(0.8); }
    50%      { opacity: 0.7; transform: scaleX(1.1); }
}

/* --- Animated flowing glow bars (between content blocks) --- */
.glow-bar {
    width: 100%;
    height: 1px;
    position: relative;
    overflow: hidden;
    margin: 60px 0;
}

.glow-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    animation: glowBarSlide 5s ease-in-out infinite;
}

.glow-bar::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -100%;
    width: 40%;
    height: 9px;
    border-radius: 50%;
    filter: blur(4px);
    animation: glowBarSlide 5s ease-in-out infinite;
}

.glow-bar--amber::before  { background: linear-gradient(90deg, transparent, var(--glow-amber), transparent); }
.glow-bar--amber::after   { background: rgba(212, 160, 74, 0.15); }
.glow-bar--teal::before   { background: linear-gradient(90deg, transparent, var(--glow-teal), transparent); }
.glow-bar--teal::after    { background: rgba(45, 212, 168, 0.12); }
.glow-bar--indigo::before { background: linear-gradient(90deg, transparent, var(--glow-indigo), transparent); }
.glow-bar--indigo::after  { background: rgba(99, 102, 241, 0.12); }

@keyframes glowBarSlide {
    0%   { left: -60%; }
    100% { left: 100%; }
}

/* --- Section glow accent (subtle top-edge glow on sections) --- */
.section-glow {
    position: relative;
}

.section-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    pointer-events: none;
}

.section-glow--amber::before  { background: linear-gradient(90deg, transparent, rgba(212,160,74,0.2), transparent); }
.section-glow--teal::before   { background: linear-gradient(90deg, transparent, rgba(45,212,168,0.15), transparent); }
.section-glow--violet::before { background: linear-gradient(90deg, transparent, rgba(139,92,246,0.15), transparent); }

/* --- Responsive --- */
@media (max-width: 768px) {
    .wave-divider svg {
        min-height: 40px;
    }
}