/* Six explanatory scenes, scoped to the home-page pain cards. */
#pain .explain-ready .ic{display:none}
#pain .explain-scene{position:relative;margin:12px 0 20px;border:1px solid #dce9e0;border-radius:12px;background:linear-gradient(135deg,#f7fbf8,#edf5ef);overflow:hidden;isolation:isolate}
#pain .explain-scene svg{display:block;width:100%;height:auto;overflow:hidden;aspect-ratio:320/130}
#pain .explain-scene text{font-family:inherit;font-size:12px;font-weight:600;fill:#28553f}
#pain .explain-scene .ex-small{font-size:11px;fill:#496858}
#pain .explain-scene .ex-node{fill:#fff;stroke:#a9c6b4;stroke-width:1}
#pain .explain-scene .ex-line{fill:none;stroke:#83a795;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#pain .explain-scene .ex-flow{fill:none;stroke:#367e5a;stroke-width:1.6;stroke-dasharray:3 5;animation:ex-flow 2s linear infinite}
#pain .explain-scene .ex-mark{fill:#def1e6;stroke:#367e5a;stroke-width:1.2}
#pain .explain-scene .ex-ink{fill:#185940}
#pain .explain-scene .ex-warn{fill:#f5e8d3;stroke:#b18643;stroke-width:1}
#pain .explain-scene .ex-warn-text{fill:#77501d}
#pain .explain-scene .ex-pulse{animation:ex-pulse 7s ease-in-out infinite;animation-delay:var(--ex-delay,0s)}
#pain .explain-scene .ex-message{animation:ex-message 7s ease-in-out infinite;animation-delay:var(--ex-delay,0s);transform-box:fill-box;transform-origin:center}
#pain .explain-scene .ex-orbit{animation:ex-orbit 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
#pain .explain-scene .ex-bar{animation:ex-grow 7s ease-in-out infinite;transform-box:fill-box;transform-origin:left}
#pain .explain-scene .ex-scan{animation:ex-scan 7s ease-in-out infinite;animation-delay:var(--ex-delay,0s)}
#pain .explain-scene .ex-clock{animation:ex-clock 7s linear infinite;transform-origin:160px 57px}
#pain .explain-scene [class*="ex-"]{animation-play-state:paused}
#pain .explain-visible .explain-scene [class*="ex-"]{animation-play-state:running}
#pain[data-explain-hidden="true"] .explain-scene [class*="ex-"]{animation-play-state:paused}
@keyframes ex-flow{to{stroke-dashoffset:-32}}
@keyframes ex-pulse{0%,65%,100%{opacity:.6}20%,40%{opacity:1}}
@keyframes ex-message{0%,65%,100%{transform:translateY(2px) scale(.96)}15%,45%{transform:translateY(0) scale(1)}}
@keyframes ex-orbit{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes ex-grow{0%,10%,100%{transform:scaleX(.45)}55%,82%{transform:scaleX(1)}}
@keyframes ex-scan{0%,100%{transform:translateY(0)}45%,65%{transform:translateY(22px)}}
@keyframes ex-clock{to{transform:rotate(360deg)}}
@media(max-width:680px){#pain .explain-scene{margin:12px 0 16px}}
@media(prefers-reduced-motion:reduce){
 #pain .explain-scene [class*="ex-"]{animation:none!important}
}

/* Give the repeated-work caption its own footer, clear of the return path. */
#pain .explain-scene--repeat svg{aspect-ratio:320/118}
#pain .explain-caption{display:block;border-top:1px solid #dce9e0;padding:10px 12px 12px;background:#f7fbf8;color:#496858;font-size:12px;line-height:1.6;text-align:center}

/* Highlight each connected repeat-work stage without shifting its connectors. */
#pain .explain-scene .ex-repeat-step .ex-node{animation:ex-stage 5.6s ease-in-out infinite;animation-delay:var(--ex-delay,0s);animation-play-state:inherit}
@keyframes ex-stage{0%,22%,100%{fill:#fff;stroke:#a9c6b4}5%,16%{fill:#def1e6;stroke:#367e5a}}