/* goodwork. Living Lifecycle Loop widget. Pair with lifecycle-loop-widget.js. */
.llw { background: #000; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.llw::-webkit-scrollbar { display: none; }
.llw-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
@media (max-width: 900px) { .llw-svg { width: 900px; } }

/* resting text: column-header style, lights up when a customer uses that path */
.llw-col { font-size: 9px; font-weight: 600; letter-spacing: 0.1em; fill: rgba(255,255,255,0.22); transition: fill 0.9s ease; }
.llw-col.lit { fill: rgba(255,255,255,0.85); transition: fill 0.12s ease; }
.llw-col.lit-p { fill: #c4b5fd; transition: fill 0.12s ease; }
.llw-chlabel { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; fill: rgba(255,255,255,0.42); transition: fill 0.9s ease; }
.llw-chlabel.lit { fill: #fff; transition: fill 0.12s ease; }
.llw-chlabel.lit-p { fill: #c4b5fd; transition: fill 0.12s ease; }

/* round nodes: channels, lead entry, churn exit */
.llw-dot circle.bg { fill: #111; stroke: rgba(255,255,255,0.16); stroke-width: 1; transition: fill 0.9s ease, stroke 0.9s ease; }
.llw-dot .ico { stroke: rgba(255,255,255,0.68); transition: stroke 0.9s ease; }
.llw-dot.lit circle.bg { stroke: rgba(255,255,255,0.7); transition: fill 0.12s ease, stroke 0.12s ease; }
.llw-dot.lit .ico { stroke: #fff; transition: stroke 0.12s ease; }
.llw-dot.lit-p circle.bg { fill: rgba(122,90,248,0.2); stroke: #a78bfa; transition: fill 0.12s ease, stroke 0.12s ease; }
.llw-dot.lit-p .ico { stroke: #c4b5fd; transition: stroke 0.12s ease; }
.llw-dot.exit circle.bg { stroke: rgba(255,255,255,0.09); }
.llw-dot.exit .ico { stroke: rgba(255,255,255,0.28); }
.llw-dot.exit.lit circle.bg { stroke: rgba(255,255,255,0.32); }
.llw-dot.exit.lit .ico { stroke: rgba(255,255,255,0.6); }

/* workflow cards: chrome at rest, purple while the automation acts */
.llw-card .bg { fill: #0e0e0e; stroke: rgba(255,255,255,0.12); stroke-width: 1; transition: fill 0.9s ease, stroke 0.9s ease; }
.llw-card .icobox { fill: rgba(255,255,255,0.05); transition: fill 0.9s ease; }
.llw-card .ico { stroke: rgba(255,255,255,0.7); transition: stroke 0.9s ease; }
.llw-card .name { font-size: 13px; font-weight: 600; letter-spacing: -0.13px; fill: rgba(255,255,255,0.88); }
.llw-card .op { font-size: 11px; fill: rgba(255,255,255,0.38); transition: fill 0.9s ease; }
.llw-card .spark { fill: #a78bfa; opacity: 0.35; transition: opacity 0.9s ease; }
.llw-card.on .bg { fill: #16112b; stroke: rgba(167,139,250,0.55); transition: fill 0.15s ease, stroke 0.15s ease; }
.llw-card.on .icobox { fill: rgba(122,90,248,0.2); transition: fill 0.15s ease; }
.llw-card.on .ico { stroke: #a78bfa; transition: stroke 0.15s ease; }
.llw-card.on .op { fill: #c4b5fd; transition: fill 0.15s ease; }
.llw-card.on .spark { opacity: 1; transition: opacity 0.15s ease; }

/* hub atmosphere (from the AI orb + Company Brain) */
.llw-breathe { animation: llwBreathe 6s ease-in-out infinite; }
@keyframes llwBreathe { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } }
.llw-orbit { transform-origin: 500px 280px; animation: llwSpin 70s linear infinite; }
.llw-orbit--2 { animation-duration: 110s; animation-direction: reverse; }
@keyframes llwSpin { to { transform: rotate(360deg); } }
.llw-live { animation: llwLive 1.8s ease-in-out infinite; }
@keyframes llwLive { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* one-shot rings */
.llw-ripple { transform-box: fill-box; transform-origin: center; animation: llwRipple 1.1s ease-out forwards; }
.llw-radar  { transform-box: fill-box; transform-origin: center; animation: llwRadar 2.2s ease-out forwards; }
@keyframes llwRipple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(5); opacity: 0; } }
@keyframes llwRadar  { from { transform: scale(0.8); opacity: 0.55; } to { transform: scale(1.9); opacity: 0; } }

/* drifting dust */
.llw-dust { animation: llwDrift var(--d) linear infinite; animation-delay: var(--delay); opacity: 0; }
@keyframes llwDrift {
  0%   { transform: translate(0,0); opacity: 0; }
  20%  { opacity: var(--o); }
  80%  { opacity: var(--o); }
  100% { transform: translate(var(--dx), -60px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .llw-breathe, .llw-orbit, .llw-live, .llw-dust { animation: none; }
}