/* ============================================================
   CATBACK airdrop.css — the deployment bubble that leaves the
   ATM's cash slot each cycle. Companion to js/airdrop.js.
   Motion is transform + opacity only, on one element.
   ============================================================ */

.ad-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  pointer-events: none;       /* purely decorative — never eats a click */
  overflow: hidden;
}

.ad-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 13px;
  white-space: nowrap;

  /* soft whitish-green capsule: pale wash, crisp mint edge, gentle lift */
  background:
    linear-gradient(180deg, #f4fff2 0%, #e2f7dc 62%, #d3f0cb 100%);
  border: var(--px) solid #7fc98a;
  box-shadow:
    0 0 0 var(--px) #ffffff,
    0 0 0 calc(2 * var(--px)) rgba(47, 107, 52, 0.30),
    0 12px 26px rgba(20, 50, 24, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);

  /* born at the slot: centred on it, small, invisible */
  transform: translate(-50%, -46%) scale(0.42);
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

/* the whole travel — out of the slot, up, and gently toward the viewer */
.ad-bubble.is-out {
  transform: translate(-50%, calc(-50% + var(--ad-rise, -200px))) scale(1);
  opacity: 1;
  transition:
    transform 1150ms cubic-bezier(0.16, 0.84, 0.28, 1),
    opacity 340ms ease-out;
}

/* dissolve: keep drifting a touch so it never stops dead */
.ad-bubble.is-gone {
  transform: translate(-50%, calc(-50% + var(--ad-rise, -200px) - 34px)) scale(1.03);
  opacity: 0;
  transition:
    transform 700ms cubic-bezier(0.4, 0, 0.7, 0.4),
    opacity 700ms ease-in;
}

.ad-glyph {
  font-family: var(--font-pixel);
  font-size: 13px;
  line-height: 1;
  color: #2f8a3a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ad-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ad-head {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1.5px;
  line-height: 1;
  color: #17421c;
}

.ad-sub {
  font-family: var(--font-term);
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1;
  color: #2f6b34;
}

/* a soft halo pulse the moment it lands — one shot, opacity only */
.ad-bubble::after {
  content: '';
  position: absolute;
  inset: calc(-3 * var(--px));
  pointer-events: none;
  border: var(--px) solid rgba(127, 201, 138, 0.85);
  opacity: 0;
}
.ad-bubble.is-out::after {
  animation: ad-halo 900ms ease-out 900ms both;
}
@keyframes ad-halo {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* ---- reduced motion: it appears and leaves, it does not fly ---- */
body[data-motion="reduce"] .ad-bubble {
  transform: translate(-50%, calc(-50% - 120px)) scale(1);
  transition: opacity 200ms linear;
}
body[data-motion="reduce"] .ad-bubble.is-out {
  transform: translate(-50%, calc(-50% - 120px)) scale(1);
  transition: opacity 200ms linear;
}
body[data-motion="reduce"] .ad-bubble.is-gone {
  transform: translate(-50%, calc(-50% - 120px)) scale(1);
  opacity: 0;
}
body[data-motion="reduce"] .ad-bubble.is-out::after { animation: none; }

@media (max-width: 659.98px) {
  .ad-bubble { padding: 9px 13px 9px 11px; gap: 8px; }
  .ad-head { font-size: 8px; }
  .ad-sub  { font-size: 13px; }
}