/*experience section*/
/* 背景画像の使い方は #welcome と同じ。
   画像の上に黒い膜(::before)を敷いて、その上に白文字を載せる。 */
#experience {
    padding: 100px 10%;

    background-image: url("../images/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-attachment: fixed;

    position: relative;

    color: #f9fafb;
}

/* 文字を読みやすくするための黒い膜。*/
#experience::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.7);
}

/* ★中身を膜より前に出す。これが無いと膜の下に隠れて何も見えない。 */
#experience .container {
    position: relative;
    z-index: 1;
}

/* 見出しは #about h2 / #skills h2 と同じ大きさ・余白 */
#experience h2 {
    margin-bottom: 5.0rem;
    font-size: 3rem;

    text-align: center;
}

/* ---------- 年表 ---------- */
.timeline {
    list-style: none;
    margin: 0 auto;
    padding: 0;

    max-width: 720px;
}

/* 「年」と「内容」の2列。
   ★縦線は内容側(.timeline-body)の左borderなので、
     この1列目の幅が縦線の位置になる。左に寄せたいので狭くしてある。

   ▼ ★--gap-bottom と --mark-y について

     項目の下余白(--gap-bottom)は、縦線を途切れさせないため
     margin ではなく padding で取っている。
     そのため「項目の高さ」には余白ぶんが含まれていて、
     単純に 50% を指定すると丸が余白のぶんだけ下にずれる。

     そこで余白を引いた中央 --mark-y を計算し、
     丸・破断マーク・年 の3つを同じ高さにそろえている。
     = タイトルと説明を一塊として見たときの、その真ん中。 */
.timeline-item {
    --gap-bottom: 6.0rem;
    --mark-y: calc((100% - var(--gap-bottom)) / 2);

    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.5rem;
}

/* 最後の項目。「この先も続く」ことを示すため、線を少し下に伸ばし、
   末端をだんだん薄くして消す。
   ★--gap-bottom がそのまま「伸ばす長さ」になる。
     --mark-y の計算も追従するので、丸の位置はずれない。 */
.timeline-item:last-child {
    --gap-bottom: 3.5rem;   /* 線を伸ばす長さ */
    --tail-fade: 2.5rem;    /* そのうち、薄くしていく区間の長さ */
}

/* ★年も丸と同じ高さに置く。
     下余白を同じだけ空けたうえで flex で中央寄せすると、
     丸の中心とぴったり一致する。 */
.timeline-year {
    padding-bottom: var(--gap-bottom);

    display: flex;
    align-items: center;
    justify-content: flex-end;

    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.6;

    text-align: right;
}

/* ★下の余白を margin ではなく padding にしている理由
     margin にすると項目と項目の間に隙間ができ、そこで縦線が途切れる。
     padding なら線が下まで伸びるので、線が1本につながる。 */
.timeline-body {
    /* ★線は下の ::after が引く。この border は幅(2px)を確保するためだけの透明。
         太さを変えるときは、ここと ::after の width の両方を直すこと。 */
    border-left: 2px solid transparent;
    padding: 0 0 var(--gap-bottom) 1.75rem;

    position: relative;
}

/* 縦線の本体。
   ★border ではなく要素にしているのは、border は「途中まで引く」ができないため。
     要素なら clip-path で見えている範囲を変えられ、上から下へ引く動きが作れる。
   ★left: -2px … 透明にした border の位置にぴったり重ねる。
   ★z-index: 0 … 丸(::before)より後ろに置く。無いと線が丸の真ん中を横切る。 */
.timeline-body::after {
    content: "";

    position: absolute;
    left: -2px;
    top: 0;

    width: 2px;
    height: 100%;

    background-color: rgba(249, 250, 251, 0.5);

    z-index: 0;
}

/* 縦線の上に載せる丸。タイトル＋説明の中央に置く。 */
.timeline-body::before {
    content: "";

    position: absolute;
    left: -7px;                    /* 線(2px)の中心に来るようにずらす */
    top: var(--mark-y);
    transform: translateY(-50%);   /* 丸自身の高さの半分だけ戻す */

    width: 12px;
    height: 12px;
    border-radius: 50%;

    background-color: var(--accent-color);
    border: 2px solid #f9fafb;
    box-sizing: border-box;

    /* ★線(::after)より前に出す。指定が無いと線が丸の真ん中を横切る。 */
    z-index: 1;
}

