/* Tactical marker on click, the way an AoE lands in game. A hexagon
   rather than a circle: the rank badge is a hexagon and every card is
   chamfered, so a plain circle was the one round thing on the page.
   Two of them, the second slower and wider, so it reads as a pulse
   going out rather than a single shape growing. */
/* The round itself, lobbed in from the bottom-left corner - roughly
   where a trebuchet would be standing if the page had one. Two nested
   elements: the outer one carries X at a constant rate, the inner one
   carries Y on an ease-out. Linear across, decelerating up: that is
   an arc, without a single path calculation in JS. */
.siege-shot{
  position:fixed;z-index:39;pointer-events:none;
  width:0;height:0;
  animation:shot-x .34s linear forwards;
}
.siege-shot i{
  position:absolute;display:block;
  left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,#eafaff 11%,#9fe0ff 32%,rgba(70,175,255,.75) 66%,transparent);
  box-shadow:0 0 14px 3px rgba(90,180,255,.85), 0 0 30px 9px rgba(40,120,255,.5);
  animation:shot-y .34s linear forwards;
}
@keyframes shot-x{
  0%{opacity:0;transform:translateX(0);}
  8%{opacity:1;}
  100%{opacity:1;transform:translateX(var(--dx,0));}
}
/* A real parabola, sampled, rather than an ease pretending to be one.
   h(t) = 2.97321t - 1.97321t^2: vertical speed at its maximum the
   instant the round leaves and falling away steadily from there, apex
   12% above the target at three quarters of the way across.

   Every eased version of this started the vertical motion slowly, which
   is the opposite of what a throw does - the round set off nearly flat,
   swung up through the middle and humped over the top. That S is what
   kept reading as wrong, and moving the apex around could never fix it,
   because the apex was never the problem. X stays linear: nothing
   pushes the stone sideways once it is in the air. */
/* A parabola written as a straight line plus a hump:

     y(t) = dy*t - rise*4t(1-t)

   The old form multiplied dy itself - "go 12% past the target, then
   come back". That only means anything when the target is ABOVE the
   launch point. Aim at something lower and 12% past meant 12% further
   DOWN, so the round dipped below the target and climbed back up to it;
   aim at something behind the machine and the whole curve inverted.
   Written this way the hump is a height in pixels that is zero at both
   ends, so it arcs over the top no matter where the target sits - and
   the apex slides along on its own, exactly as it does when gravity is
   constant and only the endpoints change. */
@keyframes shot-y{
  0%{transform:translateY(0) scale(0.700);}
  10%{transform:translateY(calc(var(--dy,0px) * 0.1 - var(--rise,0px) * 0.36)) scale(0.755);}
  20%{transform:translateY(calc(var(--dy,0px) * 0.2 - var(--rise,0px) * 0.64)) scale(0.810);}
  30%{transform:translateY(calc(var(--dy,0px) * 0.3 - var(--rise,0px) * 0.84)) scale(0.865);}
  40%{transform:translateY(calc(var(--dy,0px) * 0.4 - var(--rise,0px) * 0.96)) scale(0.920);}
  50%{transform:translateY(calc(var(--dy,0px) * 0.5 - var(--rise,0px) * 1)) scale(0.975);}
  60%{transform:translateY(calc(var(--dy,0px) * 0.6 - var(--rise,0px) * 0.96)) scale(1.030);}
  70%{transform:translateY(calc(var(--dy,0px) * 0.7 - var(--rise,0px) * 0.84)) scale(1.085);}
  80%{transform:translateY(calc(var(--dy,0px) * 0.8 - var(--rise,0px) * 0.64)) scale(1.140);}
  90%{transform:translateY(calc(var(--dy,0px) * 0.9 - var(--rise,0px) * 0.36)) scale(1.195);}
  100%{transform:translateY(var(--dy,0)) scale(1.250);}
}

/* The trail a comet leaves, rather than a shape towed behind one.
   A single wedge re-aimed every frame is rigid by construction: it can
   only ever be a straight line pointing back the way the round came,
   so on a curved arc it cuts the corner and the flame looks detached.
   This lays one short segment per frame from where the round was to
   where it is now. The path itself becomes the flame, so it bends with
   the arc, and each segment narrows and fades on its own clock, which
   is what makes the whole thing taper from head to tip. */
.flame-seg{
  position:fixed;left:0;top:0;z-index:38;pointer-events:none;
  height:12px;margin-top:-6px;transform-origin:0 50%;
}
.flame-seg i{
  display:block;width:100%;height:100%;border-radius:6px;
  background:linear-gradient(90deg,
    rgba(40,120,255,.5), rgba(110,200,255,.88) 55%, rgba(215,245,255,.98));
  filter:blur(2.6px);
  animation:flame-shrink .22s ease-out forwards;
}
/* The hot core, laid over the body: thinner, whiter, and gone sooner,
   so the centre of the trail burns out before its edges do. */
