/* ==========================================================================
   EventSoft — Accueil 2026 : couche d'animations (es-fx.css)
   Portage de assets/css/animations.css (home « Régie »), chargé après es-home.css
   sur le modèle « Accueil EventSoft 2026 » uniquement (functions/functions-es-fx.php).
   - tout est préfixé par .es-ui (spécificité >= 0,2,0), comme es-home.css ;
   - renommages : es-btn--white, es-tag ; animations préfixées es-fx- ;
   - .fx-progress (début du <body>) et .fx-spot (posée par js/es-fx.js) gardent leur nom.
   Aucun effet n'est nécessaire à la lecture : tout est coupé si l'utilisateur
   demande moins de mouvement, et les animations ne touchent qu'opacité / transform.
   ========================================================================== */
:root{--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* 1. Barre de progression de lecture (animations liées au défilement, si supportées) */
.es-ui .fx-progress{display:none}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .es-ui .fx-progress{display:block;position:fixed;top:0;left:0;right:0;z-index:calc(var(--z-header) + 1);height:3px;pointer-events:none;
      background:var(--grad-brand);transform-origin:0 50%;animation:es-fx-progress linear both;animation-timeline:scroll(root)}
  }
}

@media (prefers-reduced-motion:no-preference){

  /* 2. Hero : entrée en cascade au chargement ============================== */
  .es-ui .hero .proof-pill,.es-ui .hero h1,.es-ui .hero__coord-lead,.es-ui .hero__lead,.es-ui .hero__ctas,.es-ui .hero__assure li{
    animation:es-fx-rise .7s var(--ease-out) var(--fx-d,0s) backwards}
  .es-ui .hero .proof-pill{--fx-d:.05s}
  .es-ui .hero h1{--fx-d:.15s}
  .es-ui .hero__coord-lead{--fx-d:.36s}
  .es-ui .hero__lead{--fx-d:.56s}
  .es-ui .hero__ctas{--fx-d:.66s}
  .es-ui .hero__assure li:nth-child(1){--fx-d:.8s}
  .es-ui .hero__assure li:nth-child(2){--fx-d:.88s}
  .es-ui .hero__assure li:nth-child(3){--fx-d:.96s}
  /* Étiquettes : comptées entre elles (les virgules .sr-only et « Coordonnez » s'intercalent) */
  .es-ui .hero .es-tag{--fx-d:.42s;animation:es-fx-pop-in .55s var(--ease-spring) var(--fx-d) backwards}
  .es-ui .hero .es-tag~.es-tag{--fx-d:.5s}
  .es-ui .hero .es-tag~.es-tag~.es-tag{--fx-d:.58s}
  /* Desktop : les lignes du titre sont des blocs, elles arrivent l'une après l'autre */
  @media (min-width:1024px){
    .es-ui .hero h1{animation:none}
    .es-ui .hero h1 .l{animation:es-fx-rise .8s var(--ease-out) backwards}
    .es-ui .hero h1 .l:nth-child(1){animation-delay:.12s}
    .es-ui .hero h1 .l:nth-child(2){animation-delay:.2s}
    .es-ui .hero h1 .l:nth-child(3){animation-delay:.28s}
  }

  /* Portable (visuel LCP) : glisse sans fondu pour ne pas retarder son affichage, puis flotte */
  .es-ui .hero__shot{animation:es-fx-shot-in 1.1s var(--ease-out) .1s backwards,es-fx-float 7s ease-in-out 1.2s infinite alternate}
  /* Le flottement part de 0 (alternate, pas alternate-reverse) : sinon le badge saute de 10 px à la fin de son entrée */
  .es-ui .hero__google{animation:es-fx-badge-in .7s var(--ease-spring) .95s backwards,es-fx-float 5.5s ease-in-out 1.65s infinite alternate}
  .es-ui .hero__visual::before{animation:es-fx-glow 6s ease-in-out infinite alternate}

  /* Inclinaison suivant le pointeur (variables --fx-x / --fx-y posées par js/es-fx.js) */
  @media (min-width:1024px) and (hover:hover) and (pointer:fine){
    .es-ui .hero__visual{transform:perspective(1600px) rotateY(calc(var(--fx-x,0) * 4deg)) rotateX(calc(var(--fx-y,0) * -3deg));
      transition:transform .6s var(--ease-out)}
  }

  /* 3. Hero : halos lumineux qui dérivent lentement (transform seul, composité) */
  .es-ui .hero__grid::before,.es-ui .hero__grid::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;will-change:transform}
  .es-ui .hero__grid::before{width:640px;height:640px;right:-160px;top:-220px;
    background:radial-gradient(closest-side,rgba(50,171,245,.42),rgba(50,171,245,0));animation:es-fx-drift-a 18s ease-in-out infinite alternate}
  .es-ui .hero__grid::after{width:560px;height:560px;left:-180px;bottom:-240px;
    background:radial-gradient(closest-side,rgba(26,30,102,.5),rgba(26,30,102,0));animation:es-fx-drift-b 22s ease-in-out infinite alternate}

  /* 4. Reflet périodique sur les CTA blancs (hero + CTA final) ============== */
  .es-ui .panel--grad .es-btn--white{position:relative;overflow:hidden;isolation:isolate}
  .es-ui .panel--grad .es-btn--white::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgba(50,171,245,.26) 50%,transparent 70%);
    transform:translateX(-110%);animation:es-fx-shine 5.5s var(--ease-in-out) 2.4s infinite}

  /* 5. Têtes de section révélées : trait de l'eyebrow qui s'étire, surligneur qui passe */
  html.reveal-on .es-ui [data-reveal].is-in .eyebrow::before{transform-origin:0 50%;animation:es-fx-grow .6s var(--ease-out) .2s backwards}
  html.reveal-on .es-ui [data-reveal].is-in .hl{background-size:100% 100%;background-repeat:no-repeat;animation:es-fx-hl .9s var(--ease-out) .45s backwards}

  /* 6. Chiffres : les traits d'accent s'étirent avec les compteurs */
  .es-ui .stats-card.is-in .stat__accent{transform-origin:0 50%;animation:es-fx-grow .8s var(--ease-out) var(--fx-d,0s) backwards}
  .es-ui .stats-card.is-in .stat:nth-child(1) .stat__accent{--fx-d:.25s}
  .es-ui .stats-card.is-in .stat:nth-child(2) .stat__accent{--fx-d:.37s}
  .es-ui .stats-card.is-in .stat:nth-child(3) .stat__accent{--fx-d:.49s}
  .es-ui .stats-card.is-in .stat:nth-child(4) .stat__accent{--fx-d:.61s}

  /* 7. Bouton de lecture vidéo : onde qui invite au clic */
  .es-ui .yt__play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;pointer-events:none;
    animation:es-fx-ping 2.6s var(--ease-out) infinite}

  /* 8. CTA final : disque et anneau qui respirent, onde qui s'échappe de l'anneau */
  .es-ui .cta-final__ring{animation:es-fx-breathe 7s ease-in-out infinite}
  .es-ui .cta-final__disc{animation:es-fx-breathe 7s ease-in-out -3.5s infinite}
  .es-ui .cta-final__ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
    animation:es-fx-ripple 4.5s var(--ease-out) infinite}

  /* 9. Cartes : halo qui suit le pointeur (classe .fx-spot posée par js/es-fx.js) + icône qui rebondit */
  @media (hover:hover) and (pointer:fine){
    .es-ui .fx-spot{position:relative;isolation:isolate}
    .es-ui .fx-spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
      background:radial-gradient(320px circle at var(--fx-mx,50%) var(--fx-my,50%),rgba(50,171,245,.13),transparent 65%);
      opacity:0;transition:opacity .3s var(--ease-out)}
    .es-ui .fx-spot:hover::before{opacity:1}
    .es-ui .sector:hover .tile .i{animation:es-fx-wiggle .5s var(--ease-spring)}
  }
}

