/* フッターの1行「このサイトはAIでが管理しています。」の「AI」の文字化け（2026-10-30 Owner）
   学校の「転校」（school.css の .sch-tenko）よりも読みづらく、ぎりぎり「AI」と読める程度にする。
   1文字ずつ書体・傾き・位置・大きさを変え、色ずれ（ピンクとシアン）とにじみ、横に裂けたずれ（::after）と
   ノイズの帯（::before）を重ね、ときどき跳ねる。訳（assets/js/i18n.js の footer.ai）でも同じ形で入る。
   色は currentColor なので、明るいフッターでも暗いフッターでもその場の文字色に合う。 */
.ai-glitch {
  position: relative;
  display: inline-block;
  margin: 0 .34em 0 .06em;
  padding: 0 .05em;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  filter: blur(.55px) contrast(1.15);
  animation: ai-glitch-jump 3.4s steps(1, end) infinite;
}
.ai-glitch > span {
  display: inline-block;
  font-weight: 800;
  text-shadow:
    -2.5px 0 0 rgba(255, 30, 120, .78),
    2.5px .5px 0 rgba(0, 210, 255, .78),
    0 0 4px currentColor;
}
.ai-glitch > span:nth-child(1) {
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.32em;
  transform: translate(.04em, .16em) rotate(-17deg) skewX(-28deg) scale(1.05, 1.3);
}
.ai-glitch > span:nth-child(2) {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 1.18em;
  margin-left: -.06em;
  transform: translate(.02em, -.2em) rotate(12deg) skewX(20deg) scale(1.35, 1.12);
}
/* ノイズの帯：字の上を横切る走査線と色の棒 */
.ai-glitch::before {
  content: "";
  position: absolute;
  left: -.25em;
  right: -.25em;
  top: 38%;
  height: .32em;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(255, 30, 120, .55) 0 30%, transparent 30% 62%, rgba(0, 210, 255, .55) 62% 100%);
  opacity: .5;
  transform: skewX(-20deg);
}
/* 横に裂けたずれ：同じ文字を帯だけ切り出して横へずらす */
.ai-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: .22em;
  top: -.05em;
  z-index: 1;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 800;
  font-size: 1.2em;
  letter-spacing: .1em;
  color: currentColor;
  opacity: .6;
  clip-path: inset(46% 0 30% 0);
  text-shadow: 3px 0 0 rgba(0, 210, 255, .8), -3px 0 0 rgba(255, 30, 120, .8);
  animation: ai-glitch-tear 2.1s steps(1, end) infinite;
}
@keyframes ai-glitch-jump {
  0%, 82%, 100% { transform: none; }
  84% { transform: translate(-2px, 1px) skewX(14deg); }
  87% { transform: translate(3px, -1px) skewX(-18deg); }
  90% { transform: translate(-1px, 0); }
}
@keyframes ai-glitch-tear {
  0%, 100% { clip-path: inset(46% 0 30% 0); transform: translateX(.18em); }
  25% { clip-path: inset(10% 0 64% 0); transform: translateX(-.22em); }
  50% { clip-path: inset(62% 0 12% 0); transform: translateX(.3em); }
  75% { clip-path: inset(28% 0 50% 0); transform: translateX(-.12em); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-glitch, .ai-glitch::after { animation: none; }
}