/* stop "mask": owned by its own workstream. Scope every rule under #stop-mask. */

/* ---- art box: train car, figure standing on the floor ---- */
#stop-mask .stop__art { background: #1d1f25; }

#stop-mask .mask__scene {
  position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(180deg, #2b2e38 0%, #15171d 58%, #2a2b30 100%);
  background-size: cover; background-position: 62% 50%; background-repeat: no-repeat;
}
#stop-mask .mask__scene::after { content: ""; position: absolute; inset: 0; background: rgba(12, 10, 16, 0.22); }

#stop-mask .mask__figure {
  position: absolute; left: 56%; bottom: 0; z-index: 2;
  height: 88%; width: auto; max-width: none; max-height: none;
  transform: translateX(-50%); user-select: none; -webkit-user-drag: none;
}
#stop-mask .mask__shadow {
  position: absolute; left: 56%; bottom: 0; z-index: 1; width: 52%; height: 8%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

#stop-mask .mask__strap {
  position: absolute; top: 0; left: 8%; z-index: 1;
  width: 3rem; height: auto; max-width: none; max-height: none;
  transform-origin: 50% 0; animation: mask-sway 5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes mask-sway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }

/* close-up sticker: circle, top corner, pops in then fades */
#stop-mask .mask__sticker {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
  width: 6.5rem; height: 6.5rem; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--c-ink); background: var(--c-white); box-shadow: 3px 3px 0 var(--c-ink);
  opacity: 0; visibility: hidden; transform: scale(0.3) rotate(-18deg); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-med) cubic-bezier(0.3, 1.5, 0.5, 1), visibility 0s linear var(--dur-fast);
}
#stop-mask .mask__sticker.is-on { opacity: 1; visibility: visible; transform: scale(1) rotate(-6deg); transition-delay: 0s; }
#stop-mask .mask__sticker img {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; object-position: 50% 25%;
  transform: scale(1.8); transform-origin: 50% 38%;
}

/* inspect overlay: close-up of the mask on a dark scrim */
#stop-mask .mask__inspect {
  position: absolute; inset: 0; z-index: 4;
  background: radial-gradient(circle at 50% 50%, rgba(44, 34, 20, 0.94), rgba(8, 7, 10, 0.97) 75%);
}
#stop-mask .mask__inspect[hidden] { display: none; }
#stop-mask .mask__inspect:not([hidden]) { animation: mask-fade var(--dur-med) var(--ease); }
@keyframes mask-fade { from { opacity: 0; } to { opacity: 1; } }
#stop-mask .mask__inspect-img {
  position: absolute; left: 50%; top: 50%; height: 56%; width: auto; max-width: none; max-height: none;
  transform: translate(-50%, -50%); filter: drop-shadow(0 0 14px rgba(217, 165, 58, 0.45));
}
#stop-mask .mask__call {
  position: absolute; z-index: 1; padding: 0.3em 0.7em; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--step--1); line-height: 1.2;
  background: var(--c-white); color: var(--c-ink); border: 2px solid var(--c-ink);
  border-radius: var(--r-pill); box-shadow: 2px 2px 0 var(--c-gold);
}
#stop-mask .mask__call--1 { top: 7%; left: 5%; }
#stop-mask .mask__call--2 { top: 7%; right: 5%; }
#stop-mask .mask__call--3 { bottom: 7%; left: 50%; transform: translateX(-50%); }

/* controls */
#stop-mask .stop__controls .chip { min-height: 2.75rem; }
#stop-mask .chip:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
#stop-mask .mask__suspicion { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
#stop-mask .mask__label { font-weight: 900; font-size: var(--step--1); }
#stop-mask .mask__pct { font-weight: 900; font-size: var(--step--1); font-variant-numeric: tabular-nums; min-width: 3.5ch; }
/* Japanese: the short label 疑念 shares the meter's line, so let the bar shrink and keep the % beside it */
#stop-mask:lang(ja) .mask__suspicion { flex-wrap: nowrap; }
#stop-mask:lang(ja) .mask__suspicion .hb-meter { flex: 1 1 auto; min-width: 0; }
#stop-mask:lang(ja) .mask__label,
#stop-mask:lang(ja) .mask__pct { flex: none; }

@media (prefers-reduced-motion: reduce) {
  #stop-mask .mask__strap { animation: none; }
  #stop-mask .mask__sticker { transition: none; }
  #stop-mask .mask__inspect:not([hidden]) { animation: none; }
}