/* PKTOK overlay effects — the visual catalog for the manual FX channel (overlay-fx).
   One <style> per effect, generated together; every class is scoped `fx-<name>-*` so effects can
   never collide. The layer itself is created by fx.js and is pointer-events:none, so nothing here
   may ever swallow a click or cover the frame permanently — each effect removes itself. */
#fxLayer {
  position: absolute;
  inset: 0;
  /* Above the clip (#player) and the name/text flashes (11/12) — it is appended to #stage last, so at
     an equal z-index DOM order puts it on top — but deliberately BELOW #captions (13): video.css
     states subtitles must never be covered, and an effect washing over a subtitle would do exactly
     that. Effects are short and mostly translucent, so nothing important stays hidden either way. */
  z-index: 12;
  pointer-events: none;
  overflow: hidden;
}
/* ===== sparkle — Csillogás ===== */
/* fx-sparkle — elegant twinkling glints (self-contained, GPU-friendly) */
.fx-sparkle-root{
  position:absolute; top:0; right:0; bottom:0; left:0;
  overflow:hidden;
  pointer-events:none;
  contain:layout style;
}
.fx-sparkle-root *{ pointer-events:none; }

.fx-sparkle-p{
  position:absolute;
  display:block;
  opacity:0;
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:40% 40%;
  background-image:radial-gradient(closest-side,
      #ffffff 0%,
      var(--fx-sparkle-c,#ffffff) 42%,
      transparent 100%);
  animation-name:fx-sparkle-pop;
  animation-duration:1000ms;
  animation-timing-function:cubic-bezier(.18,.86,.28,1);
  animation-fill-mode:both;
  animation-iteration-count:1;
}

.fx-sparkle-p::before,
.fx-sparkle-p::after,
.fx-sparkle-x::before,
.fx-sparkle-x::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:100%; height:100%;
  transform:translate(-50%,-50%);
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-image:radial-gradient(closest-side,
      var(--fx-sparkle-c,#ffffff) 0%,
      var(--fx-sparkle-c,#ffffff) 9%,
      transparent 100%);
}
.fx-sparkle-p::before{ background-size:100% 12%; }
.fx-sparkle-p::after{ background-size:12% 100%; }

.fx-sparkle-hero::before{ background-size:100% 8%; }
.fx-sparkle-hero::after{ background-size:8% 100%; }

.fx-sparkle-x{
  position:absolute;
  top:0; left:0;
  display:block;
  width:100%; height:100%;
  opacity:.45;
  transform:rotate(45deg) scale(.6);
}
.fx-sparkle-x::before{ background-size:100% 10%; }
.fx-sparkle-x::after{ background-size:10% 100%; }

@keyframes fx-sparkle-pop{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) translate3d(0,0,0)
              rotate(var(--fx-sparkle-rot,0deg)) scale(.12);
  }
  18%{
    opacity:1;
    transform:translate(-50%,-50%)
              translate3d(0,calc(var(--fx-sparkle-dy,0px) * .2),0)
              rotate(calc(var(--fx-sparkle-rot,0deg) + 14deg)) scale(1.06);
  }
  36%{
    opacity:.88;
    transform:translate(-50%,-50%)
              translate3d(0,calc(var(--fx-sparkle-dy,0px) * .42),0)
              rotate(calc(var(--fx-sparkle-rot,0deg) + 23deg)) scale(.8);
  }
  60%{
    opacity:.72;
    transform:translate(-50%,-50%)
              translate3d(0,calc(var(--fx-sparkle-dy,0px) * .68),0)
              rotate(calc(var(--fx-sparkle-rot,0deg) + 33deg)) scale(.95);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%)
              translate3d(0,var(--fx-sparkle-dy,0px),0)
              rotate(calc(var(--fx-sparkle-rot,0deg) + 48deg)) scale(.08);
  }
}

/* ===== confetti — Konfetti ===== */
.fx-confetti-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  transform: translateZ(0);
  transition: opacity 160ms linear;
}

.fx-confetti-canvas.fx-confetti-on {
  opacity: 1;
}

.fx-confetti-canvas.fx-confetti-off {
  opacity: 0;
  transition: opacity 420ms ease-in;
}

/* ===== glow — Fény-felvillanás ===== */
/* fx-glow — warm golden bloom wash. GPU-only (transform + opacity), self-contained. */
.fx-glow-root{
  position:absolute; left:0; top:0; width:100%; height:100%;
  overflow:hidden; pointer-events:none;
}
.fx-glow-root .fx-glow-layer{
  position:absolute; pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
  animation-duration:var(--fx-glow-d,2800ms);
  animation-iteration-count:1;
  animation-fill-mode:both;
}

/* 1. soft rim wash — light creeping in from the edges of the frame */
.fx-glow-root .fx-glow-edge{
  left:-6%; top:-6%; width:112%; height:112%;
  background:radial-gradient(62% 46% at 50% 48%,
    rgba(255,196,104,0) 40%,
    rgba(255,186,88,0.14) 66%,
    rgba(255,158,52,0.30) 86%,
    rgba(255,134,28,0.42) 100%);
  animation-name:fx-glow-edge-k;
  animation-timing-function:cubic-bezier(.33,.0,.25,1);
}

/* 2. the main bloom — big warm ellipse breathing out from the centre */
.fx-glow-root .fx-glow-bloom{
  left:-22%; top:-14%; width:144%; height:128%;
  background:radial-gradient(closest-side at 50% 50%,
    rgba(255,247,226,0.88) 0%,
    rgba(255,222,158,0.62) 24%,
    rgba(255,188,96,0.32) 50%,
    rgba(255,154,50,0.12) 74%,
    rgba(255,140,36,0) 100%);
  animation-name:fx-glow-bloom-k;
  animation-timing-function:cubic-bezier(.16,.72,.28,1);
}

