/* arrow-swap-row: a list row that is one big link. Hover darkens the row and, in the small tile at its corner,
   the arrow flies out up-right while a second arrow flies in from down-left to take its place.
   Measured from Sadewa's job rows (about/careers, .job / .jico): row background #f3f3f3 -> #d3d3d3 over .3s,
   arrows travel 28px on the diagonal over .4s, both on Framer's "fast" spring (no bounce, baked as linear()).
   CSS only. Markup:
     <a class="asr" href="...">
       <div class="asr__body"> ...title, meta... </div>
       <span class="asr__tile" aria-hidden="true"></span>      (both arrows are its ::before / ::after)
     </a>
   Variants (same markup): .asr--hop (Rayleighs arrow-hop-button numbers), .asr--sweep (Rayleighs sweep-push-button).
   Plays on real hover (hover-capable pointers only, so a tap never sticks), on :focus-visible, and on .is-hover. */
.asr {
  --asr-bg: #f3f3f3;             /* row at rest (Sadewa --paper) */
  --asr-bg-on: #d3d3d3;          /* row hovered (Sadewa --line-2) */
  --asr-fg: #131313;             /* text */
  --asr-fg-on: var(--asr-fg);    /* text hovered (the sweep variant turns it white) */
  --asr-tile: #e5e5e5;           /* arrow tile (Sadewa --line) */
  --asr-arrow-color: #131313;
  --asr-tile-size: 36px;
  --asr-tile-radius: 2px;
  --asr-arrow: 20px;             /* arrow size; sits at (tile - arrow) / 2 = 8px in */
  --asr-pad: 24px;
  --asr-gap: 32px;
  --asr-bg-dur: .3s;
  --asr-arrow-dur: .4s;          /* travel + fade */
  --asr-scale-dur: var(--asr-arrow-dur);
  --asr-ease: linear(0, .024 2.56%, .0823 5.13%, .1594 7.69%, .2448 10.26%, .3315 12.82%, .4152 15.38%, .4934 17.95%,
    .5646 20.51%, .6282 23.08%, .6844 25.64%, .7334 28.21%, .7758 30.77%, .8122 33.33%, .8432 35.9%, .8694 38.46%,
    .8916 41.03%, .9102 43.59%, .9258 46.15%, .9388 48.72%, .9496 51.28%, .9586 53.85%, .966 56.41%, .9722 58.97%,
    .9772 61.54%, .9814 64.1%, .9848 66.67%, .9876 69.23%, .9899 71.79%, .9918 74.36%, .9933 76.92%, .9946 79.49%,
    .9956 82.05%, .9964 84.62%, .9971 87.18%, .9977 89.74%, .9981 92.31%, .9985 94.87%, .9988 97.44%, 1);
  --asr-scale-ease: var(--asr-ease);
  --asr-out-x: 28px;             /* where the old arrow goes (up-right) */
  --asr-out-y: -28px;
  --asr-in-x: -28px;             /* where the new arrow comes from (down-left) */
  --asr-in-y: 28px;
  --asr-out-scale: 1;            /* 0 = the old arrow shrinks away as it goes (hop) */
  --asr-in-scale: 1;             /* 0 = the new arrow grows in (hop) */
  --asr-cut: 24px;               /* clipped bottom-right corner (Sadewa .cut.sm); 0px = square row */
  --asr-cut-color: #fff;         /* the page colour behind the row */
  --asr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 17.5 17 7M8.5 6.5H17.5V15.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  position: relative;
  isolation: isolate;
  display: flex;
  gap: var(--asr-gap);
  padding: var(--asr-pad);
  background: var(--asr-bg);
  color: var(--asr-fg);
  text-decoration: none;
  transition: background-color var(--asr-bg-dur) var(--asr-ease), color var(--asr-bg-dur) var(--asr-ease);
}
@supports not (transition-timing-function: linear(0, 1)) { .asr { --asr-ease: cubic-bezier(.22, 1, .36, 1); } }
.asr__body { flex: 1; min-width: 0; }
.asr::after {                    /* the clipped corner */
  content: "";
  position: absolute;
  right: -1px;                   /* 1px past the edge so no hairline of row shows beside the cut at fractional widths */
  bottom: -1px;
  width: calc(var(--asr-cut) + 1px);
  height: calc(var(--asr-cut) + 1px);
  background: var(--asr-cut-color);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 2;
}
.asr__tile {
  position: relative;
  flex: none;
  width: var(--asr-tile-size);
  height: var(--asr-tile-size);
  border-radius: var(--asr-tile-radius);
  background: var(--asr-tile);
  overflow: hidden;
}
.asr__tile::before,
.asr__tile::after {
  content: "";
  position: absolute;
  left: calc((var(--asr-tile-size) - var(--asr-arrow)) / 2);
  top: calc((var(--asr-tile-size) - var(--asr-arrow)) / 2);
  width: var(--asr-arrow);
  height: var(--asr-arrow);
  background: var(--asr-arrow-color);
  -webkit-mask: var(--asr-icon) center / contain no-repeat;
  mask: var(--asr-icon) center / contain no-repeat;
  transition: translate var(--asr-arrow-dur) var(--asr-ease), opacity var(--asr-arrow-dur) var(--asr-ease),
    scale var(--asr-scale-dur) var(--asr-scale-ease);
}
.asr__tile::after { translate: var(--asr-in-x) var(--asr-in-y); scale: var(--asr-in-scale); opacity: 0; }

