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

/* =====================================================================
   H. スキルバー — 溝の彫り込み + ブランド色グロー + 充填後に1回だけ走るシャイン
   （--brand / --lvl は render_skill() の既存注入機構をそのまま使う）
   ===================================================================== */
.skill-bar {
    background: rgba(255, 255, 255, 0.07);
    /* 25%刻みの目盛り線で「計器」の顔にする */
    background-image: repeating-linear-gradient(90deg,
        transparent 0 calc(25% - 1px), rgba(255, 255, 255, 0.08) calc(25% - 1px) 25%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}

.skill-level {
    position: relative;
    /* シャイン(::after)は fill-mode both で終了後 translateX(100%)＝フィルの右隣に
       残る。クリップしないと空きトラック上に光沢が永続表示される（実バグだった） */
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ブランド色グロー + アイコンタイルのブランド地 + 充填のブランドグラデ。
   color-mix 非対応環境は現状維持（自然フォールバック） */
@supports (color: color-mix(in srgb, red, blue)) {
    .skill-level {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                    0 0 12px color-mix(in srgb, var(--brand, var(--accent)) 40%, transparent);
        background-image: linear-gradient(90deg,
            color-mix(in srgb, var(--brand, var(--accent)) 72%, #0a0e14), var(--brand, var(--accent)));
    }

    .skill-icon {
        background: linear-gradient(135deg, color-mix(in srgb, var(--brand, var(--accent)) 16%, transparent), rgba(255, 255, 255, 0.02));
        border-color: color-mix(in srgb, var(--brand, var(--accent)) 30%, transparent);
        box-shadow: var(--glass-hilite);
    }

    .skill:hover .skill-icon {
        box-shadow: var(--glass-hilite), 0 0 14px color-mix(in srgb, var(--brand, var(--accent)) 25%, transparent);
    }
}

/* 充填完了後に1回だけ走るシャイン（transform のみ・1回限り） */
body.js .skills-graph.in-view .skill-level::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: bar-shine 0.9s var(--ease-out) 1s both;
}

@keyframes bar-shine {
    to {
        transform: translateX(100%);
    }
}

/* 先端の光点（静的・アニメなし）。.in-view ゲートで width:0 時の左端事故を防ぐ */
body.js .skills-graph.in-view .skill-level::before {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    filter: blur(2px);
}