/*
 * The before/after comparison slider (§8.10 #10), used by the homepage concept
 * section and the Delivered Projects gallery (template-parts/before-after-slider.php).
 * Moved out of home-proof-grid.css, which only loads on the front page, so the
 * one component can serve both pages.
 */
@layer components {
  .before-after-slider {
    --reveal: 50%;
    position: relative;
    /* 4:3, a room photo's natural frame. A fixed min-height on a full-width
       column made the homepage sliders a thin letterbox strip. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-alt);
    touch-action: pan-y;
  }

  .before-after-slider__layer {
    position: absolute;
    inset: 0;
  }

  .before-after-slider__layer--after {
    background: var(--bg-tint);
  }

  /* THE REVEAL IS TWO EQUAL AND OPPOSITE TRANSLATES, not a clip-path. The
     layer slides off the start edge by the hidden share and clips its own
     overflow; the photo inside slides back by the same amount, so the photo
     never moves and only the edge of the clip does. --reveal changes on every
     scroll frame while the hint is running (before-after.js) and on every
     pointer move while it is dragged: a clip-path there is a repaint of the
     photo each time, and the divider's old `inset` was a layout each time.
     Transforms are neither (§8.17). The process ruler's ticks use the same
     device. Percentages resolve against each box's own width, and both boxes
     are the slider's width. */
  .before-after-slider__layer--before {
    overflow: hidden;
    transform: translateX(calc(var(--reveal) - 100%));
    background: var(--bg-alt);
  }

  .before-after-slider__layer--before > .before-after-slider__img {
    transform: translateX(calc(100% - var(--reveal)));
  }

  .before-after-slider__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .before-after-slider__label {
    position: absolute;
    inset-block-start: var(--s-4);
    padding: var(--s-2) var(--s-3);
    border: var(--s-1) solid var(--line);
    /* A one-word label laid on the photo: a pill (§8.5, --r-token). */
    border-radius: var(--r-token);
    background: var(--surface);
    color: var(--ink-700);
    pointer-events: none;
  }

  .before-after-slider__label--before {
    inset-inline-start: var(--s-4);
  }

  .before-after-slider__label--after {
    inset-inline-end: var(--s-4);
  }

  /* A full-width box whose end border is the line, moved by a transform for
     the same reason as the layer above. The half line width centres the line
     on --reveal, where the old 2px box centred itself with translateX(-50%). */
  .before-after-slider__divider {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    border-inline-end: var(--s-1) solid var(--ink-900);
    transform: translateX(calc(var(--reveal) - 100% + var(--s-1) / 2));
    pointer-events: none;
  }

  /* While the scroll hint is running the three moving boxes get a layer each,
     so the drift is a compositor move with no repaint. Only then, and only on
     a slider that is on screen: before-after.js sets and clears the class. */
  .before-after-slider.is-hinting .before-after-slider__layer--before,
  .before-after-slider.is-hinting .before-after-slider__layer--before > .before-after-slider__img,
  .before-after-slider.is-hinting .before-after-slider__divider {
    will-change: transform;
  }

  .before-after-slider__handle {
    position: absolute;
    inset-block-start: 50%;
    /* The centre of the line: the end of the divider's padding box, plus half
       the border that draws it. */
    inset-inline-start: calc(100% + var(--s-1) / 2);
    display: block;
    inline-size: var(--field-h);
    block-size: var(--field-h);
    border: var(--s-1) solid var(--ink-900);
    border-radius: var(--r-full);
    background: var(--surface);
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-sm);
  }

  .before-after-slider__handle::before,
  .before-after-slider__handle::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inline-size: var(--s-3);
    block-size: var(--s-3);
    border-block-start: var(--s-1) solid var(--ink-900);
    border-inline-start: var(--s-1) solid var(--ink-900);
  }

  .before-after-slider__handle::before {
    inset-inline-start: var(--s-3);
    transform: translateY(-50%) rotate(-45deg);
  }

  .before-after-slider__handle::after {
    inset-inline-end: var(--s-3);
    transform: translateY(-50%) rotate(135deg);
  }

  .before-after-slider__range {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
  }

  .before-after-slider:focus-within .before-after-slider__handle {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .before-after-slider__label {
    margin: 0;
    font-size: var(--fs-micro);
    font-weight: var(--fw-ui);
    letter-spacing: var(--tracking-micro);
    line-height: var(--lh-small);
    text-transform: uppercase;
  }
}