/* hovered */
.asr:focus-visible,
.asr.is-hover { background: var(--asr-bg-on); color: var(--asr-fg-on); }
.asr:focus-visible .asr__tile::before,
.asr.is-hover .asr__tile::before { translate: var(--asr-out-x) var(--asr-out-y); scale: var(--asr-out-scale); opacity: 0; }
.asr:focus-visible .asr__tile::after,
.asr.is-hover .asr__tile::after { translate: 0 0; scale: 1; opacity: 1; }
@media (hover: hover) {
  .asr:hover { background: var(--asr-bg-on); color: var(--asr-fg-on); }
  .asr:hover .asr__tile::before { translate: var(--asr-out-x) var(--asr-out-y); scale: var(--asr-out-scale); opacity: 0; }
  .asr:hover .asr__tile::after { translate: 0 0; scale: 1; opacity: 1; }
}
.asr:focus-visible { outline: 2px solid var(--asr-fg); outline-offset: 3px; }

/* .asr--hop: Rayleighs arrow-hop-button (IX2 a-13/a-14, numbers only): the old arrow shoots 65px right over 500ms
   while shrinking away in 200ms; the new one grows in place over 500ms. */
.asr--hop {
  --asr-out-x: 65px; --asr-out-y: 0px; --asr-in-x: 0px; --asr-in-y: 0px;
  --asr-out-scale: 0; --asr-in-scale: 0;
  --asr-arrow-dur: .5s; --asr-ease: cubic-bezier(.5, 1, .89, 1);           /* outQuad */
  --asr-scale-dur: .2s;
}
.asr--hop:is(:hover, :focus-visible, .is-hover) .asr__tile::after { --asr-scale-dur: .5s; --asr-scale-ease: ease; }

/* .asr--sweep: Rayleighs sweep-push-button (IX2 a-44/a-41, numbers only): a dark fill sweeps across from the left
   in 300ms while the arrows push straight right in 400ms and the text turns white. */
.asr--sweep {
  --asr-bg-on: var(--asr-bg);
  --asr-fill: #131313;
  --asr-fg-on: #fff;
  --asr-out-x: 28px; --asr-out-y: 0px; --asr-in-x: -28px; --asr-in-y: 0px;
  --asr-ease: cubic-bezier(.5, 1, .89, 1);
  transition: color .4s cubic-bezier(.5, 1, .89, 1);
}
.asr--sweep:is(:hover, :focus-visible, .is-hover) { transition-duration: .5s; transition-timing-function: ease; }
.asr--sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--asr-fill);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.5, 1, .89, 1);
}
.asr--sweep:focus-visible::before,
.asr--sweep.is-hover::before { transform: scaleX(1); }
@media (hover: hover) { .asr--sweep:hover::before { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .asr, .asr::before, .asr__tile::before, .asr__tile::after { transition-duration: 1ms !important; }
}