/* Service art (service-art.js). Every colour comes from the site tokens, so light and dark
   themes follow automatically. One line weight, one easing, one tempo for all motifs. */
[data-service-art] {
  --sa-stroke: 2px;
  position: relative;
  overflow: hidden;
  background: var(--panel);
  color: var(--text);
}
.rs-shot[data-service-art] { height: 70vh; min-height: 360px; }
.caption-card[data-service-art] { min-height: 420px; }
/* On phones a 70vh portrait frame leaves a horizontal motif floating; a square fits it. */
@media (max-width: 700px) {
  .rs-shot[data-service-art] { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
  .caption-card[data-service-art] { min-height: 0; aspect-ratio: 1 / 1; }
}
.sa-svg { position: absolute; inset: 0; display: block; }

.sa-dot { fill: var(--muted); opacity: .22; }
.sa-lime { fill: var(--shape-lime); }
.sa-lilac { fill: var(--shape-lilac); }
.sa-ink { fill: var(--text); }
.sa-ink-soft { fill: var(--text); opacity: .28; }
.sa-paper { fill: var(--surface); }
.sa-panel { fill: var(--panel); }
.sa-panel-2 { fill: var(--panel); filter: brightness(.97); }
.sa-line { fill: var(--line); }
.sa-edge { stroke: var(--line); stroke-width: var(--sa-stroke); }
.sa-on-lime { fill: var(--shape-on-accent); }
.sa-on-lime-soft { fill: var(--shape-on-accent); opacity: .3; }
.sa-on-ink { fill: var(--surface); }
.sa-on-ink-soft { fill: var(--surface); opacity: .22; }
.sa-stroke { fill: none; stroke: var(--text); stroke-width: var(--sa-stroke); stroke-linecap: round; stroke-linejoin: round; }
.sa-stroke.sa-on { stroke: var(--shape-on-accent); }
.sa-thin { stroke: var(--line); }
.sa-dash { stroke-dasharray: 2 8; opacity: .55; }
.sa-tick { fill: none; stroke: var(--shape-on-accent); stroke-width: calc(var(--sa-stroke) * 2.5); stroke-linecap: round; stroke-linejoin: round; }
.sa-guide { stroke: var(--shape-lime); stroke-width: 1; opacity: 0; }
.sa-pulse { fill: var(--shape-lime); stroke: var(--text); stroke-width: var(--sa-stroke); offset-rotate: 0deg; opacity: 0; }

/* Entrance: once, when the art first comes into view. */
[data-service-art] :is(.sa-block, .sa-row, .sa-tile, .sa-grow, .sa-rate, .sa-nodes > *, .sa-end) {
  transition: opacity var(--shape-motion, 900ms) var(--shape-ease, ease), transform var(--shape-motion, 900ms) var(--shape-ease, ease);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}
[data-service-art]:not(.sa-in) :is(.sa-block, .sa-row, .sa-tile, .sa-rate) { opacity: 0; transform: translateY(18px); }
[data-service-art]:not(.sa-in) .sa-grow { transform: scaleY(0); }
.sa-grow { transform-box: fill-box; transform-origin: 50% 100%; }
[data-service-art]:not(.sa-in) :is(.sa-nodes > *, .sa-end) { opacity: 0; }
.sa-nodes > :nth-child(n) { transition-delay: calc(var(--sa-n, 0) * 60ms + 150ms); }
.sa-lines path { stroke-dashoffset: 0; transition: opacity 600ms var(--shape-ease, ease) 300ms; }
[data-service-art]:not(.sa-in) .sa-lines path { opacity: 0; }
.sa-in .sa-guide { animation: sa-guide 1.6s var(--shape-ease, ease) .1s 1 both; }
@keyframes sa-guide { 0% { opacity: 0; } 30% { opacity: .5; } 100% { opacity: 0; } }

/* Loops: only while on screen. */
.sa-run { animation: sa-run 4.8s cubic-bezier(.6, 0, .25, 1) infinite; animation-play-state: paused; }
.sa-live .sa-run { animation-play-state: running; }
@keyframes sa-run {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 1; }
  80% { offset-distance: 100%; opacity: 1; }
  88%, 100% { offset-distance: 100%; opacity: 0; }
}
.sa-twinkle { transform-box: fill-box; transform-origin: center; animation: sa-twinkle 4.8s var(--shape-ease, ease) infinite; animation-play-state: paused; }
.sa-live .sa-twinkle { animation-play-state: running; }
@keyframes sa-twinkle { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.12) rotate(45deg); } }
.sa-tile > g { transition: transform var(--shape-motion, 900ms) var(--shape-ease, ease); }

