/* ==========================================================
   ORASAL — Motion layer (CSS)
   Pairs with assets/motion.js. Dependency-free.
   ========================================================== */

/* No looping / ambient animation — motion only reacts to the user */
*,*::before,*::after{animation:none !important}
#hcan,.curdot,.curring,.orb{display:none !important}
body{cursor:auto !important}

/* Elements whose transform is driven by spring physics in motion.js
   must not also transition `transform` in CSS (double smoothing). */
.mo-ready{
  transition-property:box-shadow,border-color,background,background-color,color,opacity,filter !important;
}

/* Cursor-following highlight on cards */
.mo-glow{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(96,165,250,.18),transparent 62%);
}
.mo-hover>.mo-glow{opacity:1}
[data-theme="light"] .mo-glow{
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.12),transparent 62%);
}

/* Springy sliding pill behind desktop nav links */
.nlinks{position:relative}
.nlinks li,.nlinks a{position:relative;z-index:1}
.nlinks a:hover{background:transparent !important}
.mo-pill{
  position:absolute;left:0;top:0;z-index:0;border-radius:999px;pointer-events:none;
  background:rgba(59,130,246,.15);box-shadow:inset 0 0 0 1px rgba(96,165,250,.25);
  opacity:0;will-change:transform,width;
}
[data-theme="light"] .mo-pill{background:rgba(37,99,235,.10);box-shadow:inset 0 0 0 1px rgba(37,99,235,.2)}

/* Overshoot (spring-like) easing for small controls */
.hbtn span{transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,width .3s ease !important}
.hbtn:active{transform:scale(.88)}
.hbtn{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.theme-toggle-knob{transition:transform .5s cubic-bezier(.34,1.56,.64,1) !important}

/* Floating chat icons: right side, compact, every screen size */
.wa-float,#ai-chat-btn{left:auto !important;right:14px !important}
.wa-float{width:42px !important;height:42px !important;bottom:16px !important}
.wa-float svg{width:22px !important;height:22px !important}
#ai-chat-btn{width:38px !important;height:38px !important;bottom:66px !important}
#ai-chat-btn svg{width:18px !important;height:18px !important}
#ai-chat-window{left:auto !important;right:14px !important;bottom:112px !important;width:min(340px,calc(100vw - 28px)) !important}
@supports(padding:env(safe-area-inset-right)){
  .wa-float,#ai-chat-btn,#ai-chat-window{right:calc(14px + env(safe-area-inset-right)) !important}
  .wa-float{bottom:calc(16px + env(safe-area-inset-bottom)) !important}
  #ai-chat-btn{bottom:calc(66px + env(safe-area-inset-bottom)) !important}
  #ai-chat-window{bottom:calc(112px + env(safe-area-inset-bottom)) !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;scroll-behavior:auto !important}
}