/* 3. bright core kiss — a short, gentle highlight pop, never a hard flash */
.fx-glow-root .fx-glow-core{
  left:22%; top:30%; width:56%; height:36%;
  background:radial-gradient(closest-side at 50% 50%,
    rgba(255,255,250,0.50) 0%,
    rgba(255,240,206,0.20) 44%,
    rgba(255,226,168,0) 100%);
  animation-name:fx-glow-core-k;
  animation-timing-function:cubic-bezier(.12,.68,.3,1);
}

/* 4-5. two lazy light streaks drifting across, like a lens flare passing */
.fx-glow-root .fx-glow-streak{
  left:-45%; top:-32%; width:64%; height:164%;
  background:linear-gradient(90deg,
    rgba(255,238,198,0) 0%,
    rgba(255,238,198,0.08) 32%,
    rgba(255,250,232,0.26) 50%,
    rgba(255,238,198,0.08) 68%,
    rgba(255,238,198,0) 100%);
  animation-name:fx-glow-streak-k;
  animation-timing-function:cubic-bezier(.28,.06,.3,1);
  animation-delay:calc(var(--fx-glow-d,2800ms) * 0.05);
}
.fx-glow-root .fx-glow-streak-b{
  left:-40%; top:-28%; width:38%; height:156%;
  background:linear-gradient(90deg,
    rgba(255,214,140,0) 0%,
    rgba(255,222,158,0.10) 40%,
    rgba(255,236,190,0.18) 50%,
    rgba(255,222,158,0.10) 60%,
    rgba(255,214,140,0) 100%);
  animation-name:fx-glow-streak-b-k;
  animation-timing-function:cubic-bezier(.28,.06,.3,1);
  animation-delay:calc(var(--fx-glow-d,2800ms) * 0.14);
}

@keyframes fx-glow-edge-k{
  0%{   opacity:0;   transform:scale(1.07); }
  24%{  opacity:0.85; }
  52%{  opacity:0.72; transform:scale(1.0); }
  78%{  opacity:0.34; }
  100%{ opacity:0;   transform:scale(1.04); }
}
@keyframes fx-glow-bloom-k{
  0%{   opacity:0;    transform:scale(0.70); }
  16%{  opacity:0.60; }
  36%{  opacity:1;    transform:scale(1.0); }
  62%{  opacity:0.66; }
  100%{ opacity:0;    transform:scale(1.22); }
}
@keyframes fx-glow-core-k{
  0%{   opacity:0;    transform:scale(0.52); }
  12%{  opacity:0.95; transform:scale(0.92); }
  32%{  opacity:0.34; transform:scale(1.14); }
  58%{  opacity:0.12; transform:scale(1.28); }
  100%{ opacity:0;    transform:scale(1.42); }
}
@keyframes fx-glow-streak-k{
  0%{   opacity:0;    transform:rotate(16deg) translate3d(-70%,0,0) scale(1); }
  22%{  opacity:0.55; }
  50%{  opacity:0.85; transform:rotate(16deg) translate3d(70%,0,0) scale(1.05); }
  80%{  opacity:0.22; }
  100%{ opacity:0;    transform:rotate(16deg) translate3d(215%,0,0) scale(1.1); }
}
@keyframes fx-glow-streak-b-k{
  0%{   opacity:0;    transform:rotate(-13deg) translate3d(-60%,0,0); }
  30%{  opacity:0.55; }
  60%{  opacity:0.45; transform:rotate(-13deg) translate3d(110%,0,0); }
  100%{ opacity:0;    transform:rotate(-13deg) translate3d(240%,0,0); }
}

/* ===== flash — Villanás ===== */
/* ===== fx: flash — one punchy white impact flash (no strobe) ===== */

.fx-flash-root{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  pointer-events:none;
  overflow:hidden;
  color:#fff;                 /* tint source: currentColor drives every layer */
  contain:layout style paint;
}
.fx-flash-root *{ pointer-events:none; }

/* full-stage sheet: instant rise, fast decay */
.fx-flash-sheet{
  position:absolute;
  top:-2%; right:-2%; bottom:-2%; left:-2%;
  background:currentColor;
  opacity:0;
  will-change:opacity;
  animation:fx-flash-sheet-anim var(--fx-flash-dur,700ms) linear both;
}
@keyframes fx-flash-sheet-anim{
  0%   { opacity:0; animation-timing-function:cubic-bezier(.25,.85,.4,1); }
  11%  { opacity:var(--fx-flash-peak,.72); animation-timing-function:cubic-bezier(.32,0,.5,1); }
  46%  { opacity:calc(var(--fx-flash-peak,.72) * .26); animation-timing-function:cubic-bezier(.4,0,.7,1); }
  100% { opacity:0; }
}

/* soft centre bloom: gives the flash depth instead of a flat white card */
.fx-flash-bloom{
  position:absolute;
  top:-16%; right:-16%; bottom:-16%; left:-16%;
  background:radial-gradient(circle at 50% 46%, currentColor 0%, transparent 58%);
  opacity:0;
  transform:scale(.88);
  transform-origin:50% 46%;
  will-change:transform,opacity;
  animation:fx-flash-bloom-anim var(--fx-flash-dur,700ms) cubic-bezier(.12,.72,.3,1) both;
}
@keyframes fx-flash-bloom-anim{
  0%   { opacity:0; transform:scale(.88); }
  9%   { opacity:calc(var(--fx-flash-peak,.72) * .9); }
  100% { opacity:0; transform:scale(1.16); }
}

/* single thin shockwave ring — one element, transform+opacity only */
.fx-flash-ring{
  position:absolute;
  left:50%; top:46%;
  border-radius:50%;
  border-style:solid;
  border-color:currentColor;
  opacity:0;
  transform:translate(-50%,-50%) scale(.24);
  will-change:transform,opacity;
  animation:fx-flash-ring-anim var(--fx-flash-ring-dur,910ms) cubic-bezier(.1,.66,.25,1) both;
}
@keyframes fx-flash-ring-anim{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.24); }
  12%  { opacity:calc(var(--fx-flash-peak,.72) * .6); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.4); }
}

