/* "Cut your software bill" demo: a monthly bill of separate tools is crossed out line by
   line, then holds. Phases (list, cut, done) come from feature-motion.js. The bill never
   changes size, so the panel stays the same height as the other feature panels. */
.sb{align-items:center;font-size:14px;line-height:20px;color:#3d433a}
.sb-bill{width:min(450px,100%);padding:16px 20px 14px;background:#fff;border:1px solid #e3e6df;border-radius:16px;box-shadow:0 8px 24px #2834200a}
.sb-bill-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px dashed #e3e6df;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#8a8f86}
.sb-count{padding:2px 9px;border-radius:999px;background:#f1f3ef;color:#72746f;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0}

.sb-lines{list-style:none;margin:0;padding:0}
.sb-lines li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f3f4f1}
.sb-ico{width:18px;height:18px;border-radius:6px;background:color-mix(in srgb,var(--c) 38%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,#fff)}
.sb-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3d433a}
.sb-name small{margin-left:4px;font-size:12.5px;color:#9a9e96}
.sb-price{position:relative;font-variant-numeric:tabular-nums;font-weight:500;color:#242823}
.sb-total{display:flex;justify-content:space-between;align-items:center;padding-top:11px;font-weight:600;color:#242823}
.sb-total .sb-price{font-size:19px}

/* Orange strike, matching the heading highlight. Lines are crossed one by one, then the total. */
.sb-price:after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:#f08a3c;transform:scaleX(0);transform-origin:left}
.motion-bill:is([data-phase=cut],[data-phase=done]) .sb-price:after{transform:scaleX(1)}
.motion-bill:is([data-phase=cut],[data-phase=done]) :is(.sb-lines .sb-name,.sb-price){color:#b2b6ad}
.motion-bill[data-phase=cut] .sb-lines .sb-price:after{animation:sb-strike .35s calc(var(--i)*.42s + .2s) both}
.motion-bill[data-phase=cut] .sb-lines :is(.sb-name,.sb-price){animation:sb-dim .3s calc(var(--i)*.42s + .3s) both}
.motion-bill[data-phase=cut] .sb-total .sb-price:after{animation:sb-strike .45s 2.85s both}
.motion-bill[data-phase=cut] .sb-total .sb-price{animation:sb-dim .3s 2.95s both}
.motion-bill[data-phase=list] .sb-lines li{animation:sb-rise .35s calc(var(--i)*.09s) both}
.motion-bill[data-phase=list] .sb-total{animation:sb-rise .35s .6s both}

@keyframes sb-strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sb-dim{from{color:#242823}to{color:#b2b6ad}}
@keyframes sb-rise{from{opacity:0;transform:translateY(6px)}}

@container feature-demo (max-width:440px){
 .sb{font-size:13px;line-height:18px}
 .sb-bill{padding:12px 14px 10px}
 .sb-lines li{padding:8px 0}
 .sb-name small{display:none}
 .sb-total .sb-price{font-size:17px}
}