/* 10. Images clés ========================================================== */
@keyframes es-fx-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes es-fx-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes es-fx-pop-in{from{opacity:0;transform:scale(.8)}}
@keyframes es-fx-shot-in{from{transform:translateX(64px) scale(.97)}}
@keyframes es-fx-badge-in{from{opacity:0;transform:translateY(12px) scale(.7)}}
@keyframes es-fx-float{from{translate:0 0}to{translate:0 -10px}}
@keyframes es-fx-glow{to{opacity:.55;transform:scale(1.08)}}
@keyframes es-fx-drift-a{to{transform:translate(-140px,90px) scale(1.12)}}
@keyframes es-fx-drift-b{to{transform:translate(160px,-70px) scale(.9)}}
@keyframes es-fx-shine{0%{transform:translateX(-110%)}35%,100%{transform:translateX(110%)}}
@keyframes es-fx-grow{from{transform:scaleX(0)}}
@keyframes es-fx-hl{from{background-size:0 100%}}
@keyframes es-fx-ping{from{transform:scale(1);opacity:.7}70%,to{transform:scale(1.6);opacity:0}}
@keyframes es-fx-breathe{50%{transform:translate(-50%,-50%) scale(1.07);opacity:.6}}
@keyframes es-fx-ripple{from{transform:scale(1);opacity:1}to{transform:scale(1.3);opacity:0}}
@keyframes es-fx-wiggle{30%{transform:scale(1.18) rotate(-8deg)}60%{transform:scale(.96) rotate(4deg)}}

/* 11. Préférences système et impression ==================================== */
@media (forced-colors:active){
  .es-ui .fx-progress,.es-ui .hero__grid::before,.es-ui .hero__grid::after,.es-ui .panel--grad .es-btn--white::after,
  .es-ui .yt__play::before,.es-ui .cta-final__ring::after,.es-ui .fx-spot::before{display:none}
}
@media print{.es-ui .fx-progress{display:none}}