/* css/odometer.css - Perfeccionamiento del Reloj Mecánico Luckhand */

.hero-number-odometer {
    display: inline-flex;
    align-items: center; /* Centrado vertical mejorado */
    font-size: 6rem;
    font-weight: 900;
    color: #fff;
    height: 1.25em; /* Aumentado para evitar cortes */
    line-height: 1.25em;
    overflow: hidden;
    position: relative;
    /* Máscara de degradado para efecto 3D de tambor */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
    text-shadow: 0 0 20px rgba(0, 255, 157, 0.3); /* Resplandor más limpio */
}

@media (max-width: 1024px) {
    .hero-number-odometer {
        font-size: 3.5rem; /* Un poco más grande en móvil */
        height: 1.3em;
        line-height: 1.3em;
    }
}

.odometer-digit {
    position: relative;
    width: 0.7ch; /* Un poco más de espacio lateral */
    height: 100%;
    display: flex;
    justify-content: center;
}

.digit-strip {
    display: flex;
    flex-direction: column;
    transition: transform 3.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform;
}

.digit-strip span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.25em; /* Sincronizado con el padre */
    text-align: center;
}

/* Blur suave durante el giro */
.odometer-digit.is-spinning .digit-strip {
    filter: blur(1px);
    opacity: 0.9;
}

.odometer-separator, .odometer-plus {
    opacity: 0.9;
    padding-bottom: 0.1em; /* Ajuste fino de alineación */
}


/* Estado Inicial (Para que no empiece en 0 si queremos) */
/* El JS se encargará de setear el target */