/*
 * Le circuit : canevas de fond qui prolonge le pictogramme à l'échelle de la
 * page. Toujours en position absolue derrière son contenu, jamais en fixed —
 * un canevas fixe se repeint sur toute la surface à chaque frame.
 */

.circuit {
    position: absolute;
    inset: 0;
    z-index: var(--z-circuit);
    pointer-events: none;
    overflow: clip;
}

.circuit__toile {
    inline-size: 100%;
    block-size: 100%;
}

/* Halo coloré posé derrière le canevas : donne la profondeur, coûte un dégradé. */
.circuit::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60rem 40rem at 78% 8%, rgb(113 34 246 / 0.28), transparent 60%),
        radial-gradient(46rem 30rem at 8% 82%, rgb(46 163 242 / 0.16), transparent 62%);
    z-index: -1;
}

.circuit--discret::after {
    opacity: 0.45;
}

/* — Le pictogramme, quand il sert d'élément graphique et non de logo — */
.marque__cadre,
.marque__piste {
    stroke-linecap: butt;
}

.marque--anime .marque__piste,
.marque--anime .marque__cadre {
    /* Le tracé est armé en JS (dasharray calculé) ; ici on garantit juste que
       rien ne saute avant que le contrôleur ne prenne la main. */
    vector-effect: non-scaling-stroke;
}

/* Le monogramme animé part vide : le contour se trace, puis la forme se remplit. */
.marque--anime .marque__cadre {
    fill-opacity: 0;
}

/*
 * Grille de fond en pistes fines : version CSS pure du même motif, pour les
 * sections où un canevas serait de trop.
 */
.trame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--trait) 1px, transparent 1px),
        linear-gradient(to bottom, var(--trait) 1px, transparent 1px);
    background-size: clamp(4rem, 8vw, 7rem) clamp(4rem, 8vw, 7rem);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
    opacity: 0.6;
}