/**
 * ODOMETER - Estilos CSS
 *
 * Valores visuales via CSS custom properties (seteadas por JS).
 * Digitos = texture atlas GPU. Symbol/separator = DOM hibrido.
 */

/* ==========================================================================
   BASE
   ========================================================================== */

.odometer {
    /* Positioning */
    position: relative;
    /* Box Model - Layout "tonto": sin centrado inteligente, JS controla todo */
    display: inline-block;
    overflow: hidden;
    padding: var(--odometer-padding);
    /* Visual */
    background: var(--odometer-bg);
    border: var(--odometer-border);
    border-radius: var(--odometer-radius);
    box-shadow: var(--odometer-box-shadow);
    /* Glow ya esta bakeado en el atlas - no usar drop-shadow aqui */
}

/* ==========================================================================
   OVERLAY (scanlines CRT / grid LED)
   ========================================================================== */

.odometer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.odometer--overlay-none::after {
    display: none;
}

.odometer--overlay-scanline::after {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent var(--scanline-gap),
        rgba(0, 0, 0, var(--scanline-opacity)) var(--scanline-gap),
        calc(var(--scanline-gap) + var(--scanline-width))
    );
}

.odometer--overlay-grid::after {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent calc(var(--grid-size) - 1px),
            rgba(0, 0, 0, var(--grid-opacity)) calc(var(--grid-size) - 1px),
            rgba(0, 0, 0, var(--grid-opacity)) var(--grid-size)
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent calc(var(--grid-size) - 1px),
            rgba(0, 0, 0, var(--grid-opacity)) calc(var(--grid-size) - 1px),
            rgba(0, 0, 0, var(--grid-opacity)) var(--grid-size)
        );
}

/* ==========================================================================
   TYPOGRAPHY - Elementos DOM hibridos (symbol, separator)
   ========================================================================== */

