/* Small transform/opacity effects never hide or delay actionable content. */
@keyframes light-arrive{from{opacity:.96}to{opacity:1}}
@keyframes light-silver{0%,20%{transform:translate3d(-120%,0,0);opacity:0}36%,66%{opacity:.65}90%,100%{transform:translate3d(370%,0,0);opacity:0}}
.light-enter{animation:light-arrive .24s cubic-bezier(.2,.7,.3,1)}
.light-sheen{position:absolute;z-index:2;pointer-events:none;bottom:28px;left:0;width:32%;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent);animation:light-silver 9s linear infinite;animation-play-state:paused}
[data-light-active] .light-sheen{animation-play-state:running;will-change:transform}
body[data-light-stopped] .light-sheen,body[data-light-stopped] .light-enter{animation-play-state:paused!important}
body[data-light-stopped] .light-enter{animation:none!important}
.light-motion-toggle{position:fixed;z-index:70;bottom:20px;right:20px;padding:10px 16px;min-height:44px;border:1px solid #aaa;border-radius:999px;background:#f3f3f1;color:#191919;font:11px Arial,sans-serif;cursor:pointer}
:where(.faevia-motion,.sample-wrap,body:has(.sample-wrap)) :is(.pill,.sample-button,.text-link,.sample-link,button){transition:transform .16s ease,background-color .16s ease,border-color .16s ease}
:where(.faevia-motion,body:has(.sample-wrap)) :is(.pill,.sample-button,button):active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){
 :where(.faevia-motion,body:has(.sample-wrap)) :is(.pill,.sample-button,button):hover{transform:none}
 :where(.faevia-motion,body:has(.sample-wrap)) a i.ph-arrow-right{transition:transform .18s ease}
 :where(.faevia-motion,body:has(.sample-wrap)) a:hover i.ph-arrow-right{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){.light-enter,.light-sheen{animation:none!important}.light-sheen{display:none}:where(.faevia-motion,body:has(.sample-wrap)) :is(a,button){transition:none!important}}