/*
 * /works/ の SELECTED WORK。案件ごとに畳んだ行を開くと、その案件の写真が出る。
 *
 * 構造は <details name="works-case">。排他の開閉・キーボード操作・支援技術への
 * 見え方はブラウザ標準のまま使う。JS は開閉の高さを滑らかにするだけで、
 * 落ちても壊れない（標準の即時開閉に戻るだけ）。
 *
 * 辻機械の行の中には「切り取り線」が入る。納品済みの帯（2200x733）を
 * 原板から逆算した実位置に描く。写真には触らない —— filter も opacity も
 * スクリムも当てない。外側を暗くした瞬間にトリミングツールの図になり、
 * 納品物を崩して見せることにもなる。見えるのは無加工の写真とヘアラインだけ。
 */

.works-cases {
    margin: var(--space-10) 0 0;
    border-top: 1px solid var(--border);
}

.works-case {
    position: relative;
    border-bottom: 1px solid var(--border);
}

/* 開いた行の下だけ、罫が左から金に引き直される */
.works-case::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--brand);
    transition: width 0.55s var(--ease);
}

.works-case[open]::after {
    width: 100%;
}

.works-case__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) 0;
    list-style: none;
    cursor: pointer;
}

/* Safari は summary のマーカーを別経路で出す */
.works-case__row::-webkit-details-marker {
    display: none;
}

.works-case__row:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* 数字は輪郭だけ。開くと中身が満ちる */
.works-case__no {
    color: transparent;
    font-family: var(--font-en);
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    font-weight: 200;
    line-height: 0.82;
    letter-spacing: -0.02em;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
    transition: color 0.45s var(--ease), -webkit-text-stroke-color 0.45s var(--ease);
}

.works-case[open] .works-case__no {
    color: var(--brand);
    -webkit-text-stroke-color: var(--brand);
}

.works-case__row:hover .works-case__no {
    -webkit-text-stroke-color: rgba(219, 178, 120, 0.75);
}

.works-case__name {
    min-width: 0;
}

.works-case__name strong {
    display: block;
    color: var(--text);
    font-family: var(--font-ja-display);
    font-size: 1.12rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.works-case__kind {
    display: block;
    margin-top: 4px;
    color: var(--brand);
    font-family: var(--font-en);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
}

.works-case__meta {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: var(--space-4);
    text-align: right;
}

/* 「どこまで引き受けたか」が写真より先に読めることが、この並びの目的 */
.works-case__scope {
    color: var(--muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.works-case__scope b {
    color: var(--text);
    font-weight: 500;
}

.works-case__mark {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

.works-case__mark::before,
.works-case__mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--muted);
    transition: transform 0.45s var(--ease), background-color 0.45s var(--ease);
}

.works-case__mark::before {
    width: 13px;
    height: 1px;
    transform: translate(-50%, -50%);
}

.works-case__mark::after {
    width: 1px;
    height: 13px;
    transform: translate(-50%, -50%);
}

.works-case[open] .works-case__mark::before,
.works-case[open] .works-case__mark::after {
    background: var(--brand);
}

.works-case[open] .works-case__mark::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.works-case__body {
    overflow: hidden;
}

.works-case__inner {
    padding-bottom: var(--space-10);
}

/*
 * 高さを揃え、幅は元の比率に従わせる。縦・横・正方が混ざるので構図を切らない。
 *
 * デスクトップは折り返して全部出す。横スクロールにすると、送るための
 * ボタンかスクロールバーが要る（マウスだけだと動かす手段が無い）。
 * 案件を開くという操作の中に、横送りという二つ目の操作を入れない。
 * 1000px の枠に対して横位置は2枚で910px、縦や正方が混ざる案件は1行に収まる。
 *
 * モバイルは逆にスワイプが自然なので、折り返さず横送りにする。
 */
.works-case__shots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    /* リールのような画面外への抜きはしない。
       開閉の高さを animate するため親が overflow:hidden で、抜いた分が切られる。 */
    padding: 0;
    list-style: none;
}


.works-case__shots li {
    flex: 0 0 auto;
    width: calc(var(--shot-h, 300px) * var(--ratio));
    opacity: 0;
    transform: translateY(14px);
    animation: works-shot-in 0.6s var(--ease) forwards;
}

.works-case[open] .works-case__shots li:nth-child(1) { animation-delay: 0.04s; }
.works-case[open] .works-case__shots li:nth-child(2) { animation-delay: 0.10s; }
.works-case[open] .works-case__shots li:nth-child(3) { animation-delay: 0.16s; }
.works-case[open] .works-case__shots li:nth-child(4) { animation-delay: 0.22s; }

@keyframes works-shot-in {
    to {
        opacity: 1;
        transform: none;
    }
}

.works-case__shots img {
    display: block;
    width: 100%;
    height: var(--shot-h, 300px);
    object-fit: cover;
    border-radius: 8px;
    background: var(--surface-1);
}

.works-case__note {
    max-width: 640px;
    margin: var(--space-6) 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    text-wrap: pretty;
}

.works-case__note b {
    color: var(--text);
    font-weight: 500;
}

/* ---- 行の中に入る切り取り線 ---- */
.works-cut {
    margin: var(--space-8) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.works-cut__label {
    margin: 0 0 var(--space-4);
    color: var(--brand);
    font-family: var(--font-en);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
}

/*
 * 矩形の位置基準は写真そのもの。キャプションを含む親を基準にすると
 * その高さぶん縦に伸び、3:1 で切ったはずの枠が 2.87:1 で描かれる。
 */
.works-cut__plate {
    position: relative;
    display: block;
    max-width: 640px;
}

.works-cut__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio);
    border-radius: 8px;
    background: var(--surface-1);
}

.works-cut__marks {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

/*
 * 金1pxだけだと明るい部分（アーク光・白飛び）で線が消える。
 * 内側に黒を1px重ねて、どちらの明度の上でも輪郭が残るようにしている。
 */
.works-cut__rect {
    position: absolute;
    top: var(--t);
    right: var(--r);
    bottom: var(--b);
    left: var(--l);
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: scale(1.04);
    animation: works-cut-in 0.8s var(--ease) 0.35s forwards;
}

.works-cut__size {
    position: absolute;
    top: var(--t);
    left: var(--l);
    padding: 2px 7px;
    color: var(--brand);
    font-family: var(--font-en);
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
    white-space: nowrap;
    background: rgba(9, 9, 11, 0.72);
    border-radius: var(--radius-sm);
    opacity: 0;
    transform: translateY(-100%) translateY(-5px);
    animation: works-cut-label-in 0.6s var(--ease) 0.75s forwards;
}

@keyframes works-cut-in {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes works-cut-label-in {
    to {
        opacity: 1;
    }
}

.works-cut__why {
    max-width: 640px;
    margin: var(--space-4) 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-wrap: pretty;
}

.works-cut__why b {
    color: var(--text);
    font-weight: 500;
}

@media (max-width: 700px) {
    .works-case__row {
        grid-template-columns: auto 1fr;
        gap: var(--space-4);
    }

    .works-case__meta {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: var(--space-2);
        text-align: left;
    }

    .works-case__scope {
        white-space: normal;
    }

    .works-case__mark {
        position: absolute;
        top: var(--space-6);
        right: 0;
    }

    /* スワイプで送る。指の操作と衝突する慣性やホバーは持たせない */
    .works-case__shots {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .works-case__shots::-webkit-scrollbar {
        display: none;
    }

    .works-case__shots li {
        --shot-h: 210px;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-case::after,
    .works-case__no,
    .works-case__mark::before,
    .works-case__mark::after {
        transition: none;
    }

    .works-case__shots li,
    .works-cut__rect,
    .works-cut__size {
        opacity: 1;
        animation: none;
    }

    .works-case__shots li,
    .works-cut__rect {
        transform: none;
    }

    .works-cut__size {
        transform: translateY(-100%) translateY(-5px);
    }
}