/* safety: calmer version for reduced-motion viewers */
@media (prefers-reduced-motion: reduce){
  .fx-flash-sheet{ --fx-flash-peak:.4; }
  .fx-flash-ring { display:none; }
}

/* ===== glitter — Glitter-eső ===== */
/* ===== PKFX effect: glitter ===== */
.fx-glitter-layer{
  position:absolute; top:0; left:0; right:0; bottom:0;
  overflow:hidden; pointer-events:none;
  transform:translateZ(0);
  contain:layout paint;
}

/* soft, very subtle light bloom behind the shower */
.fx-glitter-bloom{
  position:absolute; top:0; left:50%; margin-left:-75%;
  width:150%; height:72%;
  pointer-events:none; opacity:0;
  background:radial-gradient(50% 50% at 50% 40%,
      rgba(255,242,212,.22) 0%,
      rgba(255,232,182,.09) 42%,
      rgba(255,232,182,0) 72%);
  animation:fx-glitter-bloom-drift linear both;
  will-change:transform,opacity;
}

/* p = falling carrier (vertical travel + fade envelope) */
.fx-glitter-p{
  position:absolute; top:0; left:0;
  pointer-events:none; opacity:0;
  animation:fx-glitter-fall linear both;
  will-change:transform,opacity;
}

/* s = the flake itself (sway + spin + foil flip + twinkle) */
.fx-glitter-s{
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  border-radius:46% / 34%;
  transform-origin:50% 50%;
  background-image:linear-gradient(155deg,
      rgba(255,255,255,.98) 0%,
      rgba(var(--fx-glitter-rgb,255,228,158),.95) 48%,
      rgba(var(--fx-glitter-rgb,255,228,158),.28) 100%);
  animation:fx-glitter-sway ease-in-out infinite alternate,
            fx-glitter-twinkle ease-in-out infinite alternate;
  will-change:transform,opacity;
}

/* a few larger flakes get a soft halo (painted once, never animated directly) */
.fx-glitter-hero .fx-glitter-s::after{
  content:""; position:absolute;
  left:-160%; top:-90%; width:420%; height:280%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
      rgba(var(--fx-glitter-rgb,255,228,158),.45) 0%,
      rgba(var(--fx-glitter-rgb,255,228,158),.13) 38%,
      rgba(var(--fx-glitter-rgb,255,228,158),0) 70%);
}

@keyframes fx-glitter-fall{
  0%{   opacity:0; transform:translate3d(0,0,0); }
  9%{   opacity:1; }
  76%{  opacity:1; }
  100%{ opacity:0; transform:translate3d(var(--fx-glitter-dx,0px),var(--fx-glitter-dy,1100px),0); }
}

@keyframes fx-glitter-sway{
  0%{   transform:translate3d(calc(var(--fx-glitter-sw,6px) * -1),0,0)
                  rotate(calc(var(--fx-glitter-t,0deg) - 26deg)) scaleX(1); }
  50%{  transform:translate3d(0,0,0)
                  rotate(var(--fx-glitter-t,0deg)) scaleX(.28); }
  100%{ transform:translate3d(var(--fx-glitter-sw,6px),0,0)
                  rotate(calc(var(--fx-glitter-t,0deg) + 26deg)) scaleX(1); }
}

@keyframes fx-glitter-twinkle{
  0%{   opacity:.26; }
  55%{  opacity:1; }
  100%{ opacity:.46; }
}

@keyframes fx-glitter-bloom-drift{
  0%{   opacity:0;  transform:translate3d(0,-14%,0) scale(1.04); }
  22%{  opacity:1; }
  70%{  opacity:.7; }
  100%{ opacity:0;  transform:translate3d(0,26%,0) scale(1.12); }
}

/* ===== hearts — Szív-eső ===== */
/* fx-hearts — floating like-hearts, GPU-cheap (transform + opacity only) */
.fx-hearts-root{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.fx-hearts-root *{pointer-events:none}

.fx-hearts-defs{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;opacity:0}

.fx-hearts-glow{
  position:absolute;left:-15%;bottom:-25%;width:130%;height:60%;
  opacity:0;will-change:opacity;
  background:radial-gradient(ellipse at 50% 100%,
    rgba(255,72,140,.30) 0%,
    rgba(255,72,140,.13) 38%,
    rgba(255,72,140,0) 70%);
  animation-name:fx-hearts-glow;
  animation-timing-function:ease-in-out;
  animation-fill-mode:both;
}

.fx-hearts-rise{
  position:absolute;bottom:-14%;opacity:0;
  --fx-hearts-d:800px;--fx-hearts-o:.9;
  will-change:transform,opacity;
  animation-name:fx-hearts-rise;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
}

.fx-hearts-sway{
  position:relative;display:block;
  --fx-hearts-a:0px;--fx-hearts-ra:0deg;--fx-hearts-rb:0deg;
  will-change:transform;
  animation-name:fx-hearts-sway;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}

.fx-hearts-i{
  display:block;transform-origin:50% 62%;
  animation-name:fx-hearts-pop;
  animation-duration:520ms;
  animation-timing-function:cubic-bezier(.2,1.45,.5,1);
  animation-fill-mode:both;
}

.fx-hearts-dot{
  display:block;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,
    rgba(255,255,255,.95) 0%,
    rgba(255,150,195,.60) 45%,
    rgba(255,90,150,0) 72%);
}

@keyframes fx-hearts-rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  9%{opacity:var(--fx-hearts-o)}
  50%{opacity:var(--fx-hearts-o)}
  100%{transform:translate3d(0,calc(var(--fx-hearts-d) * -1),0);opacity:0}
}

@keyframes fx-hearts-sway{
  0%{transform:translate3d(calc(var(--fx-hearts-a) * -1),0,0) rotate(var(--fx-hearts-ra))}
  100%{transform:translate3d(var(--fx-hearts-a),0,0) rotate(var(--fx-hearts-rb))}
}

