@keyframes seamless-loop {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.rainbow-beam1 {
  transform: rotate(-45deg);

  background: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff0000
  );

  background-size: 200% 100%;

  animation: seamless-loop 2s linear infinite;
}

.rainbow-beam2 {
  transform: rotate(-90deg);

  background: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff0000
  );

  background-size: 200% 100%;

  animation: seamless-loop 2s linear infinite;
}

.rainbow-beam21 {
  transform: rotate(90deg);

  background: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff0000
  );

  background-size: 200% 100%;

  animation: seamless-loop 1s linear infinite;
}

.bird3 {
  filter: grayscale(90%);
}

.rainbow-beam3 {
  transform: rotate(-90deg);

  background: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff0000
  );

  background-size: 200% 100%;

  filter: grayscale(100%);

  animation: seamless-loop 2s linear infinite;
}

.bird4 {
  animation: rainbow-hue 1s linear infinite;
  filter: hue-rotate(0deg);
}

@keyframes rainbow-hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.rainbow-beam4 {
  transform: rotate(-90deg);

  background: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff0000
  );

  background-size: 200% 100%;

  animation: seamless-loop 1s linear infinite;
}

@keyframes quake {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    transform: translate(-3px, 2px) rotate(-1deg);
  }
  40% {
    transform: translate(-1px, -3px) rotate(1deg);
  }
  60% {
    transform: translate(3px, 1px) rotate(0deg);
  }
  80% {
    transform: translate(2px, -1px) rotate(1deg);
  }
  100% {
    transform: translate(-2px, 3px) rotate(-1deg);
  }
}

.bird5 {
  animation: quake 0.15s infinite linear;
  display: inline-block;
}

.fire {
  filter: drop-shadow(0 0 20px red) drop-shadow(0 0 40px orange)
    hue-rotate(180deg);
  animation: firewave 0.5s infinite;
}
@keyframes firewave {
  0% {
    filter: drop-shadow(0 0 12px red);
  }
  50% {
    filter: drop-shadow(0 0 24px orange);
  }
  100% {
    filter: drop-shadow(0 0 12px red);
  }
}

.rainbow-beam6 {
  transform: rotate(90deg);

  background: linear-gradient(
    to right,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #8b00ff,
    #ff0000
  );

  opacity: 0.4;

  background-size: 200% 100%;

  animation: seamless-loop 2s linear infinite;
}

.jelly {
  animation: jelly 3s infinite ease-in-out;
}
@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
    transform: translate(-3px, -1px) rotate(0deg);
  }

  35% {
    transform: scale(1.05, 0.95);
    transform: translate(-4px, -1px) rotate(180deg);
  }

  65% {
    transform: scale(0.95, 1.05);
    transform: translate(-2px, 1px) rotate(-90deg);
  }
}

.beam8 {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
}

.beam8 > div {
  width: 20px;
  height: 20px;
  animation: hue 0.5s infinite linear;
  border: 0.5px solid #989797;
  filter: hue-rotate(0deg);
}

.beam8 > div:nth-child(4n + 1) {
  background: #ff595e;
}

.beam8 > div:nth-child(4n + 2) {
  background: #ffca3a;
}

.beam8 > div:nth-child(4n + 3) {
  background: #8ac926;
}

.beam8 > div:nth-child(4n + 4) {
  background: #5eafe2;
}

