/*
 * ランディングページ専用のスタイル。tokens.css / checker-colors.css の
 * 色をそのまま使い、アプリ本体(style.css)とは別ファイルに分けている
 * （レイアウトの性質が大きく異なるため）。
 */

:root {
    --landing-space-1: 8px;
    --landing-space-2: 16px;
    --landing-space-3: 24px;
    --landing-space-4: 40px;
    --landing-space-5: 64px;
    --landing-space-6: 96px;
    --landing-max-width: 1080px;
    /* ホーム画面の背景動画の明るさ。1で元の明るさ、0で真っ黒 */
    --bg-dim: 0.15;

    /* Heroの縦方向の余白。画面の高さ(svh)に応じて伸び縮みするので、
       低いノートPCでも詰まりすぎず、高い画面では余白が広がる。
       (svh非対応ブラウザ向けに、各変数の前に vh 版を置いてある) */
    --hero-gap-s: clamp(8px, 1.8vh, 16px);
    --hero-gap-m: clamp(12px, 2.8vh, 26px);
    --hero-gap-l: clamp(16px, 3.6vh, 36px);
    --hero-gap-s: clamp(8px, 1.8svh, 16px);
    --hero-gap-m: clamp(12px, 2.8svh, 26px);
    --hero-gap-l: clamp(16px, 3.6svh, 36px);

    /* ヘッダーとHeroの最大幅（3カラムが窮屈にならないよう、他の節より少し広い） */
    --hero-max-width: 1280px;
    /* 左右の画像パネルの内側の余白 */
    --panel-pad-x: 16px;
    --font-ui: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg-dark);
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: opacity 0.9s ease 0.15s;
}

/* ---------- Opening video / 背景動画 ---------- */
/* オープニング再生中はホーム画面を隠し、スクロールもさせない */
.intro-pending {
    overflow: hidden;
}

.intro-pending .page {
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.bg-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg-dark);
    transition: filter 1.2s ease;
}

/* オープニングが終わったら、動画全体の明るさをぐっと落とす */
.bg-stage.is-dimmed {
    filter: brightness(var(--bg-dim));
}

.bg-slot {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}

.bg-slot.is-active {
    opacity: 1;
    visibility: visible;
}

.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* 1:1の動画を、画面の短辺にぴったり合わせて中央に置く */
.bg-video-sharp {
    object-fit: contain;
}

/* 足りない部分：同じ動画を画面いっぱいに拡大してぼかす。
   ぼかすと縁が透けるので、少し大きめに拡大して隠す */
.bg-video-blur {
    object-fit: cover;
    filter: blur(32px);
    transform: scale(1.2);
}

/* ---------- Header ---------- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--hero-gap-m) var(--landing-space-3);
    max-width: var(--hero-max-width);
    width: 100%;
    margin: 0 auto;
}

.wordmark {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.header-cta {
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.header-cta:hover {
    border-color: var(--primary);
    color: var(--text);
}

/* ---------- Hero ---------- */
/* 3カラム: 左=元画像 / 中央=タイトル・説明・CTA / 右=切り抜き結果3枚(縦並び)。
   狭い画面(下の @media 900px)では 上から テキスト→元画像→線→結果 の縦積みになる */
.hero {
    max-width: var(--hero-max-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--hero-gap-m) var(--landing-space-3) var(--hero-gap-l);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 0.9fr);
    grid-template-areas: "before text after";
    align-items: center;
    column-gap: clamp(20px, 3vw, 48px);
    text-align: center;

    /* ファーストビュー(ヘッダーを除いた高さ)の中で、3カラムを縦方向の中央に置く */
    min-height: calc(100vh - 88px);
    min-height: calc(100svh - 88px);

    /* 右カラムに縦に並べる結果3枚の幅。3枚(4:3)を縦に積むと高さは 幅×2.25 + 余白 になるので、
       画面が低いほど細くして、右パネル全体がファーストビューに収まるようにする。
       (100svh - 260px) は「ヘッダー・パネルの余白・キャプション」が使う高さの目安 */
    --after-w: clamp(120px, calc((100vh - 260px) / 2.25), 280px);
    --after-w: clamp(120px, calc((100svh - 260px) / 2.25), 280px);
}

.hero-text {
    grid-area: text;
    width: 100%;
    /* 見出しの文字サイズを「この列の幅」基準(cqi)で決めるための指定 */
    container-type: inline-size;
}

.hero-text h1 {
    /* 「切り抜き方はいくつでも。」(12文字)が列の幅に1行で収まる大きさ。
       cqi 非対応ブラウザ向けの vw 版を先に置いている */
    font-size: clamp(1.5rem, 2.2vw, 2.4rem);
    font-size: clamp(1.35rem, 8cqi, 2.4rem);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 var(--hero-gap-s);
    /* 中央揃えのとき、行末に「も。」だけが残るような折り返しを避ける */
    text-wrap: balance;
}

.hero-lead {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 36em;
    margin: 0 auto var(--hero-gap-m);
    text-wrap: balance;
}

