/* =====================================================================
   sponsor.css — /sponsor (スポンサー窓口) 固有スタイル
   colophon の削除後、カード群レイアウトの言語だけこちらに残す形。
   ===================================================================== */

.sponsor-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 20px;
}

.sponsor-item {
    padding: 22px 24px;
}

/* 箇条書きは colo-principles と同じリズム (中黒 + 説明) */
.sponsor-points {
    margin: 12px 0 14px;
    padding-left: 22px;
    color: var(--text);
    line-height: 1.85;
}

.sponsor-points li + li {
    margin-top: 6px;
}

.sponsor-points strong {
    color: var(--text);
    font-weight: 700;
}

/* CTA ボタン群 (支援方法カード内) */
.sponsor-cta {
    margin: 16px 0 10px;
}

/* =====================================================================
   Sponsor CTA ボタン (.btn-sponsor)
   汎用 .btn-primary より一段華やかに: GitHub Sponsors のピンクグラデ +
   多層グロー + heart アイコンの脈動 + hover でリフト + 光沢の shimmer。
   ここは応援を促す「一意の CTA」なので、通常ボタンの語彙から意図的に外す。
   ===================================================================== */
.btn-sponsor {
    /* .btn 相当の土台 (padding/font は独自値で豪華に) */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    /* GitHub Sponsors 由来のピンク→ローズのグラデ (斜め 135°) */
    background: linear-gradient(135deg, var(--brand-sponsor) 0%, var(--brand-sponsor-2) 55%, var(--brand-sponsor) 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    /* 3 層エレベーション: 黒影 + ピンクグロー + 内側光沢 */
    box-shadow:
        0 10px 28px rgba(var(--brand-sponsor-rgb), 0.32),
        0 0 0 1px rgba(var(--brand-sponsor-rgb), 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    overflow: hidden;
    transition:
        transform var(--dur) var(--ease-spring),
        box-shadow var(--dur) var(--ease-out),
        background-position 0.6s var(--ease-out);
    isolation: isolate;
}

/* hover でリフト + グラデを流す + グローを強める */
.btn-sponsor:hover {
    transform: translateY(var(--lift-sm));
    background-position: 100% 50%;
    box-shadow:
        0 16px 40px rgba(var(--brand-sponsor-rgb), 0.45),
        0 0 0 1px rgba(var(--brand-sponsor-rgb), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-sponsor:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(var(--brand-sponsor-rgb), 0.45),
        0 10px 28px rgba(var(--brand-sponsor-rgb), 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* hover で走る光沢の shimmer (::before) */
.btn-sponsor::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 1;
    transition: none;
}

.btn-sponsor:hover::before {
    animation: sponsor-shimmer 0.9s var(--ease-out) forwards;
}

@keyframes sponsor-shimmer {
    from { left: -60%; }
    to   { left: 130%; }
}

/* heart アイコンの脈動 (常時ほんのり、hover で強く) */
.btn-sponsor-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    animation: sponsor-heart-pulse 2.2s ease-in-out infinite;
    z-index: 2;
}

.btn-sponsor-heart .fa-icon {
    width: 20px;
    height: 20px;
}

.btn-sponsor:hover .btn-sponsor-heart {
    animation-duration: 1.1s;
}

@keyframes sponsor-heart-pulse {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.18); }
    45%      { transform: scale(0.98); }
    60%      { transform: scale(1.12); }
}

/* 「新しいタブで開く」矢印 (小さめ、hover で少し離れる) */
.btn-sponsor-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    opacity: 0.7;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
    z-index: 2;
}

.btn-sponsor-arrow .fa-icon {
    width: 14px;
    height: 14px;
}

.btn-sponsor:hover .btn-sponsor-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}

/* テキストも影上に */
.btn-sponsor > span:not(.btn-sponsor-heart):not(.btn-sponsor-arrow) {
    z-index: 2;
}

/* アニメ抑制環境ではフラットに (脈動 / shimmer を停止) */
@media (prefers-reduced-motion: reduce) {
    .btn-sponsor,
    .btn-sponsor-heart,
    .btn-sponsor::before {
        animation: none;
        transition: none;
    }
    .btn-sponsor:hover {
        transform: none;
    }
}

/* 現在のスポンサー: 空状態 */
.sponsor-empty {
    color: var(--muted);
    font-style: italic;
    margin: 8px 0 0;
}

/* 現在のスポンサー: リスト */
.sponsor-thanks-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: grid;
    gap: 10px;
}

.sponsor-thanks-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

/* アイコン (画像 / 頭文字プレースホルダー共通の 36px 円) */
.sponsor-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.sponsor-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border-color: rgba(var(--accent-rgb), 0.35);
    text-transform: uppercase;
    font-size: 0.95rem;
}

/* 名前+ノートを縦積みするラッパ */
.sponsor-thanks-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sponsor-thanks-list a {
    color: var(--text);
    font-weight: 700;
}

.sponsor-thanks-note {
    color: var(--muted);
    font-size: 0.85rem;
}