/* ============================================================
   Systeme de mouvement partage — tokens
   Formalise ce qui etait ecrit en dur dans la boucle du hero.
   Voir docs/superpowers/specs/2026-08-30-systeme-de-mouvement-design.md
   ============================================================ */
:root{
  --mo-attract:0.02;   /* acceleration vers la cible */
  --mo-damp:0.86;      /* amortissement de la vitesse */
  --mo-radius:92;      /* rayon de repulsion du pointeur, en px */
  --mo-force:4.5;      /* force de repulsion */
  --mo-c1:#F0531C;     /* orange de marque */
  --mo-c2:#14202B;     /* encre */
  --mo-c3:#0D99FF;     /* bleu outil */
}

canvas[data-motion]{display:block}

/* ------------------------------------------------------------
   Pages secondaires : volontairement aucun champ.
   Essaye puis retire — un champ decoratif repete sur les 8 pages
   secondaires lisait comme de la poussiere sur le ciel, pas comme
   une signature. Le hero de l'accueil reste le seul endroit ou
   l'audace se depense. Les classes ci-dessous sont conservees pour
   pouvoir revenir en arriere : il suffit d'inserer
   <canvas class="mo-bg" data-motion="drift" aria-hidden="true">
   en premier enfant de .svc-hero / .cc-hero / .pf-hero et de
   charger motion.css + motion.js sur ces pages.
   ------------------------------------------------------------ */
.svc-hero:has(> .mo-bg),.cc-hero:has(> .mo-bg),.pf-hero:has(> .mo-bg){position:relative;z-index:0}
.svc-hero > .mo-bg ~ .wrap,.cc-hero > .mo-bg ~ .wrap,.pf-hero > .mo-bg ~ .wrap{position:relative;z-index:1}
.mo-bg{
  position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;opacity:.28;
  -webkit-mask-image:linear-gradient(#000 45%,transparent 94%);
          mask-image:linear-gradient(#000 45%,transparent 94%);
}
@media(max-width:680px){.mo-bg{opacity:.2}}
@media(prefers-reduced-motion:reduce){.mo-bg{opacity:.16}}

/* ------------------------------------------------------------
   Role mobile du champ du hero.
   Sous 680px le texte en particules serait illisible : a 71px de
   corps sur 343px de large il reste environ 3 particules dans
   l'epaisseur d'un jambage. Le champ passe donc en fond et le
   titre redevient du vrai texte HTML, net et selectionnable.
   La specificite #phero #phPc est necessaire pour passer devant
   la regle display:none de la page.
   ------------------------------------------------------------ */
@media(max-width:680px){
  #phero .ph-col{position:relative}
  #phero #phPc{
    display:block;position:absolute;left:0;top:0;
    width:100%;height:58%;z-index:0;opacity:.32;
    /* le champ s'eteint avant le paragraphe : il reste un fond,
       il ne doit jamais concurrencer le texte a lire */
    -webkit-mask-image:linear-gradient(#000 52%,transparent 100%);
            mask-image:linear-gradient(#000 52%,transparent 100%);
  }
  #phero .ph-col > :not(canvas){position:relative;z-index:1}
  /* #phero .ph-col porte pointer-events:none, dont le titre heritait :
     le h1 n'etait pas selectionnable, et le canvas passe dessous
     absorbait le tap. La spec demande un titre en vrai texte net et
     selectionnable — on le lui rend. */
  #phero .ph-fallback{pointer-events:auto;-webkit-user-select:text;user-select:text}
}

@media(prefers-reduced-motion:reduce){
  #phero #phPc{opacity:.24}
}