/* Scroll-driven exploded view. The track is tall; the stage sticks while the model comes apart. */
.umi-explode {
  --ux-ink: var(--ink, #293636);
  --ux-muted: var(--muted, #637271);
  --ux-teal: var(--teal, #278c8d);
  --ux-line: #9fb0ae;
  --ux-wash: var(--wash, #f5f8f7);
  position: relative;
  background: #fff;
}

/* Only the live 3D view gets the tall scroll track; the static figure keeps its natural height. */
.umi-explode.is-live {
  height: 267vh; /* 167vh of scroll drives the animation */
}

.umi-explode__fallback {
  margin-inline: auto;
}

.umi-explode__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(70% 60% at 50% 52%, #fff 0%, #fff 55%, var(--ux-wash) 100%);
}

.umi-explode__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  cursor: grab;
}

.umi-explode.is-dragging .umi-explode__canvas {
  cursor: grabbing;
}

.umi-explode__leaders,
.umi-explode__labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.umi-explode__leader {
  fill: none;
  stroke: var(--ux-line);
  stroke-width: 1;
}

.umi-explode__dot {
  fill: var(--ux-teal);
  stroke: #fff;
  stroke-width: 2;
}

.umi-explode__label {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--ux-ink);
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: var(--ux-label-size, 1.05rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: right;
  white-space: nowrap;
  will-change: transform;
}

.umi-explode__label.is-right { text-align: left; }
.umi-explode__label .short { display: none; }
.umi-explode.is-narrow .umi-explode__label .long { display: none; }
.umi-explode.is-narrow .umi-explode__label .short { display: inline; }

/* Small corner prompt; it fades once someone has tried dragging. */
.umi-explode__drag {
  position: absolute;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--ux-muted);
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: max(11px, calc(var(--ux-label-size, 16px) * .8));
  letter-spacing: .01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}

.umi-explode.is-ready .umi-explode__drag { opacity: .85; }
.umi-explode.has-dragged .umi-explode__drag { opacity: 0; }

.umi-explode__hint {
  position: absolute;
  left: 50%;
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--ux-muted);
  font-size: max(9px, calc(var(--ux-label-size, 16px) * .72));
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.umi-explode__bar {
  display: block;
  width: 120px;
  height: 2px;
  background: #dce6e4;
  overflow: hidden;
}

.umi-explode__bar i {
  display: block;
  height: 100%;
  background: var(--ux-teal);
  transform: scaleX(0);
  transform-origin: left;
}

.umi-explode__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--ux-muted);
  font-size: .9rem;
}