/* ============================================================
   V-PRO — MOTION
   Dépend de tokens.css.

   RÈGLES
   1. Une animation doit expliquer quelque chose (origine, hiérarchie,
      changement d'état). Sinon elle ne va pas en production.
   2. Entrée : opacité + 10-14px de translation. Jamais de scale sur un bloc.
   3. Rebond (--e-pop) réservé aux petits objets : icônes, points, curseurs.
   4. Tout ce qui boucle doit être lent (>2s) et discret (<20% d'amplitude).
   5. prefers-reduced-motion coupe tout : bloc en fin de fichier, non négociable.
   ============================================================ */

/* ---------- 1. ENTRÉES ---------- */

/* Bloc qui apparaît. Cascader avec --stagger via style="animation-delay" */
@keyframes vp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.a-rise{animation:vp-rise var(--d-enter) var(--e-out) both}

/* Élément latéral (sidebar) */
@keyframes vp-slide-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.a-slide-in{animation:vp-slide-in var(--d-slow) var(--e-out) both}

/* Titre révélé mot par mot : envelopper chaque mot dans un <i class="a-word"> */
@keyframes vp-word{to{opacity:1;filter:blur(0);transform:none}}
.a-word{
  font-style:normal;display:inline-block;
  opacity:0;filter:blur(9px);transform:translateY(14px);
  animation:vp-word .75s var(--e-out) both;
}

/* Apparition d'un point / petit objet */
@keyframes vp-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.a-pop{animation:vp-pop .5s var(--e-pop) both}

@keyframes vp-fade{to{opacity:1}}
.a-fade{opacity:0;animation:vp-fade .9s ease-out both}

/* Logo au chargement — une seule fois, au premier écran */
@keyframes vp-mark-in{from{opacity:0;transform:rotate(-25deg) scale(.6)}to{opacity:1;transform:none}}
.a-mark-in{animation:vp-mark-in .7s var(--e-spring) both}


/* ---------- 2. ÉTATS VIVANTS (boucles) ---------- */

/* LED de statut : anneau qui se propage. Sur tout ce qui est "en direct". */
@keyframes vp-led{
  0%  {box-shadow:0 0 0 0   rgba(74,222,128,.5)}
  70% {box-shadow:0 0 0 6px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0   rgba(74,222,128,0)}
}
.a-led{width:5px;height:5px;border-radius:var(--r-pill);background:var(--green);animation:vp-led 2.4s infinite}
.a-led.is-alert{background:var(--red);animation-name:vp-led-alert}
@keyframes vp-led-alert{
  0%{box-shadow:0 0 0 0 rgba(248,113,113,.5)}70%{box-shadow:0 0 0 6px rgba(248,113,113,0)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}
}

/* Halo autour du point terminal d'une courbe */
@keyframes vp-halo{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.a-halo{transform-box:fill-box;transform-origin:center;animation:vp-halo 2.6s ease-out 1.8s infinite}

/* Objet en lévitation (orbe assistant) */
@keyframes vp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.a-float{animation:vp-float 5s ease-in-out infinite}

/* Étincelle IA */
@keyframes vp-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86) rotate(12deg)}}
.a-twinkle{animation:vp-twinkle 3.4s ease-in-out infinite}

/* Aurores de fond. Deux blobs, jamais plus, jamais nets. */
@keyframes vp-drift {from{transform:translate(0,0) scale(1)}to{transform:translate(-90px,60px) scale(1.12)}}
@keyframes vp-drift2{from{transform:translate(0,0)}         to{transform:translate(120px,-50px)}}
.a-glow{
  position:absolute;pointer-events:none;filter:blur(22px);
  top:-280px;right:-140px;width:860px;height:600px;
  background:radial-gradient(closest-side,rgba(139,124,246,.32),rgba(47,216,180,.10) 55%,transparent);
  animation:vp-drift 26s ease-in-out infinite alternate;
}
.a-glow--2{
  top:auto;right:auto;bottom:-200px;left:180px;width:620px;height:420px;opacity:.5;
  background:radial-gradient(closest-side,rgba(47,216,180,.22),transparent);
  animation:vp-drift2 32s ease-in-out infinite alternate;
}
[data-theme="light"] .a-glow{opacity:.4}
[data-theme="light"] .a-glow--2{opacity:.25}


/* ---------- 3. DONNÉES QUI SE CONSTRUISENT ---------- */

/* Courbe qui se dessine. Le <path> DOIT porter pathLength="1". */
@keyframes vp-draw{to{stroke-dashoffset:0}}
.a-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:vp-draw var(--d-draw) cubic-bezier(.3,.9,.3,1) .35s forwards}
/* Redessin au survol de la carte parente : nom d'animation différent = re-déclenchement */
@keyframes vp-redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.has-redraw:hover .a-draw{animation:vp-redraw 1s cubic-bezier(.3,.9,.3,1) forwards}

/* Jauge : largeur pilotée en JS (fillTracks), transition en CSS */
.a-track{height:5px;border-radius:var(--r-pill);background:var(--tile);overflow:hidden}
.a-track > i{
  display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transition:width 1.1s var(--e-out);
}

