/*
 * Swiftools Suite vector scenes (shared/visuals.js). Every colour is a CSS variable so each variant can restyle
 * the same illustrations: set these on any ancestor of [data-swv].
 *
 *  --swv-bg        scene background            --swv-paper     cards, labels, screens
 *  --swv-ink       bars, text, device frames   --swv-muted     secondary text
 *  --swv-faint     placeholder lines           --swv-line      hairlines and chip borders
 *  --swv-accent    main accent (defaults to the add-on colour)
 *  --swv-accent-2  second accent               --swv-on-accent text on accent fills
 *  --swv-card-stroke / --swv-card-sw            card outline (e.g. 3px black for brutalist)
 *  --swv-shadow / --swv-sx / --swv-sy           card shadow colour and offset
 *  --swv-font / --swv-mono / --swv-display      fonts used inside the illustrations
 */
.swv-frame { position: relative; display: block; }
.swv { display: block; width: 100%; height: auto; overflow: visible; }
.swv text { font-family: var(--swv-font, inherit); }
.swv .swv-mono { font-family: var(--swv-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); }
.swv .swv-display { font-family: var(--swv-display, "Arial Black", "Helvetica Neue", Arial, sans-serif); }

.swv-bg { fill: var(--swv-bg, #f4f5f8); }
.swv-card { fill: var(--swv-paper, #fff); stroke: var(--swv-card-stroke, rgba(16, 20, 32, .06)); stroke-width: var(--swv-card-sw, 1px); }
.swv-shadow { fill: var(--swv-shadow, rgba(16, 20, 40, .09)); transform: translate(var(--swv-sx, 0px), var(--swv-sy, 6px)); }
.swv-ink { fill: var(--swv-ink, #12141c); }
.swv-muted { fill: var(--swv-muted, #8a8f9e); }
.swv-faint { fill: var(--swv-faint, rgba(16, 20, 40, .08)); }
.swv-paper { fill: var(--swv-paper, #fff); }
.swv-line { fill: none; stroke: var(--swv-line, rgba(16, 20, 40, .14)); stroke-width: 1.2px; }
.swv-chip { fill: var(--swv-paper, #fff); stroke: var(--swv-line, rgba(16, 20, 40, .14)); stroke-width: 1px; }
.swv-acc { fill: var(--swv-accent, var(--swv-auto-accent, #4f6bff)); }
.swv-acc2 { fill: var(--swv-accent-2, var(--swv-auto-accent-2, #f59e0b)); }
.swv-acc-soft { fill: color-mix(in srgb, var(--swv-accent, var(--swv-auto-accent, #4f6bff)) 16%, var(--swv-paper, #fff)); }
.swv-acc2-soft { fill: color-mix(in srgb, var(--swv-accent-2, var(--swv-auto-accent-2, #f59e0b)) 18%, var(--swv-paper, #fff)); }
.swv-acc-ink { fill: color-mix(in srgb, var(--swv-accent, var(--swv-auto-accent, #4f6bff)) 72%, var(--swv-ink, #12141c)); }
.swv-on-acc { fill: var(--swv-on-accent, #fff); }
.swv-code-bg { fill: var(--swv-code-bg, #fff); }
.swv-code-ink { fill: var(--swv-code-ink, #12141c); }
.swv-code-finder { fill: color-mix(in srgb, var(--swv-accent, var(--swv-auto-accent, #4f6bff)) 55%, #000); }
.swv-device { fill: var(--swv-device, var(--swv-ink, #12141c)); }
.swv-stroke-acc { fill: none; stroke: var(--swv-accent, var(--swv-auto-accent, #4f6bff)); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
.swv-stroke-ink { fill: none; stroke: var(--swv-ink, #12141c); stroke-width: 1.6px; stroke-linejoin: round; }
.swv-stroke-faint { fill: none; stroke: var(--swv-faint, rgba(16, 20, 40, .08)); }
.swv-stroke-paper { fill: none; stroke: var(--swv-paper, #fff); stroke-width: 3px; stroke-linecap: round; }
.swv-dash { fill: none; stroke: var(--swv-accent, var(--swv-auto-accent, #4f6bff)); stroke-width: 1.6px; stroke-dasharray: 4 5; stroke-linecap: round; }
.swv-stop-a { stop-color: var(--swv-accent, var(--swv-auto-accent, #4f6bff)); }
.swv-stop-b { stop-color: var(--swv-accent-2, var(--swv-auto-accent-2, #f59e0b)); }
.swv-stop-paper { stop-color: var(--swv-paper, #fff); }
.swv-stop-soft { stop-color: color-mix(in srgb, var(--swv-accent, var(--swv-auto-accent, #4f6bff)) 38%, var(--swv-paper, #fff)); }

/* Low-detail mode hides secondary chips for small thumbnails */
[data-swv-detail="low"] .swv-detail { display: none; }

/* Small glyphs inside scenes */
.swv-g { fill: none; stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; }
.swv-g-ink { stroke: var(--swv-ink, #12141c); }
.swv-g-muted { stroke: var(--swv-muted, #8a8f9e); }
.swv-g-acc { stroke: color-mix(in srgb, var(--swv-accent, var(--swv-auto-accent, #4f6bff)) 80%, var(--swv-ink, #12141c)); }
.swv-g-on { stroke: var(--swv-on-accent, #fff); }
.swv-ring { fill: none; stroke: var(--swv-accent, var(--swv-auto-accent, #4f6bff)); stroke-width: 12px; stroke-linecap: round; }
.swv-ring-track { fill: none; stroke: var(--swv-faint, rgba(16, 20, 40, .08)); stroke-width: 12px; }
.swv-tick { fill: none; stroke: var(--swv-line, rgba(16, 20, 40, .14)); stroke-width: 1.2px; stroke-linecap: round; }
.swv-motif-rib { fill: none; stroke: var(--swv-paper, #fff); stroke-width: 1.4px; stroke-linecap: round; opacity: .8; }

/* Icons */
.swv-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* ---------- Animation (only when [data-swv-anim] and motion allowed; paused while off-screen) ---------- */
.swv-animate * { animation-play-state: paused; }
.swv-animate.swv-in * { animation-play-state: running; }
.swv-animate .swv-a-rise { animation: swv-rise .7s cubic-bezier(.2, .7, .2, 1) both; transform-box: fill-box; }
.swv-animate .swv-a-pop { animation: swv-pop .5s cubic-bezier(.2, .9, .3, 1.3) both; transform-box: fill-box; transform-origin: center; }
.swv-animate .swv-a-grow { animation: swv-grow .9s cubic-bezier(.2, .7, .2, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
.swv-animate .swv-a-spin { animation: swv-spin 40s linear infinite; transform-box: view-box; }
.swv-animate .swv-a-pulse { animation: swv-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.swv-animate .swv-a-wipe { animation: swv-wipe 6s ease-in-out infinite; }
.swv-animate .swv-a-float { animation: swv-float 6s ease-in-out infinite; }
.swv-animate .swv-a-scroll { animation: swv-scroll 8s ease-in-out infinite; }
.swv-animate .swv-a-count { animation: swv-count 30s linear infinite; }
@keyframes swv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes swv-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes swv-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes swv-spin { to { transform: rotate(360deg); } }
@keyframes swv-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.12); } }
@keyframes swv-wipe { 0%, 100% { transform: translateX(-46px); } 50% { transform: translateX(52px); } }
@keyframes swv-float { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
@keyframes swv-scroll { 0%, 15% { transform: none; } 50%, 65% { transform: translateY(-38px); } 100% { transform: none; } }
@keyframes swv-count { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--swv-circ, 490px); } }

@media (prefers-reduced-motion: reduce) {
  .swv-animate * { animation: none !important; }
}