/* ---------- Art slots that replaced an <img> (apply-art.py) ---------- */
span.sa-fill { display: block; width: 100%; height: 100%; }
.editorial > .sa-fill { filter: none; }
/* A dark slot, for art that sits behind white text. */
[data-tone='dark'] { --panel: #1b1c1e; --surface: #242527; --text: #ffffff; --line: #393a3c; --muted: #b6b6b6; }
[data-tone='dark'] > .sa-svg { opacity: .8; }

/* ---------- Icons, steps, covers, voice, teams, people ---------- */
.sa-type { font-family: var(--shape-font); font-weight: 500; letter-spacing: -.045em; }
.sa-icon .sa-stroke, .sa-icon .sa-edge, .sa-icon .sa-edge-ink { stroke-width: 2.5; }
.sa-edge-ink { stroke: var(--text); stroke-width: var(--sa-stroke); stroke-linejoin: round; }
.sa-halo { opacity: .7; }
.sa-glass { opacity: .55; }
.sa-ring { fill: none; stroke: var(--text); stroke-width: 7; }
.sa-check { fill: none; stroke: var(--text); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.sa-pulse-dot { fill: var(--shape-lime); stroke: var(--text); stroke-width: 2; }
.sa-lime-stroke { stroke: var(--shape-lime); stroke-width: calc(var(--sa-stroke) * 4); }
:is(.sa-loop, .sa-pop-in, .sa-slide, .sa-fillbar) { transform-box: fill-box; transform-origin: center; }

/* Entrances (once). */
.sa-pop-in, .sa-slide, .sa-fillbar { transition: opacity var(--shape-motion, 900ms) var(--shape-ease, ease), transform var(--shape-motion, 900ms) var(--shape-ease, ease); transition-delay: calc(var(--i, 0) * 120ms + 200ms); }
[data-service-art]:not(.sa-in) .sa-pop-in { opacity: 0; transform: scale(.85); }
[data-service-art]:not(.sa-in) .sa-slide { opacity: 0; transform: translateX(6%); }
.sa-fillbar { transform-origin: 0 50%; }
[data-service-art]:not(.sa-in) .sa-fillbar { transform: scaleX(0); }

/* Loops (only while on screen). */
[data-service-art] .sa-loop { animation-play-state: paused; }
.sa-live .sa-loop { animation-play-state: running; }
.sa-sway { animation: sa-sway 5s ease-in-out infinite; }
@keyframes sa-sway { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(14deg); } }
.sa-typing { animation: sa-typing 1.6s infinite; animation-delay: calc(var(--i) * 180ms); }
@keyframes sa-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.sa-pop { animation: sa-pop 3.2s var(--shape-ease, ease) infinite; }
@keyframes sa-pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } }
.sa-bob { animation: sa-bob 3.6s ease-in-out infinite; }
@keyframes sa-bob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
.sa-flame { transform-origin: 50% 0; animation: sa-flame .5s ease-in-out infinite alternate; }
@keyframes sa-flame { from { transform: scaleY(.7); } to { transform: scaleY(1.15); } }
.sa-ray { animation: sa-ray 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
@keyframes sa-ray { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.sa-glow { animation: sa-glow 2.8s ease-in-out infinite; }
@keyframes sa-glow { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
.sa-scan { animation: sa-scan 4.4s ease-in-out infinite; }
@keyframes sa-scan { 0%, 100% { transform: translate(-6px, -4px); } 50% { transform: translate(10px, 12px); } }
.sa-trace { animation: sa-trace 3.2s ease-in-out infinite; }
@keyframes sa-trace { 0% { transform: translate(24px, 30px); opacity: 0; } 8% { opacity: 1; } 30% { transform: translate(50px, 30px); } 60% { transform: translate(50px, 70px); } 85% { transform: translate(76px, 70px); opacity: 1; } 100% { transform: translate(76px, 70px); opacity: 0; } }
.sa-turn { animation: sa-turn 6s var(--shape-ease, ease) infinite; }
@keyframes sa-turn { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
.sa-draw { animation: sa-draw 3.6s var(--shape-ease, ease) infinite; }
@keyframes sa-draw { 0% { stroke-dashoffset: 1; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.sa-drop { animation: sa-drop 3.6s var(--shape-ease, ease) infinite; }
@keyframes sa-drop { 0% { transform: translateY(-40%); opacity: 0; } 25%, 85% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.sa-spin { animation: sa-spin 24s linear infinite; }
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-breathe { animation: sa-breathe 6s ease-in-out infinite; }
@keyframes sa-breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.04); } }
.sa-wave { transform-origin: 50% 50%; animation: sa-wave 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -110ms); }
@keyframes sa-wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.sa-turnlight { animation: sa-turnlight 8s ease infinite; animation-delay: calc(var(--i) * 2s - 8s); }
@keyframes sa-turnlight { 0%, 25% { fill: var(--shape-lime); } 30%, 100% { fill: var(--surface); } }
.sa-float { animation: sa-float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -900ms); }
@keyframes sa-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }

/* ---------- Business tiles ---------- */
[data-service-art][data-bare] { background: none; overflow: visible; }
.sa-thick { stroke-width: 6 !important; }
.sa-steam { animation: sa-steam 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 400ms); }
@keyframes sa-steam { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }
.sa-tassel { transform-origin: 50% 0; animation: sa-tassel 3s ease-in-out infinite; }
@keyframes sa-tassel { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.sa-snip-a, .sa-snip-b { transform-box: view-box; transform-origin: 50px 54px; }
.sa-snip-a { animation: sa-snip-a 1.8s ease-in-out infinite; }
.sa-snip-b { animation: sa-snip-b 1.8s ease-in-out infinite; }
@keyframes sa-snip-a { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes sa-snip-b { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
.rs-biz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--rs-soft); border-radius: 24px; padding: 28px 12px 24px; height: 100%; box-sizing: border-box; transition: background var(--shape-fast, 300ms) var(--shape-ease, ease); }
.rs-biz:hover { background: color-mix(in srgb, var(--shape-lime) 35%, var(--rs-soft)); }
.rs-biz-art { width: 88px; height: 88px; border-radius: 50%; background: var(--surface) !important; }
.rs-biz > span:last-child { font-size: 15px; color: var(--text); white-space: nowrap; }

/* Band marquee: a small icon per item. The row already moves, so icons only play on hover. */
.rs-logo .rs-band-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--rs-soft) !important; flex: none; }
/* Off (not paused): a paused loop can rest on a hidden first frame. */
.rs-marq-track > div:not(:hover) .sa-loop { animation: none !important; }
.rs-marq-track > div:hover .sa-loop { animation-play-state: running !important; }

