/* Scooby's live rig (assets/js/cnq-os-scooby-rig.js). The frame loop moves
   his body, face and layers; CSS only runs the little effect glyphs' own
   motion, and stops it with the rest when the rig is still. */
.cnq-scooby-rig { display: block; position: relative; width: 100%; height: 100%; touch-action: manipulation; will-change: transform; }
.cnq-scooby-rig > svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The rig moves itself; the avatar's own float/bounce would double it. */
.osx-scooby-avatar.has-rig,
.osx-scooby-avatar.has-rig[data-mood] { animation: none; }
.osx-scooby-avatar.has-rig::after { display: none; }        /* the rig draws its own shadow */

.cnq-scooby-rig [class^="scr-"] { transform-box: fill-box; transform-origin: center; }
.cnq-scooby-rig .scr-t1 { animation: scr-twinkle 1.1s ease-in-out infinite; }
.cnq-scooby-rig .scr-t2 { animation: scr-twinkle 1.1s ease-in-out .35s infinite; }
.cnq-scooby-rig .scr-t3 { animation: scr-twinkle 1.1s ease-in-out .7s infinite; }
.cnq-scooby-rig .scr-sweat { animation: scr-sweat 1.6s ease-in infinite; }
.cnq-scooby-rig .scr-tear { animation: scr-sweat 1.9s ease-in infinite; }
.cnq-scooby-rig .scr-bob { animation: scr-bob 1.4s ease-in-out infinite; }
.cnq-scooby-rig .scr-z1 { animation: scr-z 2.4s ease-in-out infinite; }
.cnq-scooby-rig .scr-z2 { animation: scr-z 2.4s ease-in-out 1.2s infinite; }
.cnq-scooby-rig .scr-float { animation: scr-float 1.8s ease-out infinite; }
.cnq-scooby-rig .scr-float2 { animation: scr-float 1.8s ease-out .9s infinite; }
.cnq-scooby-rig .scr-d1 { animation: scr-dot 1s ease-in-out infinite; }
.cnq-scooby-rig .scr-d2 { animation: scr-dot 1s ease-in-out .15s infinite; }
.cnq-scooby-rig .scr-d3 { animation: scr-dot 1s ease-in-out .3s infinite; }
.cnq-scooby-rig .scr-w1 { animation: scr-wave 1.2s ease-out infinite; }
.cnq-scooby-rig .scr-w2 { animation: scr-wave 1.2s ease-out .3s infinite; }
.cnq-scooby-rig .scr-glow { animation: scr-glow 1.6s ease-in-out infinite; }
.cnq-scooby-rig .scr-halo { animation: scr-bob 2.4s ease-in-out infinite; }
.cnq-scooby-rig.is-still [class^="scr-"] { animation: none; }
@keyframes scr-twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .5 } 50% { transform: scale(1.1) rotate(45deg); opacity: 1 } }
@keyframes scr-sweat { 0% { transform: translateY(-3px); opacity: 0 } 25% { opacity: 1 } 100% { transform: translateY(9px); opacity: 0 } }
@keyframes scr-bob { 0%, 100% { transform: translateY(0) rotate(-4deg) } 50% { transform: translateY(-5px) rotate(5deg) } }
@keyframes scr-z { 0% { transform: translate(-4px, 6px) scale(.7); opacity: 0 } 30% { opacity: 1 } 100% { transform: translate(6px, -10px) scale(1.1); opacity: 0 } }
@keyframes scr-float { 0% { transform: translateY(6px) scale(.6); opacity: 0 } 30% { opacity: 1; transform: translateY(0) scale(1) } 100% { transform: translateY(-16px) scale(.9); opacity: 0 } }
@keyframes scr-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-4px); opacity: 1 } }
@keyframes scr-wave { 0% { opacity: 0; transform: translateX(-4px) } 40% { opacity: 1 } 100% { opacity: 0; transform: translateX(5px) } }
@keyframes scr-glow { 0%, 100% { opacity: .85; transform: scale(1) } 50% { opacity: 1; transform: scale(1.08) } }
@media (prefers-reduced-motion: reduce) { .cnq-scooby-rig [class^="scr-"] { animation: none; } }

