/* battle_fx: combo damage stacks, screen-space slash cuts and impact flashes (turn-based battle) */
.b-nums .num.stk { font-size: 44px; letter-spacing: 1px; color: #fff; -webkit-text-stroke: 2px #1a0a00;
  text-shadow: 0 4px 0 #6a1200, 0 0 16px rgba(255, 90, 40, .85); animation: bfx-pop 1.5s cubic-bezier(.2, .9, .3, 1) forwards; z-index: 3; }
.b-nums .num.stk.crit { color: #ff4a3a; font-size: 56px; text-shadow: 0 4px 0 #3a0000, 0 0 22px rgba(255, 60, 40, .95); }
.b-nums .num.stk.perf { color: #ffe14a; font-size: 58px; text-shadow: 0 4px 0 #8a4a00, 0 0 22px #ffb000; }
.b-nums .num.stk.adv { color: #ffd23a; font-size: 50px; }
.b-nums .num.stk.weak { color: #c8d0e4; font-size: 36px; }
@keyframes bfx-pop {
  0% { transform: translate(-50%, -50%) scale(2.4) skewX(-8deg); opacity: 0; }
  10% { transform: translate(-50%, -50%) scale(.9) skewX(-8deg); opacity: 1; }
  18% { transform: translate(-50%, -50%) scale(1.08) skewX(-8deg); }
  75% { transform: translate(-50%, -62%) scale(1) skewX(-8deg); opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(.96) skewX(-8deg); opacity: 0; }
}
.bfx-total { position: absolute; transform: translate(-50%, -50%); font: 64px Bangers; letter-spacing: 2px; color: #fff; line-height: .9; text-align: center;
  -webkit-text-stroke: 2px #2a0800; text-shadow: 0 5px 0 #a01800, 0 0 26px rgba(255, 120, 40, .9); pointer-events: none; z-index: 4;
  animation: bfx-total 1.6s cubic-bezier(.2, .9, .3, 1) forwards; }
.bfx-total small { display: block; font-size: 26px; letter-spacing: 3px; color: #ffe14a; -webkit-text-stroke: 1px #2a0800; text-shadow: 0 3px 0 #7a3a00; }
@keyframes bfx-total {
  0% { transform: translate(-50%, -50%) scale(2.2) rotate(-6deg); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(.92) rotate(-6deg); opacity: 1; }
  22% { transform: translate(-50%, -50%) scale(1.04) rotate(-6deg); }
  80% { transform: translate(-50%, -56%) scale(1) rotate(-6deg); opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(1) rotate(-6deg); opacity: 0; }
}

/* the screen-space cut: a long tapered blade line with a coloured glow (BLADE), or a spiked impact star (BRAWL / SHOT) */
.bfx-cut { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2; transform: rotate(var(--r)); }
.bfx-cut i, .bfx-cut b { position: absolute; left: 0; top: 0; display: block; }
.bfx-cut.blade i { width: 520px; height: 26px; margin: -13px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(ellipse at center, #fff 0 18%, var(--c) 40%, transparent 70%);
  filter: drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 4px #fff); mix-blend-mode: screen;
  animation: bfx-blade .62s cubic-bezier(.1, .8, .2, 1) forwards; }
.bfx-cut.blade b { width: 560px; height: 5px; margin: -2px 0 0 -280px; border-radius: 50%; background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent);
  box-shadow: 0 0 10px #fff, 0 0 26px var(--c); animation: bfx-blade .5s cubic-bezier(.1, .8, .2, 1) forwards; }
.bfx-cut.blade.fin i { width: 820px; height: 40px; margin: -20px 0 0 -410px; }
.bfx-cut.blade.fin b { width: 900px; height: 8px; margin: -4px 0 0 -450px; }
@keyframes bfx-blade {
  0% { transform: scaleX(.05) translateX(-40%); opacity: 1; }
  22% { transform: scaleX(1) translateX(0); opacity: 1; }
  60% { transform: scaleX(1.05) scaleY(.6); opacity: .85; }
  100% { transform: scaleX(1.1) scaleY(.08); opacity: 0; }
}
.bfx-cut.blunt i { width: 260px; height: 260px; margin: -130px 0 0 -130px;
  background: conic-gradient(from 0deg, transparent 0 4%, #fff 5% 6%, transparent 7% 12%, var(--c) 13% 14.5%, transparent 15.5% 21%, #fff 22% 23%, transparent 24% 29%, var(--c) 30% 31.5%, transparent 32.5% 38%, #fff 39% 40%, transparent 41% 46%, var(--c) 47% 48.5%, transparent 49.5% 55%, #fff 56% 57%, transparent 58% 63%, var(--c) 64% 65.5%, transparent 66.5% 72%, #fff 73% 74%, transparent 75% 80%, var(--c) 81% 82.5%, transparent 83.5% 89%, #fff 90% 91%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 0 14%, #000 26% 52%, transparent 70%); mask: radial-gradient(circle, transparent 0 14%, #000 26% 52%, transparent 70%);
  filter: drop-shadow(0 0 10px var(--c)); animation: bfx-star .5s ease-out forwards; }
.bfx-cut.blunt b { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, var(--c) 45%, transparent 70%); mix-blend-mode: screen; animation: bfx-star .38s ease-out forwards; }
.bfx-cut.blunt.fin i { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
@keyframes bfx-star { 0% { transform: scale(.2); opacity: 1; } 35% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

/* a combo's last blow whites the view out for a beat */
.bfx-flash { position: absolute; inset: -40px; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 60% 50%, rgba(255, 255, 255, .9), rgba(255, 240, 220, .35) 22%, rgba(255, 200, 160, 0) 50%);
  mix-blend-mode: screen; animation: bfx-flash .36s ease-out forwards; }
@keyframes bfx-flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* the first blow of an exchange: a hard white-out that snaps off */
.bfx-flash.hard { background: radial-gradient(circle at 62% 48%, #fff 0 5%, rgba(255, 250, 240, .45) 16%, rgba(255, 230, 200, 0) 38%); mix-blend-mode: screen; animation: bfx-flash-hard .26s steps(1, end) forwards; z-index: 1; }
@keyframes bfx-flash-hard { 0% { opacity: .8; } 15% { opacity: .35; } 35%, 100% { opacity: 0; } }

/* a perfect strike's portrait slash: a diagonal band tears across the screen with the attacker's face in it */
.bfx-qcut { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; animation: bfx-q-life .9s linear forwards; }
.bfx-qcut .q-band { position: absolute; left: -20%; right: -20%; top: 50%; height: 300px; margin-top: -150px; transform: rotate(-11deg) scaleY(0);
  background: linear-gradient(180deg, transparent 0, #0c0610 6%, #1b0d22 50%, #0c0610 94%, transparent 100%);
  box-shadow: 0 -6px 0 var(--c), 0 6px 0 var(--c), 0 0 60px rgba(0, 0, 0, .7); animation: bfx-q-band .9s cubic-bezier(.2, .9, .2, 1) forwards; }
.bfx-qcut .q-lines { position: absolute; left: -20%; right: -20%; top: 50%; height: 290px; margin-top: -145px; transform: rotate(-11deg); opacity: .55;
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, .5) 34px 36px, transparent 36px 90px, var(--c) 90px 93px);
  animation: bfx-q-lines .9s linear forwards; mix-blend-mode: screen; }
.bfx-qcut .q-art { position: absolute; top: 50%; left: 50%; width: 760px; height: 760px; margin: -300px 0 0 -380px; background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 0 0 #fff) drop-shadow(8px 0 0 var(--c)) drop-shadow(0 0 20px rgba(0, 0, 0, .6));
  clip-path: polygon(0 26%, 100% 6%, 100% 74%, 0 94%); animation: bfx-q-art .9s cubic-bezier(.15, .85, .25, 1) forwards; }
.bfx-qcut .q-name { position: absolute; left: 8%; top: 61%; font: 64px Bangers, Impact, sans-serif; letter-spacing: 3px; color: #fff; transform: rotate(-11deg);
  -webkit-text-stroke: 2px #1a0a00; text-shadow: 0 5px 0 var(--c), 0 0 24px var(--c); animation: bfx-q-name .9s cubic-bezier(.2, .9, .2, 1) forwards; }
@keyframes bfx-q-life { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bfx-q-band { 0% { transform: rotate(-11deg) scaleY(0); } 12% { transform: rotate(-11deg) scaleY(1.08); } 20%, 82% { transform: rotate(-11deg) scaleY(1); } 100% { transform: rotate(-11deg) scaleY(0); } }
@keyframes bfx-q-lines { 0% { background-position: 0 0; } 100% { background-position: -900px 0; } }
@keyframes bfx-q-art { 0% { transform: translateX(70%) scale(1.25); opacity: 0; } 14% { transform: translateX(2%) scale(1.04); opacity: 1; } 80% { transform: translateX(-6%) scale(1); opacity: 1; } 100% { transform: translateX(-40%) scale(1); opacity: 0; } }
@keyframes bfx-q-name { 0% { transform: translateX(-60%) rotate(-11deg); opacity: 0; } 18% { transform: translateX(0) rotate(-11deg); opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(10%) rotate(-11deg); opacity: 0; } }
@media (max-width: 700px) { .bfx-qcut .q-art { width: 460px; height: 460px; margin: -190px 0 0 -230px; } .bfx-qcut .q-band { height: 190px; margin-top: -95px; } .bfx-qcut .q-name { font-size: 38px; } }

/* the impact frame: a hard white-out for 2-3 frames, ink focus lines on the target, three raked slash streaks and a jagged spark */
/* localized hit flash: a hot white bloom on the contact point only, the rest of the scene stays readable */
.bfx-white { position: absolute; inset: 0; pointer-events: none; z-index: 4; mix-blend-mode: screen;
  background: radial-gradient(circle 230px at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.95) 0, rgba(255,240,215,.55) 28%, rgba(255,220,180,.15) 60%, rgba(255,220,180,0) 100%);
  animation: bfx-white .11s linear forwards; }
@keyframes bfx-white { 0% { opacity: 1; } 100% { opacity: 0; } }
.bfx-focus { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; animation: bfx-focus .82s ease-out forwards; }
.bfx-focus svg { display: block; }
@keyframes bfx-focus { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; } }
.bfx-hit { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2; }
.bfx-hit svg { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); overflow: visible; filter: drop-shadow(0 0 10px var(--c)); }
.bfx-hit .st { transform-box: fill-box; transform-origin: center; animation: bfx-st 1.7s cubic-bezier(.1, .85, .2, 1) both; }
.bfx-hit .sp { animation: bfx-sp 1.7s cubic-bezier(.1, .85, .2, 1) both; }
.bfx-hit .st path, .bfx-hit .sp polygon { transform-box: fill-box; transform-origin: center; }
@keyframes bfx-st { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 6% { opacity: 1; clip-path: inset(0 40% 0 0); } 14% { clip-path: inset(0 0 0 0); } 72% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 70%); } }
@keyframes bfx-sp { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 8% { opacity: 1; transform: scale(1.15) rotate(6deg); } 20% { transform: scale(.95) rotate(8deg); } 65% { opacity: 1; transform: scale(1) rotate(12deg); } 100% { opacity: 0; transform: scale(1.3) rotate(18deg); } }
.b-nums .num.stk { font-size: 54px; }
.b-nums .num.stk.crit { font-size: 64px; } .b-nums .num.stk.perf { font-size: 66px; }

/* the cut-in: radial speed lines behind the portrait and a slow push in while it holds */
.bfx-qcut .q-rad { position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: screen; opacity: .8;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 1.6deg, rgba(255, 255, 255, .85) 1.6deg 2deg, transparent 2deg 4.4deg, var(--c) 4.4deg 4.9deg, transparent 4.9deg 7deg);
  -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 40%); mask: radial-gradient(circle, transparent 0 18%, #000 40%);
  animation: bfx-q-rad .9s linear forwards; }
@keyframes bfx-q-rad { 0% { transform: scale(1.4) rotate(0deg); opacity: 0; } 12% { opacity: .85; } 85% { opacity: .85; } 100% { transform: scale(1) rotate(6deg); opacity: 0; } }
@keyframes bfx-q-art { 0% { transform: translateX(70%) scale(1.25); opacity: 0; } 14% { transform: translateX(2%) scale(1); opacity: 1; } 80% { transform: translateX(-3%) scale(1.14); opacity: 1; } 100% { transform: translateX(-40%) scale(1.18); opacity: 0; } }

/* round 5: the HUD steps aside during an exchange (never while the player is choosing) */
#battle-ui.bfx-act:not(.choosing) > :not(.b-nums):not(.b-banner):not(.b-cut):not(.b-say):not(.bfx-qcut) { opacity: 0 !important; pointer-events: none; }

/* the strike cut-in, fully opaque on its own backdrop: a radial burst of speed lines, the attacker's attack pose huge
   with a motion smear trailing behind, a blade-light glint, letterbox bars, then a hard cut (no fade) */
.bfx-qcut.solid { z-index: 60; animation: none; background: #05020a; }
.bfx-qcut.solid .q-bg { position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 62% 46%, #fff 0, color-mix(in srgb, var(--c) 70%, #fff) 9%, var(--c) 20%, color-mix(in srgb, var(--c) 45%, #0a0312) 42%, #07020c 78%); }
.bfx-qcut.solid .q-rad { inset: -40%; mix-blend-mode: normal; opacity: 1;
  background: repeating-conic-gradient(from 3deg at 50% 50%, transparent 0 2.2deg, rgba(255, 255, 255, .9) 2.2deg 2.7deg, transparent 2.7deg 5.1deg, rgba(4, 0, 10, .85) 5.1deg 6.3deg, transparent 6.3deg 8.4deg, color-mix(in srgb, var(--c) 60%, #fff) 8.4deg 8.9deg, transparent 8.9deg 11deg);
  -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0 14%, #000 34%); mask: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0 14%, #000 34%);
  transform-origin: 56% 52%; animation: bfx-s-rad .95s linear forwards; }
@keyframes bfx-s-rad { 0% { transform: scale(1.5) rotate(0deg); } 100% { transform: scale(1.05) rotate(5deg); } }
/* horizontal motion streaks racing past behind the figure */
.bfx-qcut.solid .q-hl { position: absolute; inset: 0; opacity: .75;
  background: repeating-linear-gradient(180deg, transparent 0 23px, rgba(255, 255, 255, .55) 23px 25px, transparent 25px 61px, rgba(0, 0, 0, .55) 61px 64px, transparent 64px 97px);
  -webkit-mask: linear-gradient(90deg, #000 0, transparent 30%, transparent 70%, #000 100%); mask: linear-gradient(90deg, #000 0, transparent 30%, transparent 70%, #000 100%); }
.bfx-qcut.solid .q-fig { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: bfx-s-fig .95s cubic-bezier(.12, .9, .25, 1) forwards; }
.bfx-qcut.solid .q-art, .bfx-qcut.solid .q-sm { position: absolute; left: -560px; top: -330px; width: 1120px; height: 1120px; margin: 0; background-size: contain; background-repeat: no-repeat; background-position: center top;
  clip-path: none; animation: none; }
.bfx-qcut.solid .q-art { filter: contrast(1.12) saturate(1.15) drop-shadow(-4px -2px 0 var(--c)) drop-shadow(-2px -1px 6px #fff) drop-shadow(0 0 40px var(--c)); animation: bfx-r9-push .95s cubic-bezier(.2, .7, .3, 1) forwards; }
/* round 9: the cut-in art pushes in and pans across while a key light sweeps over it */
@keyframes bfx-r9-push { 0% { transform: scale(1.0) translateX(40px); } 100% { transform: scale(1.18) translateX(-50px); } }
.bfx-qcut.solid .q-fig::after { content: ''; position: absolute; left: -700px; top: -420px; width: 1400px; height: 900px; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.0) 44%, rgba(255,255,255,.55) 49%, var(--c) 51%, transparent 58%);
  animation: bfx-r9-sweep .8s .1s ease-out both; }
@keyframes bfx-r9-sweep { 0% { transform: translateX(-60%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(55%); opacity: .2; } }
/* round 9: sword-light motion streaks raked diagonally across the cut-in */
.bfx-qcut.solid .q-glint::before, .bfx-qcut.solid .q-glint::after { content: ''; position: absolute; left: 0; right: 0; height: 6px; border-radius: 50%;
  background: linear-gradient(90deg, transparent, #fff 45%, var(--c) 70%, transparent); filter: blur(1px) drop-shadow(0 0 10px var(--c)); }
.bfx-qcut.solid .q-glint::before { top: 70px; transform: rotate(-9deg); animation: bfx-r9-streak .5s .15s ease-out both; }
.bfx-qcut.solid .q-glint::after { top: 150px; transform: rotate(-14deg); animation: bfx-r9-streak .5s .25s ease-out both; }
@keyframes bfx-r9-streak { 0% { clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 60%); opacity: .3; } }
.bfx-qcut.solid .q-sm { filter: brightness(0) invert(1) drop-shadow(0 0 18px var(--c)) blur(3px); }
.bfx-qcut.solid .q-sm.s1 { transform: translateX(-110px); opacity: .55; }
.bfx-qcut.solid .q-sm.s2 { transform: translateX(-240px); opacity: .3; filter: brightness(0) invert(1) drop-shadow(0 0 18px var(--c)) blur(7px); }
.bfx-qcut.solid .q-sm.s3 { transform: translateX(-400px); opacity: .15; filter: brightness(0) invert(1) blur(12px); }
@keyframes bfx-s-fig {
  0% { transform: translateX(-70%) scale(1.25); }
  14% { transform: translateX(-2%) scale(1.02); }
  100% { transform: translateX(4%) scale(1.12); }
}
/* the blade-light glint: a long white flare sweeping along the sword line */
.bfx-qcut.solid .q-glint { position: absolute; left: -10%; right: -10%; top: 36%; height: 14px; margin-top: -7px; transform: rotate(-4deg); border-radius: 50%;
  background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--c) 60%, #fff) 30%, #fff 55%, color-mix(in srgb, var(--c) 60%, #fff) 75%, transparent 100%);
  box-shadow: 0 0 22px #fff, 0 0 60px var(--c); opacity: 0; animation: bfx-s-glint .95s ease-out forwards; }
@keyframes bfx-s-glint { 0%, 30% { opacity: 0; transform: rotate(-4deg) scaleX(.1) translateX(-60%); } 42% { opacity: 1; transform: rotate(-4deg) scaleX(1) translateX(0); } 75% { opacity: 1; transform: rotate(-4deg) scaleX(1.1) scaleY(.5); } 100% { opacity: .4; transform: rotate(-4deg) scaleX(1.2) scaleY(.2); } }
/* letterbox bars that slam in */
.bfx-qcut.solid .q-bars { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #000 0 11%, transparent 11% 89%, #000 89%); animation: bfx-s-bars .2s ease-out both; }
@keyframes bfx-s-bars { 0% { transform: scaleY(1.4); } 100% { transform: scaleY(1); } }
.bfx-qcut.solid .q-name { left: 5%; top: auto; bottom: 13%; font-size: 92px; transform: skewX(-10deg); z-index: 2;
  -webkit-text-stroke: 3px #08020e; text-shadow: 0 6px 0 var(--c), 0 0 30px var(--c); animation: bfx-s-name .95s cubic-bezier(.2, .9, .2, 1) forwards; }
@keyframes bfx-s-name { 0% { transform: translateX(-50%) skewX(-10deg); opacity: 0; } 16% { transform: translateX(0) skewX(-10deg); opacity: 1; } 100% { transform: translateX(3%) skewX(-10deg); opacity: 1; } }
@media (max-width: 700px) {
  .bfx-qcut.solid .q-art, .bfx-qcut.solid .q-sm { left: -360px; top: -240px; width: 720px; height: 720px; }
  .bfx-qcut.solid .q-name { font-size: 52px; }
}

/* the impact frame's shadow: the deck goes dark around a bright hole at the contact point */
.bfx-dark { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle 300px at var(--x) var(--y), rgba(5, 0, 10, 0) 0, rgba(5, 0, 10, .12) 55%, rgba(5, 0, 10, .38) 100%), rgba(5, 0, 10, .06);
  animation: bfx-dark 1.5s ease-out forwards; }
@keyframes bfx-dark { 0% { opacity: 1; } 80% { opacity: .95; } 100% { opacity: 0; } }
/* bigger stacked damage numbers */
.b-nums .num.stk { font-size: 70px; } .b-nums .num.stk.crit { font-size: 82px; } .b-nums .num.stk.perf { font-size: 84px; }

/* round 6: the lingering impact burst pinned to the target's chest. An additive white-hot core, a hard-edged
   white-to-orange starburst of rays that keeps turning, a lens-flare bar and shards / petals thrown outward.
   It holds through the whole reel so the hit still reads after the blows have landed. */
.bfx-burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 3; mix-blend-mode: screen; animation: bfx-burst-life 2s linear forwards; }
@keyframes bfx-burst-life { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
.bfx-burst .core { position: absolute; left: -190px; top: -190px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, rgba(255,246,214,.95) 20%, color-mix(in srgb, var(--c) 80%, #ffb040) 38%, color-mix(in srgb, var(--c) 45%, transparent) 56%, transparent 72%);
  animation: bfx-burst-core 2s cubic-bezier(.1,.9,.2,1) forwards; }
@keyframes bfx-burst-core { 0% { transform: scale(.15); } 8% { transform: scale(1.2); } 30% { transform: scale(.8); opacity: .85; } 100% { transform: scale(.9); opacity: .4; } }
.bfx-burst .rays { position: absolute; left: -340px; top: -340px; width: 680px; height: 680px; opacity: .9; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.95) 0deg 2.2deg, transparent 2.2deg 9deg, rgba(255,170,70,.85) 9deg 10.4deg, transparent 10.4deg 17deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 24%, #000 36%, transparent 50%); mask: radial-gradient(circle, transparent 18%, #000 24%, #000 36%, transparent 50%);
  animation: bfx-burst-rays 2s cubic-bezier(.1,.9,.2,1) forwards; }
@keyframes bfx-burst-rays { 0% { transform: scale(.2) rotate(0deg); } 10% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1.3) rotate(40deg); } }
.bfx-burst .flare { position: absolute; left: -620px; top: -11px; width: 1240px; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse at center, #fff 0 18%, color-mix(in srgb, var(--c) 70%, #fff) 35%, transparent 70%);
  animation: bfx-burst-flare 2s ease-out forwards; }
.bfx-burst .flare.v { transform: rotate(90deg) scaleX(.45); animation-name: bfx-burst-flare-v; }
@keyframes bfx-burst-flare { 0% { transform: scaleX(.1); } 10% { transform: scaleX(1.1) scaleY(1.6); } 100% { transform: scaleX(.8) scaleY(.6); } }
@keyframes bfx-burst-flare-v { 0% { transform: rotate(90deg) scaleX(.05); } 10% { transform: rotate(90deg) scaleX(.5) scaleY(1.4); } 100% { transform: rotate(90deg) scaleX(.35) scaleY(.5); } }
.bfx-burst .ring { position: absolute; left: -160px; top: -160px; width: 320px; height: 320px; border-radius: 50%;
  border: 6px solid #fff; box-shadow: 0 0 24px var(--c), inset 0 0 24px var(--c); animation: bfx-burst-ring .9s cubic-bezier(.1,.8,.3,1) forwards; }
.bfx-burst .ring.r2 { animation-delay: .12s; border-width: 3px; }
@keyframes bfx-burst-ring { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.bfx-burst .pt { position: absolute; left: 0; top: 0; width: var(--w, 22px); height: calc(var(--w, 22px) * .55); margin: calc(var(--w, 22px) * -.275) 0 0 calc(var(--w, 22px) * -.5);
  border-radius: 80% 10% 80% 10%; background: linear-gradient(120deg, #fff, var(--pc, #ffa6c9) 60%); box-shadow: 0 0 10px var(--pc, #ffa6c9);
  animation: bfx-burst-pt 1.8s cubic-bezier(.05,.8,.25,1) forwards; animation-delay: var(--dl, 0s); opacity: 0; }
.bfx-burst .pt.sh { border-radius: 0; clip-path: polygon(0 50%, 40% 0, 100% 50%, 40% 100%); width: calc(var(--w, 22px) * 1.8); background: linear-gradient(90deg, var(--pc), #fff); }
@keyframes bfx-burst-pt { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px) rotate(0deg) scale(.6); }
  25% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--d) * .8)) rotate(120deg) scale(1.1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) translateY(40px) rotate(320deg) scale(.8); } }