/* ===== 26 Academy — Apple Sprint : couche de sophistication visuelle (forme only) =====
   Motion premium, profondeur, micro-interactions. Respecte prefers-reduced-motion.
   Stack inchangée : s'ajoute par-dessus l'existant sans toucher au fond. */

/* ---- easing tokens ---- */
:root{ --as-ease:cubic-bezier(.16,1,.3,1); }

/* ---- reveal enrichi (scale + variantes), GPU-friendly (transform/opacity only) ---- */
[data-as]{opacity:0;will-change:transform,opacity;transition:opacity .9s var(--as-ease),transform 1s var(--as-ease)}
[data-as].as-in{opacity:1;transform:none}
[data-as="up"]{transform:translateY(34px) scale(.99)}
[data-as="fade"]{transform:none}
[data-as="scale"]{transform:scale(.94)}
[data-as="left"]{transform:translateX(-40px)}
[data-as="right"]{transform:translateX(40px)}
[data-as-d="1"]{transition-delay:.08s}[data-as-d="2"]{transition-delay:.16s}[data-as-d="3"]{transition-delay:.24s}
[data-as-d="4"]{transition-delay:.32s}[data-as-d="5"]{transition-delay:.4s}[data-as-d="6"]{transition-delay:.48s}

/* upgrade des .reveal existants : ajoute un léger scale + blur-in cinématique */
.reveal{transition:opacity 1s var(--as-ease),transform 1s var(--as-ease)!important}
.as-blur{filter:blur(14px);transition:filter 1.1s var(--as-ease),opacity 1s var(--as-ease),transform 1s var(--as-ease)!important}
.as-blur.in,.as-blur.as-in{filter:blur(0)}

/* ---- tilt 3D (perspective au mouvement souris) ---- */
[data-tilt]{transform-style:preserve-3d;transition:transform .5s var(--as-ease),box-shadow .5s var(--as-ease);will-change:transform}
[data-tilt] .as-lift{transform:translateZ(36px)}

/* ---- hover glow ---- */
.as-glow{position:relative}
.as-glow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(180px 120px at var(--mx,50%) var(--my,0%),rgba(99,91,255,.18),transparent 70%);
  transition:opacity .45s var(--as-ease)}
.as-glow:hover::after{opacity:1}

/* ---- ripple sur boutons ---- */
.btn{position:relative;overflow:hidden}
.as-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);pointer-events:none;
  animation:as-ripple .65s var(--as-ease) forwards;mix-blend-mode:overlay}
@keyframes as-ripple{to{transform:scale(2.4);opacity:0}}

/* ---- profondeur : ombres sophistiquées + glass ---- */
.as-depth{box-shadow:0 2px 6px -2px rgba(10,37,64,.06),0 12px 28px -12px rgba(10,37,64,.18),0 40px 80px -40px rgba(10,37,64,.28)}
.as-glass{background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.7)}

/* ---- hero push-in cinématique au chargement ---- */
@keyframes as-pushin{from{opacity:0;transform:scale(.965) translateY(14px)}to{opacity:1;transform:none}}
.as-pushin{animation:as-pushin 1.1s var(--as-ease) both}
.as-pushin-1{animation-delay:.15s}.as-pushin-2{animation-delay:.28s}.as-pushin-3{animation-delay:.42s}

/* ---- shimmer subtil sur badges/chiffres clés ---- */
@keyframes as-shine{0%{background-position:-180% 0}60%,100%{background-position:180% 0}}
.as-shine{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  background-size:200% 100%;background-repeat:no-repeat;animation:as-shine 4.5s ease-in-out infinite}

/* ---- TRAJECTOIRE : avatar token qui avance + micro-données ---- */
.traj-avatar{position:absolute;left:50%;top:0;width:30px;height:30px;border-radius:50%;transform:translate(-50%,-50%);
  z-index:4;background:linear-gradient(135deg,#635BFF,#4F46E5);display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 24px -8px rgba(99,91,255,.7),0 0 0 4px #fff;transition:top .7s var(--as-ease);opacity:0}
.traj-avatar svg{width:15px;height:15px;stroke:#fff;fill:none}
.traj-avatar::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(99,91,255,.5);
  animation:as-avatarpulse 1.9s ease-out infinite}
@keyframes as-avatarpulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.traj-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:.55rem;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--as-ease),opacity .45s var(--as-ease)}
.traj-step.active .traj-meta{max-height:60px;opacity:1}
.traj-mchip{display:inline-flex;align-items:center;gap:.32rem;font-size:.68rem;font-weight:600;padding:.24rem .58rem;
  border-radius:999px;background:#F1F0FF;color:#4F46E5;border:1px solid #E3E0FF}
.traj-mchip svg{width:11px;height:11px;stroke:currentColor;fill:none}

@media (prefers-reduced-motion:reduce){
  [data-as],[data-tilt],.as-blur,.as-pushin,.as-shine,.traj-avatar,.traj-avatar::before{
    animation:none!important;transition:none!important;opacity:1!important;filter:none!important;transform:none!important}
  [data-tilt]{transform:none!important}
}