/* Build360 — mouvement de l'application (AUDIT-39). Actif seulement sous html.b360-motion (posé par js/motion.js). */

/* 1. Entrée d'écran, au changement d'écran seulement. Le conteneur ne fait qu'un fondu : un transform sur
   #app-content décalerait ses éléments position:fixed (barre d'actions des plans sur mobile). La profondeur
   vient des cartes KPI, qui basculent une à une. */
html.b360-motion #app-content.b360-enter{animation:b360-enter .22s ease-out both;}
@keyframes b360-enter{from{opacity:.001}to{opacity:1}}
/* Les cartes KPI arrivent en léger décalage, comme posées une à une. */
html.b360-motion #app-content.b360-enter .kpi{animation:b360-kpi-in .42s cubic-bezier(.2,.9,.25,1.15) both;}
html.b360-motion #app-content.b360-enter .kpi:nth-child(2){animation-delay:.04s}
html.b360-motion #app-content.b360-enter .kpi:nth-child(3){animation-delay:.08s}
html.b360-motion #app-content.b360-enter .kpi:nth-child(4){animation-delay:.12s}
html.b360-motion #app-content.b360-enter .kpi:nth-child(n+5){animation-delay:.16s}
@keyframes b360-kpi-in{
  from{opacity:0;transform:perspective(800px) rotateX(-14deg) translateY(14px) scale(.98);}
  to{opacity:1;transform:none;}
}

/* 2. Inclinaison des KPI sous la souris (pointeur fin uniquement) + reflet qui suit le curseur. */
html.b360-motion--fine .kpi{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;position:relative;}
html.b360-motion--fine .kpi.is-tilting{transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d;transition:transform .08s linear, box-shadow .2s ease;box-shadow:0 14px 28px rgba(17,24,39,.12),0 2px 6px rgba(17,24,39,.06);}
html.b360-motion--fine .kpi::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),rgba(255,179,0,.16),transparent 55%);
}
html.b360-motion--fine .kpi.is-tilting::after{opacity:1}
html.b360-motion--fine .kpi .kpi__ico{transition:transform .35s cubic-bezier(.2,.8,.2,1);}
html.b360-motion--fine .kpi.is-tilting .kpi__ico{transform:translateZ(22px) scale(1.06);}

/* 3. Chiffres qui défilent : chasse fixe pour qu'ils ne « dansent » pas. */
html.b360-motion .kpi__val.is-counting{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  html.b360-motion #app-content.b360-enter,html.b360-motion #app-content.b360-enter .kpi{animation:none!important}
  html.b360-motion--fine .kpi{transform:none!important}
}