/* 20 Anatomy (#anatomie): the platform render with five hotspots. The default state needs no
   script: markers are plain numbers on the picture, the cards a numbered list under it. From
   900 px the script adds .is-interactive: 44 px marker buttons, each card a popover beside its
   marker, at most one open. Motion sits behind .ar-motion. */

.ar-anatomy {
  --ar-marker: 1.75rem;
  /* A third of the picture less the room between markers: a card beside 3 stops short of 4. */
  --ar-card-w: clamp(14rem, calc(34% - 4.5rem), 20.5rem);
  --ar-card-gap: 20px; /* marker edge to card edge; the script reads it */
  --ar-anatomy-ink: var(--wp--preset--color--ink);
  --ar-anatomy-signal: var(--wp--preset--color--chartreuse);
}

.ar-anatomy.is-interactive {
  --ar-marker: 44px;
}

/* 1. Heading and hint */

.ar-anatomy .ar-h2 {
  margin-block-end: 0;
}

.ar-anatomy__hint {
  display: none; /* only meaningful while the markers are buttons */
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  margin-block-start: 1.25rem;
}

.ar-anatomy.is-interactive .ar-anatomy__hint {
  display: flex;
}

.ar-anatomy__hint::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--ar-anatomy-signal);
  border-radius: 50%;
}

/* 2. Stage: the picture, with the cards under it (fallback) or over it (interactive) */

.ar-anatomy__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--60); /* room for the caption hanging under the picture */
  margin-block-start: var(--wp--preset--spacing--50);
}

/* The ratio holds the room while the photo loads, the carbon stands in if it never does. */
.ar-anatomy__figure {
  aspect-ratio: 1648 / 954;
  background-color: var(--wp--preset--color--carbon);
}

.ar-anatomy__figure > img {
  width: 100%;
}

/* Vignette: ink towards the edges and the foot, so the picture sits in the dark page. */
.ar-anatomy__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--ar-anatomy-ink) 45%, transparent) 0, transparent 22%),
    radial-gradient(130% 115% at 50% 46%, transparent 54%, color-mix(in srgb, var(--ar-anatomy-ink) 62%, transparent) 100%);
}

/* The corner brackets frame the picture from outside, where they read on the dark page. */
.ar-anatomy__figure::before {
  inset: -0.5rem;
  z-index: 3;
}

.ar-anatomy__figure figcaption {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
}

/* 3. Markers: a ring and a number; in the fallback they are labels, not controls.
   Above the cards (z-index 3): a marker a card reaches stays visible and clickable. */

/* The number in a ring, shared by the markers and the list numbers. */
.ar-anatomy__marker,
.ar-anatomy__cards li::before {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ar-fg);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 700;
  line-height: 1;
}

.ar-anatomy__marker {
  position: absolute;
  z-index: 4;
  left: calc(var(--x) - var(--ar-marker) / 2);
  top: calc(var(--y) - var(--ar-marker) / 2);
  width: var(--ar-marker);
  height: var(--ar-marker);
  border: 2px solid var(--ar-anatomy-signal);
  background-color: color-mix(in srgb, var(--ar-anatomy-ink) 76%, transparent);
  pointer-events: none;
  cursor: default;
  transition:
    background-color var(--ar-hover),
    color var(--ar-hover);
}

.ar-anatomy.is-interactive .ar-anatomy__marker {
  font-size: var(--wp--preset--font-size--medium);
  pointer-events: auto;
  cursor: pointer;
}

@media (hover: hover) {
  .ar-anatomy.is-interactive .ar-anatomy__marker:hover:not([aria-expanded="true"]) {
    background-color: color-mix(in srgb, var(--ar-anatomy-signal) 30%, color-mix(in srgb, var(--ar-anatomy-ink) 76%, transparent));
  }
}

/* The open marker is the active one: filled, with a halo. */
.ar-anatomy__marker[aria-expanded="true"] {
  background-color: var(--ar-anatomy-signal);
  color: var(--ar-anatomy-ink);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ar-anatomy-signal) 28%, transparent);
}

/* An ink gap between marker and the blue focus ring keeps it visible on pale gravel and sky. */
.ar-anatomy__marker:focus-visible {
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--ar-anatomy-ink);
}

/* 4. Cards, fallback: a numbered list under the picture (two columns from 640 px) */

.ar-anatomy__cards {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ar-anatomy;
}

.ar-anatomy__cards li {
  counter-increment: ar-anatomy;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-content: start;
  gap: 0.5rem 1rem;
  padding-block: 1.25rem 1.5rem;
  border-block-start: 1px solid var(--ar-line);
}

