/* Global motion layer for the Enfoque App. Kept separate from module styles. */
:root{--app-motion-ease:cubic-bezier(.16,1,.3,1);--app-motion-fast:140ms;--app-motion-page:360ms}

/* Tactile feedback: fast enough to feel physical, subtle enough for operational use. */
button,.btn,.card[onclick],.list-item[onclick],.segment,.drawer-item,.quick-menu-button{
  -webkit-tap-highlight-color:transparent;
  transform-origin:center;
  transition:transform var(--app-motion-fast) var(--app-motion-ease),box-shadow 180ms ease,filter 160ms ease,opacity 160ms ease;
}
button:not(:disabled):not(.route-all-routes-full):active,.btn:not(:disabled):not(.route-all-routes-full):active,.card[onclick]:active,.list-item[onclick]:active,.segment:not(:disabled):active,.drawer-item:active,.quick-menu-button:active{
  transform:scale(.972);
  filter:brightness(.985);
}
@media(hover:hover) and (pointer:fine){
  .card[onclick]:hover,.list-item[onclick]:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,61,50,.09)}
  button:not(:disabled):hover,.btn:not(:disabled):hover{filter:brightness(.99)}
}

/* Exit happens on the old screen before render. */
.screen-scroll.app-page-exit-forward{animation:app-page-exit-forward 135ms cubic-bezier(.4,0,1,1) both}
.screen-scroll.app-page-exit-back{animation:app-page-exit-back 135ms cubic-bezier(.4,0,1,1) both}

/* The next screen settles in with a short blur/scale flow. */
.screen-scroll.app-page-enter-forward{animation:app-page-enter-forward var(--app-motion-page) var(--app-motion-ease) both}
.screen-scroll.app-page-enter-back{animation:app-page-enter-back var(--app-motion-page) var(--app-motion-ease) both}
.mobile-header-title.app-title-flow{animation:app-title-flow 300ms var(--app-motion-ease) both}

/* Wild-Rift-like stagger: major blocks flow into place one after another. */
.app-flow-item{opacity:0;animation:app-flow-card 390ms var(--app-motion-ease) both;animation-delay:var(--app-flow-delay,36ms);will-change:transform,opacity,filter}

/* Soft light sweep bridges the old and new pages without a heavy full-screen loader. */
.app-motion-veil{position:fixed;inset:0;z-index:160;pointer-events:none;opacity:0;overflow:hidden;contain:strict}
.app-motion-veil::before{content:"";position:absolute;inset:-12% -55%;background:linear-gradient(108deg,transparent 31%,rgba(8,127,105,.035) 40%,rgba(255,255,255,.42) 49%,rgba(8,127,105,.07) 56%,transparent 68%);transform:translate3d(-38%,0,0) skewX(-8deg)}
.app-motion-veil.play{animation:app-veil-fade 420ms ease both}
.app-motion-veil.play::before{animation:app-veil-sweep 420ms var(--app-motion-ease) both}

/* Modals also get the same responsive motion language. */
.modal-backdrop{animation:app-modal-backdrop 180ms ease both}
.modal{animation:app-modal-in 300ms var(--app-motion-ease) both;transform-origin:50% 58%}

@keyframes app-page-exit-forward{to{opacity:0;transform:translate3d(-13px,0,0) scale(.988);filter:blur(1.4px)}}
@keyframes app-page-exit-back{to{opacity:0;transform:translate3d(13px,0,0) scale(.988);filter:blur(1.4px)}}
@keyframes app-page-enter-forward{from{opacity:0;transform:translate3d(22px,0,0) scale(.982);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes app-page-enter-back{from{opacity:0;transform:translate3d(-22px,0,0) scale(.982);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes app-flow-card{from{opacity:0;transform:translate3d(18px,12px,0) scale(.974);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes app-title-flow{from{opacity:.25;transform:translateY(-5px);letter-spacing:.015em}to{opacity:1;transform:none;letter-spacing:normal}}
@keyframes app-veil-fade{0%{opacity:0}18%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes app-veil-sweep{from{transform:translate3d(-42%,0,0) skewX(-8deg)}to{transform:translate3d(42%,0,0) skewX(-8deg)}}
@keyframes app-modal-backdrop{from{opacity:0}to{opacity:1}}
@keyframes app-modal-in{from{opacity:0;transform:translateY(12px) scale(.965);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

@media(max-width:850px){
  :root{--app-motion-page:340ms}
}

@media(prefers-reduced-motion:reduce){
  :root{--app-motion-fast:1ms;--app-motion-page:1ms}
  .screen-scroll.app-page-exit-forward,.screen-scroll.app-page-exit-back,.screen-scroll.app-page-enter-forward,.screen-scroll.app-page-enter-back,.mobile-header-title.app-title-flow,.app-flow-item,.app-motion-veil.play,.app-motion-veil.play::before,.modal-backdrop,.modal{animation-duration:1ms!important;animation-delay:0ms!important}
  button,.btn,.card[onclick],.list-item[onclick],.segment,.drawer-item,.quick-menu-button{transition-duration:1ms!important}
}