/* Custom bits Tailwind classes don't cover: the before/after compare slider
   and the indeterminate progress animation. Everything else is Tailwind. */

[hidden] { display: none !important; }

/* before/after comparison */
.compare {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  user-select: none;
  max-height: 32.5rem;
}
.compare img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 32.5rem;
  object-fit: contain;
  background: #000;
}
.cmp-before-wrap { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.cmp-before-wrap img { width: auto; height: 100%; max-width: none; image-rendering: pixelated; }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: var(--color-sky-500);
  cursor: ew-resize; display: flex; align-items: center; justify-content: center;
}
.cmp-grip {
  background: var(--color-sky-500); color: #fff; border-radius: 50%;
  width: 2.125rem; height: 2.125rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.9375rem;
}
.cmp-label {
  position: absolute; top: 0.625rem;
  background: rgb(0 0 0 / 0.55); color: #fff;
  font-size: 0.75rem; padding: 0.1875rem 0.5625rem; border-radius: 0.75rem;
}

/* indeterminate progress bar */
#bar.indet { width: 30% !important; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }