/* ============================================================
   scramble.css - Text Scramble / Decode Effect
   Matrix / Hacker / Shuffle effect - also called decode effect
   - Uses monospace/tabular fallback during churn to prevent jitter
   - Respects prefers-reduced-motion
   ============================================================ */

/* Base: apply to any element with [data-scramble] - fixed: removed display:inline-block that broke text-center  */
[data-scramble] {
    /* display:inline-block removed - was breaking text-center and causing shrink-to-fit */
    /* tabular-nums keeps number widths stable */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    /* prevent layout shift when glyphs swap */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* The inner churn wrapper (aria-hidden) */
.scramble-text {
    font-variant-numeric: tabular-nums;
}

/* Each character cell - fixed width prevents jitter */
.scramble-char {
    display: inline-block;
    min-width: 0.62ch;
    text-align: center;
    white-space: pre;
    /* tabular keeps left-to-right from jumping */
    font-variant-numeric: tabular-nums;
    transition: opacity 120ms ease, color 120ms ease;
    will-change: contents;
}

/* Preserve real spaces - don't force width */
.scramble-char.is-space {
    min-width: 0.32ch;
}

/* While scrambling - keep site font to avoid CLS ( 22) */
.scramble-char.is-scrambling {
    opacity: 0.92;
}
.scramble-char.is-settled {
    opacity: 1;
    color: inherit;
}
[data-scramble].is-scrambling {
    font-family: inherit;
    letter-spacing: normal;
}

/* After done - revert to site font smoothly */
[data-scramble].is-scrambled {
    font-family: inherit;
    letter-spacing: normal;
}


/* Reduced motion - instant text, no churn, no mono swap */
@media (prefers-reduced-motion: reduce) {
    [data-scramble].is-scrambling,
    [data-scramble].is-scrambled {
        font-family: inherit !important;
        letter-spacing: normal !important;
    }
    .scramble-char {
        transition: none !important;
        min-width: auto !important;
    }
}

/* Optional: subtle glow for hero titles */
.hero-slider [data-scramble].is-scrambling .scramble-char.is-scrambling {
    text-shadow: 0 0 8px rgba(255,255,255,0.35);
}

/* Section titles - keep weight */
.section-title[data-scramble] .scramble-char,
.specs_title[data-scramble] .scramble-char {
    font-weight: inherit;
}

/* Fade  Scramble   (    Scramble) */
@keyframes headingFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.heading-fade {
    animation: headingFade 420ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    .heading-fade { animation: none; }
}