Doorhalen en vervangen Nieuw

<!-- Doorhalen en vervangen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="srp"><span class="srp__kk">Administratiekantoor Bos · Amersfoort</span><p class="srp__s" aria-live="polite">Uw boekhouding is <span class="srp__old"><span class="srp__ot">een schoenendoos</span><svg class="srp__line" viewBox="0 0 100 20" preserveAspectRatio="none" aria-hidden="true"><path d="M2 13 C 20 7, 38 15, 56 9 S 86 6, 98 11" pathLength="1"/></svg></span> <span class="srp__new"><span class="srp__nt">op orde</span></span>.</p>
<div class="srp__foot"><span class="srp__ct">01 / 03</span><span>Vaste prijs vanaf € 95 per maand</span></div></div>
</div>

/* Doorhalen en vervangen · NedDev · eigen werk. */
.srp{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;container-type:inline-size}
.srp__kk{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#6b6762}
.srp__s{margin:0;font:700 clamp(21px,7.4cqw,32px)/1.18 'Switzer',sans-serif;letter-spacing:-.035em}
.srp__old{position:relative;display:inline-block;color:#a8a39c;transition:opacity .4s,color .4s}
.srp__line{position:absolute;left:-3%;width:106%;top:22%;height:60%;overflow:visible;pointer-events:none}
.srp__line path{fill:none;stroke:#F5480F;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.srp.is-struck .srp__line path{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.6,0,.3,1)}
.srp__new{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.srp__nt{display:inline-block;transform:translateY(105%);box-shadow:inset 0 -.14em 0 #F5480F;transition:transform .2s}
.srp.is-new .srp__nt{transform:none;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.srp.is-out .srp__old,.srp.is-out .srp__new{opacity:0;transition:opacity .35s}
.srp__foot{display:flex;justify-content:space-between;gap:10px;font:500 10px 'JetBrains Mono',monospace;color:#6b6762;border-top:1px solid #eeebe7;padding-top:9px}
.srp__ct{color:#F5480F;font-variant-numeric:tabular-nums}

// Doorhalen en vervangen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.srp')||root;
var P=[['een schoenendoos','op orde'],['elk kwartaal stress','tien minuten werk'],['een raadsel','elke dag inzichtelijk']];
var ot=root.querySelector('.srp__ot'),nt=root.querySelector('.srp__nt'),ct=root.querySelector('.srp__ct'),k=0;
if(matchMedia('(prefers-reduced-motion: reduce)').matches){root.classList.add('is-struck','is-new');return;}
function cls(a){root.classList.remove('is-struck','is-new','is-out');a.forEach(function(c){root.classList.add(c);});}
function run(){ot.textContent=P[k][0];nt.textContent=P[k][1];ct.textContent='0'+(k+1)+' / 03';cls([]);
setTimeout(function(){cls(['is-struck']);},500);setTimeout(function(){cls(['is-struck','is-new']);},1100);
setTimeout(function(){cls(['is-struck','is-new','is-out']);},3600);setTimeout(function(){k=(k+1)%P.length;run();},4050);}
run();
}
init(document.querySelector('.jouw-container'));