@keyframes fx-hearts-pop{
  0%{transform:scale(.35)}
  100%{transform:scale(1)}
}

@keyframes fx-hearts-glow{
  0%{opacity:0}
  22%{opacity:1}
  62%{opacity:.6}
  100%{opacity:0}
}

/* ===== neonframe — Neon-keret ===== */
/* neonframe — neon border traces the frame, pulses, then fades. Centre stays clear. */
.fx-neonframe-root{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;}
.fx-neonframe-root *{pointer-events:none;}

.fx-neonframe-lines{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;
  will-change:opacity,transform;
  animation-name:fx-neonframe-life;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
  animation-fill-mode:forwards;}

.fx-neonframe-edge{position:absolute;box-sizing:border-box;border-style:solid;}

.fx-neonframe-corner{position:absolute;box-sizing:border-box;border-style:solid;
  will-change:opacity,transform;
  animation-name:fx-neonframe-corner;
  animation-duration:380ms;
  animation-timing-function:cubic-bezier(.2,.85,.25,1);
  animation-fill-mode:both;}
.fx-neonframe-corner--tl{transform-origin:0% 0%;}
.fx-neonframe-corner--tr{transform-origin:100% 0%;}
.fx-neonframe-corner--br{transform-origin:100% 100%;}
.fx-neonframe-corner--bl{transform-origin:0% 100%;}

.fx-neonframe-comet{position:absolute;top:0;left:0;border-radius:999px;
  transform-origin:100% 50%;opacity:0;
  will-change:transform,opacity;
  animation-name:fx-neonframe-comet;
  animation-timing-function:linear;
  animation-fill-mode:forwards;}

@keyframes fx-neonframe-life{
  0%{opacity:0;transform:scale(.988);}
  8%{opacity:.16;}
  20%{opacity:.5;}
  31%{opacity:1;transform:scale(1);}
  40%{opacity:.62;}
  52%{opacity:1;}
  64%{opacity:.66;}
  76%{opacity:1;transform:scale(1.004);}
  90%{opacity:.9;}
  100%{opacity:0;transform:scale(1.022);}
}
@keyframes fx-neonframe-corner{
  0%{opacity:0;transform:scale(.35);}
  60%{opacity:1;}
  100%{opacity:1;transform:scale(1);}
}
@keyframes fx-neonframe-comet{
  0%{opacity:0;}
  4%{opacity:1;}
  58%{opacity:.9;}
  80%{opacity:.4;}
  100%{opacity:0;}
}

/* ===== hue — Szín-pulzálás ===== */
.fx-hue-root{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;contain:layout paint style}
.fx-hue-root *{pointer-events:none}

/* --- soft full-frame tint, two hues cross-fading --- */
.fx-hue-tint{position:absolute;left:-4%;top:-4%;width:108%;height:108%;opacity:0;will-change:transform,opacity;animation-duration:var(--fx-hue-dur);animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}
.fx-hue-tint--a{background:radial-gradient(120% 76% at 18% 6%,var(--fx-hue-t1) 0%,transparent 64%),linear-gradient(165deg,var(--fx-hue-t2) 0%,transparent 52%,var(--fx-hue-t3) 100%);animation-name:fx-hue-tintA}
.fx-hue-tint--b{background:radial-gradient(120% 76% at 84% 96%,var(--fx-hue-t4) 0%,transparent 64%),linear-gradient(20deg,var(--fx-hue-t3) 0%,transparent 55%,var(--fx-hue-t4) 100%);animation-name:fx-hue-tintB}

/* --- tilted gradient bands sweeping across the frame --- */
.fx-hue-tilt{position:absolute;left:-50%;top:-50%;width:200%;height:200%}
.fx-hue-tilt--a{transform:rotate(-17deg)}
.fx-hue-tilt--b{transform:rotate(11deg)}
.fx-hue-band{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;will-change:transform,opacity;animation-duration:var(--fx-hue-dur);animation-timing-function:cubic-bezier(.33,0,.25,1);animation-fill-mode:both}
.fx-hue-band--a{background:linear-gradient(90deg,transparent 28%,var(--fx-hue-c1) 38%,var(--fx-hue-c2) 50%,var(--fx-hue-c3) 62%,transparent 72%);animation-name:fx-hue-sweepA}
.fx-hue-band--b{background:linear-gradient(90deg,transparent 32%,var(--fx-hue-d1) 44%,var(--fx-hue-d2) 56%,transparent 68%);animation-name:fx-hue-sweepB}

/* --- gentle light-leak at the top and bottom edge --- */
.fx-hue-edge{position:absolute;left:-5%;width:110%;height:28%;opacity:0;will-change:transform,opacity;animation-duration:var(--fx-hue-dur);animation-timing-function:ease-in-out;animation-fill-mode:both}
.fx-hue-edge--top{top:-2%;background:linear-gradient(180deg,var(--fx-hue-e1) 0%,transparent 100%);animation-name:fx-hue-edgeTop}
.fx-hue-edge--bottom{bottom:-2%;background:linear-gradient(0deg,var(--fx-hue-e2) 0%,transparent 100%);animation-name:fx-hue-edgeBottom}

