/* ForexR /broker (KCM Trade review). Page-scoped, hand-written, no build step; loaded after
   app.css, whose tokens and .bp-* hero rules it builds on. Prefix: kcm-. */

/* The mark assembles once - the gold tile lands, then the five pieces of the K settle in from
   the right, the way the chevron points - and afterwards a slow sheen crosses it. The pieces
   are <path style="--i:n">, so the stagger is one rule. */
.kcm-mark{width:clamp(56px,9vw,78px);margin:0 auto 18px}
.kcm-mark svg{display:block;width:100%;height:auto}
.kcm-tile{opacity:0;transform-box:fill-box;transform-origin:center;animation:kcm-tile .42s cubic-bezier(.2,.8,.3,1) forwards}
.kcm-k path{opacity:0;animation:kcm-piece .45s cubic-bezier(.2,.75,.3,1) forwards;animation-delay:calc(.18s + var(--i,0)*60ms)}
.kcm-sheen{opacity:0;animation:kcm-sheen 5.5s ease-in-out 1.3s infinite}
@keyframes kcm-tile{0%{opacity:0;transform:scale(.9)}45%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes kcm-piece{from{opacity:0;transform:translateX(13px)}to{opacity:1;transform:translateX(0)}}
@keyframes kcm-sheen{0%{opacity:0;transform:translateX(0)}6%{opacity:1}30%{opacity:1}36%{opacity:0;transform:translateX(200px)}100%{opacity:0;transform:translateX(200px)}}
@media(prefers-reduced-motion:reduce){
    .kcm-tile,.kcm-k path{animation:none;opacity:1}
    .kcm-sheen{animation:none;opacity:0}
}