/* Motion system — short, purposeful feedback for the Réussite web app. */
:root{
  --ru-motion-fast:160ms;
  --ru-motion-base:240ms;
  --ru-motion-slow:360ms;
  --ru-motion-ease:cubic-bezier(.22,1,.36,1);
}

@keyframes ruViewEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ruItemEnter{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:none}}
@keyframes ruModalEnter{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
@keyframes ruBackdropEnter{from{opacity:0}to{opacity:1}}
@keyframes ruCheckPop{0%{transform:scale(.72)}65%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes ruSoftShine{0%{transform:translateX(-130%)}100%{transform:translateX(230%)}}
@keyframes ruRipple{to{transform:scale(3.5);opacity:0}}

body.ru-motion-ready .rs-view.show{animation:ruViewEnter var(--ru-motion-base) var(--ru-motion-ease) both}
body.ru-motion-ready .ru-motion-item{opacity:0;animation:ruItemEnter var(--ru-motion-slow) var(--ru-motion-ease) forwards;animation-delay:var(--ru-motion-delay,0ms)}

/* Clear feedback without changing layout. */
body.ru-motion-ready .reussite-ui button,
body.ru-motion-ready .reussite-ui [role="button"],
body.ru-motion-ready .reussite-ui a{
  -webkit-tap-highlight-color:transparent;
}
body.ru-motion-ready .reussite-ui button:not(:disabled),
body.ru-motion-ready .reussite-ui [role="button"]{transition:transform var(--ru-motion-fast) ease,box-shadow var(--ru-motion-base) ease,background-color var(--ru-motion-fast) ease,border-color var(--ru-motion-fast) ease,color var(--ru-motion-fast) ease}
body.ru-motion-ready .reussite-ui button:not(:disabled):active,
body.ru-motion-ready .reussite-ui [role="button"]:active{transform:translateY(1px) scale(.985)}
body.ru-motion-ready .reussite-ui button:focus-visible,
body.ru-motion-ready .reussite-ui a:focus-visible,
body.ru-motion-ready .reussite-ui [role="button"]:focus-visible{outline:3px solid rgba(9,107,255,.28);outline-offset:3px}

/* Sidebar feels like one continuous app instead of separate pages. */
body.ru-motion-ready .sb-item .ico,
body.ru-motion-ready .pn-item .ico{transition:transform var(--ru-motion-base) var(--ru-motion-ease),color var(--ru-motion-fast) ease}
body.ru-motion-ready .sb-item:hover .ico,
body.ru-motion-ready .pn-item:hover .ico{transform:translateX(2px)}
body.ru-motion-ready .sb-item.on .ico,
body.ru-motion-ready .pn-item.active .ico{transform:scale(1.06)}

/* Cards lift subtly only on devices that support hover. */
@media (hover:hover){
  body.ru-motion-ready .rs-card,
  body.ru-motion-ready .ru-activity-card,
  body.ru-motion-ready .ru-tool-card,
  body.ru-motion-ready .ru-source-list article,
  body.ru-motion-ready .ru-expert-grid article{transition:transform var(--ru-motion-base) var(--ru-motion-ease),box-shadow var(--ru-motion-base) ease,border-color var(--ru-motion-fast) ease}
  body.ru-motion-ready .rs-card:hover,
  body.ru-motion-ready .ru-activity-card:hover,
  body.ru-motion-ready .ru-tool-card:hover,
  body.ru-motion-ready .ru-source-list article:hover,
  body.ru-motion-ready .ru-expert-grid article:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(25,65,122,.09)}
}

/* Progress changes read as progress, without continuous decoration. */
body.ru-motion-ready .prog-fill,
body.ru-motion-ready .pn-bar,
body.ru-motion-ready .rs-step-bar,
body.ru-motion-ready .rs-hero-prog-fill{position:relative;overflow:hidden;transition:width 650ms var(--ru-motion-ease)}
body.ru-motion-ready .ru-progress-animate::after{content:"";position:absolute;inset:0 auto 0 0;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:ruSoftShine 720ms ease-out 1 both}

/* Success state is acknowledged once when a task becomes complete. */
body.ru-motion-ready .ru-just-completed .rs-task-chk,
body.ru-motion-ready .ru-just-completed .tc-chk{animation:ruCheckPop 320ms var(--ru-motion-ease)}

/* Existing and dynamically inserted modals share the same entrance. */
body.ru-motion-ready .ru-modal-visible{animation:ruBackdropEnter 180ms ease-out both}
body.ru-motion-ready .ru-modal-visible > .rs-modal,
body.ru-motion-ready .ru-modal-visible > .popup-card,
body.ru-motion-ready .ru-modal-visible > .rs-visit-card,
body.ru-motion-ready .ru-modal-visible > .rs-offer-popup-card{animation:ruModalEnter 260ms var(--ru-motion-ease) both}
body.ru-motion-ready .ru-create-backdrop{animation:ruBackdropEnter 180ms ease-out both}
body.ru-motion-ready .ru-create-sheet{animation:ruModalEnter 280ms var(--ru-motion-ease) both}

/* Pointer ripple is clipped inside ordinary action buttons. */
body.ru-motion-ready .ru-ripple-host{position:relative;overflow:hidden}
.ru-ripple{position:absolute;z-index:0;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:rgba(255,255,255,.5);pointer-events:none;transform:scale(0);animation:ruRipple 480ms ease-out forwards}
.ru-ripple.dark{background:rgba(9,107,255,.14)}

@media (max-width:640px){
  body.ru-motion-ready .ru-motion-item{animation-duration:280ms}
  body.ru-motion-ready .rs-view.show{animation-duration:190ms}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  body.ru-motion-ready .ru-motion-item{opacity:1!important;transform:none!important}
  .ru-ripple{display:none!important}
}