/* 開発事例 詳細ページ(3事例)専用の上書き。detail-page-*.css の後に読み込む。
   ヒーローの全画面化・セクション余白の拡大・スクラブリビールの完了前倒しと、
   3事例共通のチャプター雑誌面レイアウトを扱う(共有CSS/JSは変更しない) */

/* Hero: 画像なしでも画面全体を使い、コピーを縦中央に置く */
.case-detail .detail-hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: clamp(132px, 16vh, 190px) clamp(96px, 12vh, 150px);
}

.case-detail .detail-hero__inner {
    width: 100%;
}

.case-detail .detail-hero--cinematic {
    padding-block: 0;
}

.case-detail--care .detail-hero--cinematic .detail-hero__media img {
    object-position: 32% center;
}

/* 事例チャプター: 課題・解決・成果を縦長ビジュアルと対にする */
.case-detail .case-chapter {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
    align-items: start;
    gap: clamp(48px, 7vw, 104px);
}

.case-detail .case-chapter__copy {
    min-width: 0;
}

.case-detail .case-chapter .detail-block__body {
    max-width: 620px;
}

.case-detail .case-chapter__visual {
    position: relative;
    width: min(100%, 480px);
    aspect-ratio: 2 / 3;
    margin: 0;
    justify-self: end;
    overflow: hidden;
    border: 1px solid rgba(247, 251, 255, 0.16);
    background: var(--detail-navy-soft);
    box-shadow: 0 32px 80px rgba(1, 9, 22, 0.3);
}

.case-detail .case-chapter__visual picture {
    display: block;
    width: 100%;
    height: 100%;
}

.case-detail .case-chapter__visual img {
    position: relative;
    top: -7%;
    display: block;
    width: 100%;
    height: 114%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.9) brightness(0.94) contrast(0.96);
}

/* SCROLL キュー(cinematic ヒーローと同じ意匠) */
.case-detail .detail-hero__scroll {
    position: absolute;
    left: clamp(18px, 2.4vw, 38px);
    bottom: clamp(30px, 5vh, 56px);
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(247, 251, 255, 0.48);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
}

.case-detail .detail-hero__scroll::after {
    content: '';
    width: 1px;
    height: 62px;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.38), transparent);
    transform-origin: top;
    animation: page-scroll-line 2.8s var(--ease-expo) infinite;
}

.detail-motion-ready .case-detail .detail-hero__scroll {
    animation: detail-hero-fade-in 1.1s var(--ease-expo) 1.05s both;
}

/* セクション余白: テキスト中心でも詰まって見えない間合いに広げる */
.case-detail .detail-overview {
    padding-block: clamp(110px, 15vh, 180px);
}

.case-detail .detail-blocks {
    gap: clamp(160px, 22vh, 260px);
    padding-bottom: clamp(150px, 20vh, 240px);
}

/* リビールの前倒し: セクション丈が短いため、既定の係数では
   画面上端を過ぎるまで本文が現れない。倍率を上げ遅延を縮めて、
   セクションが画面の半分に達する頃に完成させる */
@media (min-width: 901px) {
    .detail-motion-ready .case-detail .case-chapter {
        --case-chapter-visual-progress: clamp(0, calc((var(--section-progress) - 0.04) * 1.9), 1);
    }

    .detail-motion-ready .case-detail .case-chapter__visual {
        clip-path: inset(0 0 calc((1 - var(--case-chapter-visual-progress)) * 100%) 0);
        will-change: clip-path;
    }

    .detail-motion-ready .case-detail .case-chapter__visual picture {
        transform: scale(calc(1.06 - var(--case-chapter-visual-progress) * 0.06));
        will-change: transform;
    }

    .detail-motion-ready .case-detail .case-chapter__visual img {
        transform: translate3d(0, calc((0.5 - var(--section-progress)) * 12%), 0);
        will-change: transform;
    }

    .detail-motion-ready .case-detail [data-detail-section] .detail-section-title h2 {
        --title-progress: clamp(0, calc(var(--section-progress) * 2.4), 1);
    }

    .detail-motion-ready .case-detail [data-detail-section] .detail-section-title__line {
        --line-progress: clamp(0, calc((var(--section-progress) - 0.12) * 2.8), 1);
    }

    .detail-motion-ready .case-detail [data-detail-section] .detail-eyebrow,
    .detail-motion-ready .case-detail [data-detail-section] .detail-overview__copy p,
    .detail-motion-ready .case-detail [data-detail-section] .detail-facts,
    .detail-motion-ready .case-detail [data-detail-section] .detail-block__body,
    .detail-motion-ready .case-detail .detail-contact__inner > * {
        --reveal-progress: clamp(0, calc((var(--section-progress) - var(--reveal-delay, 0)) * 3.2), 1);
    }

    .detail-motion-ready .case-detail [data-detail-section] .detail-overview__copy p,
    .detail-motion-ready .case-detail [data-detail-section] .detail-block__body {
        --reveal-delay: 0.18;
    }

    .detail-motion-ready .case-detail [data-detail-section] .detail-facts {
        --reveal-delay: 0.26;
    }
}

