:root{
  --motion-fast:120ms;--motion-base:190ms;--motion-slow:320ms;--motion-page:420ms;
  --motion-ease:cubic-bezier(.2,.8,.2,1);--motion-spring:cubic-bezier(.16,1,.3,1);--motion-press:scale(.985);
}
.oilora-motion :is(a,button,.btn,.icon-btn,.notify-btn,.branch-btn,[role="button"],input,select,textarea){
  transition-property:color,background-color,border-color,box-shadow,opacity,transform,filter;
  transition-duration:var(--motion-base);transition-timing-function:var(--motion-ease)
}
.oilora-motion :is(button,.btn,.icon-btn,.notify-btn,.branch-btn,[role="button"]):not(:disabled):not([aria-disabled="true"]):active{transform:var(--motion-press);transition-duration:70ms}
.oilora-motion :is(button,.btn,.icon-btn,a,input,select,textarea):focus-visible{transition-duration:var(--motion-fast)}

/* Route/view entry only animates content. Fixed navigation chrome never flies in. */
.oilora-motion .motion-enter{opacity:0;transform:translateY(8px);animation:oilora-enter var(--motion-page) var(--motion-spring) forwards;animation-delay:min(calc(var(--motion-order,0)*32ms),220ms);will-change:transform,opacity}
@keyframes oilora-enter{to{opacity:1;transform:none}}
html[data-motion-navigating="1"] #app{cursor:progress}
html[data-motion-navigating="1"] #app>.shell .content,html[data-motion-navigating="1"] #app>.customer-app .cp-main{opacity:.985}

/* Surface lift is hover-only; coarse/touch pointers keep layouts stable. */
@media(hover:hover) and (pointer:fine){
  .oilora-motion .motion-surface:not(.no-motion-lift){transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) var(--motion-ease),border-color var(--motion-base) var(--motion-ease)}
  .oilora-motion .motion-surface:not(.no-motion-lift):hover{transform:translateY(-1px)}
  .oilora-motion :is(.feature-card,.blog-card,.commerce-product-card,.public-product-card,.cp-vehicle-card,.pricing-card).motion-surface:hover{transform:translateY(-2px)}
}

/* Navigation state indicator — visual only, no hit-area changes. */
.oilora-motion :is(.sidebar a,.mobile-bottom-nav a,.automation-tabs button,.loyalty-tabs button,.crm-tabs button,.settings-tabs button,[data-ds-tab]){position:relative}
.oilora-motion :is(.mobile-bottom-nav a,.automation-tabs button,.loyalty-tabs button,.crm-tabs button,.settings-tabs button,[data-ds-tab])::after{content:"";position:absolute;inset-inline:18%;bottom:2px;height:2px;border-radius:999px;background:currentColor;transform:scaleX(0);opacity:0;transition:transform var(--motion-base) var(--motion-spring),opacity var(--motion-base) var(--motion-ease)}
.oilora-motion :is(.mobile-bottom-nav a,.automation-tabs button,.loyalty-tabs button,.crm-tabs button,.settings-tabs button,[data-ds-tab]).active::after{transform:scaleX(1);opacity:.58}

/* Dialogs, sheets, drawers and toast. */
.oilora-motion :is(.modal-backdrop,.drawer-backdrop,.mobile-drawer-backdrop,.res-drawer-backdrop,.commerce-drawer-backdrop){animation:oilora-backdrop-in var(--motion-base) var(--motion-ease) both}
.oilora-motion :is(.modal-backdrop .modal,.modal-backdrop [class*="-modal"],.res-drawer,.commerce-drawer){animation:oilora-dialog-in 300ms var(--motion-spring) both;transform-origin:50% 82%}
@keyframes oilora-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes oilora-dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.oilora-motion .toast{animation:oilora-toast-in 320ms var(--motion-spring) both}
@keyframes oilora-toast-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:760px){.oilora-motion :is(.modal-backdrop .modal,.modal-backdrop [class*="-modal"],.res-drawer,.commerce-drawer){animation-name:oilora-sheet-in;transform-origin:50% 100%}@keyframes oilora-sheet-in{from{opacity:.7;transform:translateY(22px)}to{opacity:1;transform:none}}}

/* Explicit loading assets only — no fake shimmer over already-loaded business panels. */
.oilora-motion :is(.skeleton,[class*="skeleton"]){position:relative;overflow:hidden}
.oilora-motion :is(.skeleton,[class*="skeleton"])::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(110%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);animation:oilora-shimmer 1.4s ease-in-out infinite}
@keyframes oilora-shimmer{to{transform:translateX(-110%)}}

/* Charts and numeric KPIs are progressive decoration only. */
.oilora-motion .motion-chart-reveal{transform-origin:bottom center;animation:oilora-chart-reveal 520ms var(--motion-spring) both}
@keyframes oilora-chart-reveal{from{opacity:.45;transform:scaleY(.88) translateY(3px)}to{opacity:1;transform:none}}
.oilora-motion [data-motion-counting="1"]{font-variant-numeric:tabular-nums}
.oilora-motion .motion-empty{animation:oilora-empty-in 360ms var(--motion-spring) both}
@keyframes oilora-empty-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Fine-pointer ripple only; touch avoids extra DOM/paint work. */
.oilora-motion :is(.btn,button,.icon-btn,.notify-btn,.branch-btn,[role="button"]){overflow:hidden}
.oilora-ripple-dot{position:absolute!important;border-radius:50%;pointer-events:none!important;z-index:9;background:currentColor;opacity:.11;transform:translate(-50%,-50%) scale(0);animation:oilora-ripple 500ms ease-out forwards!important}
@keyframes oilora-ripple{70%{opacity:.06}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* Reduced motion is a first-class mode and overrides legacy animation rules too. */
@media(prefers-reduced-motion:reduce){
  :root{--motion-fast:0ms;--motion-base:0ms;--motion-slow:0ms;--motion-page:0ms}
  html{scroll-behavior:auto!important}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .motion-enter,.motion-chart-reveal,.motion-empty{opacity:1!important;transform:none!important}
  .oilora-ripple-dot{display:none!important}
}