/* Animations et relief — site CFEC-Afrique.
 *
 * REGLE DE SURETE, avant tout le reste
 * ------------------------------------
 * Rien n'est masque par cette feuille seule. Tout ce qui cache un element
 * est place sous « html.motion-ready », une classe que seul le script pose
 * s'il a demarre. Si le script echoue, ne se charge pas, ou si le
 * navigateur est trop ancien, la page reste exactement celle d'avant :
 * visible, complete, simplement sans animation.
 *
 * L'inverse — masquer en CSS puis reveler en JS — rend un site blanc le
 * jour ou le script tombe. Pour un cabinet dont le site est la vitrine,
 * ce risque ne se prend pas.
 *
 * CE QUI N'EST PAS TOUCHE
 * -----------------------
 * Le menu (.mega-*), la video d'accueil et les images : ni leur source, ni
 * leur cadrage, ni leur structure. Le cabinet l'a demande expressement, et
 * c'est de toute facon la que les regressions se logent.
 *
 * SOBRIETE
 * --------
 * Les durees sont courtes et les deplacements faibles. Un cabinet d'audit
 * ne gagne rien a un site qui bouge beaucoup ; il gagne a un site qui
 * repond. Les mouvements sont de l'ordre de 14 a 22 px, jamais davantage.
 */

:root{
  --motion-duree: .62s;
  --motion-courbe: cubic-bezier(.22, .61, .36, 1);
  --motion-leve: cubic-bezier(.34, 1.56, .64, 1);
}

/* --- 1. apparition au defilement ------------------------------------- */

html.motion-ready [data-motion]{
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity var(--motion-duree) var(--motion-courbe),
    transform var(--motion-duree) var(--motion-courbe);
  transition-delay: var(--motion-retard, 0ms);
  will-change: opacity, transform;
}

html.motion-ready [data-motion="cote"]{
  transform: translate3d(-34px, 0, 0);
}

/* Le texte courant : montee plus courte et plus rapide que les blocs.
 * Un paragraphe qui monte de trente pixels comme une carte entiere donne
 * une page qui tangue ; dix-huit suffisent a marquer l'arrivee. */
html.motion-ready [data-motion="texte"]{
  transform: translate3d(0, 18px, 0);
  transition-duration: .5s;
}

/* Les images se devoilent par le bas plutot que de surgir : le cadre
 * s'ouvre pendant que l'image revient a son echelle. On ne touche ni au
 * fichier, ni au cadrage, ni au rapport : seulement a la facon dont il
 * apparait. */
html.motion-ready [data-motion="image"]{
  transform: scale(1.05);
  clip-path: inset(14% 0 0 0);
  transition-duration: .85s;
}
html.motion-ready [data-motion="image"].motion-vu{
  transform: none;
  clip-path: inset(0 0 0 0);
}

html.motion-ready [data-motion].motion-vu{
  opacity: 1;
  transform: none;
  /* On rend la main au navigateur une fois l'apparition finie : laisser
   * will-change en place sur des dizaines d'elements consomme de la
   * memoire video pour rien. */
  will-change: auto;
}

/* --- 2. relief des cartes -------------------------------------------- */
/* Les cartes du site : poles, secteurs, fiches technologie. */

html.motion-ready .pole,
html.motion-ready .sector,
html.motion-ready .tech{
  transform-style: preserve-3d;
  transition:
    transform .5s var(--motion-courbe),
    box-shadow .5s var(--motion-courbe);
}

html.motion-ready .pole:hover,
html.motion-ready .sector:hover,
html.motion-ready .tech:hover{
  box-shadow: 0 22px 54px rgba(12, 35, 64, .20);
}

/* L'inclinaison suit le pointeur ; les deux angles sont poses par le
 * script, bornes a 4 degres. Au-dela, l'effet cesse d'etre elegant et
 * devient un gadget. */
html.motion-ready .motion-relief{
  transform:
    perspective(900px)
    rotateX(var(--motion-rx, 0deg))
    rotateY(var(--motion-ry, 0deg))
    translate3d(0, -7px, 0) scale(1.012);
}

/* L'image d'une carte avance legerement : la profondeur vient de l'ecart
 * entre les plans, pas de l'amplitude du mouvement. On ne change ni la
 * source ni le cadrage, seulement la position. */
