/* Ink shadow lift: a card that, on hover, rises a few px while a hard, unblurred ink shadow grows out from under it
   (0 0 0 0 -> 3px 3px 0 2px #000). heyjay.studio's card hover, three presets measured from its stylesheet:
     data-isl="step" (default)  process cards: lift 5px, 3px 3px 0 2px, .275s ease
     data-isl="team"            team cards: no lift, 3px 3px 0 2px, .2s
     data-isl="faq"             FAQ cards: no lift, 3px 3px 0 4px, white fill, .3s
   Keyboard: :focus-visible on the card (or anything inside it) gets the same state. .is-lifted holds it (demos, a
   selected card). Hover is gated to real pointers so a tap on a phone doesn't leave a card stuck up. */
.isl {
  --isl-x: 3px;                 /* shadow offset right */
  --isl-y: 3px;                 /* shadow offset down */
  --isl-spread: 2px;            /* shadow spread: the slab is 2px bigger than the card all round */
  --isl-color: #000;            /* the ink */
  --isl-lift: -5px;             /* rise on hover (0 = shadow only) */
  --isl-dur: .275s;
  --isl-ease: ease;
  /* hover fill + border only apply with data-isl="faq" or the data-isl-fill attribute */
  --isl-fill-hover: #fff;
  --isl-border-hover: currentColor;

  box-shadow: 0 0 0 0 var(--isl-color);
  transition:
    transform var(--isl-dur) var(--isl-ease),
    box-shadow var(--isl-dur) var(--isl-ease),
    background-color var(--isl-dur) var(--isl-ease),
    border-color var(--isl-dur) var(--isl-ease);
}
.isl[data-isl="team"] { --isl-lift: 0px; --isl-dur: .2s; }
.isl[data-isl="faq"]  { --isl-lift: 0px; --isl-dur: .3s; --isl-spread: 4px; --isl-border-hover: #26534c; }

/* the lifted state */
.isl.is-lifted, .isl:focus-visible, .isl:has(:focus-visible) {
  transform: translate(0, var(--isl-lift));
  box-shadow: var(--isl-x) var(--isl-y) 0 var(--isl-spread) var(--isl-color);
}
@media (hover: hover) {
  .isl:hover {
    transform: translate(0, var(--isl-lift));
    box-shadow: var(--isl-x) var(--isl-y) 0 var(--isl-spread) var(--isl-color);
  }
  .isl:is([data-isl="faq"], [data-isl-fill]):hover { background-color: var(--isl-fill-hover); border-color: var(--isl-border-hover); }
}
.isl:is([data-isl="faq"], [data-isl-fill]):is(.is-lifted, :focus-visible, :has(:focus-visible)) {
  background-color: var(--isl-fill-hover); border-color: var(--isl-border-hover);
}
.isl:focus-visible { outline: none; } /* the slab is the focus ring */

/* reduced motion: the shadow still appears (it is the state), but at once and without the rise */
@media (prefers-reduced-motion: reduce) {
  .isl { --isl-lift: 0px; transition-duration: .01s; }
}