@keyframes fx-hue-tintA{0%{opacity:0;transform:scale(1.04)}22%{opacity:1;transform:scale(1)}56%{opacity:.34;transform:scale(1.01)}100%{opacity:0;transform:scale(1.05)}}
@keyframes fx-hue-tintB{0%{opacity:0;transform:scale(1.05)}30%{opacity:.2}64%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}}
@keyframes fx-hue-sweepA{0%{transform:translate3d(-58%,0,0);opacity:0}14%{opacity:1}80%{opacity:1}100%{transform:translate3d(58%,0,0);opacity:0}}
@keyframes fx-hue-sweepB{0%,16%{transform:translate3d(56%,0,0);opacity:0}34%{opacity:.85}86%{opacity:.85}100%{transform:translate3d(-56%,0,0);opacity:0}}
@keyframes fx-hue-edgeTop{0%{opacity:0;transform:translate3d(0,-12%,0)}26%{opacity:1;transform:translate3d(0,0,0)}70%{opacity:.5}100%{opacity:0;transform:translate3d(0,-8%,0)}}
@keyframes fx-hue-edgeBottom{0%{opacity:0;transform:translate3d(0,12%,0)}14%{opacity:0}42%{opacity:1;transform:translate3d(0,0,0)}78%{opacity:.5}100%{opacity:0;transform:translate3d(0,8%,0)}}

/* ===== shake — Rázkódás ===== */
/* fx: shake — impact jolt + shockwave (self-contained, scoped) */
.fx-shake-root{
  position:absolute; left:0; top:0; width:100%; height:100%;
  overflow:hidden; pointer-events:none;
  contain:layout style paint;
  --fx-shake-rgb:255,255,255;
  --fx-shake-amp:1;
  --fx-shake-speed:1;
  --fx-shake-x:50%;
  --fx-shake-y:46%;
}
.fx-shake-root *{ pointer-events:none; }

/* the layer that actually jolts (never the stage itself) */
.fx-shake-jolt{
  position:absolute; left:0; top:0; width:100%; height:100%;
  transform:translate3d(0,0,0);
  will-change:transform;
  animation:fx-shake-kick calc(620ms * var(--fx-shake-speed)) cubic-bezier(.2,.7,.3,1) both;
}

/* soft rim bloom around the frame — only opacity animates */
.fx-shake-vignette{
  position:absolute; left:0; top:0; width:100%; height:100%;
  opacity:0; will-change:opacity;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(var(--fx-shake-rgb),0) 48%,
    rgba(var(--fx-shake-rgb),.08) 74%,
    rgba(var(--fx-shake-rgb),.26) 100%);
  animation:fx-shake-vig calc(900ms * var(--fx-shake-speed)) cubic-bezier(.15,.7,.3,1) both;
}

/* impact core flash */
.fx-shake-core{
  position:absolute; left:var(--fx-shake-x); top:var(--fx-shake-y);
  width:30%; height:0; padding-bottom:30%; margin:0;
  border-radius:50%; opacity:0;
  will-change:transform,opacity;
  background:radial-gradient(circle closest-side,
    rgba(var(--fx-shake-rgb),.9) 0%,
    rgba(var(--fx-shake-rgb),.42) 34%,
    rgba(var(--fx-shake-rgb),0) 72%);
  transform:translate(-50%,-50%) scale(.18);
  animation:fx-shake-core calc(520ms * var(--fx-shake-speed)) cubic-bezier(.12,.75,.3,1) both;
}

/* shockwave rings (gradient ring => thickness scales with size, no px) */
.fx-shake-ring{
  position:absolute; left:var(--fx-shake-x); top:var(--fx-shake-y);
  width:42%; height:0; padding-bottom:42%; margin:0;
  border-radius:50%; opacity:0;
  will-change:transform,opacity;
  background:radial-gradient(circle closest-side,
    rgba(var(--fx-shake-rgb),0) 56%,
    rgba(var(--fx-shake-rgb),.75) 68%,
    rgba(var(--fx-shake-rgb),.9) 74%,
    rgba(var(--fx-shake-rgb),0) 84%);
  transform:translate(-50%,-50%) scale(.18);
}
.fx-shake-ring--a{
  animation:fx-shake-ring-a calc(700ms * var(--fx-shake-speed)) cubic-bezier(.1,.75,.25,1) both;
}
.fx-shake-ring--b{
  width:52%; padding-bottom:52%;
  animation:fx-shake-ring-b calc(1400ms * var(--fx-shake-speed)) cubic-bezier(.08,.7,.2,1) both;
  animation-delay:calc(100ms * var(--fx-shake-speed));
}

/* thin debris streaks */
.fx-shake-spark{
  position:absolute; left:var(--fx-shake-x); top:var(--fx-shake-y);
  width:15%; height:.34%; margin:0;
  border-radius:999px; opacity:0;
  transform-origin:0 0;
  will-change:transform,opacity;
  background:linear-gradient(90deg, rgba(var(--fx-shake-rgb),.85), rgba(var(--fx-shake-rgb),0));
  transform:rotate(var(--fx-shake-r,0deg)) translate(4%,-50%) scaleX(.35);
  animation:fx-shake-spark calc(480ms * var(--fx-shake-speed)) cubic-bezier(.1,.7,.25,1) both;
}

@keyframes fx-shake-kick{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  5%{transform:translate3d(calc(var(--fx-shake-amp) * 1.05%),calc(var(--fx-shake-amp) * -0.62%),0) rotate(calc(var(--fx-shake-amp) * 0.5deg)) scale(1.018)}
  13%{transform:translate3d(calc(var(--fx-shake-amp) * -0.86%),calc(var(--fx-shake-amp) * 0.5%),0) rotate(calc(var(--fx-shake-amp) * -0.4deg)) scale(1.012)}
  23%{transform:translate3d(calc(var(--fx-shake-amp) * 0.62%),calc(var(--fx-shake-amp) * 0.38%),0) rotate(calc(var(--fx-shake-amp) * 0.28deg)) scale(1.008)}
  35%{transform:translate3d(calc(var(--fx-shake-amp) * -0.44%),calc(var(--fx-shake-amp) * -0.28%),0) rotate(calc(var(--fx-shake-amp) * -0.2deg)) scale(1.005)}
  48%{transform:translate3d(calc(var(--fx-shake-amp) * 0.3%),calc(var(--fx-shake-amp) * 0.2%),0) rotate(calc(var(--fx-shake-amp) * 0.14deg)) scale(1.003)}
  61%{transform:translate3d(calc(var(--fx-shake-amp) * -0.19%),calc(var(--fx-shake-amp) * -0.13%),0) rotate(calc(var(--fx-shake-amp) * -0.09deg)) scale(1.002)}
  74%{transform:translate3d(calc(var(--fx-shake-amp) * 0.11%),calc(var(--fx-shake-amp) * 0.08%),0) rotate(calc(var(--fx-shake-amp) * 0.05deg)) scale(1.001)}
  87%{transform:translate3d(calc(var(--fx-shake-amp) * -0.05%),calc(var(--fx-shake-amp) * -0.04%),0) rotate(calc(var(--fx-shake-amp) * -0.02deg)) scale(1)}
  100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
}
@keyframes fx-shake-vig{
  0%{opacity:0}
  12%{opacity:1}
  100%{opacity:0}
}
@keyframes fx-shake-core{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  14%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}
}
@keyframes fx-shake-ring-a{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.16)}
  10%{opacity:.95}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes fx-shake-ring-b{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28)}
  14%{opacity:.5}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
