/* ============================================
   Services — la frappe
   Au-dessus de chaque échange, sur ordinateur : douze barres grises
   qui s'animent quand le bloc est au centre de l'écran (.is-current,
   js/page-services/focus.js). Figées sous « réduire les animations ».
   ============================================ */

/* ── La frappe ── douze barres grises qui s'animent quand le bloc est
   au centre de l'écran. Ordinateur seulement. */
.svc-typing {
    display: none;
    align-items: center;
    gap: 4px;
    height: 22px;
}

.svc-typing i {
    --h: 0.45;
    display: block;
    width: 4px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--ink-faint);
    opacity: 0.55;
    transform: scaleY(var(--h));
}

.svc-typing i:nth-child(3n + 1) { --h: 0.3; }
.svc-typing i:nth-child(4n + 2) { --h: 0.8; }
.svc-typing i:nth-child(5n + 3) { --h: 1; }
.svc-typing i:nth-child(7n) { --h: 0.6; }
.svc-typing i:first-child,
.svc-typing i:last-child { opacity: 0.25; }
.svc-typing i:nth-child(2) { --k: 1; }
.svc-typing i:nth-child(3) { --k: 2; }
.svc-typing i:nth-child(4) { --k: 3; }
.svc-typing i:nth-child(5) { --k: 4; }
.svc-typing i:nth-child(6) { --k: 5; }
.svc-typing i:nth-child(7) { --k: 6; }
.svc-typing i:nth-child(8) { --k: 7; }
.svc-typing i:nth-child(9) { --k: 8; }
.svc-typing i:nth-child(10) { --k: 9; }
.svc-typing i:nth-child(11) { --k: 10; }

.svc-feat.is-current .svc-typing i {
    animation: svc-typing 1.1s steps(3, jump-none) infinite alternate;
    animation-delay: calc(var(--k, 0) * -90ms);
}

@keyframes svc-typing {
    to {
        transform: scaleY(calc(1.15 - var(--h)));
    }
}

@media (min-width: 900px) {
    .svc-typing {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-feat.is-current .svc-typing i {
        animation: none;
    }
}