* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  padding: 40px;
  background: #f5f5f5;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.variation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.variation p {
  font-family: sans-serif;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.app-icon-container {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1);
}

.gradient-bg {
  position: absolute;
  inset: 0;
  background-size: 300% 300%;
}

/* ベースのクリーム系グラデーション */
.gradient-cream {
  background: linear-gradient(
    45deg,
    #FFF8E7,
    #FFE4C4,
    #FFDAB9,
    #FFF8E7
  );
  animation: gradientShift 6s ease infinite;
}

/* 赤系グラデーション（通常） */
.gradient-red {
  background: linear-gradient(
    45deg,
    #FFB07C,
    #E8837C,
    #D65D5D,
    #FFB07C
  );
  opacity: 0;
}

/* 赤系グラデーション（より濃い） */
.gradient-red-deep {
  background: linear-gradient(
    45deg,
    #E85A4F,
    #C41E3A,
    #8B0000,
    #E85A4F
  );
  opacity: 0;
}

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

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

/* 1: ゆっくり・薄め (8秒, max 40%) */
.v1 .gradient-red {
  animation: gradientShift 8s ease infinite, fadeV1 8s ease-in-out infinite;
}
@keyframes fadeV1 {
  0%, 60%, 100% { opacity: 0; }
  80% { opacity: 0.4; }
}

/* 2: ゆっくり・濃いめ (8秒, max 90%) */
.v2 .gradient-red {
  animation: gradientShift 8s ease infinite, fadeV2 8s ease-in-out infinite;
}
@keyframes fadeV2 {
  0%, 60%, 100% { opacity: 0; }
  80% { opacity: 0.9; }
}

/* 3: 普通・薄め (5秒, max 35%) */
.v3 .gradient-red {
  animation: gradientShift 5s ease infinite, fadeV3 5s ease-in-out infinite;
}
@keyframes fadeV3 {
  0%, 65%, 100% { opacity: 0; }
  80% { opacity: 0.35; }
}

/* 4: 普通・中間 (5秒, max 60%) */
.v4 .gradient-red {
  animation: gradientShift 5s ease infinite, fadeV4 5s ease-in-out infinite;
}
@keyframes fadeV4 {
  0%, 65%, 100% { opacity: 0; }
  80% { opacity: 0.6; }
}

/* 5: 普通・濃いめ (5秒, max 100%) */
.v5 .gradient-red {
  animation: gradientShift 5s ease infinite, fadeV5 5s ease-in-out infinite;
}
@keyframes fadeV5 {
  0%, 65%, 100% { opacity: 0; }
  80% { opacity: 1; }
}

/* 6: 速め・薄め (3秒, max 40%) */
.v6 .gradient-red {
  animation: gradientShift 3s ease infinite, fadeV6 3s ease-in-out infinite;
}
@keyframes fadeV6 {
  0%, 60%, 100% { opacity: 0; }
  75% { opacity: 0.4; }
}

/* 7: 速め・濃いめ (3秒, max 90%) */
.v7 .gradient-red {
  animation: gradientShift 3s ease infinite, fadeV7 3s ease-in-out infinite;
}
@keyframes fadeV7 {
  0%, 60%, 100% { opacity: 0; }
  75% { opacity: 0.9; }
}

/* 8: とても速い・中間 (1.5秒, max 70%) */
.v8 .gradient-red {
  animation: gradientShift 2s ease infinite, fadeV8 1.5s ease-in-out infinite;
}
@keyframes fadeV8 {
  0%, 50%, 100% { opacity: 0; }
  70% { opacity: 0.7; }
}

/* 9: パルス風・濃いめ (2秒, シャープな変化) */
.v9 .gradient-red {
  animation: gradientShift 4s ease infinite, fadeV9 2s ease-in-out infinite;
}
@keyframes fadeV9 {
  0%, 40%, 100% { opacity: 0; }
  50% { opacity: 0.95; }
  60% { opacity: 0; }
}

/* 10: 超濃い・ドラマチック (6秒, 深い赤) */
.v10 .gradient-red-deep {
  animation: gradientShift 6s ease infinite, fadeV10 6s ease-in-out infinite;
}
@keyframes fadeV10 {
  0%, 55%, 100% { opacity: 0; }
  75% { opacity: 1; }
}

.app-icon {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  z-index: 1;
}

/* ===== 単色系バリエーション ===== */

