/* Flake Section Head — kabdalis2 design system.
   Centered grid: flake → kicker → h2 → lead.
   Theme buildFlakes (theme.js) auto-fills the .kbf-mount with the 13-part
   SVG. view.js adds .play on intersection so the intro keyframes run.
   Keyframes (kbfCoreIn/kbfArmIn/kbfLeafIn) live in theme style.css.
   Ported from sb-flake.jsx FlakeSectionHead + shared/blocks.css .b-flakehead*. */

.kabdalis-flake-section-head{
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
    padding: 10px 0;
    margin-inline: auto;
    max-width: 760px;
}

.kabdalis-flake-section-head__flake{
    width: 46px;
    height: 46px;
    color: var(--falu);
    margin-bottom: 4px;
}
.kabdalis-flake-section-head__flake .kbf,
.kabdalis-flake-section-head__flake svg{
    width: 100%;
    height: 100%;
    display: block;
}

.kabdalis-flake-section-head__kicker{
    /* Inherits typography from .b-kicker primitive in widget-frame.css */
    color: var(--accent);
}

.kabdalis-flake-section-head__title{
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--display-w);
    letter-spacing: var(--display-ls);
    line-height: var(--display-lh);
    font-size: 1.7rem;
    color: var(--ink);
    text-wrap: balance;
}

.kabdalis-flake-section-head__lead{
    margin: 0;
    max-width: 46ch;
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.55;
}

/* ── Crystallize-on-scroll animation (parts hidden until .play) ─────── */
@media (prefers-reduced-motion: no-preference){
    .kabdalis-flake-section-head .kbf-core,
    .kabdalis-flake-section-head .kbf-arm,
    .kabdalis-flake-section-head .kbf-li,
    .kabdalis-flake-section-head .kbf-lo{
        opacity: 0;
    }
    .kabdalis-flake-section-head.play .kbf-core{
        animation: kbfCoreIn .55s cubic-bezier(.22,.9,.3,1) both;
    }
    .kabdalis-flake-section-head.play .kbf-arm{
        animation: kbfArmIn .6s cubic-bezier(.22,.9,.3,1) both;
        animation-delay: calc(.26s + var(--i) * .09s);
    }
    .kabdalis-flake-section-head.play .kbf-li{
        animation: kbfLeafIn .55s cubic-bezier(.22,.9,.3,1) both;
        animation-delay: calc(.58s + var(--i) * .06s);
    }
    .kabdalis-flake-section-head.play .kbf-lo{
        animation: kbfLeafIn .55s cubic-bezier(.22,.9,.3,1) both;
        animation-delay: calc(.72s + var(--i) * .06s);
    }
}

.kabdalis-flake-section-head.no-anim .kbf-core,
.kabdalis-flake-section-head.no-anim .kbf-arm,
.kabdalis-flake-section-head.no-anim .kbf-li,
.kabdalis-flake-section-head.no-anim .kbf-lo{
    opacity: 1;
    animation: none !important;
}