/* Vendored from jowtron/title-dock (private) at 7fdd937, unchanged below this
   line. Update by copying the module's file again; don't edit here. */
/* Title dock: see README.md. The script (title-dock.js) writes the keyframes
   and sets --td-d (the scroll it takes), --td-fade and each line's --td-anim. */

/* The header's name is hidden from first paint on a page that has a name to
   dock (td-soon, set by the <head> snippet), and while the dock is on. */
.td-soon:has(.td-name) .td-target,
.td-js .td-target { opacity: 0; }

/* ⚠ Headroom. While it docks, Safari paints each line on its own layer cut
   to the line's box, and glyphs that reach outside a tight line-height (an
   italic's ascenders: the d of "Wild" on Emily-Rose's site) were sliced off.
   Padding with a matching negative margin grows the box without moving
   anything. Always on, not only under .td-on, because the script measures
   with .td-on off and the box must be the same both ways. Set
   --td-headroom: 0 on a line whose own background matters (gradient text
   clipped to the box) and pad it yourself. Pictures are left alone. */
.td-name > :not(.td-skip):not(img):not(svg):not(picture):not([data-td-to]) {
  padding-top: var(--td-headroom, 0.2em);
  margin-top: calc(-1 * var(--td-headroom, 0.2em));
  /* An italic's last letter leans past the line's end (Emily-Rose's d,
     sliced vertically when the title was right-aligned): room there too. A
     background on the line (an underline) grows by this; size it to
     calc(100% - var(--td-headroom-end)). */
  padding-right: var(--td-headroom-end, 0.3em);
  margin-right: calc(-1 * var(--td-headroom-end, 0.3em));
}

@supports (animation-timeline: scroll()) {
  /* The name travels above the header. ⚠ Any ancestor of .td-name with its own
     stacking layer (z-index on a positioned box, opacity < 1, transform, filter)
     traps it below the header: give those z-index:auto under .td-on, and give
     their other children a z-index of their own (README, step 4). */
  .td-on .td-name { position: relative; z-index: var(--td-z, 60); pointer-events: none; }

  /* ⚠ Every shorthand beside an animation-timeline carries a var(): CSS
     minifiers (esbuild, Lightning CSS) otherwise fold animation-timeline into
     it, browsers reject the result, and the whole rule silently disappears. */
  /* Text and logo lines are the name's children; in pieces mode (script adds
     .td-pieces) every [data-td-to] piece moves, and a piece inside a piece
     gets --td-hide: none, because it fades with its parent. */
  .td-on .td-name:not(.td-pieces) > :not(.td-skip),
  .td-on .td-name.td-pieces [data-td-to] {
    transform-origin: 0 0;
    animation: var(--td-anim) var(--td-ease, linear) both, var(--td-hide, td-hide) var(--td-ease, linear) both;
    animation-timeline: scroll(root), scroll(root);
    animation-range: 0px var(--td-d), calc(var(--td-d) - var(--td-fade, 6px)) var(--td-d);
  }
  /* Parts of the big name the header doesn't have (a year, a tagline) fade
     over the first 40% of the journey. */
  .td-on .td-skip {
    animation: td-hide var(--td-ease, linear) both;
    animation-timeline: scroll(root);
    animation-range: 0px calc(var(--td-d) * .4);
  }
  .td-on .td-target {
    animation: td-show var(--td-ease, linear) both;
    animation-timeline: scroll(root);
    animation-range: calc(var(--td-d) - var(--td-fade, 6px)) var(--td-d);
  }
  /* A phone menu opened near the top waits for the name to dock, then fades in. */
  .td-on .td-menu { transition: opacity .25s ease; }
  .td-wait { opacity: 0 !important; pointer-events: none; }
}

/* The handover is a crossfade, in register, over the last --td-fade px. Opacity,
   not visibility: visibility runs on the main thread, and on a fast flick the
   name rode on up with the page until the main thread caught up. */
@keyframes td-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes td-show { from { opacity: 0; } to { opacity: 1; } }