/* glitch — 動きのプリセット（接頭辞 pf-）。説明は ../PRESET.md
 * 使い方: <a class="pf-glitch" data-text="募集要項"><span class="pf-noise" aria-hidden="true"></span><span class="pf-t">募集要項</span></a>
 *   .is-on を足す（またはマウスを乗せる）と、文字が左右にずれ・色がちぎれ、ノイズが走る */
.pf-glitch {
  --pf-a: #e86adf;
  --pf-b: #5fd9e6;
  --pf-noise-opacity: 0.55;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
}
.pf-glitch .pf-t { position: relative; z-index: 1; }
.pf-glitch::before, .pf-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.pf-glitch::before { color: var(--pf-a); }
.pf-glitch::after { color: var(--pf-b); }
.pf-glitch .pf-noise {
  position: absolute;
  inset: -40%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.4 0 0 0 1.4 -0.35'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.pf-glitch.is-on .pf-noise { opacity: var(--pf-noise-opacity); animation: pf-glitch-noise 0.24s steps(4) infinite; }
.pf-glitch.is-on .pf-t { animation: pf-glitch-shake 0.3s steps(3) infinite; }
.pf-glitch.is-on::before { opacity: 0.9; animation: pf-glitch-a 0.42s steps(4) infinite; }
.pf-glitch.is-on::after { opacity: 0.9; animation: pf-glitch-b 0.36s steps(4) infinite; }
@media (hover: hover) {
  .pf-glitch:hover .pf-noise { opacity: var(--pf-noise-opacity); animation: pf-glitch-noise 0.24s steps(4) infinite; }
  .pf-glitch:hover .pf-t { animation: pf-glitch-shake 0.3s steps(3) infinite; }
  .pf-glitch:hover::before { opacity: 0.9; animation: pf-glitch-a 0.42s steps(4) infinite; }
  .pf-glitch:hover::after { opacity: 0.9; animation: pf-glitch-b 0.36s steps(4) infinite; }
}
@keyframes pf-glitch-noise {
  0% { transform: translate(0, 0); } 25% { transform: translate(-14px, 9px); }
  50% { transform: translate(11px, -12px); } 75% { transform: translate(-7px, -5px); } 100% { transform: translate(8px, 13px); }
}
@keyframes pf-glitch-shake {
  0% { transform: translate(0, 0); } 33% { transform: translate(-1.5px, 0.5px) skewX(-6deg); }
  66% { transform: translate(1.5px, -0.5px) skewX(5deg); } 100% { transform: translate(0, 0); }
}
@keyframes pf-glitch-a {
  0% { clip-path: inset(8% 0 62% 0); transform: translate(-4px, 0); }
  25% { clip-path: inset(48% 0 22% 0); transform: translate(3px, 0); }
  50% { clip-path: inset(70% 0 4% 0); transform: translate(-5px, 0); }
  75% { clip-path: inset(22% 0 50% 0); transform: translate(4px, 0); }
  100% { clip-path: inset(40% 0 36% 0); transform: translate(-2px, 0); }
}
@keyframes pf-glitch-b {
  0% { clip-path: inset(58% 0 12% 0); transform: translate(4px, 0); }
  25% { clip-path: inset(12% 0 70% 0); transform: translate(-3px, 0); }
  50% { clip-path: inset(34% 0 40% 0); transform: translate(5px, 0); }
  75% { clip-path: inset(76% 0 2% 0); transform: translate(-4px, 0); }
  100% { clip-path: inset(4% 0 78% 0); transform: translate(2px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-glitch.is-on .pf-noise, .pf-glitch.is-on .pf-t, .pf-glitch.is-on::before, .pf-glitch.is-on::after,
  .pf-glitch:hover .pf-noise, .pf-glitch:hover .pf-t, .pf-glitch:hover::before, .pf-glitch:hover::after { animation: none; }
  .pf-glitch.is-on::before, .pf-glitch.is-on::after, .pf-glitch:hover::before, .pf-glitch:hover::after { opacity: 0; }
  .pf-glitch.is-on .pf-noise, .pf-glitch:hover .pf-noise { opacity: 0; }
}