.selection {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}

.selection--armed {
  opacity: 1;
}

.selection__box {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 1px solid rgba(139, 92, 246, .55);
  transition:
    left 460ms var(--ease-snap),
    top 460ms var(--ease-snap),
    width 460ms var(--ease-snap),
    height 460ms var(--ease-snap);
}

.selection__dims {
  position: absolute;
  right: -1px;
  top: 100%;
  margin-top: 9px;
  font: 400 var(--size-micro)/1 var(--font-mono);
  letter-spacing: .16em;
  white-space: nowrap;
  color: var(--lilac);
}

.selection__handle {
  position: absolute;
  width: var(--handle);
  height: var(--handle);
  background: var(--violet);
  box-shadow: 0 0 0 1px rgba(6, 8, 15, .9);
  animation: handle-pop 240ms var(--ease-snap) both;
  animation-delay: var(--handle-delay, 0ms);
}

.selection__handle--nw { left: calc(var(--handle) / -2); top: calc(var(--handle) / -2); }
.selection__handle--n  { left: calc(50% - var(--handle) / 2); top: calc(var(--handle) / -2); }
.selection__handle--ne { right: calc(var(--handle) / -2); top: calc(var(--handle) / -2); }
.selection__handle--e  { right: calc(var(--handle) / -2); top: calc(50% - var(--handle) / 2); }
.selection__handle--se { right: calc(var(--handle) / -2); bottom: calc(var(--handle) / -2); }
.selection__handle--s  { left: calc(50% - var(--handle) / 2); bottom: calc(var(--handle) / -2); }
.selection__handle--sw { left: calc(var(--handle) / -2); bottom: calc(var(--handle) / -2); }
.selection__handle--w  { left: calc(var(--handle) / -2); top: calc(50% - var(--handle) / 2); }

.selection__guide {
  position: absolute;
  background-image: repeating-linear-gradient(var(--guide-angle, 90deg),
    rgba(167, 139, 250, .5) 0 4px, transparent 4px 9px);
}

.selection__guide--h {
  left: 0;
  width: 100%;
  height: 1px;
}

.selection__guide--v {
  top: 0;
  width: 1px;
  height: 100%;
  --guide-angle: 180deg;
}

.selection__guides {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.selection__guides--flash {
  animation: guide-flash 900ms ease-out both;
}

/* A source under the pointer previews its own outline, the way a scene item does. */
.source {
  position: relative;
  outline: 1px solid transparent;
  outline-offset: 6px;
  transition: outline-color 200ms ease;
}

.source:hover {
  outline-color: rgba(139, 92, 246, .22);
}

/* ---- boot sequence ---- */

.boot {
  animation: boot-in 640ms var(--ease-snap) both;
  animation-delay: var(--boot-delay, 0ms);
}

.boot--down {
  animation-name: boot-in-down;
}

.boot--line {
  animation: none;
}

.boot--line span {
  animation: line-rise 780ms var(--ease-snap) both;
  animation-delay: var(--boot-delay, 0ms);
}

@keyframes boot-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes boot-in-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes line-rise {
  from { transform: translateY(102%); }
  to { transform: none; }
}

@keyframes handle-pop {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: none; }
}

@keyframes guide-flash {
  0% { opacity: 0; }
  22% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .boot,
  .boot--down,
  .boot--line span,
  .selection__handle,
  .selection__guides--flash,
  .pill__dot,
  .log__caret,
  .log__time--in {
    animation: none;
  }

  .selection__box {
    transition: none;
  }

  .selection__guides {
    display: none;
  }
}

.meter__seg--lit {
  animation: seg-in 340ms var(--ease-snap) both;
  animation-delay: var(--seg-delay, 0ms);
}

@keyframes seg-in {
  from { opacity: 0; transform: scaleY(.15); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .meter__seg--lit {
    animation: none;
  }
}