/* OVIO scroll bars: the browser's own page scroll bar is hidden (so it takes no room and leaves no strip down the side), and a thin
   handle of light is drawn over the page's edge instead. It is invisible until you scroll or point at the edge, glows like sunlight
   while you scroll, trailing light behind it the faster you go, and can be dragged like a normal scroll bar */
html { scrollbar-width: none; --ovio-sb: 255, 253, 245; --ovio-sb-warm: 255, 232, 190; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.ovio-sb-dark { --ovio-sb: 40, 62, 180; --ovio-sb-warm: 90, 120, 255; }
/* over the animation's light screens the handle turns dark so it still shows */
html.ma-light { --ovio-sb: 40, 46, 80; --ovio-sb-warm: 150, 110, 70; }

.ovio-sb { position: fixed; top: 0; right: 0; bottom: 0; width: 12px; z-index: 99990; pointer-events: none; }
.ovio-sb.is-live { pointer-events: auto; }   /* (only where there is something to scroll) */
.ovio-sb-thumb { position: absolute; top: 0; right: 3px; width: 4px; height: 40px; border-radius: 4px; opacity: 0; cursor: pointer;
  background: rgba(var(--ovio-sb), .55); box-shadow: 0 0 0 rgba(var(--ovio-sb), 0);
  transition: opacity .7s ease, width .25s ease, right .25s ease, background-color .3s ease, box-shadow .4s ease; will-change: transform, opacity; }
/* (a wider invisible area round the handle, easier to grab) */
.ovio-sb-thumb::before { content: ""; position: absolute; inset: -4px -3px -4px -6px; }
html.ovio-sb-on .ovio-sb-thumb { opacity: 1; transition: opacity .15s ease, width .25s ease, right .25s ease, background-color .3s ease, box-shadow .4s ease; }
html.ovio-sb-hot .ovio-sb-thumb, .ovio-sb.is-drag .ovio-sb-thumb { width: 7px; right: 2px; background: rgba(var(--ovio-sb), .8); }
/* while scrolling: it glows, with light spilling onto the page beside it */
html.ovio-sb-moving .ovio-sb-thumb { background: rgba(var(--ovio-sb), .95); box-shadow: 0 0 6px 1px rgba(var(--ovio-sb), .55), 0 0 22px 4px rgba(var(--ovio-sb-warm), .2); }
/* the trail of light it leaves behind as it moves */
.ovio-sb-trail { position: absolute; right: 4px; top: 0; width: 2px; height: 0; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(var(--ovio-sb-dir, 180deg), rgba(var(--ovio-sb-warm), 0), rgba(var(--ovio-sb), .6)); transition: opacity .5s ease; }
html.ovio-sb-moving .ovio-sb-trail { opacity: 1; transition: opacity .15s ease; }
.ovio-sb-bloom { position: absolute; right: 0; top: 0; width: 56px; height: 150px; margin-top: -75px; opacity: 0; pointer-events: none; transition: opacity .6s ease;
  background: radial-gradient(100% 50% at 100% 50%, rgba(var(--ovio-sb), .16), rgba(var(--ovio-sb-warm), .05) 55%, rgba(var(--ovio-sb), 0) 75%); }
html.ovio-sb-moving .ovio-sb-bloom { opacity: 1; transition: opacity .15s ease; }
html.ovio-menu-open .ovio-sb { opacity: 0; pointer-events: none; }
html.ovio-sb-drag, html.ovio-sb-drag * { user-select: none !important; cursor: grabbing !important; }

@media (prefers-reduced-motion: reduce) { .ovio-sb-trail, .ovio-sb-bloom { display: none; } }