/* flow-scene — the animated "form → destinations" 3D illustration of the landing hero.
   Companion to flow-scene.js. Written in deccster's component style ([is=…], [now=…],
   theme tokens) so it can be dropped into any dark stage.

   @example <div is="flow-scene" aria-hidden="true"></div> */
[is=flow-scene] {
    --flow-scene-height: 520px;
    /* Scene palette — read by flow-scene.js at start, so a theme can recolour the scene
       without touching the script. */
    --flow-scene-accent: var(--landing-accent, #ff6b00);
    --flow-scene-accent-soft: var(--landing-accent-text-on-dark, #ffb27a);
    --flow-scene-fog: var(--landing-dark-background, #0e1014);
    --flow-scene-card: var(--landing-dark-surface-raised, #1b1e26);
    --flow-scene-field: #2c313c;
    --flow-scene-field-lit: #3d4350;
    --flow-scene-label: #555b68;
    --flow-scene-node: #3a3f4b;
    --flow-scene-line: #8a8e99;
    --flow-scene-text: var(--landing-dark-muted, #c9cbd1);
    --flow-scene-grid: #2a2e38;
    --flow-scene-grid-soft: #1a1d24;

    position: relative;
    display: block;
    min-height: var(--flow-scene-height);
    width: 100%;
    overflow: hidden;
    contain: layout paint;
}

[is=flow-scene] canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Small technical chips pinned to the bottom-left corner of the scene. */
[is=flow-scene-chips] {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--landing-dark-subtle, #6f737e);
    pointer-events: none;
}

[is=flow-scene-chips] > span {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    white-space: nowrap;
}

/* Static fallback (no WebGL, reduced motion honoured by the script, or Three.js failed to
   load): a quiet glow and grid so the hero keeps its composition. */
[is=flow-scene][now~=static]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 55% 45%, rgba(255, 107, 0, 0.22), transparent 55%),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: auto, 48px 48px, 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 80%);
}

@media (max-width: 900px) {
    [is=flow-scene] {
        --flow-scene-height: 360px;
    }
}

@media (max-width: 640px) {
    [is=flow-scene] {
        --flow-scene-height: 300px;
    }
}