/* css/cast.css — the talking cast (js/ui/cast.js): ziomek, klient, szef magazynu, kurier. Same toy portrait and the
   same paper bubble as Kim (css/guide-character.css: .kim__bubble / .kim__name / .kim__text), on a round badge in the
   character's colour, bottom-left above the nav — Kim's spot (Kim always wins it). Motion: a spring pop-in, a hop
   with the talking mouth, an idle breath (3 breaths, then still) and Kim's blink (the one allowed loop, §7). Reduced
   motion: css/motion.css stops every animation. Big screens: the bubble grows with --ui-hud like the HUD. */

/* ------------------------------------------------------------------ the portrait */
.cast__fig {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
}

.cast__svg {
  display: block;
  overflow: visible;
}

.cast__rig,
.cast__breath {
  transform-box: view-box;
  transform-origin: 50px 100px;
}

/* the idle breath: three slow breaths while the bubble is up, then still (nothing loops at idle but the blink) */
.cast__breath { animation: cast-breathe 2.2s ease-in-out 0.4s 3; }

.cast__eyes {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: kim-blink 4.6s ease-in-out -3s infinite;
}

.cast__mouth {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.cast__arm {
  transform-box: view-box;
  transform-origin: 82px 72px;
  animation: cast-thumb var(--mo-slow) var(--mo-spring) 0.25s both;
}

/* talking: a hop of the whole figure + Kim's mouth */
.cast__fig.is-talk .cast__rig { animation: cast-hop 180ms ease-in-out 6 alternate; }
.cast__fig.is-talk .cast__mouth { animation: kim-talk var(--mo-fast) ease-in-out 8 alternate; }

@keyframes cast-breathe {
  0%, 100% { transform: none; }
  50% { transform: translateY(-0.8px) scaleY(1.018); }
}

@keyframes cast-hop {
  from { transform: none; }
  to { transform: translateY(-3px) scale(0.98, 1.03); }
}

@keyframes cast-thumb {
  from { transform: translateY(10px) rotate(-18deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ------------------------------------------------------------------ the pop */
#layer-toasts > .cast-pop {
  position: absolute;
  left: var(--bubble-left, max(8px, var(--safe-left, 0px)));
  bottom: var(--bubble-bottom, calc(var(--nav-space, 78px) + 8px)); /* above the HUD's bottom-left controls (css/hud.css) */
  cursor: var(--cur-hand);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

#layer-toasts > .cast-pop.is-out { pointer-events: none; }

.cast-pop__in {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: min(400px, calc(100vw - 16px), var(--cast-maxw, 100vw));
  transform-origin: 36px 100%;
  animation: cast-pop-in var(--mo-slow) var(--mo-spring) both;
}

.cast-pop.is-out .cast-pop__in { animation: kim-pop-out var(--mo-med) var(--mo-out) both; }

/* the badge: Kim's round paper badge (ink outline, the small edge), filled with the character's colour; the head
   and the hat pop out over its top */
.cast-pop .cast__fig {
  width: 72px;
  height: 72px;
}

.cast-pop .cast__fig::before {
  content: '';
  position: absolute;
  inset: 8px 4px 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cast-bg, var(--paper));
  box-shadow: 0 3px 0 var(--ink);
}

.cast-pop .cast__svg {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: inset(-30px 6.5px 2.5px round 0 0 29.5px 29.5px);
}

.cast__fig--ziomek { --cast-bg: var(--green); }
.cast__fig--klient { --cast-bg: var(--medal-3); }
.cast__fig--szef { --cast-bg: var(--gem-light); }
.cast__fig--kurier { --cast-bg: var(--yellow); }

.cast-pop__bubble {
  flex: 0 1 auto;
  margin-bottom: 4px;
  padding: 10px 14px 12px;
  border-radius: var(--r-lg);
}

/* the tail points left, at the badge (as Kim's pop) */
.cast-pop__bubble::before {
  left: -9px;
  bottom: 22px;
  border-width: 0 0 2px 2px;
}

.cast-pop__text {
  margin-top: 4px;
}

/* the „Co teraz?” chip sits on the same spot: it waits; Kim's own bubble wins the spot */
.is-cast-pop #layer-toasts .guide__chip { visibility: hidden; }
.is-kim-pop #layer-toasts > .cast-pop { visibility: hidden; }

@keyframes cast-pop-in {
  0% { opacity: 0; transform: translateY(28px) scale(0.86); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* phones: a slimmer bubble so it never covers more than the corner */
@media (max-width: 420px) {
  .cast-pop__in { max-width: min(calc(100vw - 16px), var(--cast-maxw, 100vw)); }
  .cast-pop__bubble { padding: 8px 12px 10px; }
  .cast-pop__text { font-size: var(--fs-14); line-height: var(--lh-tight); }
}

@media (max-height: 560px) {
  .cast-pop .cast__fig { width: 56px; height: 56px; }
  .cast-pop .cast__fig::before { inset: 6px 3px 0; }
  .cast-pop .cast__svg { clip-path: inset(-24px 5.5px 2.5px round 0 0 22.5px 22.5px); }
}

/* big landscape screens: the bubble grows with the HUD (--ui-hud, js/ui/nav.js) */
@media (min-width: 900px) and (orientation: landscape) {
  .cast-pop__in {
    max-width: 400px;
    zoom: var(--ui-hud, 0.95);
  }
}

/* ------------------------------------------------------------------ QA sheet (castShowcaseGrid) */
#layer-toasts > .cast-grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: var(--scrim);
  pointer-events: auto;
}

.cast-grid__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.cast-grid__name { flex: 0 0 100%; }

.cast-grid__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-weight: 800;
  font-size: var(--fs-12);
}

.cast-grid__fig .cast__svg {
  width: 72px;
  height: 72px;
}