/* Doodles: handwritten yellow notes with a pen arrow pointing at something.

   Markup, placed right next to its target (same parent, or a parent that
   shares the target's scroll, sticky and transform context):
     <span class="doodle" data-doodle data-target="#id" data-side="top-right"
           data-hide-below="640">the newest one</span>
   For a link, put one <a> inside the span: the link becomes the note.

   The span is absolutely positioned at its parent's top-left (the host);
   doodles.js sets --dd-x/--dd-y and the arrow's box once per layout change.
   Nothing moves it per scroll frame: it scrolls, pins and gets covered with
   its content. Caveat 700 comes from the Google Fonts <link> in index.html
   (family=Caveat:wght@700). */

.dd-host {
  position: relative;
}

.doodle[data-doodle] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 0;
  height: 0;
  font-size: 1.5rem;
  color: var(--dd-doodle, var(--color-doodle, #ffd84d));
  pointer-events: none;
}

/* before doodles.js has placed it, and when no side has room */
.js .doodle[data-doodle]:not(.dd-doodle),
.doodle[data-doodle].is-off {
  display: none;
}

.doodle[data-doodle].is-measuring {
  visibility: hidden;
}

@media (min-width: 1200px) {
  .doodle[data-doodle] {
    font-size: 1.75rem;
  }
}

@media (max-width: 599px) {
  .doodle[data-doodle] {
    font-size: 1.25rem;
  }
}

.dd-doodle__note {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--dd-font-hand, 'Caveat', 'Bradley Hand', cursive);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  color: inherit;
  transform: translate(var(--dd-x, 0), var(--dd-y, 0)) rotate(-4deg);
  transform-origin: 50% 50%;
  /* the rise is on `translate`, the placement on `transform` */
  opacity: 0;
  translate: 0 6px;
  transition:
    opacity 360ms cubic-bezier(0.23, 1, 0.32, 1),
    translate 360ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* the link note: the one thing in a doodle you can click. No text
   underline (it breaks up on rotated text): a drawn ↗ after the words, and a
   drawn squiggle under the whole note on hover and focus. */
a.dd-doodle__note {
  pointer-events: auto;
  text-decoration: none;
  border-radius: 0.25rem;
}

a.dd-doodle__note:focus-visible {
  outline: 0.1875rem solid currentColor;
  outline-offset: 0.3rem;
}

.dd-doodle__out,
.dd-doodle__under {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.104em;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.dd-doodle__out path,
.dd-doodle__under path {
  vector-effect: non-scaling-stroke;
}

/* sits on the baseline like a handwritten mark, 4px after the last word */
.dd-doodle__out {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  max-width: none;
  margin-left: 4px;
  vertical-align: -0.02em;
}

.dd-doodle__under {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3em;
  width: 100%;
  height: 0.35em;
  max-width: none;
}

.dd-doodle__under path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset 160ms cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0s linear 160ms;
}

a.dd-doodle__note:focus-visible .dd-doodle__under path {
  stroke-dashoffset: 0;
  opacity: 1;
  transition:
    stroke-dashoffset 280ms cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0s;
}

@media (hover: hover) and (pointer: fine) {
  a.dd-doodle__note:hover .dd-doodle__under path {
    stroke-dashoffset: 0;
    opacity: 1;
    transition:
      stroke-dashoffset 280ms cubic-bezier(0.23, 1, 0.32, 1),
      opacity 0s;
  }
}

.dd-doodle__arrow {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  /* 2.5px at the 24px note size, scales with it */
  stroke-width: 0.104em;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dd-doodle__arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* a zero-length dash still paints its round cap: keep it out until drawn */
  opacity: 0;
}

.dd-doodle__shaft {
  transition:
    stroke-dashoffset 600ms cubic-bezier(0.23, 1, 0.32, 1) 140ms,
    opacity 0s linear 140ms;
}

.dd-doodle__head {
  transition:
    stroke-dashoffset 240ms cubic-bezier(0.23, 1, 0.32, 1) 620ms,
    opacity 0s linear 620ms;
}

.dd-doodle.is-drawn .dd-doodle__note {
  opacity: 1;
  translate: 0 0;
}

.dd-doodle.is-drawn .dd-doodle__arrow path {
  stroke-dashoffset: 0;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dd-doodle__note,
  .dd-doodle__arrow path,
  .dd-doodle__under path,
  a.dd-doodle__note:is(:hover, :focus-visible) .dd-doodle__under path {
    transition: none;
  }
  .dd-doodle__note {
    opacity: 1;
    translate: 0 0;
  }
  .dd-doodle__arrow path {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* a keyboard user reaching the link before it has drawn on still sees it */
.dd-doodle__note:focus-visible {
  opacity: 1;
  translate: 0 0;
}