/* The finished photograph remains visible when JS or the optional image fails. */
.aoc-comparison-before { display: none; position: absolute; inset: 0; z-index: 1; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.aoc-comparison-ready .aoc-comparison-before { display: block; }
.aoc-comparison.aoc-project-image .aoc-comparison-before-image { width: 100%; height: 100%; inset: 0; object-fit: cover; transform: none; }
.aoc-project:hover .aoc-comparison-ready img { transform: none; }
.aoc-comparison.is-before .aoc-comparison-before { clip-path: inset(0 0 0 0); }
.aoc-comparison-toggle { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 16px; background: transparent; color: #fff; cursor: pointer; font: 500 12px/1.4 var(--aoc-sans, sans-serif); text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.aoc-comparison-toggle[hidden] { display: none; }
.aoc-comparison-toggle:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 8px #111; }
.aoc-comparison-badge { display: inline-flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid #ffffff70; background: #111e; border-radius: 2px; }
.aoc-comparison-arrow { font-size: 18px; line-height: 1; }
.aoc-comparison-label-before,.aoc-comparison.is-before .aoc-comparison-label-after { display: none; }
.aoc-comparison.is-before .aoc-comparison-label-before { display: inline; }
@media (max-width: 600px) {
  .aoc-comparison-toggle { padding: 8px; font-size: 10px; }
  .aoc-comparison-badge { gap: 6px; padding: 7px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .aoc-comparison-before { transition: none; }
}