/* Barre de planning qui pousse depuis son origine temporelle */
@keyframes vp-grow{from{transform:scaleX(.02);opacity:0}to{transform:scaleX(1);opacity:1}}
.a-grow{transform-origin:left center;animation:vp-grow .8s var(--e-out) both}
.a-grow > *{animation:vp-fade .5s ease-out .5s both}  /* le contenu n'est pas étiré */


/* ---------- 4. INTERACTIONS ---------- */

/* Bordure-projecteur qui suit le curseur.
   Le JS pose --mx / --my sur l'élément (voir motion.js → spotlight). */
.i-spot{position:relative;overflow:hidden;transition:transform var(--d) var(--e-out),box-shadow var(--d)}
.i-spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),var(--accent),transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.i-spot:hover::before{opacity:.9}
.i-spot:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}

/* Reflet balayant sur le bouton principal */
@keyframes vp-sheen{to{left:160%}}
.i-sheen{position:relative;overflow:hidden}
.i-sheen::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}
.i-sheen:hover::after{animation:vp-sheen .8s ease-out}

/* Ligne de liste : glisse vers la droite, jamais vers le haut */
.i-row{transition:transform .22s var(--e-out),border-color var(--d-fast),background var(--d-fast)}
.i-row:hover{transform:translateX(4px)}

/* Carte de kanban : léger désaxement, comme une carte qu'on soulève */
.i-lift{transition:transform var(--d) var(--e-out),border-color var(--d-fast),box-shadow var(--d)}
.i-lift:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 18px 34px -22px rgba(0,0,0,.9)}

/* Action rapide révélée au survol d'une ligne de tableau */
.i-reveal{opacity:0;transform:translateX(6px);transition:.22s var(--e-out)}
tr:hover .i-reveal,.i-row:hover .i-reveal{opacity:1;transform:none}

/* Icône qui réagit */
.i-icon{transition:transform var(--d) var(--e-spring)}
.i-parent:hover .i-icon{transform:translateY(-2px) scale(1.08)}
.i-rotate{transition:transform var(--d) var(--e-spring)}
.i-parent:hover .i-rotate{transform:rotate(90deg)}


/* ---------- 5. SURFACES QUI ARRIVENT ---------- */

/* Indicateur de navigation qui glisse (position posée en JS) */
.i-glider{position:absolute;left:0;right:0;border-radius:var(--r-sm);background:var(--tile);
  box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .42s cubic-bezier(.34,1.4,.5,1);z-index:0}
.i-glider::before{content:"";position:absolute;left:-14px;top:11px;bottom:11px;width:2px;
  border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* Tiroir latéral */
.s-drawer-scrim{position:fixed;inset:0;z-index:180;background:rgba(4,5,9,.55);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity var(--d)}
.s-drawer-scrim.is-open{opacity:1;pointer-events:auto}
.s-drawer{position:absolute;top:0;right:0;bottom:0;width:min(440px,94vw);
  transform:translateX(100%);transition:transform .42s var(--e-drawer);box-shadow:-30px 0 80px -30px rgba(0,0,0,.9)}
.s-drawer-scrim.is-open .s-drawer{transform:none}

/* Palette de commandes */
@keyframes vp-pal-in{from{opacity:0;transform:translateY(-18px) scale(.96)}to{opacity:1;transform:none}}
.s-modal-scrim{position:fixed;inset:0;z-index:200;display:none;place-items:start center;padding-top:14vh;
  background:rgba(4,5,9,.6);backdrop-filter:blur(8px)}
.s-modal-scrim.is-open{display:grid;animation:vp-fade .2s ease-out both;opacity:1}
.s-modal{animation:vp-pal-in .32s cubic-bezier(.2,1.2,.4,1) both}

/* Toast */
.s-toast{position:fixed;right:24px;bottom:24px;z-index:300;
  transform:translateY(120%);opacity:0;transition:.42s cubic-bezier(.2,1.1,.4,1)}
.s-toast.is-open{transform:none;opacity:1}

/* Flux d'activité : une ligne remplace la précédente par le bas */
.s-feed{position:relative;overflow:hidden}
.s-feed > *{position:absolute;inset:0;opacity:0;transform:translateY(100%);
  transition:opacity .5s,transform .5s var(--e-out)}
.s-feed > *.is-show{opacity:1;transform:none}
.s-feed > *.is-out{opacity:0;transform:translateY(-100%)}

/* Interrupteur */
.s-switch{width:40px;height:23px;border-radius:var(--r-pill);background:var(--tile);position:relative;
  flex:none;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2);transition:var(--d)}
.s-switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:var(--text-3);transition:.32s var(--e-pop)}
.s-switch.is-on{background:var(--accent-dim);box-shadow:inset 0 0 0 1px var(--accent)}
.s-switch.is-on::after{transform:translateX(17px);background:var(--accent);box-shadow:0 0 12px var(--accent)}


/* ---------- 6. ACCESSIBILITÉ ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .a-draw{stroke-dashoffset:0}
  .a-fade,.a-pop,.a-rise,.a-slide-in,.a-word{opacity:1;filter:none;transform:none}
  .a-track > i{transition:none}
}