/* Mint satin with blue folds and a small violet interference sheen. These are
   material colors, scoped to the ribbons rather than new interface accents.
   The SVG and WebGL renderer share the same theme-aware OKLCH palette. */
.hero-background {
    --flow-deep: oklch(32% 0.065 192);
    --flow-body: var(--sentient-mint);
    --flow-cool: oklch(73% 0.115 232);
    --flow-iridescent: color-mix(in oklch, var(--synapse-violet) 74%, var(--moon-ivory));
    --flow-highlight: color-mix(in oklch, var(--luminous-mint) 46%, var(--moon-ivory));
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.65;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
}

:root[data-theme="light"] .hero-background {
    --flow-deep: oklch(57% 0.095 192);
    --flow-body: color-mix(in oklch, var(--sentient-mint) 78%, var(--neural-ink));
    --flow-cool: oklch(77% 0.085 232);
    --flow-iridescent: color-mix(in oklch, var(--synapse-violet) 52%, var(--neural-ink));
    --flow-highlight: color-mix(in oklch, var(--luminous-mint) 18%, var(--neural-ink));
    opacity: 1;
}

/* The upper folds stay bright; a still veil keeps the copy legible as they move. */
.hero-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 6%, color-mix(in srgb, var(--neural-ink) 30%, transparent) 28%, color-mix(in srgb, var(--neural-ink) 46%, transparent) 46%, color-mix(in srgb, var(--neural-ink) 62%, transparent) 64%, transparent 90%),
        linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--neural-ink) 12%, transparent) 35%, var(--neural-ink) 62%);
}

.hero-background__fallback,
.hero-background__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-background__canvas { visibility: hidden; }
.hero-background[data-flow-state="running"] .hero-background__canvas,
.hero-background[data-flow-state="paused"] .hero-background__canvas { visibility: visible; }
.hero-background[data-flow-state="running"] .hero-background__fallback,
.hero-background[data-flow-state="paused"] .hero-background__fallback { visibility: hidden; }
.hero-background__deep { stop-color: var(--flow-deep); }
.hero-background__body { stop-color: var(--flow-body); }
.hero-background__cool { stop-color: var(--flow-cool); }
.hero-background__iridescent { stop-color: var(--flow-iridescent); }
.hero-background__highlight { stop-color: var(--flow-highlight); }

@media (max-width: 900px) {
    .hero-background::after {
        background:
            linear-gradient(180deg, transparent, color-mix(in srgb, var(--neural-ink) 66%, transparent) 40%, color-mix(in srgb, var(--neural-ink) 40%, transparent) 70%),
            linear-gradient(90deg, transparent 10%, color-mix(in srgb, var(--neural-ink) 30%, transparent) 36%, var(--neural-ink) 75%);
    }
}

@media (max-width: 640px) {
    .hero-background { bottom: auto; height: min(100%, 540px); }
    .hero-background__secondary { display: none; }
    .hero-background::after {
        background:
            linear-gradient(180deg, transparent, color-mix(in srgb, var(--neural-ink) 58%, transparent) 30%, color-mix(in srgb, var(--neural-ink) 75%, transparent) 65%),
            linear-gradient(90deg, transparent, var(--neural-ink) 70%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-background .hero-background__canvas { visibility: hidden; }
    .hero-background .hero-background__fallback { visibility: visible; }
}