/* The supplied wordmark is the complete brand: no extra logo or typeset name. */
img.brand-mark{display:block;width:184px;height:auto;aspect-ratio:1115/132;object-fit:contain;flex:none}
.footer .brand-mark{width:160px}
#studioStartup .brand-mark{width:220px;margin:0 auto 12px}
.project-brand{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.project-brand .brand-mark{width:180px}
@media(max-width:600px){img.brand-mark{width:148px}.footer .brand-mark{width:148px}.project-brand{flex-wrap:wrap}}

.lab-footer{display:flex;align-items:center;gap:12px}.lab-footer img.brand-mark{width:100px}
/* Keep identical layout with or without animation, including reduced-motion mode. */
#studioStartup .brand-mark{box-sizing:content-box;width:220px;height:auto;padding:19px 22px;margin:0 auto;grid-area:1/1;align-self:center}
#studioStartup .startup-mark-motion{display:none;width:264px;height:64px;grid-area:1/1;margin:auto;pointer-events:none}
#studioStartup.has-mark-motion .brand-mark{opacity:0}
#studioStartup.has-mark-motion .startup-mark-motion{display:block}
@media(prefers-reduced-motion:reduce){#studioStartup.has-mark-motion .brand-mark{opacity:1}#studioStartup.has-mark-motion .startup-mark-motion{display:none}}
/* Header hover: channel separation and staggered slices resolve within one second. */
.topbar .brand-mark{width:147.2px}
.brand-interactive{position:relative;display:inline-block;flex:none;line-height:0;isolation:isolate}
.brand-fx{position:absolute;inset:-7px -9px;pointer-events:none;opacity:0}
.brand-fx>span{position:absolute;inset:7px 9px;background:#fff;mask:url('logo-fractlab.svg') center/100% 100% no-repeat;-webkit-mask:url('logo-fractlab.svg') center/100% 100% no-repeat}
.brand-fx .brand-fx-cyan{background:#63eaff;mix-blend-mode:screen}
.brand-fx .brand-fx-pink{background:#ff70aa;mix-blend-mode:screen}
.brand-fx-slice-a{clip-path:polygon(0 0,20% 0,20% 100%,0 100%,0 0,40% 0,60% 0,60% 100%,40% 100%,40% 0,80% 0,100% 0,100% 100%,80% 100%,80% 0)}
.brand-fx-slice-b{clip-path:inset(28% 0 42% 0)}
.brand-fx-slice-c{clip-path:inset(65% 0 10% 0)}
.brand-playing .brand-fx{animation:brand-fx-envelope 1s ease-out both}
.brand-playing .brand-mark{animation:brand-fx-source 1s ease-out both}
.brand-playing .brand-fx-cyan{animation:brand-fx-cyan 1s ease-out both}
.brand-playing .brand-fx-pink{animation:brand-fx-pink 1s ease-out both}
.brand-playing .brand-fx-slice-a{animation:brand-fx-pane 1s ease-out both}
.brand-playing .brand-fx-slice-b{animation:brand-fx-row 1s steps(4,end) both}
.brand-playing .brand-fx-slice-c{animation:brand-fx-row 1s steps(4,end) reverse both}
@keyframes brand-fx-envelope{0%,100%{opacity:0}12%,70%{opacity:1}}
@keyframes brand-fx-source{0%,100%{opacity:1}22%,48%{opacity:.35}72%{opacity:.8}}
@keyframes brand-fx-cyan{0%,100%{transform:translate(0)}25%{transform:translate(-3px,1px)}55%{transform:translate(2px,0)}80%{transform:translate(-1px,0)}}
@keyframes brand-fx-pink{0%,100%{transform:translate(0)}25%{transform:translate(3px,-1px)}55%{transform:translate(-2px,0)}80%{transform:translate(1px,0)}}
@keyframes brand-fx-pane{0%,100%{transform:translate(0)}30%{transform:translate(2px,-2px) skewY(-2deg)}60%{transform:translate(-1px,1px)}}
@keyframes brand-fx-row{0%,100%{transform:translateX(0)}25%{transform:translateX(4px)}45%{transform:translateX(-3px)}70%{transform:translateX(1px)}}
@media(max-width:600px){.topbar .brand-mark{width:118.4px}}
@media(prefers-reduced-motion:reduce){.brand-playing .brand-mark{animation:none}.brand-playing .brand-fx{display:none}}