::deep :host {
    --roll-duration: 1s;
    --roll-easing: ease;
}

.bfrn {
    /* User-customizable CSS variables */
    /* font-family: var(--bfrn-font-family, inherit); */
    /* font-size: var(--bfrn-font-size, inherit); */
    line-height: var(--bfrn-line-height, normal);
    /* font-weight: var(--bfrn-font-weight, inherit); */
    color: var(--bfrn-color, inherit);
    
    /* Layout - not customizable */
    display: inline-flex;
    contain: layout style paint;
}

.bfrn__digit {
    width: 1ch;
    overflow: hidden;
    display: inline-flex;
    position: relative;
}

/* Static decimal-point separator — not a rolling digit */
.bfrn__dot {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 0.4ch;
    line-height: inherit;
    user-select: none;
}

/* Money-mode currency prefix — static, non-rolling */
.bfrn__prefix {
    display: inline-flex;
    align-items: flex-end;
    line-height: inherit;
    user-select: none;
}

.bfrn__value {
    color: transparent;
    position: relative;
}

.bfrn__scale {
    user-select: none;
    position: absolute;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: transform var(--roll-duration, 1s) var(--roll-easing, ease);
}

.bfrn__digit .bfrn__scale {
    transform: translateY(var(--digit-offset, 0%));
}

.bfrn__scale span:last-child {
    position: absolute;
    bottom: -10%;
    left: 0;
}

/* Support for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .bfrn__scale {
        transition: none;
    }
}

/* High refresh rate optimization */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .bfrn__scale {
            /* Ready for scroll-driven animations if needed */
        }
    }
}

/* Color scheme support */
@media (prefers-color-scheme: dark) {
    .bfrn {
        color-scheme: dark;
    }
}

/* Container queries support (when parent has container-type) */
@container (min-width: 0) {
    .bfrn__digit {
        /* Container-aware sizing if needed */
    }
}