/* ============================================================
   Cash-out landers (js/landers.js, art in js/landers-art.js).
   #landers: the spacemen, just above the canvas and under the HUD
   overlay (z 2) and the player stations (z 4), so the multiplier,
   the jackpot tiles, the 18+ badge and the panels stay on top.
   #landersFx: the touchdown dust and coins, above the stations.
   Clicks go straight through. Everything animates with transform /
   opacity only.
   ============================================================ */
.landers {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.landers.landers-fx { z-index: 6; }
.landers * { pointer-events: none; }

/* the sprite: the outer box flies (translate / rotate / scale about its centre),
   the inner body squashes about the boots */
.lander {
  position: absolute; left: 0; top: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.lander-body { width: 100%; height: 100%; will-change: transform; }
.lander-body > svg { display: block; overflow: visible; }
/* the sprite is scaled every frame: without this, Blink re-lays out (re-hints) every
   SVG <text> on each scale change */
.lander text { text-rendering: geometricPrecision; }

/* speed lines only while he drops; the art's dust only once he has landed */
.lander .lander-speed, .lander .lander-dust { visibility: hidden; }
.lander.ld-fall .lander-speed { visibility: visible; }
.lander.ld-landed .lander-dust {
  visibility: visible;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: ld-dust-in 1s ease-out both;
}
@keyframes ld-dust-in {
  0%   { transform: scale(.45, .3); opacity: 0; }
  15%  { opacity: 1; }
  55%  { opacity: .9; }
  100% { transform: scale(1.15, 1); opacity: 0; }
}

/* touchdown puff on the panel's top edge: two dust clouds, a shock ring, a few coins */
.lander-fx { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lander-fx i { position: absolute; display: block; }
.ld-dust {
  width: 54px; height: 26px; margin: -20px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 245, 255, .95), rgba(205, 218, 248, .6) 58%, rgba(205, 218, 248, 0));
  animation: ld-dust .75s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes ld-dust {
  0%   { transform: translateX(0) scale(.3); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateX(var(--dx)) scale(1.35); opacity: 0; }
}
/* at the hatch, as he pops out of the rocket: a flash, a gold ring and two small puffs */
.ld-dust.ld-hatch { width: 44px; height: 24px; margin: -12px 0 0 -22px; animation-duration: .6s; }
.ld-flash {
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0 22%, rgba(255, 236, 170, .85) 45%, rgba(255, 200, 80, 0));
  animation: ld-flash .34s ease-out both;
}
@keyframes ld-flash {
  0%   { transform: scale(.3); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
.ld-hring {
  border-radius: 50%; border: 2.5px solid rgba(255, 228, 150, .95);
  box-shadow: 0 0 12px rgba(255, 200, 80, .7), inset 0 0 8px rgba(255, 200, 80, .5);
  animation: ld-hring .42s ease-out both;
}
@keyframes ld-hring {
  0%   { transform: scale(.2); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}
.ld-ring {
  height: 14px; margin-top: -8px; border-radius: 50%;
  border: 2px solid rgba(255, 228, 150, .95);
  box-shadow: 0 0 12px rgba(255, 200, 80, .6);
  animation: ld-ring .5s ease-out both;
}
@keyframes ld-ring {
  0%   { transform: scale(.15, .5); opacity: 1; }
  100% { transform: scale(1.1, 1.3); opacity: 0; }
}
.ld-coin {
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c2 0 18%, #ffd23f 45%, #e8870f 100%);
  border: 1.5px solid #a8620f;
  animation: ld-coin .85s both;
}
@keyframes ld-coin {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  10%  { opacity: 1; }
  42%  { transform: translate(calc(var(--dx) * .6), var(--up)) rotate(calc(var(--r) * .5)) scale(1); animation-timing-function: cubic-bezier(.5, 0, .85, .6); }
  80%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dn)) rotate(var(--r)) scale(.85); opacity: 0; }
}

/* the gold "+490.00": in the balance box, in the BALANCE label's place (the label hides
   at once and fades back when he leaves); it only drifts a little, so it never climbs
   into the P badge's row. Its duration is set per lander (the hold + 0.2 s). */
.stations .st-bal { position: relative; }
.lander-pop {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font: 800 17px/1.1 'Baloo 2', Outfit, sans-serif; letter-spacing: .3px; color: #ffd23f;
  text-shadow: 0 2px 0 rgba(90, 30, 0, .8), 0 0 12px rgba(255, 176, 40, .65);
  transform-origin: 0 50%; will-change: transform, opacity;
  animation: ld-pop-above 1.7s cubic-bezier(.2, .8, .3, 1) both;
}
.stations .st-read-box > span { transition: opacity .25s ease; }
.stations .st-read-box.lander-pop-on > span { opacity: 0; transition-duration: 0s; }
@keyframes ld-pop-above {
  0%   { transform: translateY(5px) scale(.6); opacity: 0; }
  12%  { transform: translateY(0) scale(1.12); opacity: 1; }
  24%  { transform: translateY(0) scale(1); }
  75%  { opacity: 1; }
  100% { transform: translateY(-4px) scale(1); opacity: 0; }
}

/* the balance glows gold while it counts up */
.stations .st-read-box b.lander-counting {
  color: #ffd23f;
  text-shadow: 0 0 14px rgba(255, 190, 60, .6), 0 2px 0 rgba(90, 30, 0, .5);
}