/* ============================================================
   Beauty Gradients — Re:Body グラデーション背景
   accent: #E8729A / soft: #F5D7D2 / bg: #FFFAF7
   ============================================================ */

/* ── セクション背景グラデーション ── */

/* ウォームホワイト基調 */
.bg-beauty-warm {
  background: linear-gradient(180deg, #FFFAF7 0%, #FBF5F1 100%);
}

/* シェルピンク基調 */
.bg-beauty-shell {
  background: linear-gradient(135deg, #FFFAF7 0%, #F5D7D2 100%);
}

/* ローズグラデーション(濃い) */
.bg-beauty-rose {
  background: linear-gradient(135deg, #F5D7D2 0%, #E8729A 100%);
}

/* ダーク(ストーリー等) */
.bg-beauty-dark {
  background: linear-gradient(160deg, #2C2C2E 0%, #3A2A2E 100%);
}

/* パール(薄い光沢感) */
.bg-beauty-pearl {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(245,215,210,0.6) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(232,114,154,0.1) 0%, transparent 60%),
    #FFFAF7;
}

/* メッシュグラデーション(FV用) */
.bg-beauty-mesh {
  background:
    radial-gradient(at 0% 0%,   rgba(245,215,210,0.7) 0%, transparent 50%),
    radial-gradient(at 100% 0%, rgba(232,114,154,0.2) 0%, transparent 50%),
    radial-gradient(at 50% 100%, rgba(245,215,210,0.4) 0%, transparent 50%),
    #FFFAF7;
}

/* ── テキストグラデーション ── */

/* グラデーションテキスト */
.text-gradient-rose {
  background: linear-gradient(135deg, #E8729A 0%, #C0527A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── ボーダーグラデーション ── */

.border-gradient-rose {
  border: 2px solid transparent;
  background:
    linear-gradient(#FFFAF7, #FFFAF7) padding-box,
    linear-gradient(135deg, #E8729A, #F5D7D2) border-box;
  border-radius: 12px;
}

/* ── セパレーター ── */

/* グラデーション横線 */
.deco-separator-rose {
  height: 2px;
  background: linear-gradient(90deg, transparent, #E8729A 30%, #E8729A 70%, transparent);
  margin: var(--space-12, 3rem) 0;
  border: none;
}

/* 波型セパレーター */
.deco-wave-separator {
  display: block;
  width: 100%;
  height: 50px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q300 0 600 25 T1200 25 V50 H0 Z' fill='%23F5D7D2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.deco-wave-separator-white {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0 25 Q300 0 600 25 T1200 25 V50 H0 Z' fill='%23FFFAF7'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ── ドット・パターン ── */

/* ソフトドット */
.deco-dots-beauty {
  background-image: radial-gradient(rgba(232,114,154,0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ── CTA 光彩 ── */

.cta-glow {
  box-shadow:
    0 0 0 0 rgba(232,114,154,0),
    0 4px 24px rgba(232,114,154,0.35);
  animation: cta-shimmer 2.5s ease-in-out infinite;
}

@keyframes cta-shimmer {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(232,114,154,0.3), 0 0 0 0 rgba(232,114,154,0);
  }
  50% {
    box-shadow: 0 4px 30px rgba(232,114,154,0.5), 0 0 0 8px rgba(232,114,154,0.08);
  }
}