/* The RioAlgo mark. Everything else on the page is the purchased theme (assets/css) plus a handful of sizing rules (rioalgo.css); this file
   is the one exception, and it holds only what the owner specified for the brand's own mark: its lock-up with the word RioAlgo (typeface
   and colour of that word), its response to the pointer (a faint cyan glow, the shapes moving up and to the right by 1.5 px) and its pulse
   while the platform is loading or reconnecting. Every selector starts with .rio-logo and nothing of the theme is restyled here. */
.rio-logo { display: inline-flex; align-items: center; gap: .5em; vertical-align: middle; line-height: 1; }
.rio-logo svg { display: block; flex: none; overflow: visible; transition: filter .25s ease; }
.rio-logo-glyph { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.rio-logo:hover svg { filter: drop-shadow(0 0 6px rgba(0, 255, 255, .2)); }
.rio-logo:hover .rio-logo-glyph { transform: translate(var(--rio-logo-nudge, 24px), calc(-1 * var(--rio-logo-nudge, 24px))); }
.rio-logo-text { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 700; letter-spacing: .02em; color: #e6e9ef; }
.rio-logo-busy svg, .rio-logo-pulse { animation: rio-logo-pulse 1.6s ease-in-out infinite; }
@keyframes rio-logo-pulse {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 255, 255, 0)); opacity: .78; }
	50% { filter: drop-shadow(0 0 10px rgba(0, 255, 255, .35)); opacity: 1; }
}
/* A visitor who asked for less motion (on Windows: "show animations" switched off) gets no animated movement: the shapes take their place under
   the pointer at once, and the pulse is a slow glow only, with no fading of the mark. */
@keyframes rio-logo-glow {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 255, 255, 0)); }
	50% { filter: drop-shadow(0 0 10px rgba(0, 255, 255, .35)); }
}
@media (prefers-reduced-motion: reduce) {
	.rio-logo svg, .rio-logo-glyph { transition: none; }
	.rio-logo-busy svg, .rio-logo-pulse { animation-name: rio-logo-glow; animation-duration: 2.4s; }
}