/* ==========================================================================
   Annotated figures
   --------------------------------------------------------------------------
   Everything inside `.anno` is positioned in pixels by the layout pass in
   annotate.js, against the rendered picture rather than the container. The
   stylesheet's job is only appearance and timing.
   ========================================================================== */

.anno {
  position: relative;
  display: block;
  overflow: hidden;
}

.anno__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.anno[data-fit='cover'] .anno__img { object-fit: cover; }

/* --------------------------------------------------------------------------
   Leader lines
   --------------------------------------------------------------------------
   `pathLength="1"` normalises every path, so one dash animation works whatever
   the actual geometry turns out to be after layout.
   -------------------------------------------------------------------------- */
.anno__lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

.anno__line {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.anno__line--accent { stroke: var(--accent-bright); }
.anno__line--ok     { stroke: var(--status-ok); }

/* Draw toward the anatomy, then settle back so the connection stays readable
   without competing with the finding it points at. */
.anno.is-drawn .anno__line {
  animation:
    anno-draw 620ms var(--ease) var(--anno-delay, 0ms) forwards,
    anno-settle 520ms var(--ease) calc(var(--anno-delay, 0ms) + 620ms) forwards;
}
@keyframes anno-draw {
  from { stroke-dashoffset: 1; opacity: 0; }
  20%  { opacity: .95; }
  to   { stroke-dashoffset: 0; opacity: .95; }
}
@keyframes anno-settle {
  from { opacity: .95; }
  to   { opacity: .34; }
}

/* --------------------------------------------------------------------------
   Targets
   -------------------------------------------------------------------------- */
.anno__pin {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(.4);
  animation: anno-pop 420ms var(--ease) var(--anno-delay, 0ms) forwards;
  pointer-events: none;
}
.anno__pin--pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: anno-ping 2.4s var(--ease) infinite;
}

.anno__box {
  position: absolute;
  border: 1.5px solid var(--accent-bright);
  border-radius: 3px;
  opacity: 0;
  animation: anno-pop 420ms var(--ease) var(--anno-delay, 0ms) forwards;
  pointer-events: none;
}

@keyframes anno-pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes anno-ping {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------------- */
.anno__label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: .71875rem;
  line-height: 1.2;
  padding: 7px 11px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--lift-card);
  opacity: 0;
  transform: translateY(4px);
  animation: anno-label 420ms var(--ease) var(--anno-delay, 0ms) forwards;
  pointer-events: none;
}
.anno__label b { font-weight: 600; }

.anno__label--dark {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.anno__label--accent {
  background: var(--accent-bright);
  color: #fff;
  border-color: var(--accent-bright);
  font-family: var(--font-label);
  font-size: .65625rem;
  font-weight: 600;
}
.anno__label--ok { border-color: var(--status-ok); color: var(--status-ok); }

@keyframes anno-label {
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Corner stamp, pinned to the picture rather than the box
   -------------------------------------------------------------------------- */
.anno__tag {
  position: absolute;
  font-family: var(--font-label);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  background: rgba(15, 23, 42, .55);
  padding: 4px 8px;
  pointer-events: none;
}
.anno--capture .anno__tag,
.anno--hero .anno__tag {
  color: var(--ink-muted);
  background: rgba(255, 255, 255, .82);
}
.anno--hero.anno--dark .anno__tag {
  color: rgba(255, 255, 255, .78);
  background: rgba(15, 23, 42, .55);
}

/* --------------------------------------------------------------------------
   Per-context sizing
   -------------------------------------------------------------------------- */

/* inside the framed hero on a product page */
.anno--hero { width: 100%; aspect-ratio: 4 / 3; }

/*
 * A study that meets the page with no frame around it.
 *
 * The fade goes on the picture and on the sweep passing over it, not on the
 * figure itself — masking the figure would take the caption and any callouts
 * down with it. Two gradients intersected rather than four edges handled
 * separately, so the corners fall away too.
 */
.anno--bleed .anno__img,
.anno--bleed .scan-pass {
  -webkit-mask-image:
    linear-gradient(90deg,  transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image:
    linear-gradient(90deg,  transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.anno--hero.anno--dark { background: #000; }
@media (max-width: 700px) { .anno--hero { aspect-ratio: 3 / 2; } }

/* The home page split bands.
   Below the two-column breakpoint the figure gets the full width, so it can
   afford — and needs — more height: a portrait spine film at 300px tall is only
   134px wide, which is not a radiograph anybody can read. */
.anno--split {
  width: 100%;
  height: clamp(320px, 40vw, 540px);
}
@media (max-width: 1000px) {
  .anno--split { height: clamp(380px, 72vw, 520px); }
}
.figure--masked.anno--split {
  -webkit-mask-image: radial-gradient(ellipse 84% 84% at 50% 50%, #000 54%, transparent 98%);
          mask-image: radial-gradient(ellipse 84% 84% at 50% 50%, #000 54%, transparent 98%);
}

/* Panel stages.
   `height: 100%` only means something when the parent has a height of its own —
   in an auto-height flex row it resolves to auto, the picture falls back to its
   intrinsic ratio at full width, and a portrait film ends up 2,200px tall. The
   stages below set a real height for exactly that reason. */
.anno--film    { width: 100%; height: 100%; }
.anno--capture { width: 100%; height: 100%; }
.anno--survey  { width: 100%; height: 100%; }

/* the cropped aperture is positioned by the layout pass */
.anno[data-crop] .anno__img { position: absolute; object-fit: cover; }

/* the numbered survey pins ride on top of the drawn layer */
.anno .pin { z-index: 3; }

/* --------------------------------------------------------------------------
   The hero scan
   -------------------------------------------------------------------------- */
.anno--hero-scan { aspect-ratio: 1104 / 832; }
.anno--hero-scan .anno__img { mix-blend-mode: multiply; }

/* --------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------
   Callouts are the first thing to go: a label wide enough to read is wide
   enough to cover the anatomy it points at on a phone. The pins and boxes stay,
   because those are the finding itself.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .anno__label { font-size: .6875rem; padding: 5px 9px; }
}
@media (max-width: 520px) {
  .anno--hero-scan .anno__label,
  .anno--hero-scan .anno__line,
  .spread__bg .anno__label,
  .spread__bg .anno__line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anno__line {
    stroke-dashoffset: 0;
    opacity: .34;
    animation: none !important;
  }
  .anno__pin, .anno__box, .anno__label {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .anno__pin--pulse::after { animation: none !important; opacity: 0; }
}