/*
 * kamogawa.css
 *
 * kamogawa.js が付加する .obfuscated の見た目。
 * 語がぼやけて、川面のようにゆっくり左右へ流れる。
 * マウスを乗せるとぼかしが外れて読める。
 *
 * 揺らすのに transform ではなく position: relative の left を使うのは、
 * transform を効かせるために display: inline-block にすると
 * span の直後が改行可能位置になり、行頭に句読点が来て禁則処理が崩れるため。
 * 相対配置ならインラインのまま、行の折り返しに影響せず横へずらせる。
 */

@keyframes kamogawa-drift {
  from {
    left: -0.06em;
  }
  to {
    left: 0.09em;
  }
}

/* transition は語そのものに置く。クラスが外れたあとも効いて、
   隠れるときと現れるときの両方がなめらかになる */
[data-kamogawa] {
  transition: filter 0.6s ease;
}

.obfuscated {
  position: relative;
  filter: blur(0.15em);
  animation: kamogawa-drift 4s ease-in-out infinite alternate;
}

/* CSS だけでは乱数が使えないため、周期と位相を3系統に散らして
   すべての語が同じ動きで揃ってしまうのを避ける */
.obfuscated:nth-of-type(3n) {
  animation-duration: 5.5s;
  animation-delay: -1.2s;
}

.obfuscated:nth-of-type(3n + 1) {
  animation-duration: 3.2s;
  animation-delay: -2.6s;
}

/* 読みたい語だけ拾い上げる。
   animation を消すと元位置へ跳ねるので、止めるだけにする */
.obfuscated:hover,
.obfuscated:focus-visible {
  filter: none;
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .obfuscated {
    animation: none;
  }
}