/* Logo da Motim Frame: caveira com fogo roxo animado (o fogo e a piscada estão dentro do SVG)
   A base do MOTIM fica na linha do queixo: o flex alinha pela borda de baixo da caveira e o top desce o queixo (80,4% da altura do SVG) até ela */
.logo{align-items:baseline!important;position:relative;top:-8px}
.logo-cav{position:relative;top:17px;display:inline-block;flex:none;width:86px;height:86px;margin:-24px -20px -20px -24px}
.logo-cav img{display:block;width:100%;height:100%}
.logo .marca{position:relative;display:inline-block;padding:0 22px 0 4px}
.logo .mf-nome{position:relative;display:inline-block;font:400 34px/1 Anton,Impact,sans-serif;letter-spacing:.01em;color:#fff;
  transform:skewX(-11deg);transform-origin:0 100%;text-shadow:-1.5px 0 #a855f7,1.5px 0 #22d3ee;animation:mf-sombra 3.4s steps(1) infinite}
.logo .mf-fx{position:absolute;inset:0;color:#fff;opacity:0;animation:mf-fatia 3.4s steps(1) infinite}
.logo .mf-fr{position:absolute;right:4px;bottom:-3px;font:700 22px/1 Caveat,cursive;color:#a78bfa;letter-spacing:0;transform:rotate(-7deg)}
@keyframes mf-sombra{0%,88%,100%{text-shadow:-1.5px 0 #a855f7,1.5px 0 #22d3ee}90%{text-shadow:-4px 0 #a855f7,3px 0 #22d3ee}93%{text-shadow:2px 0 #a855f7,-2px 0 #22d3ee}}
@keyframes mf-fatia{0%,88%,96%,100%{opacity:0}89%{opacity:1;clip-path:inset(20% 0 64% 0);transform:translateX(4px)}92%{opacity:1;clip-path:inset(58% 0 26% 0);transform:translateX(-3px)}}
@media(max-width:400px){.logo-cav{top:15px;width:76px;height:76px;margin:-20px -18px -18px -22px}.logo .mf-nome{font-size:29px}.logo .mf-fr{font-size:19px;bottom:-3px}.logo .marca{padding-right:18px}}