/*!
 * MAYELA HUB — Fractures d'obsidienne
 * Habillage du fond animé de la section « Nos réalisations ».
 * Le canvas est injecté par js/obsidian-cracks.js en premier enfant de l'hôte.
 */

[data-obsidian-cracks] {
    position: relative;
    overflow: hidden;
    /* Isole l'empilement : le canvas ne peut pas passer devant les sections
       voisines, quels que soient leurs z-index. */
    isolation: isolate;
}

.obsidian-cracks-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
    /* Le réseau s'estompe sur les bords : la section se fond dans le reste de
       la page au lieu de s'arrêter net sur une ligne. */
    -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 45%, transparent 100%);
    mask-image: radial-gradient(120% 100% at 50% 50%, #000 45%, transparent 100%);
}

/* Le contenu de la section passe devant le fond. */
[data-obsidian-cracks] > .container,
[data-obsidian-cracks] > .container-fluid {
    position: relative;
    z-index: 1;
}

/* Sur mobile, le réseau devient trop dense pour la surface disponible :
   on le laisse tourner mais on l'atténue, il ne doit jamais gêner la lecture. */
@media only screen and (max-width: 767px) {
    .obsidian-cracks-canvas {
        opacity: 0.65;
    }
}