/* 上下に移動するアニメーション */
@keyframes upAndDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* 回転するアニメーション */
.rotate-animation {
  animation: rotate 10s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* カクカクするアニメーション */
.shake-animation {
  animation: shake 1.5s infinite;
  animation-timing-function: steps(1, end);
}
@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* 下から上に跳ねて停止するアニメーション */
.bounce-animation {
  animation: bounce 1.5s;
}
@keyframes bounce {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ふわふわするアニメーション */
.float-animation {
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

.float-gentle {
  animation: float-gentle 1.5s infinite;
}
@keyframes float-gentle {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

/* カクカク点滅するアニメーション */
.flash-animation {
  animation: flash 1.5s infinite;
  animation-timing-function: steps(1, end);
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* パッと表示するアニメーション */
.fade-in-animation {
  animation: fade-in 1s ease-in-out forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ブラウン管風アニメーション */

.brown-tube-animation {
  animation: brown-tube 3s ease;
}
@keyframes brown-tube {
  10% {
    transform: scale(1, 0.002);
  }
  35% {
    transform: scale(0.2, 0.002);
    opacity: 1;
  }
  50% {
    transform: scale(0.2, 0.002);
    opacity: 0;
  }
  85% {
    transform: scale(1, 0.002);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
  }
}

/* 非表示にするアニメーション */
.hide-animation {
  animation: hide 1.5s ease;
}
@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 表示にするアニメーション */
.show-animation {
  animation: show 1.5s ease;
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ゆらゆらするアニメーション */
.shake-animation {
  animation: shake 1.5s infinite;
}
@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ８つの画像をふわっと順番にバウンドさせるアニメーション */
.array-bounce-animation-8 {
  animation: array-bounce-animation 8s infinite;
}
@keyframes array-bounce-animation {
  0% {
    transform: translateY(0);
  }
  6.25% {
    transform: translateY(-10px);
  } /* 頂点 */
  12.5% {
    transform: translateY(0);
  } /* 1秒で戻る */
  100% {
    transform: translateY(0);
  } /* 残り7秒は静止 */
}

/* ４つの画像をふわっと順番にバウンドさせるアニメーション */
.array-bounce-animation-4 {
  animation: array-bounce-animation-4 4s infinite;
}
@keyframes array-bounce-animation-4 {
  0% {
    transform: translateY(0);
  }
  12.5% {
    transform: translateY(-20px);
  }
  25% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
/* グリッチアニメーション */
.glitch {
  background-size: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.glitch::before,
.glitch::after,
.glitch .channel {
  background: inherit;
  background-size: 100% 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.glitch::before {
  animation: glitch-before 2s linear infinite alternate both;
  content: "";
}

@keyframes glitch-before {
  0% {
    clip-path: polygon(0% 16.01%, 100% 16.01%, 100% 18.48%, 0% 18.48%);
    transform: translate(-0.81%, 0.02%);
  }
  2% {
    clip-path: polygon(0% 30.03%, 100% 30.03%, 100% 30.86%, 0% 30.86%);
    transform: translate(0.64%, 0.41%);
  }
  4% {
    clip-path: polygon(0% 30.14%, 100% 30.14%, 100% 31.97%, 0% 31.97%);
    transform: translate(0.34%, -0.03%);
  }
  6% {
    clip-path: polygon(0% 67.51%, 100% 67.51%, 100% 69.36%, 0% 69.36%);
    transform: translate(-0.27%, 0.44%);
  }
  8% {
    clip-path: polygon(0% 5.41%, 100% 5.41%, 100% 6.39%, 0% 6.39%);
    transform: translate(1.48%, 0.29%);
  }
  10% {
    clip-path: polygon(0% 61.19%, 100% 61.19%, 100% 62.84%, 0% 62.84%);
    transform: translate(-0.89%, -0.15%);
  }
  12% {
    clip-path: polygon(0% 21.39%, 100% 21.39%, 100% 23.78%, 0% 23.78%);
    transform: translate(-1.54%, -0.37%);
  }
  14% {
    clip-path: polygon(0% 80.56%, 100% 80.56%, 100% 81.78%, 0% 81.78%);
    transform: translate(-0.17%, -0.08%);
  }
  16% {
    clip-path: polygon(0% 48.08%, 100% 48.08%, 100% 49.74%, 0% 49.74%);
    transform: translate(-0.87%, -0.31%);
  }
  18% {
    clip-path: polygon(0% 40.6%, 100% 40.6%, 100% 42.69%, 0% 42.69%);
    transform: translate(0.32%, -0.38%);
  }
  20% {
    clip-path: polygon(0% 52%, 100% 52%, 100% 53.8%, 0% 53.8%);
    transform: translate(1.2%, -0.12%);
  }
  22% {
    clip-path: polygon(0% 33%, 100% 33%, 100% 34.9%, 0% 34.9%);
    transform: translate(-0.95%, 0.28%);
  }
  24% {
    clip-path: polygon(0% 74%, 100% 74%, 100% 76.2%, 0% 76.2%);
    transform: translate(0.67%, -0.31%);
  }
  26% {
    clip-path: polygon(0% 8%, 100% 8%, 100% 9.4%, 0% 9.4%);
    transform: translate(-1.43%, 0.19%);
  }
  28% {
    clip-path: polygon(0% 61%, 100% 61%, 100% 63.1%, 0% 63.1%);
    transform: translate(1.31%, -0.25%);
  }
  30% {
    clip-path: polygon(0% 26%, 100% 26%, 100% 27.8%, 0% 27.8%);
    transform: translate(-0.48%, 0.42%);
  }
  32% {
    clip-path: polygon(0% 85%, 100% 85%, 100% 86.5%, 0% 86.5%);
    transform: translate(1.54%, -0.08%);
  }
  34% {
    clip-path: polygon(0% 45%, 100% 45%, 100% 47.2%, 0% 47.2%);
    transform: translate(-0.73%, 0.15%);
  }
  36% {
    clip-path: polygon(0% 17%, 100% 17%, 100% 18.9%, 0% 18.9%);
    transform: translate(0.89%, -0.34%);
  }
  38% {
    clip-path: polygon(0% 70%, 100% 70%, 100% 72.3%, 0% 72.3%);
    transform: translate(-1.17%, 0.22%);
  }
  40%,
  100% {
    clip-path: none;
    transform: none;
  }
}

.glitch::after {
  animation: glitch-after 2s linear infinite alternate both;
  content: "";
}

@keyframes glitch-after {
  0% {
    clip-path: polygon(0% 66.55%, 100% 66.55%, 100% 67.25%, 0% 67.25%);
    transform: translate(1.2%, 0.3%);
  }
  2% {
    clip-path: polygon(0% 64.23%, 100% 64.23%, 100% 64.73%, 0% 64.73%);
    transform: translate(1.59%, -0.44%);
  }
  4% {
    clip-path: polygon(0% 64.3%, 100% 64.3%, 100% 65.38%, 0% 65.38%);
    transform: translate(-0.52%, 0.33%);
  }
  6% {
    clip-path: polygon(0% 71.8%, 100% 71.8%, 100% 73.16%, 0% 73.16%);
    transform: translate(-1.52%, -0.37%);
  }
  8% {
    clip-path: polygon(0% 47.77%, 100% 47.77%, 100% 48.9%, 0% 48.9%);
    transform: translate(1.47%, 0.01%);
  }
  10% {
    clip-path: polygon(0% 60.86%, 100% 60.86%, 100% 63.61%, 0% 63.61%);
    transform: translate(-0.37%, 0.27%);
  }
  12% {
    clip-path: polygon(0% 66.13%, 100% 66.13%, 100% 67.37%, 0% 67.37%);
    transform: translate(-0.43%, -0.07%);
  }
  14% {
    clip-path: polygon(0% 29.61%, 100% 29.61%, 100% 29.98%, 0% 29.98%);
    transform: translate(-0.98%, -0.19%);
  }
  16% {
    clip-path: polygon(0% 56.91%, 100% 56.91%, 100% 58.52%, 0% 58.52%);
    transform: translate(0.06%, -0.24%);
  }
  18% {
    clip-path: polygon(0% 30.5%, 100% 30.5%, 100% 32.72%, 0% 32.72%);
    transform: translate(1.45%, -0.17%);
  }
  20% {
    clip-path: polygon(0% 38%, 100% 38%, 100% 39.5%, 0% 39.5%);
    transform: translate(-0.82%, 0.17%);
  }
  22% {
    clip-path: polygon(0% 55%, 100% 55%, 100% 56.8%, 0% 56.8%);
    transform: translate(1.45%, -0.29%);
  }
  24% {
    clip-path: polygon(0% 22%, 100% 22%, 100% 23.6%, 0% 23.6%);
    transform: translate(-0.61%, 0.38%);
  }
  26% {
    clip-path: polygon(0% 78%, 100% 78%, 100% 79.9%, 0% 79.9%);
    transform: translate(0.93%, -0.14%);
  }
  28% {
    clip-path: polygon(0% 43%, 100% 43%, 100% 44.7%, 0% 44.7%);
    transform: translate(-1.38%, 0.25%);
  }
  30% {
    clip-path: polygon(0% 11%, 100% 11%, 100% 12.4%, 0% 12.4%);
    transform: translate(0.54%, -0.41%);
  }
  32% {
    clip-path: polygon(0% 68%, 100% 68%, 100% 70.1%, 0% 70.1%);
    transform: translate(-1.52%, 0.08%);
  }
  34% {
    clip-path: polygon(0% 34%, 100% 34%, 100% 35.8%, 0% 35.8%);
    transform: translate(0.76%, -0.33%);
  }
  36% {
    clip-path: polygon(0% 57%, 100% 57%, 100% 58.9%, 0% 58.9%);
    transform: translate(-0.43%, 0.47%);
  }
  38% {
    clip-path: polygon(0% 82%, 100% 82%, 100% 84.2%, 0% 84.2%);
    transform: translate(1.23%, -0.19%);
  }
  40%,
  100% {
    clip-path: none;
    transform: none;
  }
}

.glitch .channel {
  mix-blend-mode: screen;
}

.glitch .channel::before {
  bottom: 0;
  content: "";
  display: block;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.glitch .r {
  animation: rgb-shift-r 2s steps(1, jump-end) infinite alternate both;
}

@keyframes rgb-shift-r {
  0% {
    transform: translate(0.03%, 0.48%);
    opacity: 1;
  }
  2% {
    transform: translate(-0.21%, -0.31%);
  }
  4% {
    transform: translate(0.19%, -0.42%);
  }
  6% {
    transform: translate(0.01%, -0.46%);
  }
  8% {
    transform: translate(-0.06%, -0.24%);
  }
  10% {
    transform: translate(0.01%, -0.47%);
  }
  12% {
    transform: translate(-0.06%, -0.48%);
  }
  14% {
    transform: translate(-0.14%, 0.15%);
  }
  16% {
    transform: translate(-0.02%, 0.22%);
  }
  18% {
    transform: translate(-0.06%, 0.28%);
  }
  20% {
    transform: translate(0.13%, -0.31%);
  }
  22% {
    transform: translate(-0.22%, 0.18%);
  }
  24% {
    transform: translate(0.08%, -0.44%);
  }
  26% {
    transform: translate(-0.19%, 0.27%);
  }
  28% {
    transform: translate(0.25%, -0.12%);
  }
  30% {
    transform: translate(-0.06%, 0.39%);
  }
  32% {
    transform: translate(0.17%, -0.23%);
  }
  34% {
    transform: translate(-0.24%, 0.14%);
  }
  38% {
    transform: translate(-0.11%, 0.33%);
    opacity: 1;
  }
  40%,
  100% {
    transform: none;
    opacity: 0;
  }
}

.glitch .r::before {
  background: #f00;
}

.glitch .g {
  animation: rgb-shift-g 2s steps(1, jump-end) infinite alternate both;
}

@keyframes rgb-shift-g {
  0% {
    transform: translate(0.03%, -0.25%);
    opacity: 1;
  }
  2% {
    transform: translate(-0.09%, -0.05%);
  }
  4% {
    transform: translate(0.02%, -0.12%);
  }
  6% {
    transform: translate(0.27%, 0.32%);
  }
  8% {
    transform: translate(0.24%, -0.49%);
  }
  10% {
    transform: translate(-0.04%, -0.49%);
  }
  12% {
    transform: translate(-0.22%, -0.14%);
  }
  14% {
    transform: translate(-0.27%, 0.03%);
  }
  16% {
    transform: translate(0.07%, -0.15%);
  }
  18% {
    transform: translate(-0.14%, 0.09%);
  }
  20% {
    transform: translate(-0.16%, 0.22%);
  }
  22% {
    transform: translate(0.27%, -0.15%);
  }
  24% {
    transform: translate(-0.09%, 0.41%);
  }
  26% {
    transform: translate(0.21%, -0.33%);
  }
  28% {
    transform: translate(-0.24%, 0.08%);
  }
  30% {
    transform: translate(0.13%, -0.47%);
  }
  32% {
    transform: translate(-0.19%, 0.26%);
  }
  34% {
    transform: translate(0.07%, -0.11%);
  }
  36% {
    transform: translate(-0.25%, 0.38%);
  }
  38% {
    transform: translate(0.18%, -0.24%);
    opacity: 1;
  }
  40%,
  100% {
    transform: none;
    opacity: 0;
  }
}

.glitch .g::before {
  background: #0f0;
}

.glitch .b {
  animation: rgb-shift-b 2s steps(1, jump-end) infinite alternate both;
}

@keyframes rgb-shift-b {
  0% {
    transform: translate(-0.16%, 0.33%);
    opacity: 1;
  }
  2% {
    transform: translate(0.16%, -0.32%);
  }
  4% {
    transform: translate(-0.1%, -0.38%);
  }
  6% {
    transform: translate(0.24%, -0.07%);
  }
  8% {
    transform: translate(0.07%, 0.11%);
  }
  10% {
    transform: translate(0.03%, 0%);
  }
  12% {
    transform: translate(-0.24%, -0.35%);
  }
  14% {
    transform: translate(0.08%, 0.44%);
  }
  16% {
    transform: translate(0.24%, 0.06%);
  }
  18% {
    transform: translate(0.15%, 0.35%);
  }
  20% {
    transform: translate(0.21%, -0.19%);
  }
  22% {
    transform: translate(-0.14%, 0.43%);
  }
  24% {
    transform: translate(0.26%, -0.07%);
  }
  26% {
    transform: translate(-0.23%, 0.31%);
  }
  28% {
    transform: translate(0.09%, -0.42%);
  }
  30% {
    transform: translate(-0.18%, 0.16%);
  }
  32% {
    transform: translate(0.24%, -0.36%);
  }
  34% {
    transform: translate(-0.08%, 0.25%);
  }
  36% {
    transform: translate(0.19%, -0.13%);
  }
  38% {
    transform: translate(-0.27%, 0.48%);
    opacity: 1;
  }
  40%,
  100% {
    transform: none;
    opacity: 0;
  }
}

.glitch .b::before {
  background: #00f;
}