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

/* =====================================================================
   ヒーロー — オーロラ2層の超低速ドリフト / 青系グラデの名前 / conic の光輪
   v4: 縦の余白を広げ、CTA を大きくして「顔」としての存在感を強化。
   ===================================================================== */
.hero {
    position: relative;
    /* オーロラ(::before/::after)が scale/translate で親より大きくなり、中間幅で
       右に数px はみ出して横スクロールを生む。純装飾なので横方向だけクリップして
       封じ込める（縦の影や発光は clip しないよう overflow-x のみ）。 */
    overflow-x: clip;
}

@media (min-width: 769px) {
    .hero {
        padding-top: 104px;
        padding-bottom: 72px;
    }
}

.subtext {
    font-size: 1.22rem;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hero::before {
    background: radial-gradient(560px 420px at 68% 30%, rgba(var(--accent-rgb), 0.13), transparent 65%);
    animation: aurora-a 36s ease-in-out infinite alternate;
}

.hero::after {
    background: radial-gradient(480px 380px at 30% 75%, rgba(var(--accent-2-rgb), 0.09), transparent 60%);
    animation: aurora-b 44s ease-in-out infinite alternate;
}

@keyframes aurora-a {
    to {
        transform: translate3d(3%, -2%, 0) scale(1.06);
    }
}

@keyframes aurora-b {
    to {
        transform: translate3d(-2%, 2%, 0) scale(1.04);
    }
}

/* 肩書きバッジ: 落ち着いたフラットピル + 縦スライドで肩書きを定期的にローテーション。
   グロー/呼吸ドットは採用せず、控えめな枠＋面と、光らない小さな点、静かなスライド。 */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 16px;
    padding: 6px 14px;
    font-size: 0.85rem;
    line-height: 1.4;
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--muted);
    box-shadow: none;
}

/* 発光しない accent 色の小さなドット (旧 ::before から <span> に格上げ、slider と横並び用) */
.hero-eyebrow-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

/* 縦スライダー: 1 行分の高さで overflow: hidden、内側で 5 items (4 unique + 1 duplicate) を
   縦積みし、@keyframes で translateY を段階的に上げる。100% で 4 番目 (= 1 番目の複製) に
   落ち着いた瞬間に animation 先頭に戻るので、視覚的にはシームレスに 1 → 2 → 3 → 4 → 1 の
   無限ループ。5 items × 1.4em (= line-height) の内訳を translateY で切替える。
   display: block で純粋な block 積み (inline-flex + column は子が flex-shrink で
   潰れて label が消える崩壊が起きたため回避)。 */
.hero-eyebrow-slider {
    display: block;
    height: 1.4em; /* line-height と一致 = 1 行分だけ露出 */
    overflow: hidden;
    /* ★ この窓自身は絶対に動かさない。animation は内側 .hero-eyebrow-track へ。
       (窓に translateY を付けると overflow:hidden は「自分の子」しか切らないため、
        窓ごとピルの外へスライドして「文字が上に浮き pill が空」になる — 実際に
        起きた崩壊。クリップと移動は必ず別要素に分離する) */
    /* 親 .hero-eyebrow は inline-flex なので、slider の幅は intrinsic (最長の子 =
       Community Manager) にフィットして親ピルの幅を決める */
}

.hero-eyebrow-track {
    display: block;
    animation: hero-eyebrow-cycle 16s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    will-change: transform;
}

.hero-eyebrow-track > span {
    height: 1.4em;
    line-height: 1.4em;
    display: block;
    white-space: nowrap;
}

/* 4 unique labels + 1 duplicate = 5 positions を 16s サイクルで巡回。
   1 label = 3.2s (hold ~2.5s + slide ~0.7s)。最後の 4→duplicate は透明遷移で
   seamless loop (animation reset は 0% と 100% で translateY が 0 と -4em に
   一致する形にし、次サイクル頭の -0 は目視で見えない切替になる)。 */
@keyframes hero-eyebrow-cycle {
    0%,   20%  { transform: translateY(0);     }  /* Web Developer */
    25%,  45%  { transform: translateY(-1.4em); }  /* CS Student */
    50%,  70%  { transform: translateY(-2.8em); }  /* Community Manager */
    75%,  95%  { transform: translateY(-4.2em); }  /* AI Advisor */
    100%       { transform: translateY(-5.6em); }  /* duplicate Web Developer → 次サイクルで translateY(0) に瞬時ジャンプ */
}

/* 動きを抑える設定では回転を止めて最初の label だけ表示。will-change も
   合わせて解除する — 恒久付与のままだと動かない要素のために合成レイヤーを
   保持し続けてしまう (.reveal の恒久付与回避と同じ理由、style.css 参照)。 */
@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow-track {
        animation: none;
        will-change: auto;
    }
}

/* 名前のサイズだけここで決める。かつての青グラデ文字 (@supports + clip-text) は
   後読み console.css が solid 白へ恒常上書きし一度も描画されないため削除した
   (letter-spacing も console 側の -0.02em が最終値)。 */
#typewriter,
.hero-name {
    font-size: clamp(2.8rem, 8vw, 4.4rem);
}

/* アバター: 背後の光だまり + conic グラデの光輪（静的・アニメなし・全ブラウザ対応） */
.hero-right {
    position: relative;
}

.hero-right::before {
    content: "";
    position: absolute;
    inset: -48px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(52% 52% at 50% 46%, rgba(var(--accent-rgb), 0.20), transparent 70%),
        radial-gradient(42% 42% at 68% 26%, rgba(var(--accent-2-rgb), 0.14), transparent 72%);
}

/* アバターの外周に細い conic のオービットリング（静的・アニメなし）。
   ピルナビと同じマスク式1pxリングで、円形の同心構造を作る。 */
.hero-right::after {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: -1;
    border-radius: 50%;
    padding: 1px;
    pointer-events: none;
    background: conic-gradient(from 210deg,
        rgba(var(--accent-rgb), 0.55), transparent 28%,
        rgba(var(--accent-2-rgb), 0.35) 52%, transparent 76%,
        rgba(var(--accent-rgb), 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* ヒーローの奥行き視差（scroll-driven / JSゼロ / 対応環境のみ）:
   スクロールで退場する間、アバター一式（光だまり・オービットリングごと）が
   22px ぶんだけ遅れて沈む。ページより遅く動く＝奥にいる、の遠近法。
   reduced-motion は Mブロックで停止（killswitch は scroll-driven に効かない）。 */
@supports (animation-timeline: view()) {
    main .hero .hero-right {
        animation: hero-drift linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
    }

    @keyframes hero-drift {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(22px);
        }
    }
}

.profile-icon {
    border-color: transparent;
    background: conic-gradient(from 210deg, var(--accent), var(--accent-2) 45%, var(--accent-deep) 75%, var(--accent)) border-box;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 0 40px rgba(var(--accent-rgb), 0.18), var(--shadow);
}

.profile-icon:hover {
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), var(--glow-strong), var(--shadow-lg);
}