/* The working spinner beside him (the `orbit` effect): one rotation, nothing else. */
.cnq-scooby-rig .scr-orbit { transform-box: fill-box; transform-origin: center; animation: scr-spin 1.15s linear infinite; }
.cnq-scooby-rig[data-pro] .scr-orbit { animation-duration: 2.6s; }
@keyframes scr-spin { to { transform: rotate(360deg) } }
/* Offline: asleep and dimmed — he is there, he just cannot think right now. */
.cnq-scooby-rig[data-expr="offline"] { opacity: .62; filter: grayscale(.55); transition: opacity .4s, filter .4s; }

/* The loader (CNQOS.scooby.loader): the working sticker typing, a spinner
   orbiting beside him, the step text. Transforms and opacity only. */
.cnq-scooby-loader { --scl-size: 34px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: var(--scl-size); contain: layout paint style; }
.cnq-scooby-loader-fig { position: relative; flex: none; width: var(--scl-size); height: var(--scl-size); }
.cnq-scooby-loader-fig img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 92%; will-change: transform;
  animation: scl-type .32s ease-in-out infinite alternate; }
.cnq-scooby-loader-orbit { position: absolute; right: -10%; top: -8%; width: 38%; height: 38%; will-change: transform; animation: scl-spin 1.15s linear infinite; }
.cnq-scooby-loader-orbit i { position: absolute; width: 26%; height: 26%; border-radius: 50%; background: #2f6bf5; }
.cnq-scooby-loader-orbit i:nth-child(1) { left: 37%; top: 0; }
.cnq-scooby-loader-orbit i:nth-child(2) { right: 0; bottom: 12%; opacity: .6; }
.cnq-scooby-loader-orbit i:nth-child(3) { left: 0; bottom: 12%; opacity: .3; }
.cnq-scooby-loader-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; line-height: 1.2; color: var(--os-dim, #6b7280); }
/* Professional mode: a breath, and a slow spinner. */
.cnq-scooby-loader.is-pro .cnq-scooby-loader-fig img { animation: scl-breathe 2.4s ease-in-out infinite; }
.cnq-scooby-loader.is-pro .cnq-scooby-loader-orbit { animation-duration: 2.6s; opacity: .7; }
/* A hidden tab: everything holds where it is. */
.cnq-scooby-loader.is-paused .cnq-scooby-loader-fig img,
.cnq-scooby-loader.is-paused .cnq-scooby-loader-orbit { animation-play-state: paused; }
/* The ending: a pop into the success or error pose, the spinner gone. */
.cnq-scooby-loader.is-done .cnq-scooby-loader-fig img { animation: scl-pop .38s cubic-bezier(.3, 1.6, .5, 1) 1; }
.cnq-scooby-loader.is-done .cnq-scooby-loader-orbit { opacity: 0; animation: none; transition: opacity .2s; }
.cnq-scooby-loader.is-done.is-bad .cnq-scooby-loader-text { color: var(--os-bad, #ef4444); }
/* Still: one working sticker and the words. */
.cnq-scooby-loader.is-static .cnq-scooby-loader-fig img,
.cnq-scooby-loader.is-static .cnq-scooby-loader-orbit { animation: none; }
@keyframes scl-type { from { transform: translateY(0) rotate(-1.2deg) } to { transform: translateY(-5%) rotate(1.2deg) } }
@keyframes scl-breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.025) } }
@keyframes scl-spin { to { transform: rotate(360deg) } }
@keyframes scl-pop { 0% { transform: scale(.82) } 100% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) {
  .cnq-scooby-rig .scr-orbit, .cnq-scooby-loader *, .cnq-scooby-loader.is-done .cnq-scooby-loader-fig img { animation: none !important; }
}