/*!
 * KSB Custom Icons — sparkles — eigenes KSB-Icon (nicht in FA7 Free enthalten)
 */

.sparkles {
    --ksb-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 54,44 100,50 54,56 50,100 46,56 0,50 46,44'/%3E%3C/svg%3E");

    position: relative;
    display: inline-block;
    width: 1.25em;
    height: 1em;
    vertical-align: -0.125em;
    overflow: visible;
}

/* FA7 glyph unterdrücken */
.sparkles::before {
    content: '' !important;
}

.fa-stack {
    .sparkles {
        &[class*="fa-stack-"] {
            top: -12px;
            left: 8px;
        }
    }
}



/* ─── Stern 1: groß, links (::after) ────────────────────────────────── */
.sparkles::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask-image:    var(--ksb-star);
    mask-image:            var(--ksb-star);
    -webkit-mask-size:     60% 66%;
    mask-size:             60% 66%;
    -webkit-mask-position: 4% 17%;
    mask-position:         4% 17%;
    -webkit-mask-repeat:   no-repeat;
    mask-repeat:           no-repeat;
    transform-origin: 34% 50%;
    animation: ksb-sp-1 2.2s ease-in-out infinite;
}

/* ─── Stern 2 + 3: beide klein rechts, zwei Mask-Layer ──────────────── */
.sparkles::before {
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask-image:    var(--ksb-star), var(--ksb-star);
    mask-image:            var(--ksb-star), var(--ksb-star);
    -webkit-mask-size:     32% 36%,  24% 28%;
    mask-size:             32% 36%,  24% 28%;
    -webkit-mask-position: right 10% top 0%,  right 12% bottom 12%;
    mask-position:         right 10% top 0%,  right 12% bottom 12%;
    -webkit-mask-repeat:   no-repeat, no-repeat;
    mask-repeat:           no-repeat, no-repeat;
    transform-origin:      72% 42%;
    animation: ksb-sp-2 2s ease-in-out infinite;
    animation-delay: 0.6s;
}

/* ─── Animationen ────────────────────────────────────────────────────── */
@keyframes ksb-sp-1 {
    0%   { opacity: 1;    transform: scale(1)    rotate( 0deg); }
    25%  { opacity: 0.55; transform: scale(0.84) rotate(-4deg); }
    55%  { opacity: 1;    transform: scale(1)    rotate( 4deg); }
    80%  { opacity: 0.7;  transform: scale(0.9)  rotate( 1deg); }
    100% { opacity: 1;    transform: scale(1)    rotate( 0deg); }
}

@keyframes ksb-sp-2 {
    0%   { opacity: 1;    transform: scale(1)    rotate(  0deg); }
    30%  { opacity: 0.5;  transform: scale(0.8)  rotate(  5deg); }
    60%  { opacity: 1;    transform: scale(1)    rotate( -5deg); }
    85%  { opacity: 0.65; transform: scale(0.86) rotate(  2deg); }
    100% { opacity: 1;    transform: scale(1)    rotate(  0deg); }
}

/* ─── Stack-Badge ────────────────────────────────────────────────────── */
.content-box-iconed .icon-stack .top-icon.sparkles {
    /* Größe kommt von font-size × em in .top-icon — kein fixer rem-Override */
    width:          2.14em;
    height:         2.14em;
    overflow:       visible;
}

.content-box-iconed .icon-stack .top-icon.sparkles::after {
    -webkit-mask-size:     52% 58%;
    mask-size:             52% 58%;
    -webkit-mask-position: 6% 20%;
    mask-position:         6% 20%;
    transform-origin:      32% 49%;
}

.content-box-iconed .icon-stack .top-icon.sparkles::before {
    -webkit-mask-image:    var(--ksb-star), var(--ksb-star);
    mask-image:            var(--ksb-star), var(--ksb-star);
    -webkit-mask-size:     28% 32%,  22% 26%;
    mask-size:             28% 32%,  22% 26%;
    -webkit-mask-position: right 16% top 2%,  right 18% bottom 16%;
    mask-position:         right 16% top 2%,  right 18% bottom 16%;
    -webkit-mask-repeat:   no-repeat, no-repeat;
    mask-repeat:           no-repeat, no-repeat;
    filter:                none;
    transform-origin:      72% 42%;
}

.fa-stack .sparkles[class*="fa-stack-"] {
    top:  -2px;
    left: 10px;
}