/* =========================
   THEME VARIABLES
   ========================= */
.paws {
  /* Base paw “latex” color */
  --paw-color: #d11b2c;

  /* Shine color (usually white-ish) */
  --paw-shine: rgba(255, 255, 255, 0.75);

  /* Shadow color under the paw (subtle depth) */
  --paw-shadow: rgba(0, 0, 0, 0.25);

  /* Indentation offset for the alternating list items */
  --alt-indent-offset: 0.4em;

  /* Bullet size */
  --paw-size: 1.25em;

  /* Bullet-to-text spacing */
  --paw-gap: 0.75em;

  /* Hover “step” intensity */
  --paw-bounce-height: 0.12em;
}

/* =========================
   LIST BASE
   ========================= */
.alt-indent {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Top-level list items only */
.alt-indent > li {
  position: relative;
  padding-left: calc(var(--paw-size) + var(--paw-gap));
  margin: 0.4em 0;
}

/* Odd items lean left */
.alt-indent > li:nth-child(odd) {
  margin-left: calc(var(--alt-indent-offset) * -1);
}

/* Even items lean right */
.alt-indent > li:nth-child(even) {
  margin-left: var(--alt-indent-offset);
}

/* =========================
   PAW SHAPE (as a mask)
   We use CSS masking so you can theme color via --paw-color easily.
   ========================= */
.alt-indent > li::before,
.alt-indent > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: var(--paw-size);
  height: var(--paw-size);
  transform-origin: 50% 50%;
  pointer-events: none;

  /* Paw silhouette mask */
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
  <path d='M20 28c4 0 7-5 7-9s-3-7-7-7-7 3-7 7 3 9 7 9zm24 0c4 0 7-5 7-9s-3-7-7-7-7 3-7 7 3 9 7 9zM14 38c3 0 5-4 5-7s-2-5-5-5-5 2-5 5 2 7 5 7zm36 0c3 0 5-4 5-7s-2-5-5-5-5 2-5 5 2 7 5 7zm-18 4c-10 0-18 6-18 12s36 6 36 0-8-12-18-12z'/>\
</svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
  <path d='M20 28c4 0 7-5 7-9s-3-7-7-7-7 3-7 7 3 9 7 9zm24 0c4 0 7-5 7-9s-3-7-7-7-7 3-7 7 3 9 7 9zM14 38c3 0 5-4 5-7s-2-5-5-5-5 2-5 5 2 7 5 7zm36 0c3 0 5-4 5-7s-2-5-5-5-5 2-5 5 2 7 5 7zm-18 4c-10 0-18 6-18 12s36 6 36 0-8-12-18-12z'/>\
</svg>");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

/* Base paw: colored fill + subtle shadow (latex depth) */
.alt-indent > li::before {
  background: var(--paw-color);
  filter: drop-shadow(0 0.06em 0.06em var(--paw-shadow));
  transform: translateY(0) scaleX(1);
}

/* Shine layer: glossy highlight painted on top */
.alt-indent > li::after {
  /* A tight highlight gradient to simulate latex shine */
  background:
    radial-gradient(circle at 30% 25%, var(--paw-shine) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%);
  opacity: 0.85;

  /* Keep it aligned with the base paw */
  transform: translateY(0) scaleX(1);
}

/* =========================
   ALTERNATE ORIENTATION
   Flip even paws horizontally.
   ========================= */
.alt-indent > li:nth-child(even)::before,
.alt-indent > li:nth-child(even)::after {
  transform: translateY(0) scaleX(-1);
}

/* =========================
   HOVER “STEP BOUNCE”
   Subtle, professional, not a trampoline.
   ========================= */
@keyframes pawStepBounce {
  0%   { transform: translateY(0) scaleX(var(--paw-flip, 1)); }
  35%  { transform: translateY(calc(var(--paw-bounce-height) * -1)) scaleX(var(--paw-flip, 1)) rotate(-2deg); }
  70%  { transform: translateY(0) scaleX(var(--paw-flip, 1)) rotate(1deg); }
  100% { transform: translateY(0) scaleX(var(--paw-flip, 1)); }
}

/* Set a per-item flip factor so the animation preserves orientation */
.alt-indent > li:nth-child(odd) { --paw-flip: 1; }
.alt-indent > li:nth-child(even) { --paw-flip: -1; }

.alt-indent > li:hover::before,
.alt-indent > li:hover::after {
  animation: pawStepBounce 220ms ease-out;
}

/* Optional: make the shine pop slightly on hover */
.alt-indent > li:hover::after {
  opacity: 0.95;
}

/* =========================
   FUTURE: CUSTOM PAW SVG
   ========================= */
/*
  To replace the paw shape with a custom one:
  1) Swap the SVG path inside both mask-image URLs above
     (the <path d='...'>).
  2) Keep the viewBox consistent (e.g., 0 0 64 64) for easy sizing.
  3) If your custom paw includes separate elements for shine:
     - Option A: add a SECOND mask just for shine
     - Option B: bake shine into a second SVG and use that for ::after mask
*/