/* Fondation de la page : variables, layout de la scène, scanlines, vignette.
   Aucun effet visuel n'appartient ici, seulement la structure commune. */

:root {
    --neon-pink: #ff2bd6;
    --neon-cyan: #29fff0;
    --neon-purple: #a020ff;
    --bg-deep: #05020a;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    background: var(--bg-deep);
    overflow: hidden;
}

body {
    font-family: 'Courier New', ui-monospace, monospace;
}

.stage {
    position: relative;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% 25%, rgba(160, 32, 255, 0.25), transparent 70%),
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 43, 214, 0.2), transparent 60%),
        var(--bg-deep);
}

/* Calques plein écran : SVG orbes + canvas d'effets. Chaque effet ne
   positionne ensuite que son propre z-index / comportement. */
.stage > svg,
.stage > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Scanlines, pour l'ambiance CRT rétro */
.stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.035) 0px,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 2px,
        transparent 4px
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
    animation: scan-drift 9s linear infinite;
}

/* Vignette pour resserrer le regard vers le centre */
.stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, #000 100%);
    pointer-events: none;
    z-index: 3;
}

@keyframes scan-drift {
    from { background-position: 0 0; }
    to { background-position: 0 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .stage::before {
        animation: none;
    }
}