/* アニメーション & トランジション */

/* フェードイン */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn var(--transition-base);
}

/* スライドアップ */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-up {
  animation: slideUp var(--transition-base);
}

/* スライドダウン */
@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-down {
  animation: slideDown var(--transition-base);
}

/* スケールイン */
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.scale-in {
  animation: scaleIn var(--transition-base);
}

/* ローディングスピナー */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--bg-tertiary);
  border-top-color: var(--hphb-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

/* パルスアニメーション（HPHB獲得時など） */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.pulse {
  animation: pulse 1s ease-in-out infinite;
}

/* HPHB獲得アニメーション */
@keyframes hphbEarned {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-40px) scale(0.8);
    opacity: 0;
  }
}

.hphb-earned {
  animation: hphbEarned 1s ease-out forwards;
}

/* 同時視聴インジケーターアニメーション */
@keyframes activeIndicator {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

.active-indicator {
  animation: activeIndicator 2s ease-in-out infinite;
}

/* メンバーアバターのオンライン表示 */
@keyframes onlinePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(79, 172, 254, 0);
  }
}

.avatar-online::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: #4ade80;
  border: 2px solid var(--bg-secondary);
  border-radius: var(--radius-full);
  animation: onlinePulse 2s ease-in-out infinite;
}

/* ホバーエフェクト（PC向け） */
@media (hover: hover) {
  .hover-lift {
    transition: transform var(--transition-base);
  }
  
  .hover-lift:hover {
    transform: translateY(-4px);
  }
  
  .hover-scale {
    transition: transform var(--transition-base);
  }
  
  .hover-scale:hover {
    transform: scale(1.05);
  }
  
  .hover-glow {
    transition: box-shadow var(--transition-base);
  }
  
  .hover-glow:hover {
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.3);
  }
}

/* トランジションクラス */
.transition-fast {
  transition: all var(--transition-fast);
}

.transition-base {
  transition: all var(--transition-base);
}

.transition-slow {
  transition: all var(--transition-slow);
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* ビューポートアニメーション（スクロール時に表示） */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

/* スタガーアニメーション（リストアイテム用） */
.stagger-item {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }

/* シェイクアニメーション（エラー時など） */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* スケルトンローディング */
@keyframes skeletonLoading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 0px,
    var(--bg-tertiary) 40px,
    var(--bg-secondary) 80px
  );
  background-size: 200px 100%;
  animation: skeletonLoading 1.5s ease-in-out infinite;
  border-radius: var(--radius-button);
}

/* ボタンクリックエフェクト */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.3);
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  left: 50%;
  top: 50%;
  transform: scale(0);
  opacity: 1;
}

.btn-ripple:active::after {
  animation: ripple 0.6s ease-out;
}

/* モーダル表示アニメーション */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-backdrop {
  animation: modalFadeIn var(--transition-base);
}

.modal-content {
  animation: modalSlideUp var(--transition-base);
}

/* ツールチップアニメーション */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tooltip {
  animation: tooltipFadeIn var(--transition-fast);
}