/* ==========================================================================
   Mouvement piloté par le défilement — traduit les variables écrites par
   js/motion/scroll-engine.js (--in, --out, --p, --u) et js/motion/pointer.js
   (--rx, --ry) en transform / opacity uniquement.
   Sans JavaScript (.sfx-ready absent), tout reste simplement visible.
   ========================================================================== */

/* ---------- Bloc qui monte (data-sfx="rise") ---------- */
.sfx-ready [data-sfx="rise"],.sfx-ready [data-sfx="count"]{
  --e:calc((1 - var(--in,0)) * (1 - var(--in,0)));
  --x:calc(var(--out,0) * var(--out,0));
  opacity:clamp(0,calc(1 - var(--e) * 1.15 - var(--x) * .6),1);
  transform:
    perspective(1200px)
    translate3d(0,calc(var(--e) * 72px - var(--x) * 34px),0)
    rotateX(calc(var(--e) * 10deg - var(--x) * 5deg + var(--rx,0deg)))
    rotateY(var(--ry,0deg))
    scale(calc(1 - var(--e) * .06 - var(--x) * .04));
}
.sfx-live:not(.sfx-rest){will-change:transform,opacity}
/* posé (--in = 1, --out = 0) : plus de calque 3D, le texte est rendu net */
.sfx-ready .sfx-rest[data-sfx="rise"]:not([data-tilt]),.sfx-ready .sfx-rest[data-sfx="count"]{transform:none}

/* ---------- Titre en balayage de lumière (data-sfx="wipe") ---------- */
.sfx-ready [data-sfx="wipe"]{
  --k:clamp(0,calc(var(--in,0) * 1.25),1);
  background:linear-gradient(100deg,var(--text) calc(var(--k) * 100% - 12%),#F472B6 calc(var(--k) * 100%),rgba(245,245,247,.16) calc(var(--k) * 100% + 10%));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:calc(1 - var(--out,0) * .7);
}
.sfx-ready [data-sfx="wipe"] .grad-text{background:var(--iris);-webkit-background-clip:text;background-clip:text}

/* ---------- Titre découpé en mots ([data-split-words]) ---------- */
.sw{
  --k:clamp(0,calc((var(--in,1) * (var(--words,1) + 2) - var(--w,0)) / 2),1);
  display:inline-block;
  opacity:calc(.1 + var(--k) * .9);
  transform:translateY(calc((1 - var(--k)) * .38em));
}

.sw-keep{white-space:nowrap}

/* ---------- Inclinaison au pointeur seule ([data-tilt] sans data-sfx) ---------- */
[data-tilt]:not([data-sfx]){
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-out);
}

/* ---------- Pile de cartes (data-sfx="stack") : une carte par --u ----------
   --u < 0 : pas encore arrivée (--a = distance restante) · --u > 0 : passée dessous (--d) */
[data-stack-card]{
  --a:clamp(0,calc(-1 * var(--u,0)),1);
  --d:max(0,var(--u,0));
  transform:
    perspective(1400px)
    translate3d(0,calc(var(--a) * 62vh - var(--d) * 26px),calc(var(--d) * -95px))
    rotateX(calc(var(--a) * -14deg + var(--rx,0deg)))
    rotateY(var(--ry,0deg));
  opacity:clamp(0,calc(1 - var(--a) * 1.5 - var(--d) * .3),1);
}
[data-stack-dot]{opacity:calc(.28 + var(--near,0) * .72);transform:scale(calc(1 + var(--near,0) * .6))}

@media (prefers-reduced-motion:reduce){
  .sfx-ready [data-sfx],.sw,[data-stack-card],[data-tilt]{opacity:1!important;transform:none!important;filter:none!important}
  .sfx-ready [data-sfx="wipe"]{background:none;color:var(--text)}
}