/*
 * annotate.css: labels and arrows for annotate.js (see there for the markup). Needs device.css.
 *
 * Colours, set on .annotated or any parent:
 *   --annot-ink         labels, and the arrow on the page (default: the text colour)
 *   --annot-quiet       the short note under a label (default: the ink, a little lighter)
 *   --annot-line        the arrow on the page (default: the ink, a touch softer)
 *   --annot-screen-ink  arrow, head and ring on a dark capture (default #F2F0EA, the app's light ink)
 *   --annot-screen-ink-light   the same on a light capture (default #1F1E1B, the app's ink)
 *   --annot-bezel-ink   the arrow where it crosses the phone's black glass (default #F2F0EA)
 *   --annot-dot, --annot-dot-ink   numbered dots and list numbers, and their figures (default ink
 *                       and paper; a page in a theme sets its key and the words on it)
 * Sizes:
 *   --annot-gap         between a label and the phone (default clamp(28px, 3.4vw, 64px))
 *   --annot-label-w     the widest a label gets (default 15.5rem)
 *   --annot-min-room    the least room beside the phone for labels there; with less, the figure
 *                       uses the numbered list (default 11rem)
 *   --annot-space       the least space between two labels on one side (default 18px)
 *   --annot-stroke      the arrow's fullest width in CSS pixels, as a plain number (default 1.6)
 *   --annot-ring        the ring's radius (default 4.5px)
 *   --annot-dot-size    the numbered dots on the screen in the narrow layout (default 20px)
 *
 * annotate.js sets data-mode="wide" (labels beside the phone) or data-mode="narrow" (numbered dots
 * on the screen, numbered list under the phone) from the room it measures, and data-screen="light"
 * or "dark" from the capture. Without script the list shows as a plain numbered list.
 */

@property --annot-gap { syntax: '<length>'; inherits: true; initial-value: 40px; }
@property --annot-label-w { syntax: '<length>'; inherits: true; initial-value: 248px; }
@property --annot-min-room { syntax: '<length>'; inherits: true; initial-value: 176px; }
@property --annot-space { syntax: '<length>'; inherits: true; initial-value: 18px; }
@property --annot-ring { syntax: '<length>'; inherits: true; initial-value: 4.5px; }
@property --annot-dot-size { syntax: '<length>'; inherits: true; initial-value: 20px; }

.annotated {
  --annot-ink: currentColor;
  --annot-quiet: color-mix(in srgb, currentColor 68%, transparent);
  --annot-line: color-mix(in srgb, var(--annot-ink) 82%, transparent);
  --annot-screen-ink: #F2F0EA;
  --annot-screen-ink-light: #1F1E1B;
  --annot-bezel-ink: #F2F0EA;
  --annot-dot: #1F1E1B;
  --annot-dot-ink: #F5F3EE;
  --annot-gap: clamp(28px, 3.4vw, 64px);
  --annot-label-w: 15.5rem;
  --annot-min-room: 11rem;
  --annot-space: 18px;
  --annot-stroke: 1.6;
  --annot-ring: 4.5px;
  --annot-dot-size: 20px;
  --annot-on-screen: var(--annot-screen-ink);
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
}
.annotated[data-screen="light"] { --annot-on-screen: var(--annot-screen-ink-light); }
.annotated > .device { grid-area: 1 / 1; }

/* ---- The notes: a numbered list under the phone (narrow, and without script) ------------------- */

.annotated > .annotated-notes {
  grid-row: 2;
  list-style: none;
  counter-reset: annot;
  margin: 2.25rem 0 0;
  padding: 0;
  inline-size: min(100%, 30rem);
  display: grid;
  gap: 1.1rem;
  color: var(--annot-ink);
}
.annotated-notes > li {
  counter-increment: annot;
  position: relative;
  padding-inline-start: 2.6rem;
  min-block-size: 1.625rem;
}
.annotated-notes > li::before {
  content: counter(annot);
  position: absolute;
  inset-inline-start: 0;
  top: 0.05rem;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--annot-dot);
  color: var(--annot-dot-ink);
  font: 600 0.75rem/1 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.annotated-notes b {
  display: block;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.annotated-notes span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--annot-quiet);
  text-wrap: pretty;
}
/* In the list, a title's first line sits level with its number. */
.annotated-notes > li b { padding-top: 0.1rem; }

/* ---- The layers annotate.js adds ------------------------------------------------------------------ */

.annotated-layer {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.annotated-arrows {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
  display: none;
}
/* A small numbered dot on the screen, like a badge on the thing it marks. */
.annotated-dot {
  position: absolute;
  inline-size: var(--annot-dot-size);
  block-size: var(--annot-dot-size);
  margin: calc(var(--annot-dot-size) / -2) 0 0 calc(var(--annot-dot-size) / -2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--annot-dot);
  color: var(--annot-dot-ink);
  font: 600 11px/1 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.9), 0 3px 10px rgb(0 0 0 / 0.3);
}
.annotated[data-mode="wide"] .annotated-dot { display: none; }
/* A swipe, in the narrow layout: a short dotted trail rises from its dot, with a small head. */
.annotated-dot[data-gesture="swipe-up"]::before,
.annotated-dot[data-gesture="swipe-up"]::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
}
.annotated-dot[data-gesture="swipe-up"]::before {
  bottom: calc(100% + 6px);
  inline-size: 3px;
  block-size: 36px;
  margin-left: -1.5px;
  background: radial-gradient(circle, var(--annot-on-screen) 1px, transparent 1.4px) 50% 0 / 3px 6px repeat-y;
  animation: annot-trail 1.6s linear infinite;
}
.annotated-dot[data-gesture="swipe-up"]::after {
  bottom: calc(100% + 40px);
  inline-size: 7px;
  block-size: 7px;
  margin-left: -3.5px;
  border-left: 1.5px solid var(--annot-on-screen);
  border-top: 1.5px solid var(--annot-on-screen);
  border-radius: 1px 0 0 0;
  rotate: 45deg;
  translate: 0 2px;
}
@keyframes annot-trail { to { background-position: 50% -12px; } }