@keyframes hue {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

.bird9 {
  /* 5秒でひと回り、ずっとループ */
  animation: bird-peek 5s ease-in-out infinite;
  display: inline-block;
  overflow: hidden;
}

/* 顔出し → 止まる → 引っ込む → 顔出し → 止まる → ゆっくり通過 */
@keyframes bird-peek {
  0% {
    /* 画面左の外側で待機 */
    transform: translateX(-300px);
  }

  15% {
    /* 1回目の「顔を出す」 */
    transform: translateX(-120px);
  }

  25% {
    /* その場で一瞬止まる（15%〜25%は同じ位置） */
    transform: translateX(-120px);
  }

  35% {
    /* いったん引っ込む（左側へ戻る） */
    transform: translateX(-300px);
  }

  45% {
    /* 2回目の「顔を出す」 */
    transform: translateX(-80px);
  }

  55% {
    /* ここでも一旦止まる（45%〜55%は同じ位置） */
    transform: translateX(-80px);
  }

  100% {
    /* ゆっくり右側へ通り過ぎて画面外へ */
    transform: translateX(320px);
  }
}

.liquid-loader {
  top: -80px;
  position: relative;
  background: #ff595e;
  filter: hue-rotate(0deg);
  animation: hue 2s infinite linear;
}

.liquid-wave {
  position: absolute;
  bottom: -150%;
  left: -25%;
  width: 150%;
  height: 150%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.7)
  );
  border-radius: 45%;
  animation: wave-fill 1.5s ease-in-out infinite, wave-move 3s linear infinite;
}

.liquid-wave::before {
  content: "";
  position: absolute;
  top: -28%;
  left: -25%;
  width: 170%;
  height: 170%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.5)
  );
  border-radius: 47%;
  animation: wave-fill 6s ease-in-out infinite reverse,
    wave-move 10s linear infinite;
}

.liquid-wave::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -35%;
  width: 170%;
  height: 170%;
  background: radial-gradient(
    circle at center,
    rgba(255, 0, 0, 0.6),
    rgba(0, 255, 0, 0.3)
  );
  border-radius: 48%;
  animation: wave-fill 15s ease-in-out infinite, wave-move 16s linear infinite;
}

@keyframes wave-fill {
  0%,
  100% {
    transform: translateY(20px) scale(1);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: translateY(0) scale(1.05);
    filter: hue-rotate(360deg);
  }
}

@keyframes wave-move {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

.bird10 {
  position: absolute;
  top: 0;
  left: 0;
}

.background {
  background-color: #076dff;
}

.card-loop {
  width: 300px;
  overflow: hidden;
  transform-style: preserve-3d;
  animation: spin-card 4s linear infinite;
}

@keyframes spin-card {
  0% {
    transform: rotateY(0deg);
  } /* 正面 */
  25% {
    transform: rotateY(90deg);
  } /* 側面（ほぼ見えない） */
  50% {
    transform: rotateY(180deg);
  } /* 裏向き */
  75% {
    transform: rotateY(270deg);
  } /* 側面2 */
  100% {
    transform: rotateY(360deg);
  } /* 再び正面 */
}

@keyframes jump {
  0% {
    transform: translateY(300px);
  }
  5% {
    transform: translateY(0px);
  }
  10% {
    transform: translateY(0px);
  }
  15% {
    transform: rotateY(180deg) translateX(30px);
  }
  20% {
    transform: rotateY(180deg) translateX(30px);
  }
  25% {
    transform: rotateY(0deg);
  }
  30% {
    transform: rotateY(0deg);
  }
  100% {
    transform: translateY(300px);
  }
}

.move {
  width: 300px;
  overflow: hidden;
  transform-style: preserve-3d;
  animation: jump 6s linear infinite;
}

.bird11 {
  mix-blend-mode: difference;
}

.bird12 {
  mix-blend-mode: hard-light;
}

.bird13 {
  mix-blend-mode: multiply;
}

.slide-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  animation: move-pos 3s linear infinite;
}

@keyframes move-pos {
  0% {
    object-view-box: inset(0 0);
  } /* 左から */
  10% {
    object-view-box: inset(100px -100px 0 0);
  } /* 右へ */
  30% {
    object-view-box: inset(100px -100px 0 0);
  } /* 右へ */
  40% {
    object-view-box: inset(150px 150px 150px 0);
  } /* 右へ */
  60% {
    object-view-box: inset(150px 150px 150px 0);
  } /* 右へ */
  70% {
    object-view-box: inset(0 150px 0 300px);
  } /* 右へ */
  90% {
    object-view-box: inset(0 150px 0 300px);
  } /* 右へ */
  100% {
    object-view-box: inset(0%);
  } /* 戻る */
}