/* MATE Motion — micro-interactions desktop. */

/* Navigation : un seul fond actif glisse physiquement entre les rubriques. */
body>aside nav{position:relative}
body>aside nav .mate-nav-slider{
 position:absolute;
 z-index:0;
 left:0;
 right:0;
 top:0;
 height:48px;
 border:1px solid rgba(101,226,186,.12);
 border-radius:10px;
 background:linear-gradient(90deg,rgba(75,187,208,.16),rgba(101,226,186,.12));
 box-shadow:inset 3px 0 0 rgba(101,226,186,.65),0 6px 18px rgba(0,0,0,.08);
 pointer-events:none;
 transition:transform .28s cubic-bezier(.22,.82,.32,1),height .2s ease;
 will-change:transform,height;
}
body>aside nav button{position:relative;z-index:1;transition:color .2s ease,transform .2s ease,opacity .2s ease!important}
body>aside nav button.active{background:transparent!important}
body>aside nav button:active{transform:scale(.985)}

/* La nouvelle rubrique entre légèrement dans le sens du déplacement. */
#content.mate-page-enter-next{animation:mate-page-enter-next .26s cubic-bezier(.2,.75,.3,1) both}
#content.mate-page-enter-prev{animation:mate-page-enter-prev .26s cubic-bezier(.2,.75,.3,1) both}
@keyframes mate-page-enter-next{
 from{opacity:.32;transform:translate3d(22px,0,0);filter:blur(1px)}
 to{opacity:1;transform:translate3d(0,0,0);filter:none}
}
@keyframes mate-page-enter-prev{
 from{opacity:.32;transform:translate3d(-22px,0,0);filter:blur(1px)}
 to{opacity:1;transform:translate3d(0,0,0);filter:none}
}

/* Like d'un Moment : petit punch tactile + glow. */
.v101-moment-like.mate-like-pop{animation:mate-like-button-pop .38s cubic-bezier(.18,.9,.32,1.35)}
.v101-moment-like.mate-like-pop::before{animation:mate-heart-pop .42s cubic-bezier(.15,.95,.3,1.45)}
@keyframes mate-like-button-pop{
 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,111,150,0)}
 42%{transform:scale(1.12);box-shadow:0 0 0 8px rgba(255,111,150,.10)}
 100%{transform:scale(1);box-shadow:0 0 0 13px rgba(255,111,150,0)}
}
@keyframes mate-heart-pop{
 0%{transform:translateY(-.2px) scale(.72)}
 50%{transform:translateY(-.2px) scale(1.38)}
 100%{transform:translateY(-.2px) scale(1)}
}

/* Réaction chat : l'emoji ajouté rebondit une seule fois. */
.mate-reaction-chip.mate-reaction-pop{animation:mate-reaction-pop .42s cubic-bezier(.16,.9,.28,1.35);transform-origin:center}
@keyframes mate-reaction-pop{
 0%{opacity:.45;transform:translateY(5px) scale(.7)}
 52%{opacity:1;transform:translateY(-2px) scale(1.18)}
 76%{transform:translateY(0) scale(.96)}
 100%{transform:translateY(0) scale(1)}
}

/* On garde le motion design desktop-only pour l'instant. */
@media(max-width:900px){
 body>aside nav .mate-nav-slider{display:none}
 #content.mate-page-enter-next,#content.mate-page-enter-prev{animation:none}
}
@media(prefers-reduced-motion:reduce){
 body>aside nav .mate-nav-slider,body>aside nav button{transition:none!important}
 #content.mate-page-enter-next,#content.mate-page-enter-prev,.v101-moment-like.mate-like-pop,.v101-moment-like.mate-like-pop::before,.mate-reaction-chip.mate-reaction-pop{animation:none!important}
}