/* motion.css — les styles de motion.js (landing et app).
 * Les mouvements partent vite et finissent doucement ; le flou dit « en train
 * de bouger » et disparaît quand la valeur est posée. */

:root {
    --mo-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --mo-ease-roll: cubic-bezier(0.22, 1, 0.36, 1);
}

.mo-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Compteur : un chiffre par colonne ───────────────────────────────────── */
.mo-odo { font-variant-numeric: tabular-nums; }
.mo-odo-visual { display: inline-flex; align-items: baseline; }
.mo-odo-col {
    display: inline-block; position: relative;
    height: 1.12em; line-height: 1.12em; overflow: hidden;
    vertical-align: bottom;
    /* Les chiffres qui sortent s'estompent au lieu d'être coupés net. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.mo-odo-strip {
    display: flex; flex-direction: column;
    transition: transform 0.52s var(--mo-ease-roll), filter 0.3s ease-out;
}
.mo-odo-strip > span { display: block; height: 1.12em; text-align: center; }
.mo-odo-col.is-rolling .mo-odo-strip { filter: blur(1.4px); }
.mo-odo-sep { display: inline-block; }

/* ── Texte révélé mot à mot ──────────────────────────────────────────────── */
.mo-word {
    display: inline-block;
    animation: mo-word 0.45s var(--mo-ease) both;
}
@keyframes mo-word {
    from { opacity: 0; filter: blur(6px); transform: translateY(0.18em); }
    to   { opacity: 1; filter: none; transform: none; }
}

/* ── Du flou au net, en cascade ──────────────────────────────────────────── */
.mo-rise {
    animation: mo-rise 0.65s var(--mo-ease) both;
    animation-delay: calc(var(--mo-i, 0) * var(--mo-gap, 70ms));
}
@keyframes mo-rise {
    from { opacity: 0; filter: blur(8px); transform: translateY(14px); }
    to   { opacity: 1; filter: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mo-word, .mo-rise { animation: none; }
    .mo-odo-strip { transition: none; }
}