/* ============================================================
   くまのみなみ Official — animations.css
   海・クマノミ・泡 をモチーフにしたアニメーション
   ============================================================ */

/* ============================================================
   キーフレーム定義
   ============================================================ */

/* 浮遊アニメ（キャラクター） */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

/* 泡が浮き上がる */
@keyframes bubble-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0.6; }
  50%  { transform: translateY(-40vh) scale(1.05); opacity: 0.4; }
  100% { transform: translateY(-80vh) scale(0.8); opacity: 0; }
}

/* 配信中バッジ pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.5; }
}

/* スクロール矢印バウンス */
@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%       { transform: rotate(45deg) translate(4px, 4px); }
}

/* カード ホバーリフト（CSS でも使えるよう定義） */
@keyframes hover-lift {
  from { transform: translateY(0); box-shadow: var(--shadow-card); }
  to   { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
}

/* フェードイン（スクロール表示） */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 波紋（ロゴ周り装飾） */
@keyframes ripple {
  0%   { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* シマシマ（クマノミ柄）アニメ */
@keyframes stripe-shift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 0; }
}

/* ============================================================
   バブル（泡）パーティクル
   JS で .km-bubble を動的生成し適用
   ============================================================ */
.km-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.6), rgba(93, 201, 201, 0.15));
  border: 1px solid rgba(93, 201, 201, 0.3);
  pointer-events: none;
  animation: bubble-rise linear infinite;
}

/* ============================================================
   スクロールアニメーション（IntersectionObserver で付与）
   ============================================================ */
.km-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.km-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 左から */
.km-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.km-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 右から */
.km-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.km-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 遅延クラス */
.km-delay-1 { transition-delay: 0.1s; }
.km-delay-2 { transition-delay: 0.2s; }
.km-delay-3 { transition-delay: 0.3s; }
.km-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   ライブバッジ
   ============================================================ */
.km-badge-live {
  animation: none; /* バッジ自体は動かさず中のドットのみ */
}

.km-badge-live .live-dot {
  animation: pulse 1.5s ease-in-out infinite;
}

/* ============================================================
   ハンバーガーメニュー アニメーション
   ============================================================ */
.km-hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.km-hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.km-hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.km-hamburger span {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ============================================================
   キャラクター紹介 — Live2D エリアのキラキラ
   ============================================================ */
.km-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
  animation: sparkle-fade 1.2s ease-out forwards;
}

@keyframes sparkle-fade {
  0%   { transform: scale(0) rotate(0deg); opacity: 1; }
  50%  { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg) translateY(-20px); opacity: 0; }
}

/* ============================================================
   ページトランジション（Barba.js 不使用の場合は不要）
   ============================================================ */
.km-page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}

.km-page-transition-overlay.is-entering {
  transform: translateY(0%);
}

.km-page-transition-overlay.is-leaving {
  transform: translateY(-100%);
}

/* ============================================================
   reduced-motion 対応（アクセシビリティ）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .km-hero-char-img {
    animation: none;
  }
}