.flame-seg--hot{height:4px;margin-top:-2px;z-index:39;}
.flame-seg--hot i{
  background:linear-gradient(90deg, rgba(160,225,255,.55), #f4fdff);
  filter:blur(1.1px);
  animation-duration:.14s;
}
.flame-seg--big{height:23px;margin-top:-11.5px;}
.flame-seg--big i{animation-duration:.3s;}
.flame-seg--big.flame-seg--hot{height:8px;margin-top:-4px;}
.flame-seg--big.flame-seg--hot i{animation-duration:.19s;}
@keyframes flame-shrink{
  0%{opacity:.95;transform:scaleY(1);}
  55%{opacity:.62;}
  100%{opacity:0;transform:scaleY(.16);}
}
/* The glow around the head, which is the one part that does belong
   pinned to the round. */
.flame-head{
  position:fixed;left:0;top:0;z-index:37;pointer-events:none;opacity:0;
  width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(180,232,255,.55), rgba(60,140,255,.3) 48%, transparent 72%);
  filter:blur(7px);
  transition:opacity .2s ease-out;
}
.flame-head--big{width:104px;height:104px;margin:-52px 0 0 -52px;}

/* What the flame leaves behind. The wedge alone is a clean streak that
   vanishes the instant the round passes; these are the part that says
   something was burning - smoke that swells and drifts as it cools,
   and sparks thrown clear of it. Both are dropped at the round's live
   position and then abandoned, so they fall behind on their own. */
.trail-smoke{
  position:fixed;z-index:36;pointer-events:none;
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(130,185,240,.5), rgba(58,95,155,.3) 52%, transparent 74%);
  animation:trail-smoke 1.15s ease-out forwards;
}
@keyframes trail-smoke{
  0%{opacity:.9;transform:translate(0,0) scale(.45);}
  100%{opacity:0;transform:translate(var(--sx,0px), var(--sy,-28px)) scale(3.4);}
}
.trail-spark{
  position:fixed;z-index:40;pointer-events:none;
  width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:#e8f8ff;
  box-shadow:0 0 7px 2px rgba(90,180,255,.9);
  animation:trail-spark .62s ease-out forwards;
}
@keyframes trail-spark{
  0%{opacity:1;transform:translate(0,0) scale(1);}
  100%{opacity:0;transform:translate(var(--sx,0px), var(--sy,0px)) scale(.3);}
}

/* The round going off where it lands. With the marker gone this is
   the whole click feedback, so it is two layers: a hard core that is
   over almost immediately, and a shell that keeps travelling. */
/* Same construction as the shield blast, a size down: a ragged core,
   a few billows off-centre and a handful of spikes. The perfect ring
   that used to sit behind it is gone - it was the shape doing most of
   the work to make this read as a lamp rather than a hit. */
.shot-bloom{
  position:fixed;z-index:41;pointer-events:none;
  width:52px;height:52px;margin:-26px 0 0 -26px;
  background:radial-gradient(circle,#ffffff 7%,rgba(214,248,255,.95) 22%,
    rgba(120,190,255,.55) 46%,rgba(70,140,255,.2) 66%,transparent 78%);
  clip-path:polygon(106.8% 50.0%, 77.5% 61.4%, 89.8% 89.8%, 58.6% 70.8%, 50.0% 101.5%, 40.3% 73.4%, 14.3% 85.7%, 28.8% 58.8%, 4.9% 50.0%, 26.4% 40.2%, 17.8% 17.8%, 40.2% 26.3%, 50.0% 7.6%, 58.6% 29.2%, 87.7% 12.3%, 73.4% 40.3%);
  animation:bloom-out .44s cubic-bezier(.05,.85,.3,1) forwards;
}
.bloom-lobe{
  position:fixed;z-index:41;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle, rgba(236,252,255,.9) 8%,
    rgba(140,220,255,.6) 33%, rgba(80,165,255,.26) 57%, transparent 74%);
  opacity:0;
  animation:blast-lobe .5s cubic-bezier(.1,.8,.3,1) forwards;
}
.bloom-ray{
  position:fixed;z-index:42;pointer-events:none;
  height:5px;margin-top:-2.5px;transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(240,253,255,.92),
    rgba(125,205,255,.55) 42%, rgba(90,170,255,0));
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  filter:blur(1px);
  opacity:0;
  animation:blast-ray .3s ease-out forwards;
}
@keyframes bloom-out{
  0%{opacity:0;transform:scale(.18) rotate(-14deg);}
  9%{opacity:1;transform:scale(1) rotate(-4deg);}
  100%{opacity:0;transform:scale(2.6) rotate(12deg);}
}