html.motion-ready .pole-photo,
html.motion-ready .sector-photo,
html.motion-ready .tech-photo{
  transition: transform .55s var(--motion-courbe);
  backface-visibility: hidden;
}
/* Le cadre lui-meme ne bouge plus. Il porte « overflow:hidden » et un
 * rapport fixe : l'agrandir deformait la grille sans que le mouvement se
 * voie. C'est l'image a l'interieur qui bouge, plus bas. */

/* --- 2 bis. les cartes de poles, demandees nommement ------------------ */
/*
 * Le zoom porte sur l'IMAGE, a l'interieur de son cadre, et non sur le
 * cadre. `.pole-photo` a deja « overflow:hidden » et un rapport 16/10
 * fixe : l'image grandit donc derriere une fenetre immobile, ce qui est
 * l'effet voulu. Deplacer le cadre, comme plus haut, ne se voit pas — il
 * est decoupe.
 *
 * Les cartes .sector et .tech possedent deja ce zoom dans la feuille du
 * site (scale 1.045), ainsi qu'un liere de bordure au survol. Les cartes
 * .pole etaient les SEULES a n'avoir aucun effet de survol : c'est
 * precisement celles que le cabinet a montrees. On leur donne le meme
 * vocabulaire, un peu plus ample, plutot qu'un effet different.
 */
html.motion-ready .pole-photo img{
  transition: transform .7s var(--motion-courbe);
  backface-visibility: hidden;
}
html.motion-ready .pole:hover .pole-photo img,
html.motion-ready .pole:focus-within .pole-photo img{
  transform: scale(1.07);
}

html.motion-ready .pole{
  transition:
    transform .5s var(--motion-courbe),
    box-shadow .5s var(--motion-courbe),
    border-color .35s var(--motion-courbe);
}
html.motion-ready .pole:hover{
  border-color: var(--blue-500);
}

/* Les liens de la carte se decalent avec leur chevron. Le site deplace
 * deja le chevron seul ; en deplacant la ligne entiere, le geste devient
 * lisible au lieu d'etre un detail de quatre pixels. */
html.motion-ready .pole li a{
  transition: transform .3s var(--motion-courbe),
              color .3s var(--motion-courbe);
}
html.motion-ready .pole li a:hover{
  transform: translateX(5px);
}

/* --- 3. boutons et liens --------------------------------------------- */

html.motion-ready .btn{
  transition:
    transform .28s var(--motion-leve),
    box-shadow .28s var(--motion-courbe);
}
html.motion-ready .btn:hover{
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 10px 22px rgba(12, 35, 64, .22);
}
html.motion-ready .btn:active{
  transform: translate3d(0, 0, 0);
  transition-duration: .08s;
}

/* Le soulignement des entrees de navigation se deplie depuis la gauche.
 * On n'ajoute aucun element : le trait est un pseudo-element. */
html.motion-ready .nav-item > a{
  position: relative;
}
html.motion-ready .nav-item > a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--motion-courbe);
  opacity: .75;
}
html.motion-ready .nav-item > a:hover::after{
  transform: scaleX(1);
}

/* --- 4. titre d'accueil ---------------------------------------------- */
/* Le texte seulement. La video et son cadrage restent intacts. */

html.motion-ready .kicker[data-motion],
html.motion-ready h1[data-motion]{
  transform: translate3d(0, 26px, 0);
}

/* --- 5. respect du reglage systeme ------------------------------------ */
/* Certaines personnes desactivent les animations pour des raisons
 * medicales — vertiges, migraines. Ce n'est pas une preference de confort
 * et on la respecte entierement : tout s'affiche, rien ne bouge. */

@media (prefers-reduced-motion: reduce){
  html.motion-ready [data-motion],
  html.motion-ready [data-motion].motion-vu{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.motion-ready .pole,
  html.motion-ready .sector,
  html.motion-ready .tech,
  html.motion-ready .btn,
  html.motion-ready .pole-photo,
  html.motion-ready .sector-photo,
  html.motion-ready .tech-photo,
  html.motion-ready .nav-item > a::after{
    transition: none !important;
    transform: none !important;
  }
}