/* ★単色は途中から薄くできないので、破断線と同じ手法でグラデーションに差し替える。 */
.timeline-item:last-child .timeline-body::after {
    background-color: transparent;

    background-image: linear-gradient(
        to bottom,
        rgba(249, 250, 251, 0.5) 0,
        rgba(249, 250, 251, 0.5) calc(100% - var(--tail-fade)),
        rgba(249, 250, 251, 0)   100%
    );
}

/* ---------- 省略区間(破断線) ----------

   間が長く空くところに入れる項目。
   <li class="timeline-item timeline-gap"> と、クラスを1つ足して使う。

   ▼ 仕組み

     縦線を「途中で切って」、その切れ目に横向きの波(破断マーク)を置く。
     製図で長いものを省略するときの記号と同じ考え方。

       │      ← 上の線
      ～      ← 破断マーク(ここで省略している)
       │      ← 下の線

   ▼ ★なぜ単色ではなくグラデーションで線を引くか

     単色の線は途中で切ることができない。
     そこで「線の色 → 途中だけ透明 → 線の色」というグラデーションで描いている。
     色の切り替え位置を指定できるので、狙った場所でちょうど切れる。

   ▼ ★なぜ波だけ別の疑似要素なのか

     背景は要素の外にはみ出せない。
     線(::after)は幅2pxしかなく、波は左右にはみ出すので、
     はみ出せる ::before(絶対配置)で描いている。 */
.timeline-gap .timeline-body::after {
    /* 一直線の線を消して、切れ目のあるグラデーションに差し替える。 */
    background-color: transparent;

    /* 破断マーク(高さ12px)の上下に4pxずつ余裕を持たせ、
       中央 ±10px の範囲を透明にして線を切っている。 */
    background-image: linear-gradient(
        to bottom,
        rgba(249, 250, 251, 0.5) 0,
        rgba(249, 250, 251, 0.5) calc(var(--mark-y) - 10px),
        transparent              calc(var(--mark-y) - 10px),
        transparent              calc(var(--mark-y) + 10px),
        rgba(249, 250, 251, 0.5) calc(var(--mark-y) + 10px),
        rgba(249, 250, 251, 0.5) 100%
    );
}

/* 破断マーク。丸(::before)を打ち消して波に置き換えている。 */
.timeline-gap .timeline-body::before {
    /* ★丸の指定を1つずつ打ち消す。消し忘れると丸が残る。 */
    border: none;
    border-radius: 0;
    background-color: transparent;

    /* 幅18pxの中心が線の中心に来るよう -10px ずらす。
       縦位置は丸と同じ --mark-y。 */
    left: -10px;
    top: var(--mark-y);
    transform: translateY(-50%);

    width: 18px;
    height: 12px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M0 6 Q4.5 1 9 6 T18 6' fill='none' stroke='%23f9fafb' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px 12px;
}

/* 「2006~2020」は「2005/9」より長いので、年の列に収まるよう小さくする。
   ★overflow-wrap は保険。列幅を狭めても、はみ出さずに折り返す。 */
.timeline-gap .timeline-year {
    font-size: 0.8rem;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.timeline-body h3 {
    margin: 0;
    font-size: 1.5rem;
}

.timeline-body p {
    margin: 0.5rem 0 0;
    font-size: 1.05rem;
    line-height: 1.8;

    /* ★opacity ではなく色の透明度で薄くする。
       opacity は reveal.css のフェードが使っているので、指定すると打ち消し合う。 */
    color: rgba(249, 250, 251, 0.85);
}

/* 年表の中に置くリンク(インターン先など)。
   見た目は #about の .about-details とそろえてある。
   アイコン(<i>)とリンクを横並びにして、間隔と色を同じにする。 */
.timeline-links {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.timeline-links li {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 0.6rem;
}

.timeline-links li:last-child {
    margin-bottom: 0;
}

.timeline-links a,
.timeline-links a:visited {
    color: #2997ff;

    transition: 0.15s ease;
}

.timeline-links a:hover {
    color: var(--hover-color);
}