@keyframes fx-shake-spark{
  0%{opacity:0;transform:rotate(var(--fx-shake-r,0deg)) translate(4%,-50%) scaleX(.35)}
  18%{opacity:.55}
  100%{opacity:0;transform:rotate(var(--fx-shake-r,0deg)) translate(155%,-50%) scaleX(1.15)}
}

/* ===== zoom — Zoom-érzés ===== */
.fx-zoom-root{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:30;--fxz:rgba(255,255,255,0.96);--fxzw:5px;--fxzt:2px}
.fx-zoom-root *{pointer-events:none;box-sizing:border-box}

.fx-zoom-vig{position:absolute;left:-12%;top:-12%;width:124%;height:124%;opacity:0;transform:scale(1.2);animation:fx-zoom-vig 2500ms cubic-bezier(.22,.68,.18,1) both}
@keyframes fx-zoom-vig{0%{opacity:0;transform:scale(1.2)}16%{opacity:1}62%{opacity:1;transform:scale(1)}84%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}

.fx-zoom-lines{position:absolute;left:0;top:0;width:100%;height:100%}

.fx-zoom-bloom{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transform:scale(.9);animation:fx-zoom-bloom 640ms cubic-bezier(.2,.7,.3,1) 560ms both}
@keyframes fx-zoom-bloom{0%{opacity:0;transform:scale(.9)}26%{opacity:.85}100%{opacity:0;transform:scale(1.16)}}

.fx-zoom-box{position:absolute;left:50%;top:44%;opacity:0;transform:translate(-50%,-50%) scale(2.4);will-change:transform,opacity;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));animation:fx-zoom-rush 720ms cubic-bezier(.1,.82,.22,1) both,fx-zoom-hold 1800ms ease-in-out 720ms forwards}
@keyframes fx-zoom-rush{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}12%{opacity:1}62%{transform:translate(-50%,-50%) scale(.952)}80%{transform:translate(-50%,-50%) scale(1.024)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fx-zoom-hold{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}42%{transform:translate(-50%,-50%) scale(1.014)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.055)}}

.fx-zoom-ring{position:absolute;left:7%;top:7%;width:86%;height:86%;border:var(--fxzt) solid var(--fxz);border-radius:50%;opacity:0}
.fx-zoom-ring-a{animation:fx-zoom-ringa 760ms cubic-bezier(.12,.84,.24,1) both}
.fx-zoom-ring-b{animation:fx-zoom-ringb 760ms cubic-bezier(.2,.7,.3,1) 640ms both}
@keyframes fx-zoom-ringa{0%{opacity:0;transform:scale(1.72)}30%{opacity:.42}100%{opacity:0;transform:scale(.88)}}
@keyframes fx-zoom-ringb{0%{opacity:.5;transform:scale(.96)}100%{opacity:0;transform:scale(1.3)}}

.fx-zoom-c{position:absolute;width:27%;height:27%;border:0 solid var(--fxz);opacity:0}
.fx-zoom-c-tl{left:0;top:0;border-top-width:var(--fxzw);border-left-width:var(--fxzw);border-top-left-radius:calc(var(--fxzw) * 1.6);animation:fx-zoom-ctl 660ms cubic-bezier(.14,.86,.26,1) 40ms both}
.fx-zoom-c-tr{right:0;top:0;border-top-width:var(--fxzw);border-right-width:var(--fxzw);border-top-right-radius:calc(var(--fxzw) * 1.6);animation:fx-zoom-ctr 660ms cubic-bezier(.14,.86,.26,1) 80ms both}
.fx-zoom-c-bl{left:0;bottom:0;border-bottom-width:var(--fxzw);border-left-width:var(--fxzw);border-bottom-left-radius:calc(var(--fxzw) * 1.6);animation:fx-zoom-cbl 660ms cubic-bezier(.14,.86,.26,1) 80ms both}
.fx-zoom-c-br{right:0;bottom:0;border-bottom-width:var(--fxzw);border-right-width:var(--fxzw);border-bottom-right-radius:calc(var(--fxzw) * 1.6);animation:fx-zoom-cbr 660ms cubic-bezier(.14,.86,.26,1) 120ms both}
@keyframes fx-zoom-ctl{0%{opacity:0;transform:translate(-34%,-34%)}100%{opacity:1;transform:translate(0,0)}}
@keyframes fx-zoom-ctr{0%{opacity:0;transform:translate(34%,-34%)}100%{opacity:1;transform:translate(0,0)}}
@keyframes fx-zoom-cbl{0%{opacity:0;transform:translate(-34%,34%)}100%{opacity:1;transform:translate(0,0)}}
@keyframes fx-zoom-cbr{0%{opacity:0;transform:translate(34%,34%)}100%{opacity:1;transform:translate(0,0)}}