.odometer-symbol,
.odometer-separator {
    /* Typography */
    font-family: var(--odometer-font-family);
    font-weight: var(--odometer-font-weight);
    /* Visual - fallback a verde si --odometer-color no esta definida (modo gradient) */
    color: var(--odometer-color, #22c55e);
    text-shadow:
        0 0 var(--odometer-glow-blur) var(--odometer-glow),
        var(--odometer-shadow, 0 0 0 transparent);
    /* Stacking: elevar sobre los slots que usan marginLeft negativo */
    /* CRITICO: isolation crea un nuevo stacking context que respeta z-index */
    position: relative;
    z-index: 10;
    isolation: isolate;
}

.odometer-symbol {
    /* Box Model - Layout tonto: inline-block + vertical-align top */
    display: inline-block;
    vertical-align: top;
    /* Typography: alinear a la derecha para kerning con primer digito */
    text-align: right;
    /* Visual */
    opacity: var(--odometer-symbol-opacity);
}

.odometer-separator {
    /* Box Model - Layout tonto: inline-block + vertical-align top */
    display: inline-block;
    vertical-align: top;
    /* Visual */
    opacity: var(--odometer-separator-opacity);
}

/* Stroke mode */
.odometer--stroke .odometer-symbol,
.odometer--stroke .odometer-separator {
    -webkit-text-stroke: var(--odometer-stroke-width) var(--odometer-stroke);
    text-stroke: var(--odometer-stroke-width) var(--odometer-stroke);
    paint-order: stroke fill;
}

/* Gradient mode - Symbol y Separator usan color solido del gradiente */
/* NOTA: background-clip:text no funciona bien en elementos pequenos (coma, punto) */
/* Usamos el color medio del gradiente para consistencia visual */
/* IMPORTANTE: !important para ganar a cualquier herencia de --odometer-color */
.odometer--gradient .odometer-symbol,
.odometer--gradient .odometer-separator {
    color: var(--odometer-gradient-mid, #22c55e) !important;
}

/* ==========================================================================
   HIDDEN STATE - Global (fuera de compact mode)
   Cuando un separador/slot esta oculto, sacarlo del flujo completamente.
   ========================================================================== */

.odometer-separator--hidden,
.odometer-slot--hidden {
    display: none !important;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.odometer-digits {
    /* Layout tonto: white-space nowrap para mantener en linea */
    display: block;
    white-space: nowrap;
}

.odometer-slot {
    /* Box Model - Layout tonto: inline-block + vertical-align top */
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    /* Stacking: z-index negativo para que los separadores (z-index: 10)
       siempre esten por encima, incluso con marginLeft negativo */
    z-index: 0;
}

.odometer-strip {
    /* Positioning */
    position: absolute;
    top: 0;
    left: 0;
    /* Box Model */
    width: 100%;
}

/* ==========================================================================
   TEXTURE ATLAS - Digitos como background-image GPU
   ========================================================================== */

.odometer-strip--texture {
    background-image: var(--atlas-url);
    /* repeat-y permite animar --digit mas alla de 0-9 para forzar direccion */
    background-repeat: repeat-y;
    background-size: var(--atlas-width) var(--atlas-height);
    background-position-y: calc(var(--slot-height) * var(--digit, 0) * -1);
}

/* Braking: transicion suave al valor final */
.odometer--braking .odometer-strip--texture {
    transition: background-position-y var(--brake-duration, 0.15s) cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   SPINNING STATE
   Filter a nivel contenedor afecta TODO (texturas + DOM gradient)
   ========================================================================== */

.odometer--spinning,
.odometer--css-spin {
    filter: brightness(0.4) saturate(0.7);
}

/* CSS animation spin (zero JS overhead) */
@keyframes odometer-texture-spin-down {
    from { background-position-y: 0; }
    to { background-position-y: calc(var(--slot-height) * -10); }
}

@keyframes odometer-texture-spin-up {
    from { background-position-y: calc(var(--slot-height) * -10); }
    to { background-position-y: 0; }
}

.odometer--css-spin .odometer-strip--texture {
    animation: odometer-texture-spin-down var(--spin-duration, 0.12s) linear infinite;
}

/* Variacion de velocidad por slot para efecto organico */
.odometer--css-spin .odometer-slot:nth-child(2n) .odometer-strip--texture {
    animation-name: odometer-texture-spin-up;
    animation-duration: calc(var(--spin-duration, 0.12s) * 1.1);
}

.odometer--css-spin .odometer-slot:nth-child(3n) .odometer-strip--texture {
    animation-duration: calc(var(--spin-duration, 0.12s) * 0.9);
}

.odometer--css-spin .odometer-slot:nth-child(5n) .odometer-strip--texture {
    animation-duration: calc(var(--spin-duration, 0.12s) * 1.15);
}

/* ==========================================================================
   COMPACT MODE - Colapsa ceros a la izquierda
   ========================================================================== */

.odometer--compact .odometer-slot,
.odometer--compact .odometer-separator {
    transition:
        width 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

/* will-change en el strip, no en el slot - es el strip el que se anima */
.odometer--compact .odometer-strip {
    will-change: transform;
}

.odometer--compact .odometer-slot--hidden {
    width: 0 !important;
    transform: scaleX(0);
    opacity: 0;
}

.odometer--compact .odometer-separator--hidden {
    width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: scaleX(0);
    opacity: 0;
}

/* ==========================================================================
   EFFECTS - Celebrate / Flash
   ========================================================================== */

@keyframes odometer-celebrate-pulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.6)); }
    50% { filter: drop-shadow(0 0 24px rgba(74, 222, 128, 1)) drop-shadow(0 0 50px rgba(74, 222, 128, 0.6)); }
}

@keyframes odometer-celebrate-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.odometer--celebrate {
    animation:
        odometer-celebrate-pulse 0.8s ease-in-out,
        odometer-celebrate-scale 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Celebrate: filter unificado en el contenedor de digitos para que
   todos los elementos (atlas + DOM) se vean afectados igual */
.odometer--celebrate .odometer-digits {
    filter: brightness(1.2) saturate(1.3);
}

@keyframes odometer-flash-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.odometer--flash {
    animation: odometer-flash-shake 0.4s ease-in-out;
}