/* クリーム系のみのグラデーション */
.gradient-cream-only {
  background: linear-gradient(
    45deg,
    #FFF8E7,
    #FFE4C4,
    #FFDAB9,
    #FFE5B4,
    #FFF0DB,
    #FFF8E7
  );
  background-size: 400% 400%;
}

/* 赤系のみのグラデーション */
.gradient-red-only {
  background: linear-gradient(
    45deg,
    #FFB07C,
    #E8837C,
    #D65D5D,
    #E07B6A,
    #F09878,
    #FFB07C
  );
  background-size: 400% 400%;
}

/* 11: クリームのみ・ゆっくり (10秒) */
.v11 .gradient-cream-only {
  animation: gradientShiftSlow 10s ease infinite;
}

/* 12: クリームのみ・普通 (6秒) */
.v12 .gradient-cream-only {
  animation: gradientShift 6s ease infinite;
}

/* 13: クリームのみ・回転 */
.v13 .gradient-cream-only {
  animation: gradientRotate 8s linear infinite;
}

/* 14: 赤系のみ・ゆっくり (10秒) */
.v14 .gradient-red-only {
  animation: gradientShiftSlow 10s ease infinite;
}

/* 15: 赤系のみ・普通 (6秒) */
.v15 .gradient-red-only {
  animation: gradientShift 6s ease infinite;
}

/* 16: 赤系のみ・回転 */
.v16 .gradient-red-only {
  animation: gradientRotate 8s linear infinite;
}

@keyframes gradientShiftSlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 100%;
  }
}

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

/* ===== 光沢系バリエーション ===== */

/* 光沢オーバーレイ（基本） */
.shine-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 55%,
    rgba(255, 255, 255, 0) 65%,
    transparent 80%
  );
  background-size: 300% 100%;
  background-position: 200% 0;
}

/* 光沢強め（白） */
.shine-strong {
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.5) 42%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.5) 58%,
    rgba(255, 255, 255, 0) 70%,
    transparent 85%
  );
}

/* 光沢オーバーレイ（黄色） */
.shine-yellow {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 230, 100, 0) 35%,
    rgba(255, 230, 100, 0.5) 45%,
    rgba(255, 240, 150, 0.7) 50%,
    rgba(255, 230, 100, 0.5) 55%,
    rgba(255, 230, 100, 0) 65%,
    transparent 80%
  );
  background-size: 300% 100%;
  background-position: 200% 0;
}

/* 光沢強め（黄色） */
.shine-yellow.shine-strong {
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(255, 230, 100, 0) 30%,
    rgba(255, 230, 100, 0.6) 42%,
    rgba(255, 245, 157, 0.9) 50%,
    rgba(255, 230, 100, 0.6) 58%,
    rgba(255, 230, 100, 0) 70%,
    transparent 85%
  );
}

/* 17: クリーム・光沢ゆっくり */
.v17 .gradient-cream-only {
  animation: gradientShiftSlow 10s ease infinite;
}
.v17 .shine-overlay {
  animation: shineSlow 4s ease-in-out infinite;
}

/* 18: クリーム・光沢速め */
.v18 .gradient-cream-only {
  animation: gradientShift 6s ease infinite;
}
.v18 .shine-overlay {
  animation: shineFast 2s ease-in-out infinite;
}

/* 19: クリーム・光沢強め */
.v19 .gradient-cream-only {
  animation: gradientShift 6s ease infinite;
}
.v19 .shine-overlay {
  animation: shineSlow 3s ease-in-out infinite;
}

/* 20: 赤系・光沢ゆっくり */
.v20 .gradient-red-only {
  animation: gradientShiftSlow 10s ease infinite;
}
.v20 .shine-overlay {
  animation: shineSlow 4s ease-in-out infinite;
}

/* 21: 赤系・光沢速め */
.v21 .gradient-red-only {
  animation: gradientShift 6s ease infinite;
}
.v21 .shine-overlay {
  animation: shineFast 2s ease-in-out infinite;
}

/* 22: 赤系・光沢強め */
.v22 .gradient-red-only {
  animation: gradientShift 6s ease infinite;
}
.v22 .shine-overlay {
  animation: shineSlow 3s ease-in-out infinite;
}

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

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

/* ホバー時のエフェクト */
.app-icon-container:hover {
  transform: scale(1.08);
  transition: transform 0.3s ease;
}