.fx-zoom-t{position:absolute;background:var(--fxz);opacity:0}
.fx-zoom-t-n{left:50%;top:0;width:var(--fxzt);height:8%;margin-left:calc(var(--fxzt) / -2);transform-origin:50% 0;animation:fx-zoom-tv 560ms cubic-bezier(.16,.86,.3,1) 300ms both}
.fx-zoom-t-s{left:50%;bottom:0;width:var(--fxzt);height:8%;margin-left:calc(var(--fxzt) / -2);transform-origin:50% 100%;animation:fx-zoom-tv 560ms cubic-bezier(.16,.86,.3,1) 340ms both}
.fx-zoom-t-w{left:0;top:50%;width:8%;height:var(--fxzt);margin-top:calc(var(--fxzt) / -2);transform-origin:0 50%;animation:fx-zoom-th 560ms cubic-bezier(.16,.86,.3,1) 320ms both}
.fx-zoom-t-e{right:0;top:50%;width:8%;height:var(--fxzt);margin-top:calc(var(--fxzt) / -2);transform-origin:100% 50%;animation:fx-zoom-th 560ms cubic-bezier(.16,.86,.3,1) 360ms both}
@keyframes fx-zoom-tv{0%{opacity:0;transform:scaleY(.15)}55%{opacity:.8}100%{opacity:.7;transform:scaleY(1)}}
@keyframes fx-zoom-th{0%{opacity:0;transform:scaleX(.15)}55%{opacity:.8}100%{opacity:.7;transform:scaleX(1)}}

.fx-zoom-clip{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
.fx-zoom-sweep{position:absolute;left:0;top:0;width:100%;height:18%;opacity:0;transform:translateY(-100%);background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 100%);animation:fx-zoom-sweep 1000ms cubic-bezier(.36,0,.2,1) 700ms both}
@keyframes fx-zoom-sweep{0%{opacity:0;transform:translateY(-100%)}14%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translateY(556%)}}

