/* Living orb (shared/fx/orb.js): a square stage; the page sets its width, up to 560px.
   The canvas fades in on its first frame. Without WebGL the orb image sits in the same spot. */
[data-fx="orb"]{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;margin-inline:auto;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
[data-fx="orb"]>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;opacity:0;touch-action:manipulation;transition:opacity .9s cubic-bezier(.2,.7,.2,1)}
[data-fx="orb"].orb-live>canvas{opacity:1}
[data-fx="orb"].orb-hot>canvas{cursor:pointer}
[data-fx="orb"].orb-calm>canvas{transition:none}
[data-fx="orb"]>img.orb-still{position:absolute;inset:5.5%;width:89%;height:89%;max-width:none;object-fit:contain}
@media (prefers-reduced-motion:reduce){[data-fx="orb"]>canvas{transition:none}}