/* ---------- Blog cover styles ---------- */
.sa-stroke-light { stroke: var(--surface); }
.sa-signal { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .8; }
.sa-signal-light { stroke: var(--surface); }
.sa-signal-hot { stroke: var(--shape-lime); stroke-width: 3; opacity: 1; stroke-dasharray: .55 .45; }
.sa-signal-hot.sa-hot-ink { stroke: var(--shape-on-accent); }
.sa-run-line { animation: sa-run-line 6s linear infinite; }
@keyframes sa-run-line { to { stroke-dashoffset: -1; } }
.sa-turn-slow { animation: sa-turn-slow 14s var(--shape-ease, ease) infinite; }
@keyframes sa-turn-slow { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(-90deg); } 100% { transform: rotate(-360deg); } }
.sa-orbit-dot { animation: sa-orbit-dot 7s ease-in-out infinite; }
@keyframes sa-orbit-dot { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, -8px); } }
.sa-tick-turn { animation: sa-tick-turn 28s var(--shape-ease, ease) infinite; animation-delay: calc(var(--i) * -2.3s); transform-box: view-box; }
@keyframes sa-tick-turn { 0%, 21% { rotate: 0deg; } 25%, 46% { rotate: 90deg; } 50%, 71% { rotate: 180deg; } 75%, 96% { rotate: 270deg; } 100% { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  [data-service-art] * { transition: none !important; animation: none !important; }
  [data-service-art] :is(.sa-block, .sa-row, .sa-tile, .sa-rate, .sa-nodes > *, .sa-end, .sa-lines path) { opacity: 1 !important; transform: none !important; }
}