/* Rosia logo turning slowly in a soft conic glow (same as the chat home in the app), with two orbit rings around it. */
.logo-orb { --size: clamp(80px, min(22vw, 12vh), 140px); position: relative; width: calc(var(--size) * 1.8); height: calc(var(--size) * 1.8); display: grid; place-items: center; margin-bottom: clamp(8px, 2vh, 20px); }
.logo-orb-glow { position: absolute; width: calc(var(--size) * 1.15); height: calc(var(--size) * 1.15); border-radius: 50%; background: var(--brand-conic); filter: blur(34px); opacity: .55; animation: orb-spin 8s linear infinite, orb-pulse 4s ease-in-out infinite; }
.logo-orb-logo { position: relative; width: var(--size); height: var(--size); animation: orb-spin 14s linear infinite; filter: drop-shadow(0 0 14px rgba(155, 114, 203, .45)); }

.logo-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); }
.logo-orb-ring.is-inner { inset: 14%; border-style: dashed; border-color: rgba(255, 255, 255, .07); animation: orb-spin 40s linear infinite reverse; }
.logo-orb-ring.is-outer { animation: orb-spin 22s linear infinite; }
.logo-orb-ring::after { content: ''; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px 2px var(--gold); }
.logo-orb-ring.is-inner::after { background: var(--blue); box-shadow: 0 0 12px 2px var(--blue); top: auto; bottom: -3px; }

@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-pulse { 50% { opacity: .8; transform: scale(1.08) rotate(180deg); } }

@media (prefers-reduced-motion: reduce) {
  .logo-orb-glow, .logo-orb-logo, .logo-orb-ring { animation: none; }
}