/* =========================================================
   BRANCH WAVE — 3D CANVAS SECTION
   ========================================================= */

.wave {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

.wave-canvas {
    display: block;
    width: 100%;
    height: 240px;
    cursor: grab;
    touch-action: pan-y;
}

.wave-canvas:active {
    cursor: grabbing;
}

/* ── Fallback hidden track (screen-readers / no-JS) ────── */
.wave-track {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ── Responsive canvas height ──────────────────────────── */
@media (max-width: 480px) {
    .wave-canvas {
        height: 160px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .wave-canvas {
        height: 200px;
    }
}

@media (min-width: 1200px) {
    .wave-canvas {
        height: 280px;
    }
}

@media (min-width: 1600px) {
    .wave-canvas {
        height: 320px;
    }
}

/* ── Reduced motion — freeze canvas, show flat fallback ── */
@media (prefers-reduced-motion: reduce) {
    .wave-canvas {
        display: none;
    }

    .wave-track {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        padding: 24px 0;
    }
}

/* ── Dark mode canvas background blend ─────────────────── */
body.dark-mode .wave {
    background: transparent;
}