/* Manga sound-effect lettering (js/manga-fx.js). Ink outlines are stacked drop-shadows so the lettering reads on any background. */
#manga-fx{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden;--ink:#0d0b10}
#manga-fx .mf{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot,0deg));animation:mf-pop .85s cubic-bezier(.2,.9,.2,1) forwards}
#manga-fx .mf b{position:relative;display:flex;align-items:center;justify-content:center;font:400 calc(var(--sz,1) * clamp(26px,3.1vw,50px)) 'Shojumaru',serif;letter-spacing:-.03em;line-height:1;white-space:nowrap;text-shadow:3px 0px 0 var(--ink),2.1px 2.1px 0 var(--ink),0px 3px 0 var(--ink),-2.1px 2.1px 0 var(--ink),-3px 0px 0 var(--ink),-2.1px -2.1px 0 var(--ink),0px -3px 0 var(--ink),2.1px -2.1px 0 var(--ink),5px 6px 0 #0d0b10aa}
#manga-fx .mf b s{display:inline-block;text-decoration:none;color:var(--fill,#fff7e4);transform:translateY(calc(var(--d,0) * 1px)) rotate(calc(var(--r,0) * 1deg)) scale(var(--sc,1))}

/* the starburst behind impact lettering: an ink outline with a watercolour fill and halftone dots */
#manga-fx .mf-burst{position:absolute;left:50%;top:50%;width:calc(100% + 2.8em);height:calc(100% + 2.3em);min-width:150px;background:var(--ink);transform:translate(-50%,-50%);pointer-events:none}
#manga-fx .mf-burst u{position:absolute;inset:6%;background:radial-gradient(#0d0b1040 1.4px,#0000 2px) 0 0/8px 8px,radial-gradient(circle at 40% 38%,var(--bg1,#fff2b0),var(--bg2,#f08a2a) 78%)}

/* colour schemes */
#manga-fx .mf-impact{--fill:#fff7e4;--fill2:#ffd45c;--bg1:#fff2b0;--bg2:#e8552a}
#manga-fx .mf-boom{--fill:#fff2a8;--fill2:#ff9a2a;--bg1:#ffe27a;--bg2:#d6402a;animation-duration:1.05s}
#manga-fx .mf-musou{--fill:#fff7e4;--fill2:#ffd45c;--bg1:#ffe9a0;--bg2:#d6402a;animation-duration:1.4s}
#manga-fx .mf-musou b{text-shadow:6px 0px 0 var(--ink),4.2px 4.2px 0 var(--ink),0px 6px 0 var(--ink),-4.2px 4.2px 0 var(--ink),-6px 0px 0 var(--ink),-4.2px -4.2px 0 var(--ink),0px -6px 0 var(--ink),4.2px -4.2px 0 var(--ink),8px 10px 0 #0d0b10aa}
#manga-fx .mf-whoosh{--fill:#f2fbff;--fill2:#8ec3ee;animation-duration:.85s}
#manga-fx .mf-thud{--fill:#d9e1ea;--fill2:#7d8fa6;animation-duration:1.4s}

/* speed streaks behind whoosh and thud */
#manga-fx .mf-streak{position:absolute;left:50%;top:50%;width:230%;height:120%;transform:translate(-50%,-50%);
 background:repeating-linear-gradient(0deg,#0000 0 9px,#0d0b10 9px 11px,#0000 11px 20px),linear-gradient(90deg,#0000,#f2fbff66 30%,#f2fbff66 70%,#0000);
 -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,#0000 72%);mask-image:radial-gradient(ellipse at center,#000 30%,#0000 72%);opacity:.7}
#manga-fx .mf-thud .mf-streak{background:repeating-linear-gradient(90deg,#0000 0 11px,#0d0b1088 11px 13px,#0000 13px 24px);height:90%}

/* radial speed lines flashed across the screen on Musou */
#manga-fx .mf-lines{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 42%,#fff 0 1.6deg,#0000 1.6deg 5deg);-webkit-mask-image:radial-gradient(circle at 50% 42%,#0000 22%,#000 70%);mask-image:radial-gradient(circle at 50% 42%,#0000 22%,#000 70%);mix-blend-mode:screen;opacity:0;animation:mf-lines .8s ease-out forwards}

@keyframes mf-pop{
 0%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) - 8deg)) scale(.4)}
 7%{opacity:1;transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) + 2deg)) scale(1.18)}
 15%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}
 24%{transform:translate(calc(-50% + 3px),calc(-50% - 2px)) rotate(var(--rot,0deg)) scale(1.02)}
 33%{transform:translate(calc(-50% - 3px),calc(-50% + 2px)) rotate(var(--rot,0deg)) scale(1)}
 42%{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1.01)}
 70%{opacity:1}
 100%{opacity:0;transform:translate(-50%,calc(-50% - 22px)) rotate(var(--rot,0deg)) scale(1.04)}
}
@keyframes mf-burst{from{transform:translate(-50%,-50%) rotate(var(--br,0deg)) scale(.1)}to{transform:translate(-50%,-50%) rotate(var(--br,0deg)) scale(1)}}
@keyframes mf-lines{0%{opacity:0}15%{opacity:.9}100%{opacity:0}}
#manga-fx .mf-calm{animation-name:mf-calm}
@keyframes mf-calm{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#manga-fx .mf{animation-name:mf-calm}}