/* ---- Wide: labels beside the phone ------------------------------------------------------------------ */

.annotated[data-mode="wide"] > .annotated-notes {
  /* grid-area auto: an absolutely placed grid child then spans the whole figure, not row 2 */
  grid-area: auto;
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  inline-size: auto;
  display: block;
  pointer-events: none;
}
.annotated[data-mode="wide"] > .annotated-notes > li {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  min-block-size: 0;
  pointer-events: auto;
}
.annotated[data-mode="wide"] > .annotated-notes > li::before { display: none; }
.annotated[data-mode="wide"] > .annotated-notes > li b { padding-top: 0; }
.annotated[data-mode="wide"] > .annotated-notes > li[data-placed="left"] { text-align: right; }
.annotated[data-mode="wide"] > .annotated-notes > li[data-placed="right"] { text-align: left; }
.annotated[data-mode="wide"] .annotated-arrows { display: block; }
/* A label whose thing is not on this capture (a placeholder, say) waits in the list. */
.annotated[data-mode="wide"] > .annotated-notes > li[data-unplaced] { display: none; }
.annotated-dot[hidden] { display: none; }

/* The arrow: a pen-like line in the page's ink that turns light on the black glass and takes the
   screen's colour on the screen, a small soft open head, and a small ring where it touches the
   thing, which sends out one soft pulse as it appears. */
.annotated-stop-page { stop-color: var(--annot-line); }
.annotated-stop-bezel { stop-color: var(--annot-bezel-ink); }
.annotated-stop-screen { stop-color: var(--annot-on-screen); }
.annotated-reveal {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.05;
  stroke-dashoffset: 1.02;
}
.annotated-head,
.annotated-swipe,
.annotated-swipe-head {
  fill: none;
  stroke: var(--annot-on-screen);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.annotated-ring {
  fill: var(--annot-on-screen);
  fill-opacity: 0.22;
  stroke: var(--annot-on-screen);
  transform-box: fill-box;
  transform-origin: center;
}
.annotated-halo {
  fill: var(--annot-on-screen);
  fill-opacity: 0.12;
  stroke: var(--annot-on-screen);
  stroke-opacity: 0.5;
  stroke-width: 1px;
  transform-box: fill-box;
  transform-origin: center;
}
.annotated-swipe { stroke-dasharray: 0.01px 6px; }

/* ---- Drawing in: the label, then its line, then the head and the ring; one after another -------- */

.annotated[data-mode="wide"] > .annotated-notes > li { opacity: 0; translate: 0 8px; }
.annotated-head, .annotated-swipe, .annotated-swipe-head { opacity: 0; }
.annotated-ring { opacity: 0; scale: 0.3; }
.annotated-halo { opacity: 0; }
.annotated-dot { opacity: 0; scale: 0.5; }

.annotated { --annot-step: 0.24s; }
.annotated.is-drawn[data-mode="wide"] > .annotated-notes > li,
.annotated[data-mode="wide"] > .annotated-notes > li.is-drawn {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.7s ease, translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * var(--annot-step));
}
.annotated.is-drawn .annotated-reveal,
.annotated-arrow.is-drawn .annotated-reveal {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.05s cubic-bezier(0.45, 0, 0.2, 1);
  transition-delay: calc(var(--i, 0) * var(--annot-step) + 0.14s);
}
.annotated.is-drawn :is(.annotated-head, .annotated-swipe, .annotated-swipe-head),
.annotated-arrow.is-drawn :is(.annotated-head, .annotated-swipe, .annotated-swipe-head) {
  opacity: 1;
  transition: opacity 0.4s ease;
  transition-delay: calc(var(--i, 0) * var(--annot-step) + 1.02s);
}
.annotated.is-drawn .annotated-ring,
.annotated-arrow.is-drawn .annotated-ring {
  opacity: 1;
  scale: 1;
  transition: opacity 0.3s ease, scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * var(--annot-step) + 1.04s);
}
/* One soft pulse from the ring as it appears, then gone. */
@keyframes annot-pulse {
  from { opacity: 0.7; scale: 0.3; }
  to { opacity: 0; scale: 1; }
}
.annotated.is-drawn .annotated-halo,
.annotated-arrow.is-drawn .annotated-halo {
  animation: annot-pulse 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * var(--annot-step) + 1.06s);
}
.annotated.is-drawn .annotated-dot,
.annotated-dot.is-drawn {
  opacity: 1;
  scale: 1;
  transition: opacity 0.4s ease, scale 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.09s + 0.1s);
}
/* A swipe: the dots drift slowly up, once drawn. */
@keyframes annot-swipe { to { stroke-dashoffset: -12.02px; } }
.annotated.is-drawn .annotated-swipe,
.annotated-arrow.is-drawn .annotated-swipe { animation: annot-swipe 1.6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .annotated .annotated-reveal { stroke-dashoffset: 0; }
  .annotated .annotated-halo { display: none; }
  .annotated :is(.annotated-head, .annotated-swipe, .annotated-swipe-head, .annotated-ring, .annotated-dot),
  .annotated > .annotated-notes > li {
    opacity: 1 !important;
    scale: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
    animation: none !important;
  }
  .annotated .annotated-reveal { transition: none !important; }
  .annotated-dot::before { animation: none !important; }
}
:root.motion-paused .annotated-swipe,
:root.motion-paused .annotated-dot::before { animation: none !important; }