/* effects.css: interactive glowing orb that follows the cursor / touch */
.orb{position:fixed;left:0;top:0;width:200px;height:200px;border-radius:50%;pointer-events:none;z-index:50;opacity:0;mix-blend-mode:screen;will-change:transform,opacity;transition:opacity .6s ease;
background:radial-gradient(circle,rgba(255,232,160,.6) 0%,rgba(214,168,74,.32) 28%,rgba(214,168,74,.1) 50%,rgba(214,168,74,0) 70%)}
.orb::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff3c8;box-shadow:0 0 22px 8px rgba(255,226,140,.75)}
.orb.on{opacity:1}
.orb-ripple{position:fixed;width:24px;height:24px;border:2px solid var(--gold);border-radius:50%;pointer-events:none;z-index:49;transform:translate(-50%,-50%) scale(0);animation:orb-ripple .9s ease-out forwards}
@keyframes orb-ripple{to{transform:translate(-50%,-50%) scale(7);opacity:0}}
@media(prefers-reduced-motion:reduce){.orb,.orb-ripple{display:none}}