/* css/styles.css - カスタムスタイルとアニメーション */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');

:root {
  --font-rounded: 'M PLUS Rounded 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-en: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  font-family: var(--font-rounded);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background-color: #f8fafc;
}

/* 英語テキスト部分を英字フォントに */
.font-en {
  font-family: var(--font-en);
}

/* スクロールバー非表示（モバイルライクな体験） */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* アニメーションキーフレーム */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@keyframes scaleUp {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pulseSlow {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes micRipple {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes cardFlip {
  0% { transform: rotateY(0deg) scale(0.9); }
  50% { transform: rotateY(90deg) scale(1.05); }
  100% { transform: rotateY(0deg) scale(1); }
}

@keyframes rainbowGlow {
  0% { filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.6)); }
  33% { filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6)); }
  66% { filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6)); }
  100% { filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.6)); }
}

.animate-shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

.animate-scale-up {
  animation: scaleUp 0.25s ease-out both;
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out both;
}

.animate-pulse-slow {
  animation: pulseSlow 2s infinite ease-in-out;
}

.animate-mic-ripple {
  animation: micRipple 1.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.animate-card-flip {
  animation: cardFlip 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-rainbow {
  animation: rainbowGlow 3s infinite linear;
}

/* 立体感・ボタン押し込み表現 */
.btn-3d {
  transition: all 0.1s ease;
}
.btn-3d:active {
  transform: translateY(2px);
  box-shadow: none !important;
}

/* トレカのキラキラホログラムオーバーレイ効果 */
.ssr-hologram {
  position: relative;
  overflow: hidden;
}
.ssr-hologram::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.35) 55%,
    transparent 70%
  );
  transform: rotate(25deg);
  pointer-events: none;
  animation: holoSwipe 4s infinite linear;
}

@keyframes holoSwipe {
  0% { transform: translateY(-50%) rotate(25deg); }
  50% { transform: translateY(20%) rotate(25deg); }
  100% { transform: translateY(-50%) rotate(25deg); }
}