@media (max-width: 900px) {
    .case-detail .detail-hero {
        min-height: 86svh;
        padding-block: clamp(112px, 15vh, 150px) clamp(64px, 8vh, 96px);
    }

    .case-detail .detail-hero--cinematic {
        min-height: 92svh;
        padding-block: 0;
    }

    .case-detail .detail-hero__scroll {
        display: none;
    }

    .case-detail .detail-overview {
        padding-block: clamp(80px, 11vh, 120px);
    }

    .case-detail .detail-blocks {
        gap: clamp(104px, 15vh, 150px);
        padding-bottom: clamp(100px, 14vh, 150px);
    }

    .case-detail .case-chapter {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(38px, 7vh, 58px);
    }

    .case-detail .case-chapter__visual {
        width: min(100%, 560px);
        justify-self: center;
        margin-top: 0;
    }

    .detail-motion-ready .case-detail .case-chapter__visual {
        clip-path: inset(0 0 100% 0);
        transition: clip-path 1.7s var(--ease-slow) 0.42s;
    }

    .detail-motion-ready .case-detail .case-chapter__visual picture {
        transform: scale(1.06);
        transition: transform 2.1s var(--ease-slow) 0.42s;
    }

    .detail-motion-ready .case-detail .case-chapter.is-visible .case-chapter__visual {
        clip-path: inset(0 0 0 0);
    }

    .detail-motion-ready .case-detail .case-chapter.is-visible .case-chapter__visual picture {
        transform: scale(1);
    }

    .detail-motion-ready .case-detail[data-detail-mobile-parallax] .case-chapter__visual img {
        transform: translate3d(0, calc((0.5 - var(--section-progress, 0.5)) * 12%), 0);
        will-change: transform;
    }
}

@media (prefers-reduced-motion: reduce) {
    .case-detail .case-chapter__visual,
    .case-detail .case-chapter__visual picture,
    .case-detail .case-chapter__visual img {
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   全事例共通: チャプターレイアウト
   タイトル(アイブロウ+見出し)を全幅で先に置き、その下の段で
   左に本文 / 右に画像を並べる(見出しは画像の左に回り込ませない)
   ============================================================ */

.case-detail .case-chapter__copy {
    display: contents;
}

.case-detail .case-chapter .detail-block__body {
    margin-top: 0;
}

@media (min-width: 901px) {
    .case-detail .case-chapter {
        grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "head head"
            "body visual";
        align-items: start;
        column-gap: clamp(48px, 7vw, 104px);
        row-gap: clamp(40px, 5vw, 72px);
    }

    .case-detail .case-chapter__copy-head {
        grid-area: head;
        min-width: 0;
    }

    .case-detail .case-chapter__copy-body {
        grid-area: body;
        align-self: start;
        min-width: 0;
    }

    .case-detail .case-chapter__visual {
        grid-area: visual;
        align-self: start;
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    .case-detail .case-chapter {
        grid-template-areas:
            "head"
            "visual"
            "body";
    }

    .case-detail .case-chapter__copy-head {
        grid-area: head;
    }

    .case-detail .case-chapter__visual {
        grid-area: visual;
    }

    .case-detail .case-chapter__copy-body {
        grid-area: body;
    }
}