.cta-primary {
    display: inline-block;
    text-decoration: none;
    background: var(--primary);
    color: var(--bg-dark);
    font-weight: 700;
    font-size: 1rem;
    padding: 12px 26px;
    border-radius: var(--radius-md, 10px);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cta-primary:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.cta-primary:active {
    transform: scale(0.98);
}

/* 左右の画像を囲む暗いパネル。背景動画の手が画像と重なって見えるのを抑え、
   画像を「ひとまとまり」に見せる。パネルの色は --bg-dark を半透明にしたもの */
.hero-visual {
    padding: var(--hero-gap-m) var(--panel-pad-x) var(--hero-gap-s);
    border: 1px solid var(--border-muted);
    border-radius: 18px;
    background: var(--bg-dark);
    background: color-mix(in srgb, var(--bg-dark) 74%, transparent);
}

.hero-visual-before { grid-area: before; }
.hero-visual-after { grid-area: after; }

/* ---------- Showcase (元画像 / 切り抜き結果3枚) ---------- */
.showcase-before,
.showcase-after {
    margin: 0;
}

.showcase-frame {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-muted);
    background: var(--bg);
    aspect-ratio: 4 / 5;
}

.showcase-before .showcase-frame {
    aspect-ratio: 4 / 5;
}

.showcase-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 元画像の右上に素材由来の「Made with AI」表示があるため、左下を基点に少し拡大して
   右上の角を枠の外へ押し出している（画像ファイル自体は変更しない）。
   1 にすると無効。表示が残る/被写体が欠けるときはこの値で調整する */
.showcase-before .showcase-frame img {
    transform: scale(var(--before-crop, 1.12));
    transform-origin: left bottom;
}

.showcase-frame-checkered {
    background-image:
        linear-gradient(45deg, var(--checker-dark) 25%, transparent 25%),
        linear-gradient(-45deg, var(--checker-dark) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--checker-dark) 75%),
        linear-gradient(-45deg, transparent 75%, var(--checker-dark) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: var(--checker-light);
}

.showcase-before figcaption {
    text-align: center;
    margin-top: var(--landing-space-1);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 分岐の線（縦に積むときだけ表示）。中央の1点から、下の3枚それぞれの真上へ伸ばす。
   x座標は .showcase-afters の列の中心(15.667 / 50 / 84.333)に合わせてあるので、
   列の幅や gap(3%) を変えたら index.html の <line> の x2 も合わせること */
.showcase-branch {
    grid-area: branch;
    display: none; /* 3カラムでは元画像と結果の間にテキストが入るので線は引かない */
    height: clamp(20px, 3.6vh, 32px);
    height: clamp(20px, 3.6svh, 32px);
}

.showcase-branch svg {
    display: block;
    width: 100%;
    height: 100%;
}

.showcase-branch line {
    stroke: var(--border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* パソコン(3カラム)では縦に並べる。横一列にするのは、下の @media 900px の縦積みレイアウトのとき */
.showcase-afters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hero-gap-s);
    width: min(100%, var(--after-w));
    margin-inline: auto;
}

.showcase-after .showcase-frame {
    aspect-ratio: 4 / 3;
}

.showcase-caption {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: var(--hero-gap-s) 0 0;
}

/* ---------- Features ---------- */
.features {
    max-width: var(--landing-max-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--landing-space-6) var(--landing-space-3);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--landing-space-4);
    border-top: 1px solid var(--border-muted);
}

.feature h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 var(--landing-space-1);
}

.feature p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
}

/* ---------- Closing CTA ---------- */
.closing {
    max-width: var(--landing-max-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--landing-space-6) var(--landing-space-3) var(--landing-space-5);
    text-align: center;
}

.closing h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 var(--landing-space-3);
}

/* ---------- Footer ---------- */
.site-footer {
    padding: var(--landing-space-3);
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---------- Responsive ---------- */
/* 狭い画面: 3カラムをやめて縦に積む（テキスト → 元画像 → 線 → 切り抜き結果3枚） */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "text"
            "before"
            "branch"
            "after";
        justify-items: center;
        row-gap: 0;
        min-height: 0;
        padding-top: var(--hero-gap-l);
    }

    .hero-visual-before {
        width: min(190px, 56%);
        margin-top: var(--hero-gap-l);
    }

    /* 線は、結果パネルの「内側」の幅(=3枚が並ぶ幅)に合わせて引く */
    .showcase-branch {
        display: block;
        width: min(100%, 520px);
        padding-inline: calc(var(--panel-pad-x) + 1px);
        box-sizing: border-box;
    }

    .hero-visual-after {
        width: min(100%, 520px);
    }

    /* 結果3枚は横一列。この gap(3%) が分岐線のx座標の前提 */
    .showcase-afters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3%;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .features {
        grid-template-columns: 1fr;
        gap: var(--landing-space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-primary,
    .header-cta,
    .page,
    .bg-stage {
        transition: none;
    }
}