/* =========================================================================
   Before/after image compare — a draggable divider over two stacked images.

   Two orientations, named for the axis the HANDLE travels:

     .cmp--x   handle slides left <-> right, divider is a vertical line
     .cmp--y   handle slides up   <-> down,  divider is a horizontal line

   One custom property drives everything: --cmp-pos, a percentage. The clip,
   the divider and the handle all read it, so JS only ever writes that one
   value. Behaviour: assets/js/compare.js. Markup: the compare() helper in
   scripts/study.mjs.

   Registered rather than declared so it can be transitioned — an unregistered
   custom property is a raw token and animates as a step. Browsers without
   @property still work, they just jump instead of glide.
   ========================================================================= */
@property --cmp-pos {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

.cmp { margin: 0; }

.cmp__frame {
  position: relative; overflow: hidden;
  aspect-ratio: var(--cmp-ratio, 3 / 2);
  border-radius: var(--tile-radius);
  /* No resting shadow, matching every other media surface on the site. The
     two images carry their own ground; the widget does not need lifting off
     the page to be understood as a thing you can drag. */
  /* a drag should never turn into a text selection or a native image drag */
  user-select: none; -webkit-user-select: none;
  cursor: col-resize;
}
.cmp--y .cmp__frame { cursor: row-resize; }

.cmp__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; -webkit-user-drag: none;
}

/* The "before" layer sits on top and is clipped back to --cmp-pos; the
   "after" layer underneath is always whole. Clipping the top layer (rather
   than resizing either) means neither image ever moves or rescales, so the
   two stay in register under the divider. */
.cmp__clip {
  position: absolute; inset: 0;
  transition: --cmp-pos .18s ease;
}
.cmp--x .cmp__clip { clip-path: inset(0 calc(100% - var(--cmp-pos)) 0 0); }
.cmp--y .cmp__clip { clip-path: inset(0 0 calc(100% - var(--cmp-pos)) 0); }

/* ------------------------------- divider ------------------------------- */
.cmp__divider {
  position: absolute; background: #fff;
  /* audit-ok: a 1px ring plus a drop — the divider needs a hard edge against
     arbitrary photography, which no elevation role provides. */
  box-shadow: 0 0 0 1px rgb(0 0 0 / .18), 0 2px 8px rgb(0 0 0 / .3);
  pointer-events: none;
  transition: --cmp-pos .18s ease;
}
.cmp--x .cmp__divider { top: 0; bottom: 0; width: 2px; left: var(--cmp-pos); transform: translateX(-1px); }
.cmp--y .cmp__divider { left: 0; right: 0; height: 2px; top: var(--cmp-pos); transform: translateY(-1px); }

/* -------------------------------- handle -------------------------------
   A real focusable control, not decoration: role="slider" with arrow-key
   support, so the comparison is usable without a pointer. */
.cmp__handle {
  position: absolute; z-index: 2;
  width: 44px; height: 44px; border-radius: var(--radius-round);
  display: grid; place-items: center;
  background: #fff; color: #1a1a1a;
  box-shadow: var(--shadow-onmedia);
  cursor: inherit;
  /* the one place touch must not scroll the page — see compare.js, which
     only starts a touch drag from the handle for exactly this reason */
  touch-action: none;
  transition: --cmp-pos .18s ease, box-shadow .2s ease, transform .2s ease;
}
.cmp--x .cmp__handle { top: 50%; left: var(--cmp-pos); transform: translate(-50%, -50%); }
.cmp--y .cmp__handle { left: 50%; top: var(--cmp-pos); transform: translate(-50%, -50%); }
.cmp--y .cmp__handle svg { rotate: 90deg; }

.cmp__handle:hover { box-shadow: var(--shadow-onmedia-hi); }
.cmp__handle:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.cmp.is-dragging .cmp__handle { box-shadow: var(--shadow-onmedia-hi); }

/* While dragging, the divider must track the pointer exactly — an eased
   transition would make it lag behind the finger. */
.cmp.is-dragging .cmp__clip,
.cmp.is-dragging .cmp__divider,
.cmp.is-dragging .cmp__handle { transition: none; }

/* -------------------------------- labels ------------------------------- */
.cmp__tag {
  position: absolute; z-index: 1;
  font-size: var(--type-pill-size); font-weight: var(--type-pill-weight);
  letter-spacing: var(--type-pill-track); text-transform: uppercase;
  color: #fff; background: rgb(0 0 0 / .62);
  padding: var(--pad-pill); border-radius: var(--radius-pill);
  pointer-events: none; backdrop-filter: blur(4px);
}
.cmp--x .cmp__tag--before { top: 12px; left: 12px; }
.cmp--x .cmp__tag--after  { top: 12px; right: 12px; }
.cmp--y .cmp__tag--before { top: 12px; left: 12px; }
.cmp--y .cmp__tag--after  { bottom: 12px; left: 12px; }

.cmp__caption {
  margin-top: var(--space-xs);
  font-size: var(--type-caption-size); line-height: var(--type-caption-line);
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .cmp__clip, .cmp__divider, .cmp__handle { transition: none; }
}

/* Coarse pointers get a bigger target; fine pointers don't need one. */
@media (pointer: coarse) {
  .cmp__handle { width: 52px; height: 52px; }
}