/* [mgg_icon] animated brand icons. Play once when scrolled into view (.is-in) and again on card hover (.is-play). */
.mgg-icon{
	--p:var(--e-global-color-primary,#4D00A4);
	--y:var(--e-global-color-accent,#FFDE59);
	display:inline-block;width:var(--mgg-icon-size,64px);height:var(--mgg-icon-size,64px);line-height:0;vertical-align:middle;
}
.mgg-icon svg{display:block;width:100%;height:100%;overflow:visible}
.mgg-icon .bg{fill:#F1ECFA}
.mgg-icon .ln{fill:none;stroke:var(--p);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mgg-icon .ac{fill:var(--y)}
.mgg-icon .arrow{fill:none;stroke:#161B1B;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mgg-icon .node{fill:#fff}
.mgg-icon .hubdot{fill:var(--p)}
.mgg-icon .chk{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mgg-icon g,.mgg-icon path,.mgg-icon circle{transform-box:fill-box;transform-origin:center}

/* waiting to scroll into view: hide the parts that animate in */
.mgg-icon.is-wait .badge,.mgg-icon.is-wait .arrow,.mgg-icon.is-wait .spark,.mgg-icon.is-wait .node,.mgg-icon.is-wait .wire,.mgg-icon.is-wait .rows,
.mgg-icon.is-wait .flow,.mgg-icon.is-wait .crm,.mgg-icon.is-wait .keyg,.mgg-icon.is-wait .bar,.mgg-icon.is-wait .trend,.mgg-icon.is-wait .dot{opacity:0}

/* ---- grow: badge pops, arrow climbs ---- */
.mgg-icon--grow.is-in .badge,.mgg-icon--grow.is-play .badge{animation:mggPop .55s cubic-bezier(.2,.9,.3,1.4) both}
.mgg-icon--grow.is-in .arrow,.mgg-icon--grow.is-play .arrow{animation:mggClimb 1.1s .25s ease-in-out both}
.mgg-icon--grow.is-in .store,.mgg-icon--grow.is-play .store{animation:mggRise .5s ease-out both}

/* ---- research: lens scans the lines, sparkle twinkles ---- */
.mgg-icon--research.is-in .lens,.mgg-icon--research.is-play .lens{animation:mggScan 1.4s ease-in-out both}
.mgg-icon--research.is-in .spark,.mgg-icon--research.is-play .spark{animation:mggTwinkle 1.2s .5s ease-in-out both}
.mgg-icon--research.is-in .rows,.mgg-icon--research.is-play .rows{stroke-dasharray:16;animation:mggDraw .8s ease-out both}

/* ---- connect: nodes drift in, wires draw, hub pulses ---- */
.mgg-icon--connect .wire{stroke-dasharray:22}
.mgg-icon--connect.is-in .node,.mgg-icon--connect.is-play .node{animation:mggGather .6s ease-out both}
.mgg-icon--connect.is-in .n2,.mgg-icon--connect.is-play .n2{animation-delay:.08s}
.mgg-icon--connect.is-in .n3,.mgg-icon--connect.is-play .n3{animation-delay:.16s}
.mgg-icon--connect.is-in .n4,.mgg-icon--connect.is-play .n4{animation-delay:.24s}
.mgg-icon--connect.is-in .wire,.mgg-icon--connect.is-play .wire{animation:mggWire .7s .35s ease-out both}
.mgg-icon--connect.is-in .hub,.mgg-icon--connect.is-play .hub{animation:mggPulse 1s .9s ease-out both}

/* ---- system: three channels draw into one CRM box ---- */
.mgg-icon--system .flow{stroke-dasharray:60}
.mgg-icon--system.is-in .src,.mgg-icon--system.is-play .src{animation:mggGather .45s ease-out both}
.mgg-icon--system.is-in .s2,.mgg-icon--system.is-play .s2{animation-delay:.08s}
.mgg-icon--system.is-in .s3,.mgg-icon--system.is-play .s3{animation-delay:.16s}
.mgg-icon--system.is-in .flow,.mgg-icon--system.is-play .flow{animation:mggFlow .8s .25s ease-out both}
.mgg-icon--system.is-in .crm,.mgg-icon--system.is-play .crm{animation:mggPop .5s .9s cubic-bezier(.2,.9,.3,1.4) both}

/* ---- own: key slides in and turns, check badge pops ---- */
.mgg-icon--own .keyg{transform-origin:24px 28px;transform-box:view-box}
.mgg-icon--own.is-in .keyg,.mgg-icon--own.is-play .keyg{animation:mggTurn .8s cubic-bezier(.2,.9,.3,1.2) both}
.mgg-icon--own.is-in .badge,.mgg-icon--own.is-play .badge{animation:mggPop .5s .65s cubic-bezier(.2,.9,.3,1.4) both}

/* ---- report: bars grow, trend draws, dot pops ---- */
.mgg-icon--report .bar{transform-origin:center bottom}
.mgg-icon--report .trend{stroke-dasharray:30}
.mgg-icon--report.is-in .bar,.mgg-icon--report.is-play .bar{animation:mggBar .55s ease-out both}
.mgg-icon--report.is-in .b2,.mgg-icon--report.is-play .b2{animation-delay:.12s}
.mgg-icon--report.is-in .b3,.mgg-icon--report.is-play .b3{animation-delay:.24s}
.mgg-icon--report.is-in .trend,.mgg-icon--report.is-play .trend{animation:mggTrend .6s .55s ease-out both}
.mgg-icon--report.is-in .dot,.mgg-icon--report.is-play .dot{animation:mggPop .45s 1s cubic-bezier(.2,.9,.3,1.4) both}

@keyframes mggPop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes mggRise{0%{transform:translateY(4px);opacity:.4}100%{transform:none;opacity:1}}
@keyframes mggClimb{0%{transform:translateY(5px);opacity:0}40%{transform:translateY(-2px);opacity:1}70%{transform:translateY(1px)}100%{transform:none}}
@keyframes mggScan{0%{transform:translate(-14px,-14px)}45%{transform:translate(-4px,-16px)}75%{transform:translate(-9px,-6px)}100%{transform:none}}
@keyframes mggTwinkle{0%{transform:scale(0) rotate(-45deg)}55%{transform:scale(1.25) rotate(10deg)}100%{transform:none}}
@keyframes mggDraw{0%{stroke-dashoffset:16}100%{stroke-dashoffset:0}}
@keyframes mggGather{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes mggWire{0%{stroke-dashoffset:22}100%{stroke-dashoffset:0}}
@keyframes mggFlow{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}
@keyframes mggTurn{0%{transform:translate(-8px,8px) rotate(-60deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes mggBar{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes mggTrend{0%{stroke-dashoffset:30;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes mggPulse{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){.mgg-icon *{animation:none!important}}