.ar-anatomy__cards li::before {
  content: counter(ar-anatomy);
  content: counter(ar-anatomy) / ""; /* the list already counts for assistive technology */
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--ar-line-strong);
}

.ar-anatomy__cards :is(h3, p) {
  grid-column: 2;
}

.ar-anatomy__cards h3 {
  font-size: var(--wp--preset--font-size--x-large);
}

.ar-anatomy__cards p {
  color: var(--ar-fg-muted);
  font-size: var(--wp--preset--font-size--medium);
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .ar-anatomy__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--wp--preset--spacing--50);
  }
}

/* 5. Cards, interactive: popovers over the picture. The list shares the picture's grid cell,
   so a card's --x / --y mean what its marker's do; the script sets left / top (px),
   data-side and --ar-lead-y once it knows the card's size. */

.ar-anatomy.is-interactive .ar-anatomy__stage > * {
  grid-area: 1 / 1;
}

.ar-anatomy.is-interactive .ar-anatomy__cards {
  position: relative;
  z-index: 3;
  display: block;
  pointer-events: none;
}

.ar-anatomy.is-interactive .ar-anatomy__cards li {
  --ar-enter: -0.5rem;
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  width: var(--ar-card-w);
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--ar-line-strong);
  border-block-start-color: color-mix(in srgb, var(--ar-fg) 55%, transparent);
  border-radius: var(--wp--custom--corner--md);
  background-color: color-mix(in srgb, var(--wp--preset--color--carbon) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1.5rem 3rem -0.75rem color-mix(in srgb, var(--ar-anatomy-ink) 80%, transparent);
  scroll-margin-block: 1.5rem; /* opening a card the viewport cuts scrolls it into view */
  pointer-events: auto;
}

.ar-anatomy.is-interactive .ar-anatomy__cards li[data-side="left"] {
  --ar-enter: 0.5rem;
}

.ar-anatomy.is-interactive .ar-anatomy__cards h3 {
  font-size: var(--wp--preset--font-size--large);
}

.ar-anatomy.is-interactive .ar-anatomy__cards p {
  margin-block-start: 0.5rem;
  color: var(--ar-fg-soft);
  font-size: var(--wp--preset--font-size--small);
}

/* Leader line from the card to its marker (replaces the list number). */
.ar-anatomy.is-interactive .ar-anatomy__cards li::before {
  content: "";
  position: absolute;
  top: var(--ar-lead-y, 50%);
  right: calc(100% + 1px);
  width: var(--ar-card-gap);
  height: 1px;
  border: 0;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--ar-anatomy-signal) 80%, transparent);
}

.ar-anatomy.is-interactive .ar-anatomy__cards li[data-side="left"]::before {
  right: auto;
  left: calc(100% + 1px);
}

/* 6. Motion (only behind the gate) */

/* The markers pop in one after another once the picture has arrived. */
.ar-anatomy__marker:nth-of-type(2) { --ar-i: 1; }
.ar-anatomy__marker:nth-of-type(3) { --ar-i: 2; }
.ar-anatomy__marker:nth-of-type(4) { --ar-i: 3; }
.ar-anatomy__marker:nth-of-type(5) { --ar-i: 4; }

.ar-motion .ar-anatomy__marker {
  --ar-delay-in: calc(450ms + var(--ar-i, 0) * 90ms);
  transition:
    opacity var(--ar-dur-reveal) var(--ar-ease-expo) var(--ar-delay-in),
    scale var(--ar-dur-reveal) var(--ar-ease-expo) var(--ar-delay-in),
    background-color var(--ar-hover),
    box-shadow var(--ar-hover),
    color var(--ar-hover);
}

.ar-motion .ar-anatomy__figure:not(.is-revealed) .ar-anatomy__marker {
  opacity: 0;
  scale: 0.4;
}

/* A live indicator, allowed one infinite loop like the live dot: a thin ring pings out of
   each marker, slowly, only while the markers are buttons and no card is open. */
.ar-motion .ar-anatomy.is-interactive:not(.has-open) .ar-anatomy__marker::before {
  --ar-pulse-scale: 1.75;
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid var(--ar-anatomy-signal);
  border-radius: 50%;
  pointer-events: none;
  animation: ar-pulse 3.2s var(--ar-ease-expo) calc(var(--ar-i, 0) * -0.65s) infinite;
}

/* A card grows out of its marker's side (it runs each time the card is shown). */
.ar-motion .ar-anatomy.is-interactive .ar-anatomy__cards li {
  animation: ar-anatomy-card var(--wp--custom--duration--slow) var(--ar-ease-expo) both;
}

@keyframes ar-anatomy-card {
  from {
    opacity: 0;
    translate: var(--ar-enter) 0;
  }
}