/* MFM */
.mfm {
    line-height: 1.6;
}

.mfm .mention {
    text-decoration: none;
    background-color: var(--highlight-color);
    color: var(--notice-color);
    border-radius: 1em;
    padding: 0.2em 0.5em;
}

.mfm .emoji {
    display: inline;
    position: relative;
    top: 0;

    > img {
        height: 2em;
        vertical-align: middle;
        transition-duration: 250ms;
    }
}

.mfm .emoji > img:hover {
    transform: scale(1.5);
    transition-duration: 250ms;
    position: relative;
    z-index: +1;
}

.mfm.simple .emoji > img {
    height: 1.25em;
    vertical-align: -0.25em;
}

.mfm.simple .emoji > img:hover {
    transform: none;
}

.mfm blockquote {
    margin: 8px 0;
    padding-left: 12px;
    border-left: solid 4px var(--border-color);
}

.mfm a {
    color: var(--link);
}

.mfm .hashtag {
    text-decoration-line: none;
}

.mfm .hashtag:hover {
    text-decoration-line: underline;
}

.mfm small {
    opacity: 0.7;
}

/* MFM fn nodes */

.mfm-flip {
    display: inline-block;
    transform: scaleX(-1);
}

.mfm-flip[data-mfm-h] {
    transform: scaleX(-1);
}

.mfm-flip[data-mfm-v] {
    transform: scaleY(-1);
}

.mfm-flip[data-mfm-h][data-mfm-v] {
    transform: scaleX(-1) scaleY(-1);
}

.mfm-font[data-mfm-serif] {
    font-family: serif;
}

.mfm-font[data-mfm-monospace] {
    font-family: monospace;
}

.mfm-font[data-mfm-cursive] {
    font-family: cursive;
}

.mfm-font[data-mfm-fantasy] {
    font-family: fantasy;
}

.mfm-font[data-mfm-emoji] {
    font-family: emoji;
}

.mfm-font[data-mfm-math] {
    font-family: math;
}

.mfm-x2 {
    display: inline-block;
    font-size: 200%;
}

.mfm-x3 {
    display: inline-block;
    font-size: 400%;
}

.mfm-x4 {
    display: inline-block;
    font-size: 600%;
}

.mfm-blur {
    filter: blur(6px);
    transition: filter 0.3s;
}

.mfm-blur:hover {
    filter: blur(0);
}

/* Animation keyframes prefixed with fn- are adapted from Misskey under fair use / for interoperability */

@keyframes fn-jelly {
    0% {
        transform: scaleZ(1);
    }
    30% {
        transform: scale3d(1.25, .75, 1);
    }
    40% {
        transform: scale3d(.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, .85, 1);
    }
    65% {
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, .95, 1);
    }
    to {
        transform: scaleZ(1);
    }
}

@keyframes fn-tada {
    0% {
        transform: scaleZ(1);
    }
    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        transform: scaleZ(1);
    }
}

