/* ============================================================
   Wipe Service List — a clipped duplicate sweeps across the
   dim title. Every measured number is a custom property.
   ============================================================ */

.wpl {
  --wpl-bg: rgb(16, 16, 16);   /* measured */
  --wpl-fg: rgb(255, 255, 255);/* measured */
  --wpl-dim: .28;              /* measured */
  --wpl-numop: .35;            /* measured */
  --wpl-row: 92px;             /* measured */
  --wpl-size: 38px;            /* measured */
  --wpl-track: -.95px;         /* measured */
  --wpl-num: 13px;             /* measured */
  --wpl-numtrack: .65px;       /* measured */
  --wpl-dur: 720ms;            /* measured */
  --wpl-ease: cubic-bezier(.16, 1, .3, 1);  /* measured */

  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  background: var(--wpl-bg);
  color: var(--wpl-fg);
}

.wpl__list { list-style: none; margin: 0; padding: 0 6vw; }

.wpl__row {
  height: var(--wpl-row);      /* measured — and it never changes */
  display: flex;
  align-items: center;
  gap: 34px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.wpl__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.wpl__n {
  font-size: var(--wpl-num);
  letter-spacing: var(--wpl-numtrack);
  opacity: var(--wpl-numop);
  flex: none;
}

.wpl__title {
  position: relative;
  display: block;
  font-size: var(--wpl-size);
  font-weight: 400;            /* measured */
  line-height: 1.05;
  letter-spacing: var(--wpl-track);
  text-transform: uppercase;   /* measured */
  white-space: nowrap;
}

.wpl__base { opacity: var(--wpl-dim); }

/* The clip. width 0 -> 100% with overflow hidden is what puts a vertical edge
   inside a word; the text within must NOT be scaled, so it is given the row's
   full width and simply revealed. */
.wpl__wipe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  overflow: hidden;
  transition: width var(--wpl-dur) var(--wpl-ease);
  will-change: width;
}

.wpl__lit {
  display: block;
  width: max-content;
  opacity: 1;
}

.wpl__row:hover .wpl__wipe,
.wpl__row:focus-within .wpl__wipe { width: 100%; }

@media (max-width: 820px) {
  .wpl { --wpl-size: 22px; --wpl-row: 66px; }
  .wpl__row { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .wpl__wipe { transition: none; }
}