/* ==========================================================================
   Kler — Motion layer
   Sans dépendance. Rien n'est masqué tant que motion.js n'a pas ajouté
   .m-ready sur <html> (contenu visible si le JS échoue + SEO intact).
   ========================================================================== */

:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);     /* easeOutQuint : rapide puis doux */
  --m-spring: cubic-bezier(.34, 1.56, .64, 1); /* léger rebond */
  --m-dur: .8s;
  --m-glow: #6D5EF1;                           /* kler-500 */
  --m-ping: rgba(239, 68, 68, .45);
}

/* ---------- Révélations au scroll ---------- */
.m-ready [data-m] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
  transition-delay: var(--m-delay, 0s);
  will-change: opacity, transform;
}
.m-ready [data-m="fade"]   { transform: none; }
.m-ready [data-m="scale"]  { transform: translateY(16px) scale(.96); }
.m-ready [data-m="left"]   { transform: translateX(-32px); }
.m-ready [data-m="right"]  { transform: translateX(32px); }
.m-ready [data-m="notif"]  { transform: translateX(40px) scale(.96); }

/* Mockup du hero : arrive incliné puis se pose à plat */
.m-ready [data-m="mockup"] {
  transform: perspective(1400px) rotateX(14deg) translateY(60px) scale(.96);
  transform-origin: 50% 0;
  transition-duration: 1.2s;
}

/* Tampon "Envoyée & archivée" / "Conforme 2026" */
.m-ready [data-m="stamp"] {
  transform: scale(1.8) rotate(-12deg);
  transition: opacity .25s ease, transform .55s var(--m-spring);
  transition-delay: var(--m-delay, 0s);
}

/* Titre ligne par ligne, effet masque :
   <span data-m="mask"><span>Simplifiez votre quotidien.</span></span> */
.m-ready [data-m="mask"] { opacity: 1; transform: none; display: block; overflow: hidden; }
.m-ready [data-m="mask"] > * {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--m-ease);
  transition-delay: var(--m-delay, 0s);
}
.m-ready [data-m="mask"].m-in > * { transform: none; }

/* État final commun */
.m-ready [data-m].m-in { opacity: 1; transform: none; }

/* ---------- Saisie au clavier ---------- */
.m-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.12em;
  background: currentColor;
  animation: m-caret .8s steps(1) infinite;
}
@keyframes m-caret { 50% { opacity: 0; } }

/* ---------- Inclinaison au survol (desktop) ----------
   À poser sur un élément DIFFÉRENT de celui qui porte data-m
   (ex. le cadre intérieur du mockup), sinon les transforms se battent. */
[data-m-tilt] {
  transform: perspective(1200px) rotateX(var(--m-rx, 0deg)) rotateY(var(--m-ry, 0deg));
  transition: transform .5s var(--m-ease);
  transform-style: preserve-3d;
}

/* ---------- Bordure lumineuse tournante (carte "Recommandé") ---------- */
@property --m-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
[data-m-glow] { position: relative; isolation: isolate; }
[data-m-glow]::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--m-angle), transparent 0 65%, var(--m-glow) 85%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: m-spin 5s linear infinite;
  pointer-events: none;
}
@keyframes m-spin { to { --m-angle: 360deg; } }

/* ---------- Pulsation (badge Alertes, pastille d'échéance) ---------- */
[data-m-ping] { position: relative; }
[data-m-ping]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--m-ping);
  animation: m-ping 2.4s var(--m-ease) infinite;
  pointer-events: none;
}
@keyframes m-ping { 70%, 100% { box-shadow: 0 0 0 10px transparent; } }

/* ---------- Rotator (mot qui change dans une phrase) ---------- */
[data-rotate] {
  display: inline-block;
  vertical-align: baseline;
}
[data-rotate] > span { display: inline-block; }
/* Fallback no-JS : seul le premier mot est visible, structure flow naturelle */
[data-rotate] > span ~ span { display: none; }
/* JS actif : tous les mots présents en absolute, animés par JS */
.m-ready [data-rotate] { position: relative; overflow: hidden; transition: width .45s var(--m-ease), height .45s var(--m-ease); }
.m-ready [data-rotate] > span { display: inline-block; position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(110%); transition: opacity .5s var(--m-ease), transform .5s var(--m-ease); white-space: nowrap; }
.m-ready [data-rotate] > span:first-child { opacity: 1; transform: translateY(0); }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-m-glow]::after, [data-m-ping]::before, .m-typing::after { animation: none; }
  [data-m-tilt] { transform: none !important; }
}