/* Flake Divider — kabdalis2 design system (ported from files2/Kåbdalis2.html
   .flake-divide pattern, sb-flake.jsx FlakeDivider).

   Two thin lines on either side of the Kåbdalis snowflake. Theme's
   buildFlakes IIFE (kabdalis2/assets/js/theme.js) populates every .kbf-mount
   with the 13-part exploded snowflake on page load. view.js adds .play when
   the divider scrolls into view, triggering the crystallize keyframes.
   Falu-red flake against the line token. */

.kabdalis-flake-divider{
    display: flex;
    align-items: center;
    gap: 24px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 44px);
}

/* Wide / full alignments work without overflow */
.kabdalis-flake-divider.alignwide,
.kabdalis-flake-divider.alignfull{ max-width: none; }

.kabdalis-flake-divider__line{
    flex: 1;
    height: 1px;
    background: var(--line);
}
.kabdalis-flake-divider__flake{
    flex: none;
    color: var(--falu);
}

/* Size modifiers — the flake-mount sets the SVG render size */
.kabdalis-flake-divider--sm .kabdalis-flake-divider__flake{ width: 28px; height: 28px; }
.kabdalis-flake-divider--md .kabdalis-flake-divider__flake{ width: 36px; height: 36px; }
.kabdalis-flake-divider--lg .kabdalis-flake-divider__flake{ width: 52px; height: 52px; }

.kabdalis-flake-divider__flake .kbf,
.kabdalis-flake-divider__flake svg{
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Crystallize-on-scroll animation ───────────────────────────────────
   Parts start hidden, fade/scale in when view.js adds .play (or when
   reduced-motion is requested, the .no-anim class skips the animation
   entirely). Keyframes (kbfCoreIn/kbfArmIn/kbfLeafIn) are defined in the
   theme's style.css so they exist globally for the header logo too — we
   just re-bind them here scoped to the divider. */
@media (prefers-reduced-motion: no-preference){
    .kabdalis-flake-divider .kbf-core,
    .kabdalis-flake-divider .kbf-arm,
    .kabdalis-flake-divider .kbf-li,
    .kabdalis-flake-divider .kbf-lo{
        opacity: 0;
    }
    .kabdalis-flake-divider.play .kbf-core{
        animation: kbfCoreIn .55s cubic-bezier(.22,.9,.3,1) both;
    }
    .kabdalis-flake-divider.play .kbf-arm{
        animation: kbfArmIn .6s cubic-bezier(.22,.9,.3,1) both;
        animation-delay: calc(.26s + var(--i) * .09s);
    }
    .kabdalis-flake-divider.play .kbf-li{
        animation: kbfLeafIn .55s cubic-bezier(.22,.9,.3,1) both;
        animation-delay: calc(.58s + var(--i) * .06s);
    }
    .kabdalis-flake-divider.play .kbf-lo{
        animation: kbfLeafIn .55s cubic-bezier(.22,.9,.3,1) both;
        animation-delay: calc(.72s + var(--i) * .06s);
    }
}

/* Editor preview always shows the final state (no animation) so editors
   immediately see what they get. */
.kabdalis-flake-divider.no-anim .kbf-core,
.kabdalis-flake-divider.no-anim .kbf-arm,
.kabdalis-flake-divider.no-anim .kbf-li,
.kabdalis-flake-divider.no-anim .kbf-lo{
    opacity: 1;
    animation: none !important;
}