/* ===== impact — Neon becsapódás ===== */
.fx-impact-root{
  position:absolute;inset:0;z-index:40;overflow:hidden;pointer-events:none;isolation:isolate;
  --fxi-c1:#3ff4ff;--fxi-c2:#ff45d4;--fxi-x:50%;--fxi-y:44%;--fxi-total:2700ms;
  --fxi-flash:360ms;--fxi-hit:1050ms;--fxi-hit-b:1135ms;--fxi-hit-c:1260ms;--fxi-arc-ms:1420ms;
  --fxi-ray-ms:980ms;--fxi-shard-ms:1380ms;--fxi-ring:980px;--fxi-ring-mid:510px;
  --fxi-ring-small:294px;--fxi-frame:5px;
}
.fx-impact-root *{box-sizing:border-box;pointer-events:none}
.fx-impact-wash,.fx-impact-flash,.fx-impact-vignette,.fx-impact-frame{position:absolute;inset:0}
.fx-impact-wash{
  opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(circle at var(--fxi-x) var(--fxi-y),rgba(255,255,255,.76) 0%,rgba(255,255,255,.16) 4%,transparent 18%),
    conic-gradient(from 18deg at var(--fxi-x) var(--fxi-y),transparent 0 8%,rgba(63,244,255,.24) 11%,transparent 16% 31%,rgba(255,69,212,.24) 35%,transparent 41% 58%,rgba(63,244,255,.18) 62%,transparent 68% 84%,rgba(255,69,212,.2) 88%,transparent 94%);
  animation:fx-impact-wash var(--fxi-total) cubic-bezier(.12,.76,.2,1) both;
}
.fx-impact-flash{
  opacity:0;background:#fff;mix-blend-mode:screen;
  animation:fx-impact-flash var(--fxi-flash) cubic-bezier(.12,.72,.18,1) 70ms both;
}
.fx-impact-vignette{
  opacity:0;background:radial-gradient(ellipse at var(--fxi-x) var(--fxi-y),transparent 18%,rgba(2,4,14,.04) 38%,rgba(1,3,12,.62) 100%);
  animation:fx-impact-vignette var(--fxi-total) ease-out both;
}
.fx-impact-frame{
  inset:2.2%;opacity:0;border:var(--fxi-frame) solid rgba(255,255,255,.72);border-radius:3.2%;
  box-shadow:0 0 18px var(--fxi-c1),0 0 70px rgba(255,69,212,.72),inset 0 0 34px rgba(63,244,255,.58);
  animation:fx-impact-frame var(--fxi-total) cubic-bezier(.16,.74,.2,1) both;
}
.fx-impact-halo,.fx-impact-core,.fx-impact-ring,.fx-impact-arc{
  position:absolute;left:var(--fxi-x);top:var(--fxi-y);border-radius:50%;
}
.fx-impact-halo{
  width:var(--fxi-ring);height:var(--fxi-ring);opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.94) 0 1.5%,rgba(63,244,255,.76) 4%,rgba(255,69,212,.38) 12%,transparent 38%);
  transform:translate(-50%,-50%) scale(.04);mix-blend-mode:screen;
  animation:fx-impact-halo var(--fxi-hit) cubic-bezier(.08,.82,.16,1) 75ms both;
}
.fx-impact-core{
  width:8%;aspect-ratio:1;min-width:18px;max-width:96px;opacity:0;
  background:radial-gradient(circle,#fff 0 11%,var(--fxi-c1) 24%,var(--fxi-c2) 48%,transparent 72%);
  filter:drop-shadow(0 0 20px #fff) drop-shadow(0 0 46px var(--fxi-c1));
  transform:translate(-50%,-50%) scale(.08);
  animation:fx-impact-core var(--fxi-hit) cubic-bezier(.08,.86,.16,1) 45ms both;
}
.fx-impact-ring{
  width:var(--fxi-ring);height:var(--fxi-ring);opacity:0;border:3px solid var(--fxi-c1);
  box-shadow:0 0 12px #fff,0 0 28px var(--fxi-c1),inset 0 0 18px var(--fxi-c2);
  transform:translate(-50%,-50%) scale(.035);
  animation:fx-impact-ring var(--fxi-hit) cubic-bezier(.08,.8,.12,1) both;
}
.fx-impact-ring--b{border-color:var(--fxi-c2);animation-delay:145ms;animation-duration:var(--fxi-hit-b)}
.fx-impact-ring--c{border-width:1px;border-color:#fff;animation-delay:260ms;animation-duration:var(--fxi-hit-c)}
.fx-impact-arc{
  width:var(--fxi-ring-mid);height:var(--fxi-ring-mid);opacity:0;
  border:7px solid transparent;border-top-color:var(--fxi-c1);border-right-color:var(--fxi-c2);
  filter:drop-shadow(0 0 12px var(--fxi-c1));transform:translate(-50%,-50%) scale(.16) rotate(0deg);
  animation:fx-impact-arc var(--fxi-arc-ms) cubic-bezier(.1,.78,.18,1) 85ms both;
}
.fx-impact-arc--b{
  width:var(--fxi-ring-small);height:var(--fxi-ring-small);border-width:4px;
  border-top-color:var(--fxi-c2);border-right-color:transparent;border-bottom-color:var(--fxi-c1);
  animation-direction:reverse;animation-delay:120ms;
}
.fx-impact-ray{
  position:absolute;left:var(--fxi-x);top:var(--fxi-y);width:var(--fxi-len);height:var(--fxi-h);
  margin-top:var(--fxi-h-half);opacity:0;border-radius:999px;transform-origin:0 50%;
  background:linear-gradient(90deg,#fff 0%,var(--fxi-ray-color) 14%,var(--fxi-ray-color) 48%,transparent 100%);
  box-shadow:0 0 8px var(--fxi-ray-color);will-change:transform,opacity;
  animation:fx-impact-ray var(--fxi-ray-ms) cubic-bezier(.04,.72,.12,1) var(--fxi-delay) both;
}
.fx-impact-shard{
  position:absolute;left:var(--fxi-x);top:var(--fxi-y);width:var(--fxi-size-wide);height:var(--fxi-size);
  opacity:0;background:linear-gradient(90deg,#fff,var(--fxi-shard-color));
  clip-path:polygon(0 50%,72% 0,100% 50%,72% 100%);filter:drop-shadow(0 0 7px var(--fxi-shard-color));
  will-change:transform,opacity;
  animation:fx-impact-shard var(--fxi-shard-ms) cubic-bezier(.08,.62,.14,1) var(--fxi-delay) both;
}
.fx-impact-corner{
  position:absolute;width:13%;height:8%;opacity:0;border:0 solid #fff;
  filter:drop-shadow(0 0 9px var(--fxi-c1));animation:fx-impact-corner var(--fxi-total) ease-out 130ms both;
}
.fx-impact-corner--tl{left:4%;top:4%;border-left:var(--fxi-frame) solid var(--fxi-c1);border-top:var(--fxi-frame) solid #fff}
.fx-impact-corner--tr{right:4%;top:4%;border-right:var(--fxi-frame) solid var(--fxi-c2);border-top:var(--fxi-frame) solid #fff}
.fx-impact-corner--br{right:4%;bottom:4%;border-right:var(--fxi-frame) solid var(--fxi-c1);border-bottom:var(--fxi-frame) solid #fff}
.fx-impact-corner--bl{left:4%;bottom:4%;border-left:var(--fxi-frame) solid var(--fxi-c2);border-bottom:var(--fxi-frame) solid #fff}

@keyframes fx-impact-flash{0%{opacity:0}18%{opacity:.94}42%{opacity:.16}100%{opacity:0}}
@keyframes fx-impact-wash{0%{opacity:0;transform:scale(.72) rotate(-4deg)}7%{opacity:.95}28%{opacity:.5;transform:scale(1.04) rotate(1deg)}68%{opacity:.16}100%{opacity:0;transform:scale(1.12) rotate(3deg)}}
@keyframes fx-impact-vignette{0%,4%{opacity:0}18%{opacity:.82}68%{opacity:.42}100%{opacity:0}}
@keyframes fx-impact-frame{0%{opacity:0;transform:scale(1.08)}8%{opacity:1}18%{opacity:.28}27%{opacity:.92;transform:scale(1)}40%{opacity:.36}52%{opacity:.8}82%{opacity:.32}100%{opacity:0;transform:scale(1.015)}}
@keyframes fx-impact-halo{0%{opacity:0;transform:translate(-50%,-50%) scale(.025)}13%{opacity:1}48%{opacity:.72}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes fx-impact-core{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.85)}32%{opacity:.92;transform:translate(-50%,-50%) scale(.82)}58%{opacity:.58;transform:translate(-50%,-50%) scale(1.16)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
@keyframes fx-impact-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.035)}12%{opacity:1}62%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(1.34)}}
@keyframes fx-impact-arc{0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-35deg)}18%{opacity:1}68%{opacity:.72}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18) rotate(235deg)}}
@keyframes fx-impact-ray{0%{opacity:0;transform:rotate(var(--fxi-a)) translateX(0) scaleX(.04)}14%{opacity:1}42%{opacity:.96;transform:rotate(var(--fxi-a)) translateX(var(--fxi-travel-mid)) scaleX(.92)}100%{opacity:0;transform:rotate(var(--fxi-a)) translateX(var(--fxi-travel)) scaleX(1.34)}}
@keyframes fx-impact-shard{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--fxi-rot)) scale(.1)}15%{opacity:1}58%{opacity:.94}100%{opacity:0;transform:translate(calc(-50% + var(--fxi-dx)),calc(-50% + var(--fxi-dy))) rotate(calc(var(--fxi-rot) + 240deg)) scale(.28)}}
@keyframes fx-impact-corner{0%{opacity:0;transform:scale(1.12)}8%{opacity:1}16%{opacity:.25}28%{opacity:.92;transform:scale(1)}58%{opacity:.52}84%{opacity:.28}100%{opacity:0;transform:scale(1.02)}}