/* Candy Dealer "Triple Throw": muzzle flares at the hand, claw slashes on the
   monster. Both live in #projectileLayer, which game.css already forces to
   z-index 60. Damage numbers carry an inline z-index of 6500 and stay on top.

   Deliberately NOT mix-blend-mode: screen, which the sword FX in attacks.css
   uses. These maps are bright candy-colored and screen washes the art out. The
   PNGs carry their own glow; the drop-shadows below reinforce it. */

.tt-flare,
.tt-slash {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
  transform-origin: center;
  will-change: transform, opacity;
}

/* ---- muzzle flare: fires as each star leaves the hand ---- */
.tt-flare {
  z-index: 29;
  width: 220px;    /* the character is 176px wide, so the streak runs a touch longer */
  height: 65px;    /* holds the 825x245 source aspect */
  animation: ttFlare 250ms cubic-bezier(.15, .75, .35, 1) forwards;
}

@keyframes ttFlare {
  0% {
    opacity: .85;
    transform: translate(-50%, 50%) scaleX(calc(var(--tt-facing, 1) * .6)) scaleY(.6);
  }
  35% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tt-drift, 14px)), 50%)
               scaleX(calc(var(--tt-facing, 1) * 1.15)) scaleY(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tt-drift-end, 26px)), 50%)
               scaleX(calc(var(--tt-facing, 1) * 1.25)) scaleY(1.05);
  }
}

.tt-flare--1 { filter: drop-shadow(0 0 10px rgba(34, 211, 238, .9)) drop-shadow(0 0 22px rgba(34, 211, 238, .5)); }
.tt-flare--2 { filter: drop-shadow(0 0 10px rgba(244, 114, 182, .9)) drop-shadow(0 0 22px rgba(244, 114, 182, .5)); }
.tt-flare--3 { filter: drop-shadow(0 0 10px rgba(250, 204, 21, .9)) drop-shadow(0 0 22px rgba(250, 204, 21, .5)); }

/* ---- impact slash: fires as each star connects ---- */
.tt-slash {
  z-index: 31;
  width: 215px;    /* a tropi duck is at least 260px across */
  height: 138px;   /* holds the 407x262 source aspect */
  animation: ttSlash 220ms cubic-bezier(.2, .8, .3, 1) forwards;
}

@keyframes ttSlash {
  0%   { opacity: .9; transform: translate(-50%, 50%) scale(.75) rotate(-6deg); }
  40%  { opacity: 1;  transform: translate(-50%, 50%) scale(1.05) rotate(0deg); }
  100% { opacity: 0;  transform: translate(-50%, 50%) scale(1.12) rotate(3deg); }
}

.tt-slash--1 { filter: drop-shadow(0 0 10px rgba(248, 113, 113, .9)) drop-shadow(0 0 20px rgba(248, 113, 113, .45)); }
.tt-slash--2 { filter: drop-shadow(0 0 10px rgba(74, 222, 128, .9)) drop-shadow(0 0 20px rgba(74, 222, 128, .45)); }
.tt-slash--3 { filter: drop-shadow(0 0 10px rgba(96, 165, 250, .9)) drop-shadow(0 0 20px rgba(96, 165, 250, .45)); }