/* Logo animada embutida para funcionar na prévia local sem iframe */
.apex-inline-logo-preview{width:100%;height:100%;display:flex;align-items:flex-start;justify-content:center}
.apex-inline-logo-preview .stage{width:100%;height:100%;display:flex;align-items:flex-start;justify-content:center;background:transparent;padding:0}

:root { --logo-max-width: 1180px; }
* { box-sizing: border-box; }


.stage { width:100%; padding:0; background:transparent; }
#apexLogo { width:min(100%, var(--logo-max-width)); height:auto; display:block; margin:0 auto; overflow:visible; }
.part { opacity:0; }
.left-a { clip-path: inset(0 100% 0 0); animation: drawA .70s cubic-bezier(.35,.8,.2,1) forwards; }
.left-blue { clip-path: inset(100% 0 0 0); animation: drawBlue .30s cubic-bezier(.25,.8,.2,1) forwards; animation-delay:.52s; }
.divider { transform-box: fill-box; transform-origin: top center; transform:scaleY(0); animation: lineDrop .36s cubic-bezier(.4,0,.2,1) forwards; animation-delay:.82s; }
.main { clip-path: inset(0 100% 0 0); transform-box: fill-box; transform-origin:left center; transform:translateX(-12px) scale(.985); animation: letterIn .34s cubic-bezier(.2,.85,.2,1) forwards; }
.letter-1 { animation-delay:1.06s; }
.letter-2 { animation-delay:1.20s; }
.letter-3 { animation-delay:1.34s; }
.letter-4 { animation-delay:1.48s; }
/* blue accent of X is the last flourish */
.x-accent { clip-path: inset(0 100% 0 0); transform-box: fill-box; transform-origin:left center; transform:translateX(-8px) scale(.99); animation: accentIn .24s cubic-bezier(.2,.85,.2,1) forwards; animation-delay:1.70s; }
.subtitle { clip-path: inset(0 100% 0 0); transform-origin:center center; transform:translateY(4px) scale(.985); animation: subtitleIn .42s cubic-bezier(.2,.85,.2,1) forwards; animation-delay:1.92s; }
#apexLogo.restarting .left-a,
#apexLogo.restarting .left-blue,
#apexLogo.restarting .divider,
#apexLogo.restarting .main,
#apexLogo.restarting .x-accent,
#apexLogo.restarting .subtitle { animation:none !important; opacity:0 !important; transform:none !important; clip-path:inset(0 100% 0 0) !important; }
#apexLogo.restarting .left-blue { clip-path: inset(100% 0 0 0) !important; }
#apexLogo.restarting .divider { clip-path:none !important; transform:scaleY(0) !important; }
@keyframes drawA { from { opacity:1; clip-path: inset(0 100% 0 0); } to { opacity:1; clip-path: inset(0 0 0 0); } }
@keyframes drawBlue { from { opacity:1; clip-path: inset(100% 0 0 0); } to { opacity:1; clip-path: inset(0 0 0 0); } }
@keyframes lineDrop { from { opacity:1; transform:scaleY(0); } to { opacity:1; transform:scaleY(1); } }
@keyframes letterIn { from { opacity:1; clip-path: inset(0 100% 0 0); transform:translateX(-12px) scale(.985); } to { opacity:1; clip-path: inset(0 0 0 0); transform:translateX(0) scale(1); } }
@keyframes accentIn { from { opacity:1; clip-path: inset(0 100% 0 0); transform:translateX(-8px) scale(.99); } to { opacity:1; clip-path: inset(0 0 0 0); transform:translateX(0) scale(1); } }
@keyframes subtitleIn { from { opacity:1; clip-path: inset(0 100% 0 0); transform:translateY(4px) scale(.985); } to { opacity:1; clip-path: inset(0 0 0 0); transform:translateY(0) scale(1); } }