/* ── Animated SVG scenes (EmptyScene / GreetingScene) ───────────────────────
   Colour tokens map to the dashboard shell's own palette (DashboardLayout.razor.css).
   Scenes automatically follow light/dark mode and the user's chosen accent. */

/* Fill helpers */
.vh-f-primary      { fill: var(--accent, #4f46e5); }
.vh-f-primary-soft { fill: var(--accent, #4f46e5); opacity: .13; }
.vh-f-secondary    { fill: var(--mud-palette-secondary, #e91e63); }
.vh-f-tertiary     { fill: var(--teal, #0d9488); }
.vh-f-error        { fill: #dc2626; }
.vh-f-success      { fill: #059669; }
.vh-f-paper        { fill: var(--paper, #fff); }
.vh-f-ink          { fill: var(--ink, #0f172a); }
.vh-f-line         { fill: var(--line, rgba(11,16,32,.12)); }
.vh-f-muted        { fill: var(--muted, #94a3b8); }
.vh-f-shadow       { fill: #000; opacity: .08; }
.vh-f-skin         { fill: #FBBF91; }
.vh-f-hair         { fill: #374151; }
.vh-f-amber        { fill: var(--amber, #d97706); }

/* Stroke helpers */
.vh-s-primary   { stroke: var(--accent, #4f46e5); fill: none; }
.vh-s-secondary { stroke: var(--mud-palette-secondary, #e91e63); fill: none; }
.vh-s-ink       { stroke: var(--ink, #0f172a); fill: none; }
.vh-s-line      { stroke: var(--line, rgba(11,16,32,.2)); fill: none; }
.vh-s-success   { stroke: #059669; fill: none; }
:root[data-theme="dark"] .vh-f-hair { fill: #9CA3AF; }
:root[data-theme="dark"] .vh-f-paper { fill: var(--paper, #1a1b2e); }

/* Animation base */
.vh-a { transform-box: fill-box; transform-origin: center; }
.d2 { animation-delay: .5s !important; }
.d3 { animation-delay: 1s !important; }

/* Named animations */
.vh-float      { animation: vh-float 3.2s ease-in-out infinite; }
.vh-float-slow { animation: vh-float 4.6s ease-in-out infinite; }
.vh-bob        { animation: vh-bob 1.6s ease-in-out infinite; }
.vh-swing      { transform-origin: 50% 0%; animation: vh-swing 2.2s ease-in-out infinite; }
.vh-wave       { transform-origin: 20% 90%; animation: vh-wave 1.4s ease-in-out infinite; }
.vh-spin       { animation: vh-spin 1.2s linear infinite; }
.vh-spin-slow  { animation: vh-spin 14s linear infinite; }
.vh-pulse      { animation: vh-pulse 1.8s ease-in-out infinite; }
.vh-blink      { animation: vh-blink 1.4s ease-in-out infinite; }
.vh-twinkle    { animation: vh-twinkle 2.4s ease-in-out infinite; }
.vh-drift      { animation: vh-drift 9s ease-in-out infinite; }
.vh-draw       { stroke-dasharray: 120; stroke-dashoffset: 120; animation: vh-draw 3.2s ease-in-out infinite; }
.vh-draw.d2    { animation-delay: .5s; }
.vh-draw.d3    { animation-delay: 1s; }
.vh-tick       { stroke-dasharray: 30; stroke-dashoffset: 30; animation: vh-tick 3s ease-out infinite; }
.vh-tick.d2    { animation-delay: .6s; }
.vh-tick.d3    { animation-delay: 1.2s; }
.vh-write      { animation: vh-write 2.4s ease-in-out infinite; }
.vh-scan       { animation: vh-scan 3.6s ease-in-out infinite; }
.vh-road       { stroke-dasharray: 14 12; animation: vh-road .7s linear infinite; }
.vh-bounce     { animation: vh-bounce 1.3s cubic-bezier(.3,0,.5,1) infinite; }
.vh-pop        { animation: vh-pop 2.4s ease-in-out infinite; }
.vh-flap       { transform-origin: 0% 50%; animation: vh-flap 2.6s ease-in-out infinite; }
.vh-zz         { animation: vh-zz 2.8s ease-in-out infinite; }
.vh-shake      { animation: vh-shake 3s ease-in-out infinite; }
.vh-rise       { animation: vh-rise 2.6s ease-out infinite; }
.vh-rise.d2    { animation-delay: .9s; }
.vh-rise.d3    { animation-delay: 1.7s; }
.vh-check      { stroke-dasharray: 70; stroke-dashoffset: 70; animation: vh-check 3.2s ease-out infinite; }
.vh-rays       { animation: vh-spin-slow 20s linear infinite; transform-box: fill-box; transform-origin: center; }

@keyframes vh-check      { 0%,10% { stroke-dashoffset: 70; } 40%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 70; } }
@keyframes vh-float      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes vh-bob        { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes vh-swing      { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes vh-wave       { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-22deg); } 75% { transform: rotate(14deg); } }
@keyframes vh-spin       { to { transform: rotate(360deg); } }
@keyframes vh-spin-slow  { to { transform: rotate(360deg); } }
@keyframes vh-pulse      { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes vh-blink      { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes vh-twinkle    { 0%,100% { transform: scale(.4); opacity: 0; } 40%,60% { transform: scale(1); opacity: 1; } }
@keyframes vh-drift      { 0%,100% { transform: translateX(-8px); } 50% { transform: translateX(10px); } }
@keyframes vh-draw       { 0% { stroke-dashoffset: 120; } 45%,75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -120; } }
@keyframes vh-tick       { 0%,10% { stroke-dashoffset: 30; } 35%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }
@keyframes vh-write      { 0%,100% { transform: translate(0,0) rotate(0); } 20% { transform: translate(8px,2px) rotate(4deg); } 40% { transform: translate(16px,-1px) rotate(-2deg); } 60% { transform: translate(24px,2px) rotate(4deg); } 80% { transform: translate(10px,1px) rotate(0); } }
@keyframes vh-scan       { 0%,100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(26px,-8px) rotate(8deg); } 50% { transform: translate(40px,10px) rotate(0); } 75% { transform: translate(10px,14px) rotate(-8deg); } }
@keyframes vh-road       { to { stroke-dashoffset: -26; } }
@keyframes vh-bounce     { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-22px); } 55% { transform: translateY(-22px); } }
@keyframes vh-pop        { 0%,15% { transform: scale(0); opacity: 0; } 30%,80% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes vh-flap       { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes vh-zz         { 0% { transform: translate(0,0) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px,-22px) scale(1.1); opacity: 0; } }
@keyframes vh-shake      { 0%,70%,100% { transform: rotate(0); } 75% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(4deg); } }
@keyframes vh-rise       { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes vh-sun-ray    { 0%,100% { opacity: .6; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.18); } }

/* ── EmptyState wrapper ───────────────────────────────────────────────────── */
.vh-empty-web {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 16px 8px 8px; gap: 6px;
}
.vh-empty-web svg { width: 140px; height: auto; }
.vh-empty-web.compact { flex-direction: row; text-align: left; padding: 8px 4px; gap: 10px; }
.vh-empty-web.compact svg { width: 64px; flex-shrink: 0; }
.vh-empty-title { font-size: 14px; font-weight: 600; color: var(--ink, #0f172a); }
.vh-empty-msg   { font-size: 13px; color: var(--muted, #94a3b8); margin-top: 2px; }

/* ── Greeting scene (right side of cc-head) ──────────────────────────────── */
.cc-greeting-scene { width: 110px; height: auto; flex-shrink: 0; opacity: .92; }
@media (max-width: 600px) { .cc-greeting-scene { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .vh-float, .vh-float-slow, .vh-bob, .vh-swing, .vh-wave, .vh-spin, .vh-spin-slow,
    .vh-pulse, .vh-blink, .vh-twinkle, .vh-drift, .vh-draw, .vh-tick, .vh-write,
    .vh-scan, .vh-road, .vh-bounce, .vh-pop, .vh-flap, .vh-zz, .vh-shake, .vh-rise,
    .vh-check, .vh-rays { animation: none !important; }
}