/**
 * Advanced Gradient Typography
 * Phase 4: Typography Art - Extended Gradient Variations
 */

/* ================================
   多彩なグラデーションパターン
   ================================ */

/* 虹色グラデーション */
.gradient-rainbow {
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ff7f00 16.66%,
    #ffff00 33.33%,
    #00ff00 50%,
    #0000ff 66.66%,
    #4b0082 83.33%,
    #9400d3 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-slide 5s linear infinite;
}

@keyframes rainbow-slide {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 夕焼けグラデーション */
.gradient-sunset {
  background: linear-gradient(
    135deg,
    #ff6b6b 0%,
    #ee5a6f 25%,
    #c06c84 50%,
    #6c5b7b 75%,
    #355c7d 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease infinite;
}

/* オーロラグラデーション */
.gradient-aurora {
  background: linear-gradient(
    135deg,
    #00c9ff 0%,
    #92fe9d 25%,
    #fa709a 50%,
    #fee140 75%,
    #30cfd0 100%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-shift 8s ease infinite;
}

@keyframes aurora-shift {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}

/* ネオングラデーション */
.gradient-neon {
  background: linear-gradient(
    90deg,
    #ff00ff 0%,
    #00ffff 50%,
    #ff00ff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: neon-glow 3s ease infinite;
  filter: drop-shadow(0 0 10px currentColor);
}

@keyframes neon-glow {
  0%, 100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 10px #ff00ff);
  }
  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 20px #00ffff);
  }
}

/* ファイアグラデーション */
.gradient-fire {
  background: linear-gradient(
    180deg,
    #ff0000 0%,
    #ff4500 25%,
    #ff8c00 50%,
    #ffd700 75%,
    #ffff00 100%
  );
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fire-flicker 2s ease infinite;
}

@keyframes fire-flicker {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
}

/* アイスグラデーション */
.gradient-ice {
  background: linear-gradient(
    135deg,
    #a8edea 0%,
    #fed6e3 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 5s ease infinite;
}

/* メタリックゴールド */
.gradient-gold {
  background: linear-gradient(
    135deg,
    #ffd700 0%,
    #ffed4e 25%,
    #ffd700 50%,
    #b8860b 75%,
    #ffd700 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metal-shine 4s linear infinite;
}

@keyframes metal-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* メタリックシルバー */
.gradient-silver {
  background: linear-gradient(
    135deg,
    #c0c0c0 0%,
    #f8f8f8 25%,
    #c0c0c0 50%,
    #a8a8a8 75%,
    #c0c0c0 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metal-shine 4s linear infinite;
}

/* ================================
   メンバーカラーの拡張グラデーション
   ================================ */

/* ねむ (Nemu) - ピンク系バリエーション */
.gradient-nemu-warm {
  background: linear-gradient(
    135deg,
    #ff69b4 0%,
    #ec4899 50%,
    #db2777 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

.gradient-nemu-soft {
  background: linear-gradient(
    135deg,
    #fce7f3 0%,
    #fbcfe8 50%,
    #f9a8d4 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* らむね (Ramune) - シアン系バリエーション */
.gradient-ramune-ocean {
  background: linear-gradient(
    135deg,
    #06b6d4 0%,
    #0891b2 50%,
    #0e7490 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

.gradient-ramune-sky {
  background: linear-gradient(
    135deg,
    #e0f2fe 0%,
    #bae6fd 50%,
    #7dd3fc 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* おしるこ (Oshiruko) - パープル系バリエーション */
.gradient-oshiruko-deep {
  background: linear-gradient(
    135deg,
    #a855f7 0%,
    #9333ea 50%,
    #7e22ce 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

.gradient-oshiruko-light {
  background: linear-gradient(
    135deg,
    #f3e8ff 0%,
    #e9d5ff 50%,
    #d8b4fe 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* くるる (Kururu) - イエロー系バリエーション */
.gradient-kururu-bright {
  background: linear-gradient(
    135deg,
    #fbbf24 0%,
    #f59e0b 50%,
    #d97706 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

.gradient-kururu-soft {
  background: linear-gradient(
    135deg,
    #fef3c7 0%,
    #fde68a 50%,
    #fcd34d 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================================
   グラデーションテキストの装飾エフェクト
   ================================ */

/* グラデーション + シャドウ */
.gradient-with-shadow {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

[data-theme="dark"] .gradient-with-shadow {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

/* グラデーション + グロー */
.gradient-with-glow {
  filter: drop-shadow(0 0 20px currentColor);
}

/* グラデーション + ブラー背景 */
.gradient-with-blur {
  position: relative;
}

.gradient-with-blur::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(20px);
  opacity: 0.5;
}

/* ================================
   アニメーションバリエーション
   ================================ */

/* 脈動グラデーション */
.gradient-pulse {
  background: linear-gradient(
    135deg,
    var(--accent-pink),
    var(--accent-purple),
    var(--accent-cyan)
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-pulse 2s ease-in-out infinite;
}

@keyframes gradient-pulse {
  0%, 100% {
    background-position: 0% 50%;
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.8;
  }
}

/* 回転グラデーション */
.gradient-rotate {
  background: conic-gradient(
    from 0deg,
    var(--accent-pink),
    var(--accent-purple),
    var(--accent-cyan),
    var(--accent-yellow),
    var(--accent-pink)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-rotate-anim 4s linear infinite;
}

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

/* ================================
   レスポンシブ調整
   ================================ */

@media (max-width: 768px) {
  /* モバイルでは一部のアニメーションを簡素化 */
  .gradient-aurora,
  .gradient-rainbow {
    animation-duration: 10s; /* より長い周期に */
  }
}

/* ================================
   アクセシビリティ: モーション削減
   ================================ */

@media (prefers-reduced-motion: reduce) {
  .gradient-rainbow,
  .gradient-sunset,
  .gradient-aurora,
  .gradient-neon,
  .gradient-fire,
  .gradient-gold,
  .gradient-silver,
  .gradient-pulse,
  .gradient-rotate,
  .gradient-nemu-warm,
  .gradient-ramune-ocean,
  .gradient-oshiruko-deep,
  .gradient-kururu-bright {
    animation: none !important;
    background-position: 50% 50%;
  }

  .gradient-with-glow,
  .gradient-with-shadow {
    filter: none;
  }
}