/* Site-wide motion: magnetic cursor (laptops and desktops only) and section reveals.
   Everything sits behind prefers-reduced-motion and the JS adds the classes,
   so the pages read the same with scripts off. */
.mo-ring {
    position: fixed; left: 0; top: 0; z-index: 99990; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1.5px solid #4DFF88; border-radius: 50%; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 1px rgba(11,95,42,.35);
    transition: opacity .2s ease, width .22s cubic-bezier(.16,1,.3,1), height .22s cubic-bezier(.16,1,.3,1),
                margin .22s cubic-bezier(.16,1,.3,1), background-color .2s ease;
    will-change: transform;
}
.mo-ring.is-on { opacity: 1; }
.mo-ring.is-held { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(77,255,136,.14); }
.mo-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

.mo-pull { transition: translate .32s cubic-bezier(.16,1,.3,1), scale .32s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.mo-lift.is-pulled { scale: 1.012; box-shadow: 0 18px 40px -22px rgba(14,20,27,.45); }

.mo-pending { opacity: 0; translate: 0 20px; }
.mo-reveal { transition: opacity .7s cubic-bezier(.16,1,.3,1), translate .7s cubic-bezier(.16,1,.3,1); }

@media print { .mo-pending { opacity: 1; translate: none; } .mo-ring { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .mo-ring { display: none; }
    .mo-pending { opacity: 1; translate: none; }
    .mo-pull, .mo-reveal { transition: none; }
}