/* The quick way to us on WhatsApp (reach.js makes it). The sound switch's twin in the other corner, so it reads as part of
   the page and not a widget on it: paper disc, ink line, the same weight. The one colour is the logo's full stop.
   z-index 40 sits under the desk, film, theatre and sheets, so they cover it with no code. A page with a bar along the
   bottom sets --reach-lift. */
.reach{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(16px + var(--reach-lift,0px) + env(safe-area-inset-bottom,0px));z-index:40;display:grid;grid-template-columns:0fr 41px;align-items:center;height:44px;border:1.5px solid rgba(31,29,26,.22);border-radius:999px;background:rgba(251,250,246,.96);font-family:var(--hand);font-size:20px;font-weight:300;line-height:1;color:var(--ink);text-decoration:none;transition:grid-template-columns .6s var(--ease),border-color .3s}
.reach:focus-visible{border-radius:999px}
.reach-say{min-width:0;overflow:hidden}
.reach-say span{display:block;padding:0 1px 0 17px;white-space:nowrap;clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--ease)}
.reach svg{justify-self:center;width:22px;height:22px;overflow:visible}
.reach path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reach circle{fill:var(--red)}
.reach.say,.reach:focus-visible{grid-template-columns:1fr 41px;border-color:var(--ink)}
.reach.say .reach-say span,.reach:focus-visible .reach-say span{clip-path:inset(0);transition:clip-path .7s var(--ease) .12s}
@media (hover:hover){
  .reach:hover{grid-template-columns:1fr 41px;border-color:var(--ink)}
  .reach:hover .reach-say span{clip-path:inset(0);transition:clip-path .7s var(--ease) .12s}
}
/* the bubble draws itself as the line is written, with the pen the rest of the page uses */
@keyframes reach-ink{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){
  .reach.say path,.reach:focus-visible path{animation:reach-ink .9s var(--ease) both}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){.reach:hover path{animation:reach-ink .9s var(--ease) both}}
@media (prefers-reduced-motion:reduce){.reach,.reach-say span,.reach:hover .reach-say span,.reach.say .reach-say span,.reach:focus-visible .reach-say span{transition:none}}