@keyframes fn-jump {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-16px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-8px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fn-bounce {
    0% {
        transform: translateY(0) scale(1);
    }
    25% {
        transform: translateY(-16px) scale(1);
    }
    50% {
        transform: translateY(0) scale(1);
    }
    75% {
        transform: translateY(0) scale(1.5, .75);
    }
    to {
        transform: translateY(0) scale(1);
    }
}

@keyframes fn-shake {
    0% {
        transform: translate(-3px, -1px) rotate(-8deg);
    }
    5% {
        transform: translateY(-1px) rotate(-10deg);
    }
    10% {
        transform: translate(1px, -3px) rotate(0);
    }
    15% {
        transform: translate(1px, 1px) rotate(11deg);
    }
    20% {
        transform: translate(-2px, 1px) rotate(1deg);
    }
    25% {
        transform: translate(-1px, -2px) rotate(-2deg);
    }
    30% {
        transform: translate(-1px, 2px) rotate(-3deg);
    }
    35% {
        transform: translate(2px, 1px) rotate(6deg);
    }
    40% {
        transform: translate(-2px, -3px) rotate(-9deg);
    }
    45% {
        transform: translateY(-1px) rotate(-12deg);
    }
    50% {
        transform: translate(1px, 2px) rotate(10deg);
    }
    55% {
        transform: translateY(-3px) rotate(8deg);
    }
    60% {
        transform: translate(1px, -1px) rotate(8deg);
    }
    65% {
        transform: translateY(-1px) rotate(-7deg);
    }
    70% {
        transform: translate(-1px, -3px) rotate(6deg);
    }
    75% {
        transform: translateY(-2px) rotate(4deg);
    }
    80% {
        transform: translate(-2px, -1px) rotate(3deg);
    }
    85% {
        transform: translate(1px, -3px) rotate(-10deg);
    }
    90% {
        transform: translate(1px) rotate(3deg);
    }
    95% {
        transform: translate(-2px) rotate(-3deg);
    }
    to {
        transform: translate(2px, 1px) rotate(2deg);
    }
}

@keyframes fn-twitch {
    0% {
        transform: translate(7px, -2px);
    }
    5% {
        transform: translate(-3px, 1px);
    }
    10% {
        transform: translate(-7px, -1px);
    }
    15% {
        transform: translateY(-1px);
    }
    20% {
        transform: translate(-8px, 6px);
    }
    25% {
        transform: translate(-4px, -3px);
    }
    30% {
        transform: translate(-4px, -6px);
    }
    35% {
        transform: translate(-8px, -8px);
    }
    40% {
        transform: translate(4px, 6px);
    }
    45% {
        transform: translate(-3px, 1px);
    }
    50% {
        transform: translate(2px, -10px);
    }
    55% {
        transform: translate(-7px);
    }
    60% {
        transform: translate(-2px, 4px);
    }
    65% {
        transform: translate(3px, -8px);
    }
    70% {
        transform: translate(6px, 7px);
    }
    75% {
        transform: translate(-7px, -2px);
    }
    80% {
        transform: translate(-7px, -8px);
    }
    85% {
        transform: translate(9px, 3px);
    }
    90% {
        transform: translate(-3px, -2px);
    }
    95% {
        transform: translate(-10px, 2px);
    }
    to {
        transform: translate(-2px, -6px);
    }
}

@keyframes fn-rainbow {
    0% {
        filter: hue-rotate(0deg) contrast(150%) saturate(150%);
    }
    to {
        filter: hue-rotate(360deg) contrast(150%) saturate(150%);
    }
}

@keyframes fn-spin {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fn-spin-x {
    0% {
        transform: perspective(128px) rotateX(0);
    }
    to {
        transform: perspective(128px) rotateX(360deg);
    }
}

@keyframes fn-spin-y {
    0% {
        transform: perspective(128px) rotateY(0);
    }
    to {
        transform: perspective(128px) rotateY(360deg);
    }
}

@keyframes fn-fade {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.mfm-jelly {
    --mfm-delay: 0s;
    --mfm-speed: 1s;
    --mfm-loop: infinite;

    display: inline-block;
    animation-name: fn-jelly;
    animation-delay: var(--mfm-delay);
    animation-duration: var(--mfm-speed);
    animation-fill-mode: both;
    animation-iteration-count: var(--mfm-loop);
    animation-timing-function: linear;
}

.mfm-tada {
    --mfm-delay: 0s;
    --mfm-speed: 1s;
    --mfm-loop: infinite;

    display: inline-block;
    font-size: 150%;
    animation-name: fn-tada;
    animation-delay: var(--mfm-delay);
    animation-duration: var(--mfm-speed);
    animation-fill-mode: both;
    animation-iteration-count: var(--mfm-loop);
    animation-timing-function: linear;
}

.mfm-jump {
    --mfm-delay: 0s;
    --mfm-speed: 0.75s;
    --mfm-loop: infinite;

    display: inline-block;
    animation-name: fn-jump;
    animation-delay: var(--mfm-delay);
    animation-duration: var(--mfm-speed);
    animation-fill-mode: both;
    animation-iteration-count: var(--mfm-loop);
    animation-timing-function: linear;
}

.mfm-bounce {
    --mfm-delay: 0s;
    --mfm-speed: 0.75s;
    --mfm-loop: infinite;

    display: inline-block;
    animation-name: fn-bounce;
    animation-delay: var(--mfm-delay);
    animation-duration: var(--mfm-speed);
    animation-fill-mode: both;
    animation-iteration-count: var(--mfm-loop);
    animation-timing-function: linear;
}

.mfm-shake {
    --mfm-delay: 0s;
    --mfm-speed: 0.5s;
    --mfm-loop: infinite;

    display: inline-block;
    animation-name: fn-shake;
    animation-delay: var(--mfm-delay);
    animation-duration: var(--mfm-speed);
    animation-fill-mode: both;
    animation-iteration-count: var(--mfm-loop);
    animation-timing-function: linear;
}

.mfm-twitch {
    --mfm-delay: 0s;
    --mfm-speed: 0.5s;
    --mfm-loop: infinite;

    display: inline-block;
    animation-name: fn-twitch;
    animation-delay: var(--mfm-delay);
    animation-duration: var(--mfm-speed);
    animation-fill-mode: both;
    animation-iteration-count: var(--mfm-loop);
    animation-timing-function: linear;
}

.mfm-rainbow {
    --mfm-delay: 0s;
    --mfm-speed: 1s;
    --mfm-loop: infinite;

    display: inline-block;
    animation-name: fn-rainbow;
    animation-delay: var(--mfm-delay);
    animation-duration: var(--mfm-speed);
    animation-fill-mode: both;
    animation-iteration-count: var(--mfm-loop);
    animation-timing-function: linear;
}

.mfm-spin {
    --mfm-delay: 0s;
    --mfm-speed: 1.5s;
    --mfm-loop: infinite;

    display: inline-block;
    animation-name: fn-spin;
    animation-delay: var(--mfm-delay);
    animation-duration: var(--mfm-speed);
    animation-fill-mode: both;
    animation-iteration-count: var(--mfm-loop);
    animation-timing-function: linear;
}

.mfm-spin[data-mfm-x] {
    animation-name: fn-spin-x;
}

.mfm-spin[data-mfm-y] {
    animation-name: fn-spin-y;
}

.mfm-spin[data-mfm-left] {
    animation-direction: reverse;
}

.mfm-spin[data-mfm-alternate] {
    animation-direction: alternate;
}

.mfm-rotate {
    --mfm-deg: 90deg;
    
    display: inline-block;
    transform-origin: center center 0;
    transform: rotate(var(--mfm-deg));
}

.mfm-rotate[data-mfm-x] {
    transform: perspective(120px) rotateX(var(--mfm-deg));
}

.mfm-fade {
    --mfm-delay: 0s;
    --mfm-speed: 1.5s;

    display: inline-block;
    animation-name: fn-fade;
    animation-delay: var(--mfm-delay);
    animation-direction: alternate;
    animation-duration: var(--mfm-speed);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.mfm-fade[data-mfm-out] {
    animation-direction: alternate-reverse;
}

.mfm-crop {
    --mfm-top: 0%;
    --mfm-right: 0%;
    --mfm-bottom: 0%;
    --mfm-left: 0%;

    display: inline-block;
    clip-path: inset(var(--mfm-top) var(--mfm-right) var(--mfm-bottom) var(--mfm-left));
}

.mfm-position {
    --mfm-x: 0em;
    --mfm-y: 0em;

    display: inline-block;
    transform: translateX(var(--mfm-x)) translateY(var(--mfm-y));
}

.mfm-scale {
    --mfm-x: 1;
    --mfm-y: 1;

    display: inline-block;
    transform: scale(var(--mfm-x), var(--mfm-y));
}

.mfm-fg {
    --mfm-color: #f00;

    display: inline-block;
    color: var(--mfm-color);
}

.mfm-bg {
    --mfm-color: #f00;

    display: inline-block;
    background-color: var(--mfm-color);
}

.mfm-border {
    --mfm-width: 1px;
    --mfm-style: solid;
    --mfm-color: var(--accent-primary-color);

    display: inline-block;
    border: var(--mfm-width) var(--mfm-style) var(--mfm-color);
}

.mfm-border:not([data-mfm-noclip]) {
    overflow: clip;
}

.mfm-center {
    display: block;
    text-align: center;
}

.mfm-small {
    font-size: small;
    opacity: 0.7;
}