/* =====================================================================
   HERO « Réseau → Flux » (page d'accueil, hero-flow.js)
   Surcharge le canvas du hero défini dans _banniere.scss via .hero--flow.
   ===================================================================== */

/* ---- Canvas WebGL : plein cadre, sans le masque diagonal de l'ancien plexus.
        Fondu court : la construction du réseau fait office d'entrée. ---- */
.hero--flow .hero__particles {
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
    transition: opacity .15s ease-out;
}

@media (max-width: 991.98px) {
    .hero--flow .hero__particles {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 767.98px) {
    /* Sur mobile le texte occupe toute la largeur : on adoucit le flux derrière lui. */
    .hero--flow .hero__particles {
        height: 100%;
        opacity: 0;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.6) 65%, #000 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.6) 65%, #000 100%);
    }

    .hero--flow .hero__particles.is-ready {
        opacity: 1;
    }
}

/* Le texte reste net au-dessus du flux lumineux. */
.hero--flow .hero__title,
.hero--flow .hero__subtitle,
.hero--flow .hero__question {
    text-shadow: 0 2px 24px rgba(10, 14, 39, .85);
}

.hero--flow .hero__title .text-gradient {
    text-shadow: none;
}

/* ---- Chorégraphie d'entrée : le texte « se matérialise » pendant que
        le désordre s'organise. Délais courts pour ne pas pénaliser le LCP. ---- */
.hero--flow .hero__line {
    display: inline-block;
}

.hero--flow .hero__badge,
.hero--flow .hero__question,
.hero--flow .hero__line,
.hero--flow .hero__subtitle,
.hero--flow .hero__cta {
    animation: heroFlowRise 1.1s cubic-bezier(.16, .84, .3, 1) both;
}

.hero--flow .hero__badge    { animation-delay: .05s; }
.hero--flow .hero__question { animation-delay: .12s; }
.hero--flow .hero__line--1  { animation-delay: .2s; }
.hero--flow .hero__line--2  { animation-delay: .34s; }
.hero--flow .hero__subtitle { animation-delay: .5s; }
.hero--flow .hero__cta      { animation-delay: .62s; }

@keyframes heroFlowRise {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero--flow .hero__badge,
    .hero--flow .hero__question,
    .hero--flow .hero__line,
    .hero--flow .hero__subtitle,
    .hero--flow .hero__cta {
        animation: none;
    }
}