/* about イントロ/興味/歩み
   extracted from refine.css (was L1591-1708)
   — render_head の cssLate[] 経由で refine.css の「後」に読み込まれる。
   元ファイル内で後方にあるルールに勝つ前提で書かれているため、
   css[] (refine.css の前) に置くとカスケードが逆転する。 */

/* about: イントロを「プロフィールヒーローパネル」に — ガラス面 + アバター側から
   差す青のラジアルグロー。ヒーローの言語（グラデリング/グラデ文字）と接続する。 */
.about-intro {
    position: relative;
    overflow: hidden;
    padding: 36px 34px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background:
        radial-gradient(560px 320px at 10% 0%, rgba(var(--accent-rgb), 0.10), transparent 62%),
        radial-gradient(420px 300px at 100% 100%, rgba(var(--accent-2-rgb), 0.05), transparent 60%),
        var(--grad-glass-top),
        var(--surface);
    box-shadow: var(--glass-hilite), var(--shadow-sm);
}

@media (max-width: 768px) {
    .about-intro {
        padding: 26px 18px;
    }
}

/* アバターのグラデリング（.profile-icon の conic 版とは別に静的グラデで軽く） */
.about-avatar {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent) 45%, var(--accent-2)) border-box;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25), 0 0 34px rgba(var(--accent-rgb), 0.22), var(--shadow);
}

.about-avatar:hover {
    border-color: transparent;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .about-handle {
        font-size: 1.3rem;
        background: var(--grad-heading);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* about: 興味カードを分野色（--tint）で染める — Web=青 / AI=Claudeオレンジ / セキュリティ=緑。
   AI は Claude 本家のブランドカラーに合わせて、tech-tag チップの Claude アイコンとも
   同一トーンで揃える（サイト全体で Claude 表現＝オレンジの一貫性を保つ）。
   nth-child 依存: カードの追加・並べ替え時は割当を見直すこと。 */
.about-cards .interest-card:nth-child(1) { --tint: var(--accent-rgb); }
.about-cards .interest-card:nth-child(2) { --tint: var(--brand-claude-rgb); }
.about-cards .interest-card:nth-child(3) { --tint: var(--brand-security-rgb); }

.interest-card .interest-icon {
    background: linear-gradient(135deg, rgba(var(--tint), 0.18), rgba(var(--tint), 0.06));
    border-color: rgba(var(--tint), 0.26);
    color: rgb(var(--tint));
}

.interest-card::before {
    background: linear-gradient(90deg, rgb(var(--tint)), rgba(var(--tint), 0.35));
}

.interest-card:hover {
    border-color: rgba(var(--tint), 0.35);
    box-shadow: var(--glass-hilite), var(--shadow-lg), 0 0 0 1px rgba(var(--tint), 0.16), 0 0 24px rgba(var(--tint), 0.16);
}

.interest-card:hover::before {
    box-shadow: 0 0 12px rgba(var(--tint), 0.4);
}

/* about: 歩みタイムラインをデスクトップだけ横型4ステップの旅程に。
   線は過去（左）が暗く「いま」へ向かって青く明るくなる。過去のドットは
   消灯し、now-pulse を持つ現在地だけが灯る。モバイルは縦のまま。 */
@media (min-width: 769px) {
    .about-timeline {
        max-width: none;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
    }

    .about-timeline::before {
        left: 10px;
        right: 10px;
        top: 9px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--border-bright), rgba(var(--accent-rgb), 0.7) 82%, var(--accent));
    }

    .about-timeline .timeline-item {
        padding-left: 0;
        padding-top: 34px;
        margin-bottom: 0;
    }

    .about-timeline .timeline-item::before {
        left: 2px;
        top: 2px;
    }

    /* 縦型用のドット→カードコネクタは横型では不要 */
    .about-timeline .timeline-item::after {
        content: none;
    }

    .about-timeline .timeline-content {
        height: 100%;
    }
}

/* 過去は消灯、「いま」だけ青（全幅共通の階層づけ） */
.about-timeline .timeline-item:not(.is-current)::before {
    background: var(--surface-2);
    box-shadow: 0 0 0 2px var(--border-bright);
}