/* The pointer lives in the top layer so it also follows the cursor over menus. */
.portfolio-cursor{position:fixed;inset:0 auto auto 0;margin:0;padding:0;width:14px;height:14px;border:0;border-radius:50%;background:transparent;color:transparent;pointer-events:none!important;z-index:1000;overflow:visible;opacity:0;transform:translate3d(-100px,-100px,0) translate(-50%,-50%);transform-origin:50% 50%;transition:opacity .18s ease,width .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1),background .3s ease;will-change:transform}
.portfolio-cursor::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#455ce9;transform:scale(1);transition:background .3s ease,transform .2s ease}
.portfolio-cursor:popover-open{display:block}
.portfolio-cursor.is-visible{opacity:1}
.portfolio-cursor.is-hovering{width:44px;height:44px}
.portfolio-cursor.is-hovering::before{background:rgb(69 92 233 / .58)}
.portfolio-cursor.is-pressed::before{transform:scale(.8)}
.portfolio-cursor.is-text{opacity:0}
@media(hover:hover) and (pointer:fine){
 body.blue-cursor-ready,body.blue-cursor-ready :where(a,button,summary,[role="button"],[data-magnetic]){cursor:none!important}
 body.blue-cursor-ready :where(input,textarea,[contenteditable="true"]){cursor:text!important}
}
@media(hover:none),(pointer:coarse){.portfolio-cursor{display:none!important}}
@media(prefers-reduced-motion:reduce){.portfolio-cursor{transition:none;will-change:auto}.portfolio-cursor::before{transition:none}}
@media print{.portfolio-cursor{display:none!important}}