/* ai ステージ/ステップ/役割/Clawd + ノート罫
   extracted from refine.css (was L1769-1959)
   — render_head の cssLate[] 経由で refine.css の「後」に読み込まれる。
   元ファイル内で後方にあるルールに勝つ前提で書かれているため、
   css[] (refine.css の前) に置くとカスケードが逆転する。 */

/* ai: Built with Claude をコンテナ全幅の「ステージカード」に格上げ。
   Claude本家カラー（--brand-claude-rgb）は右上コーナーの光として脇役起用し、
   青の光だまりを左下に対置して青主役を維持する。 */
.ai-card {
    max-width: none;
    padding: 34px 32px;
    border-color: rgba(var(--brand-claude-rgb), 0.24);
    background-image:
        radial-gradient(520px 260px at 88% -20%, rgba(var(--brand-claude-rgb), 0.12), transparent 70%),
        radial-gradient(420px 240px at 0% 110%, rgba(var(--accent-rgb), 0.10), transparent 70%),
        var(--grad-glass-top);
    box-shadow: var(--glass-hilite), 0 0 0 1px rgba(var(--brand-claude-rgb), 0.10), 0 18px 44px rgba(0, 0, 0, 0.30);
}

.ai-card .ai-card-icon {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    background: linear-gradient(135deg, rgba(var(--brand-claude-rgb), 0.20), rgba(var(--accent-rgb), 0.12));
    border-color: rgba(var(--brand-claude-rgb), 0.30);
    /* タイルの背景/縁だけでなく、Claudeロゴのグリフ自体もオレンジにする
       （style.css の基底 .ai-card-icon { color: var(--accent) } は青のため上書きが必要）。 */
    color: var(--brand-claude);
}

.ai-card .card-title {
    font-size: 1.4rem;
}

/* ai: 「どう使っているか」4カードに 01〜04 の透かしステップ番号。
   CSS生成の装飾数字（alt構文で読み上げには乗せない）。 */
.ai-grid {
    counter-reset: ai-flow;
}

.ai-flow-card {
    counter-increment: ai-flow;
}

.ai-flow-card .card-title::after {
    content: counter(ai-flow, decimal-leading-zero) / "";
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(var(--accent-rgb), 0.16);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

@media (hover: hover) {
    .ai-flow-card:hover .card-title::after {
        color: rgba(var(--accent-rgb), 0.30);
    }
}

/* ai: 役割分担カードのコーナーブラケットをミラーリング配色に
   （1枚目=AI側=Claudeオレンジ / 2枚目=自分側=青。順序変更時は色が入れ替わる点に注意）。
   console.css の .card::before は「L字ブラケット」に転用済みで background:none
   なので、ここは background/opacity ではなく罫の色 (border-color) で表現する。
   旧実装は background に色を塗っていたため、console.css の 12x12 ブラケット
   領域がグラデ塗りの四角として浮いて見える回帰があった。 */
.ai-split .ai-role-card:nth-child(1)::before {
    border-top-color: var(--brand-claude);
    border-left-color: var(--brand-claude);
}

.ai-split .ai-role-card:nth-child(2)::before {
    border-top-color: var(--accent);
    border-left-color: var(--accent);
}

.ai-split .ai-role-card:nth-child(1) .ai-role-tag {
    color: var(--brand-claude);
}

.ai-split .ai-role-card:nth-child(1):hover {
    border-color: rgba(var(--brand-claude-rgb), 0.35);
}

/* ai: Clawd（Claude Code のマスコット）— Built with Claude カードの縁で暮らすギミック。
   .clawd-anim: 実物GIF由来の透過スプライトシート（47コマ・3619x58px）を steps() で
   駒送りする本編。直立→しゃがみ→腕振り→ジャンプ→横向き足踏み→振り返りの原本ループ。
   .clawd(SVG): 静止フォールバック。既定はこちらを表示し、「動きOK」の環境でだけ
   本編に切り替える（reduced-motion では静止SVGのまま = 三重ガードと同思想）。
   両者は同じ frame0 の実測ピクセル（77x58）を座標系に使うため、位置指定は共通。
   bottom:0 でカード内に収める（負値にすると .card の overflow:hidden で脚が
   欠けて見える実バグがあったため、ここで完全に収まる値に統一）。 */
.clawd,
.clawd-anim {
    position: absolute;
    right: 24px;
    bottom: 0;
    width: 77px;
    height: 58px;
    pointer-events: none;
}

.clawd-anim {
    display: none;
    background: url("../img/clawd-sprite.png") no-repeat 0 0;
    image-rendering: pixelated;
    transition: transform 0.35s var(--ease-spring);
    /* 原本は 60/70ms 交互・総尺約3.13s。等間隔 steps(47) で近似（1コマ≒66.6ms） */
    animation: clawd-live 3.13s steps(47) infinite;
}

@keyframes clawd-live {
    to {
        background-position: -3619px 0;
    }
}

/* 動きを許可した環境でだけスプライト本編に切り替える */
@media (prefers-reduced-motion: no-preference) {
    .clawd-anim {
        display: block;
    }

    .ai-card .clawd {
        display: none;
    }
}

.ai-card:hover .clawd-anim {
    transform: translateY(-9px);
}


/* ai: 「向き合い方」ノートにClaudeオレンジのアクセント罫（brand-claude の脇役起用） */
.ai-note {
    border-left: 3px solid var(--brand-claude);
    background: linear-gradient(90deg, rgba(var(--brand-claude-rgb), 0.08), transparent 60%), var(--surface);
    box-shadow: var(--glass-hilite);
}