/* Printworx dienst-iconen: gedeelde lijniconen met dynamiet.be.
   Zelfde tekenanimatie als daar (stroke-dashoffset, pathLength=60),
   hier in het connect-lime. Zie class-printworx-dienst-iconen.php. */

:root {
    --pwx-di-lime: #b3c731;
    --pwx-di-inkt: #1d1d1b;
    --pwx-di-tegel: #f5f6ef;
    --pwx-di-duur: 0.9s;
    --pwx-di-stap: 0.12s;
    --pwx-di-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

svg.pwx-di {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
    color: var(--pwx-di-kleur, var(--pwx-di-lime));
}
svg.pwx-di path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}

/* Tekenen: op hover/focus van een trigger, of altijd bij verschijnen. */
svg.pwx-di--anim path,
.pwx-di-trigger:is(:hover, :focus-within) svg.pwx-di path,
.pwx-di-wrap--hover:is(:hover, :focus-within) svg.pwx-di path,
.et_pb_blurb:is(:hover, :focus-within) svg.pwx-di path,
a.pwx-mm-dienst:is(:hover, :focus-within) svg.pwx-di path {
    stroke-dashoffset: 60;
    animation: pwxIconDraw var(--pwx-di-duur) var(--pwx-di-ease) both;
}

/* Divi-blurbs op /diensten/: oude illustratie vervangen door icoon op tegel. */
.et_pb_blurb .et_pb_main_blurb_image .pwx-di-wrap {
    margin-bottom: 4px;
}
.et_pb_blurb .et_pb_main_blurb_image .pwx-di-wrap--tegel {
    border-radius: 18px;
}
svg.pwx-di path:nth-child(2) { animation-delay: calc(var(--pwx-di-stap) * 1); }
svg.pwx-di path:nth-child(3) { animation-delay: calc(var(--pwx-di-stap) * 2); }
svg.pwx-di path:nth-child(4) { animation-delay: calc(var(--pwx-di-stap) * 3); }
svg.pwx-di path:nth-child(5) { animation-delay: calc(var(--pwx-di-stap) * 4); }
svg.pwx-di path:nth-child(6) { animation-delay: calc(var(--pwx-di-stap) * 5); }
svg.pwx-di path:nth-child(7) { animation-delay: calc(var(--pwx-di-stap) * 6); }
svg.pwx-di path:nth-child(8) { animation-delay: calc(var(--pwx-di-stap) * 7); }
svg.pwx-di path:nth-child(9) { animation-delay: calc(var(--pwx-di-stap) * 8); }

@keyframes pwxIconDraw {
    0%   { stroke-dashoffset: 60; opacity: 0.2; }
    60%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Shortcode-wrapper [pwx_dienst_icoon] */
.pwx-di-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.pwx-di-wrap--lime { --pwx-di-kleur: var(--pwx-di-lime); }
.pwx-di-wrap--inkt { --pwx-di-kleur: var(--pwx-di-inkt); }
.pwx-di-wrap--wit  { --pwx-di-kleur: #fff; }
.pwx-di-wrap--erf  { --pwx-di-kleur: currentColor; }
.pwx-di-wrap--tegel {
    background: var(--pwx-di-tegel);
    border-radius: 22%;
    padding: calc(var(--pwx-di-px, 40px) * 0.3);
}

/* Megamenu: tegel en previewkolom */
.pwx-mm-dienst-tegel svg.pwx-di {
    width: 26px;
    height: 26px;
}
.pwx-mm-opmaat .pwx-mm-dienst-tegel svg.pwx-di {
    width: 20px;
    height: 20px;
}
.pwx-mm-preview-beeld svg.pwx-di {
    width: 56%;
    height: 56%;
    stroke-width: 1.2;
    animation: pwxFadeBeeld 0.45s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    svg.pwx-di path,
    svg.pwx-di--anim path,
    .pwx-di-trigger:is(:hover, :focus-within) svg.pwx-di path,
    .pwx-di-wrap--hover:is(:hover, :focus-within) svg.pwx-di path,
    a.pwx-mm-dienst:is(:hover, :focus-within) svg.pwx-di path {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}