/* Arcade flourishes and the big centre-screen word. All of this is triggered
   from src/ui/fx.js by adding a class; nothing here is driven per-frame. */

/* ---------- arcade fx ---------- */
#fx{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden}
#fxFlash{position:absolute;inset:0;background:#fff;opacity:0}
#fxFlash.go{animation:flashOut .34s ease-out}
@keyframes flashOut{0%{opacity:.92}30%{opacity:.5}100%{opacity:0}}

#fxStreaks{position:absolute;inset:-30% -20%;opacity:0}
#fxStreaks i{
  position:absolute;top:0;bottom:0;width:9vw;background:linear-gradient(90deg,transparent,var(--bone),transparent);
  transform:skewX(-22deg) translateX(-160vw);opacity:.85;
}
#fxStreaks i:nth-child(1){left:-10%;width:14vw}
#fxStreaks i:nth-child(2){left:16%;background:linear-gradient(90deg,transparent,var(--amber),transparent)}
#fxStreaks i:nth-child(3){left:40%;width:16vw}
#fxStreaks i:nth-child(4){left:66%;background:linear-gradient(90deg,transparent,var(--red),transparent)}
#fxStreaks i:nth-child(5){left:86%;width:12vw}
#fxStreaks.go{opacity:1}
#fxStreaks.go i{animation:streak .55s cubic-bezier(.2,.7,.2,1) forwards}
#fxStreaks.go i:nth-child(2){animation-delay:.04s}
#fxStreaks.go i:nth-child(3){animation-delay:.08s}
#fxStreaks.go i:nth-child(4){animation-delay:.12s}
#fxStreaks.go i:nth-child(5){animation-delay:.16s}
@keyframes streak{
  0%{transform:skewX(-22deg) translateX(-160vw);opacity:0}
  18%{opacity:.9}
  100%{transform:skewX(-22deg) translateX(170vw);opacity:0}
}

/* Shockwave rings behind the big word. */
#fxRings{position:absolute;left:50%;top:28%;opacity:0}
#fxRings i{
  position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;
  border:3px solid var(--amber);border-radius:50%;opacity:0;
}
#fxRings.go{opacity:1}
#fxRings.go i{animation:ringOut .6s ease-out forwards}
#fxRings.go i:nth-child(2){animation-delay:.12s;border-color:var(--bone)}
@keyframes ringOut{
  0%{transform:scale(.4);opacity:.85;border-width:8px}
  100%{transform:scale(34);opacity:0;border-width:1px}
}

/* ---------- the pixel dissolve on a button press ---------- */
/* Built and thrown away by disperse() in src/ui/fx.js. The layer is positioned
   over the button in viewport coordinates and sits above every screen in the
   game, so a chip in a kit row and the FIGHT button both come apart in front of
   whatever they are sitting on. No colour here: each pixel is painted inline
   with the button's own computed background, which is the whole point. */
.px-burst{position:fixed;z-index:60;pointer-events:none}
.px-burst i{
  position:absolute;display:block;
  animation:pxOut .5s cubic-bezier(.2,.55,.3,1) both;
}
@keyframes pxOut{
  0%{transform:translate(0,0) rotate(0) scale(1);opacity:.95}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(.2);opacity:0}
}

/* ---------- money changing hands ---------- */
/* Coins out of the point of a click in the gear shop. The layer is parked at the
   cursor and thrown from there — same throwaway-layer trick as the dissolve
   above, different arc: these go up and out first and then fall past where they
   started, because a coin has weight and a pixel does not.

   The glint is a brightness pulse rather than a flip, and that is a constraint
   rather than a preference: the arc already owns `transform`, and two keyframe
   sets cannot animate the same property on one element — the second silently
   wins and the coins go nowhere. Brightness is a free channel, and a coin
   catching the light is the same idea as a coin turning. */
.coin-pop{position:fixed;z-index:61;pointer-events:none}
.coin-pop i{
  position:absolute;display:block;
  width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  border-radius:50%;background:var(--amber);
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.40), 0 0 10px rgba(242,179,61,.45);
  animation:coinUp .68s cubic-bezier(.16,.72,.4,1) both,
            coinFlip .42s linear infinite;
}
@keyframes coinUp{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  18%{opacity:1}
  46%{transform:translate(var(--dx),var(--dy)) scale(1)}
  100%{transform:translate(calc(var(--dx) * 1.35),var(--fy)) scale(.72);opacity:0}
}
@keyframes coinFlip{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.45)}
}

/* ---------- big announcements ---------- */
/* Lifted from 28% so the count underneath has a band of its own. See the note
   on #centre in hud.css — these two numbers are a pair. */
#announce{
  position:fixed;left:0;right:0;top:22%;z-index:26;text-align:center;pointer-events:none;
}
#announce span{
  display:inline-block;font-family:var(--display);text-transform:uppercase;
  /* The other half of the pair with #count in hud.css — both take the shorter
     axis so a short window shrinks the type instead of closing the gap. */
  font-size:clamp(44px,min(13vw,22vh),168px);line-height:.85;letter-spacing:.02em;
  color:var(--bone);opacity:0;
  text-shadow:
    0 0 0 #000, 4px 4px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000,
    0 0 46px rgba(242,179,61,.55);
  -webkit-text-stroke:2px #000;
}
/* Slam: comes in oversized and rotated, lands hard, sits, then punches out. */
#announce span.slam{animation:slamIn 1.15s cubic-bezier(.16,1.02,.3,1) forwards}
@keyframes slamIn{
  0%{opacity:0;transform:scale(4.6) rotate(-11deg);filter:blur(9px)}
  22%{opacity:1;transform:scale(.92) rotate(0deg);filter:blur(0)}
  30%{transform:scale(1.06)}
  38%{transform:scale(1)}
  76%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.5)}
}
/* Roll-in for the "round one" style card: slides in from the left, out right. */
#announce span.sweep{animation:sweepThru 1.25s cubic-bezier(.2,.75,.2,1) forwards}
@keyframes sweepThru{
  0%{opacity:0;transform:translateX(-120vw) skewX(-24deg)}
  22%{opacity:1;transform:translateX(0) skewX(-8deg)}
  70%{opacity:1;transform:translateX(0) skewX(-8deg)}
  100%{opacity:0;transform:translateX(120vw) skewX(-24deg)}
}
#announce span.amber{color:var(--amber)}
#announce span.red{color:#e8503f}