/* Explainer — a timed, scene-based animation that plays like a video.
   Built in SVG so it stays sharp at any size and costs a few KB. */

.exp{max-width:900px;margin:0 auto}
.exp-stage{position:relative;background:#f5f5f7;border-radius:22px;overflow:hidden;
  aspect-ratio:16/9}
.tile-dark .exp-stage{background:#141414}


/* scenes stack; only the active one shows */
.exp-stage video.sc{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .6s ease;pointer-events:none}
.exp-stage video.sc.on{opacity:1}

/* caption bar */
.exp-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 28px 26px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;text-align:left}
.exp-cap b{display:block;font-size:clamp(17px,2.2vw,24px);font-weight:600;
  letter-spacing:-.015em;line-height:1.2}
.exp-cap span{display:block;font-size:clamp(13px,1.5vw,16px);color:rgba(255,255,255,.75);
  margin-top:4px;letter-spacing:-.01em}

/* controls */
.exp-bar{display:flex;align-items:center;gap:14px;margin-top:16px}
.exp-play{width:42px;height:42px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:#fff;display:grid;place-items:center;transition:background .2s}
.exp-play:hover{background:var(--accent-hi)}
.exp-play svg{width:15px;height:15px;fill:currentColor}
.exp-track{flex:1;display:flex;gap:6px}
.exp-seg{flex:1;height:3px;border-radius:99px;background:var(--line);
  cursor:pointer;position:relative;overflow:hidden;border:0;padding:0}
.tile-dark .exp-seg{background:rgba(255,255,255,.22)}
.exp-seg i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--accent);display:block}
.tile-dark .exp-seg i{background:#fff}
.exp-seg.done i{transform:scaleX(1)}
.exp-seg.live i{animation:segfill var(--dur,5s) linear forwards}
@keyframes segfill{to{transform:scaleX(1)}}
.exp-time{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}

/* ---- scene primitives ---- */
.sv{fill:none;stroke:#86868b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-ink{stroke:#1d1d1f}
.sv-acc{stroke:#4a5320}
.sv-fill{fill:#4a5320;stroke:none}
.sv-soft{fill:#e8e8ed;stroke:none}
.sv-white{fill:#fff;stroke:none}
.exp-stage text{font-family:inherit;font-size:13px;fill:#6e6e73;font-weight:500}

/* animations, only while the scene is live */
.sc.on .a-draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  animation:dash 1.1s var(--ease) forwards}
@keyframes dash{to{stroke-dashoffset:0}}
.sc.on .a-pop{animation:pop .5s var(--ease) backwards}
.sc.on .a-pop:nth-of-type(2){animation-delay:.12s}
.sc.on .a-pop:nth-of-type(3){animation-delay:.24s}
.sc.on .a-pop:nth-of-type(4){animation-delay:.36s}
@keyframes pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.sc.on .a-rise{animation:rise .6s var(--ease) backwards}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sc.on .a-shake{animation:shake 1.6s ease-in-out infinite}
@keyframes shake{25%{transform:translate(2px,-1px)}75%{transform:translate(-2px,1px)}}
.sc.on .a-flow{stroke-dasharray:6 8;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.sc.on .a-pulse{animation:expulse 1.8s ease-in-out infinite}
@keyframes expulse{50%{opacity:.35}}
.sc.on .a-grow{transform-origin:bottom;animation:grow .8s var(--ease) backwards}
.sc.on .a-grow:nth-of-type(2){animation-delay:.1s}
.sc.on .a-grow:nth-of-type(3){animation-delay:.2s}
.sc.on .a-grow:nth-of-type(4){animation-delay:.3s}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media(max-width:560px){
  .exp-cap{padding:26px 18px 18px}
  .exp-bar{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .sc,.sc.on *{animation:none!important;transition:none!important}
  .exp-seg.live i{transform:scaleX(1)}
}

/* a CSS fill rule beats an inline fill attribute, so text on a dark shape
   needs a class rather than fill="#fff" */
.exp-stage text.sv-on-dark{fill:#fff;font-weight:600}