/* fx.css · type/stretch, letters stretch wide under the pointer and spring back · owner: Lizzy East · all rights reserved */

/* Kerning and ligatures stay off whether or not the letters are split, so splitting
   them (fx.js, fine pointers only) never moves a single glyph. The letters under the
   pointer widen and push their neighbours along; on leaving they spring back with a
   little overshoot. The keyboard twin: a focused link stretches a little as a whole. */
[data-fx~="type/stretch"] {
  font-kerning: none;
  font-variant-ligatures: none;
  transform-origin: 0 50%;
}
a[data-fx~="type/stretch"],
span[data-fx~="type/stretch"] { display: inline-block; }
[data-fx~="type/stretch"] .fx-word { display: inline-block; white-space: nowrap; }
[data-fx~="type/stretch"] .fx-letter {
  display: inline-block;
  translate: var(--fx-stretch-x, 0px) 0;
  scale: var(--fx-stretch-w, 1) 1;
}
[data-fx~="type/stretch"]:focus-visible { scale: var(--fx-focus-stretch, 1.08) 1; }
html.fx-armed [data-fx~="type/stretch"],
html.fx-armed [data-fx~="type/stretch"] .fx-letter {
  transition: translate var(--fx-spring-dur, 750ms) var(--fx-spring, cubic-bezier(0.3, 1.7, 0.5, 1)), scale var(--fx-spring-dur, 750ms) var(--fx-spring, cubic-bezier(0.3, 1.7, 0.5, 1));
}
html.fx-armed [data-fx~="type/stretch"]:hover .fx-letter {
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}