/* Maestro Agency — Logo-Styles & Reveal-Animation
   Farben kommen per --m / --a / --l (vom Modul gesetzt). */
.maestro-logo{display:block;width:100%;height:auto;overflow:visible}
.maestro-logo .ml-word path{fill:var(--m,#22d3ee)}
.maestro-logo .ml-agency{fill:var(--a,#fafafa)}
.maestro-logo .ml-ln{fill:var(--l,#fafafa)}
.maestro-logo .ml-word{transform-box:fill-box;transform-origin:center}
.maestro-logo .ml-agency{transform-box:fill-box;transform-origin:center}
.maestro-logo .ml-ln.l{transform-box:fill-box;transform-origin:right center}
.maestro-logo .ml-ln.r{transform-box:fill-box;transform-origin:left center}

/* Reveal: ① MAESTRO taucht auf → ② AGENCY taucht auf → ③ Striche von innen nach außen */
.maestro-logo.ml-anim .ml-word{opacity:0;transform:scale(1.05);filter:blur(6px)}
.maestro-logo.ml-anim .ml-agency{opacity:0;transform:translateY(10px) scale(.98)}
.maestro-logo.ml-anim .ml-ln{transform:scaleX(0)}
.maestro-logo.ml-anim.ml-play .ml-word{animation:ml-appear .7s cubic-bezier(.2,.8,.2,1) forwards}
.maestro-logo.ml-anim.ml-play .ml-agency{animation:ml-appearA .55s .8s cubic-bezier(.2,.8,.2,1) forwards}
.maestro-logo.ml-anim.ml-play .ml-ln{animation:ml-grow .6s 1.35s cubic-bezier(.76,0,.24,1) forwards}
@keyframes ml-appear{to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes ml-appearA{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ml-grow{to{transform:scaleX(1)}}