/* Digiflexx hero globe — the canvas sits over the wheel box; .has-globe hands the dial over to it */
.globe-canvas{position:absolute;left:50%;top:50%;width:110%;aspect-ratio:1;max-width:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .9s ease;touch-action:none;cursor:grab;clip-path:circle(50%);z-index:1;-webkit-tap-highlight-color:transparent}
.globe-canvas.is-grabbing{cursor:grabbing}
/* turning the ball must never select it, or the dial text underneath it (mouse drag or long-press) */
.wheel.has-globe,.wheel.has-globe *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wheel .wheel-spin,.wheel .wheel-ring,.wheel .wheel-center{transition:opacity .9s ease}
.wheel.has-globe .globe-canvas{opacity:1}
/* the wordmark is etched inside the ball now; the DOM copy stays for screen readers */
.wheel.has-globe .wheel-spin,.wheel.has-globe .wheel-ring,.wheel.has-globe .wheel-center{opacity:0}
.wheel.has-globe,html[data-theme="dark"] .wheel.has-globe{background:transparent;border-color:transparent;box-shadow:none;transition:background .9s ease,box-shadow .9s ease,border-color .9s ease}
.wheel.has-globe .wheel-center{pointer-events:none}
/* Hold the dial back until the ball is ready, so the flat dial never shows and then swaps.
   With JS running, the script decides (.globe-wait); without it the flat dial fades in after 3s. */
.orbit .wheel-wrap{opacity:0;animation:dfxDialReveal .6s ease 3s forwards}
.orbit .wheel-wrap.globe-wait{animation:none}
/* .4s, not .8s: the ball already waits for the page's load event, so the fade should not add to it */
.orbit .wheel-wrap.globe-ready,.orbit .wheel-wrap.globe-off{opacity:1;animation:none;transition:opacity .4s ease}
.wheel.globe-instant,.wheel.globe-instant *{transition:none!important}
@keyframes dfxDialReveal{to{opacity:1}}