/* ------------------------------------------------------------------
   業種テンプレート / 演出レイヤー（上位プラン専用）
   正本: src/industry-templates/assets/motion.css

   参照サイト調査で確認した演出の語彙（スクロール連動の立ち上がり、視差、
   進捗表示、段階的な出現）を **JavaScript 0行** で実装する。
   調査した7サイトはいずれも GSAP・rellax・slick 等のライブラリでこれを
   行っていたが、同じ語彙はCSSのスクロール駆動アニメーションで足りる。

   このファイルは motion: "enhanced" のときだけ読み込む（render.ts）。
   標準プランのテンプレートには一切影響しない。

   守っている条件（docs/premium-plan-draft.md）:
   - ビルド工程を作らない。CSS1枚を <link> で足すだけ
   - コンテンツをJavaScriptで生成しない。動きは既にHTMLにある要素の装飾に限る
   - 動かない環境では「動かない」だけで、内容は最初から見える
     （@supports の外では何も指定しないため、既定の静止状態がそのまま残る）
   - prefers-reduced-motion: reduce では一切動かさない
   ------------------------------------------------------------------ */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* ページ上部のスクロール進捗バー。
       装飾であり情報を持たないので、非対応環境で消えても欠落にならない。
       規則ごと @supports の中に置いてあるため、非対応環境では要素自体ができない
       （既定の transform を頼りにすると、非対応環境で満杯のバーが残ってしまう）。 */
    .tpl--motion::before {
      content: "";
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: 10;
      width: 100%;
      height: 3px;
      background: var(--accent-bg);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: scroll-progress linear both;
      animation-timeline: scroll(root block);
    }

    /* ファーストビューの視差。画像だけを本文と違う速度で動かす。
       transform はレイアウトを動かさないので、CLS（表示のずれ）は増えない。 */
    .tpl--motion .section--hero .imgslot {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }
  }
}

@keyframes scroll-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes hero-parallax {
  from {
    transform: translateY(0) scale(1.03);
  }
  to {
    transform: translateY(-1.25rem) scale(1);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 一覧は親をまとめて出さず、子を1件ずつ遅らせて出す。
       sections.css の既定（.wrap の直下をまとめて立ち上げる）を打ち消してから、
       同じ動きを子へ移す。親子で二重にアニメーションさせない。 */
    .tpl--motion .section:not(.section--hero) > .wrap > .cards,
    .tpl--motion .section:not(.section--hero) > .wrap > .gallery,
    .tpl--motion .section:not(.section--hero) > .wrap > .highlights,
    .tpl--motion .section:not(.section--hero) > .wrap > .flow,
    .tpl--motion .section:not(.section--hero) > .wrap > .news {
      animation: none;
    }

    .tpl--motion .cards > li,
    .tpl--motion .gallery > li,
    .tpl--motion .highlights > li,
    .tpl--motion .flow > li,
    .tpl--motion .news > li {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    /* 横に並ぶ要素は同時に視界へ入るため、開始位置をずらして段差を作る。
       JavaScriptの stagger（animation-delay の連番）に相当する部分を、
       時間ではなくスクロール量で表現している。 */
    .tpl--motion .cards > li:nth-child(2),
    .tpl--motion .gallery > li:nth-child(2),
    .tpl--motion .highlights > li:nth-child(2),
    .tpl--motion .flow > li:nth-child(2),
    .tpl--motion .news > li:nth-child(2) {
      animation-range: entry 7% entry 52%;
    }
    .tpl--motion .cards > li:nth-child(3),
    .tpl--motion .gallery > li:nth-child(3),
    .tpl--motion .highlights > li:nth-child(3),
    .tpl--motion .flow > li:nth-child(3),
    .tpl--motion .news > li:nth-child(3) {
      animation-range: entry 14% entry 59%;
    }
    .tpl--motion .cards > li:nth-child(n + 4),
    .tpl--motion .gallery > li:nth-child(n + 4),
    .tpl--motion .flow > li:nth-child(n + 4),
    .tpl--motion .news > li:nth-child(n + 4) {
      animation-range: entry 21% entry 66%;
    }

    /* 見出しの下線が伸びる。::after の装飾なので本文の構造を変えない。 */
    .tpl--motion .section__heading::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: var(--space-2xs);
      background: var(--accent-line);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: line-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }

    /* カード内の画像が下から立ち上がる。 */
    .tpl--motion .card .imgslot,
    .tpl--motion .case-card .imgslot {
      animation: image-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes line-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes image-in {
  from {
    clip-path: inset(30% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ------------------------------------------------------------------
   FAQの開閉（検証1 / 2026-08-26）

   sections.css の `.faq__item` は素の <details> で、開閉が瞬間的だった。
   参照7サイトのアコーディオンはすべて滑らかに開く。ここが「野暮ったさ」として
   最も分かりやすく残っていた箇所である（docs/css-only-ui-research.md §1）。

   Chromium 151 / Firefox 153 / WebKit 26.5 の3エンジンで実測して決めた形。
   段が2つあり、下の段が効かない環境では上の段だけが効く。

     段1 フェード（3エンジンすべてで動く）
     段2 高さの伸縮（interpolate-size 対応環境のみ。実測ではChromiumだけ）

   フェードを ::details-content ではなく実要素の .faq__a に載せてあるのは、
   Firefox 153 が ::details-content の transition を走らせないためである。
   擬似要素側へ置くと、Firefoxだけ「閉じるのが240ms遅れるのにフェードはしない」
   という素の <details> より悪い挙動になった（実測で確認）。

   閉じている間の opacity: 0 が本文を隠す事故にならないのは、[open] が付いた
   瞬間に opacity: 1 側が適用されるためである。遷移が1つも動かない環境では
   「即座に全部見える」に落ちる。reduce 設定では @media ごと外れるので、
   opacity の指定自体が存在しない。
   ------------------------------------------------------------------ */

@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    /* 閉じる操作のあと240msだけ中身の描画を保持する。これがないと中身が
       即座に消え、フェードアウトも高さの縮みも見えないまま終わる。 */
    .tpl--motion .faq__item::details-content {
      transition: content-visibility 240ms allow-discrete;
    }

    .tpl--motion .faq__item .faq__a {
      opacity: 0;
      transition: opacity 240ms ease;
    }

    .tpl--motion .faq__item[open] .faq__a {
      opacity: 1;
    }

    /* 開いた瞬間の開始値。閉じている間 .faq__a は描画されておらず遷移の
       開始状態を持たないため、これがないとChromiumで開く側だけ動かない。 */
    @starting-style {
      .tpl--motion .faq__item[open] .faq__a {
        opacity: 0;
      }
    }
  }
}

/* 高さの伸縮。interpolate-size は2026-08時点で非Baseline（MDN）、実測でも
   Firefox 153・WebKit 26.5 は未対応だった。非対応環境ではこの段ごと外れ、
   高さだけが瞬間的に変わってフェードは残る。 */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .tpl--motion .faq__item {
      interpolate-size: allow-keywords;
    }

    /* overflow: clip がないと、縮んでいる間に中身がカードの外へはみ出す。 */
    .tpl--motion .faq__item::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size 240ms ease,
        content-visibility 240ms allow-discrete;
    }

    .tpl--motion .faq__item[open]::details-content {
      block-size: auto;
    }
  }
}

/* ------------------------------------------------------------------
   ページ間の遷移（検証2 / 2026-08-26）

   複数ページの納品では、ページを移るたびに素の白フラッシュが挟まる。
   同一オリジンで両方のページがこの規則を持っていれば、ブラウザが
   前後のページを重ねて渡してくれる。JavaScriptは要らない。

   このテンプレート自体は1ページ構成（メニューは同一ページ内のアンカー）
   なので、見本の上では何も起きない。効くのは複数ページで納品したときである。

   実測（2ページ構成の実験ページ、各8〜12回）:

     WebKit 26.5   10/10 で走る。reduce では0（この @media ガードが効いている）
     Chromium 151  外部CSSに置くと 2〜5割しか走らない。<head> のインライン
                   <style> に同じ3行を置くと 12/12 で走る
     Firefox 153   規則を認識しない。通常の遷移になり、本文は正常に表示される

   Chromiumで確実に走らせるにはHTML側へ <style> を出す必要があるが、CSSの正本を
   1ヶ所に保つ家の規則（インラインstyleを持たない）を崩すため、そこまではしない。
   走らなかったときは通常の遷移に落ちるだけで、壊れ方をしない。
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* ------------------------------------------------------------------
   施工事例の写真拡大（検証3 / 2026-08-26）

   <dialog> + command/commandfor で、JavaScript 0行のライトボックス。
   開閉・フォーカスの閉じ込め・Escキー・::backdrop はブラウザが担当するので、
   自前で書くより挙動が正しい。

   マークアップは sections.ts が motion: "enhanced" のときだけ出す。
   標準プランのHTMLには <dialog> も拡大ボタンも現れない。

   実測（Chromium 151 / Firefox 153 / WebKit 26.5）:
     JavaScriptを完全に無効にしても、3エンジンすべてで
     「開く」「Escで閉じる」「閉じるボタンで閉じる」がそのまま動く。

   command/commandfor 未対応の古いブラウザでは拡大ボタンが無反応になるため、
   写真そのものを <a href> で包んである（押せば元画像が開く）。
   ------------------------------------------------------------------ */

.tpl--motion .case-card__photo {
  position: relative;
}

.tpl--motion .case-card__photo > a {
  display: block;
}

.tpl--motion .case-card__zoom {
  position: absolute;
  inset-block-end: var(--space-2xs);
  inset-inline-end: var(--space-2xs);
  min-width: 3.5rem;
  min-height: 2.25rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.tpl--motion .lightbox {
  max-width: min(92vw, 60rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--ink);
}

.tpl--motion .lightbox::backdrop {
  background-color: rgb(8 11 15 / 72%);
}

.tpl--motion .lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin-inline: auto;
}

.tpl--motion .lightbox__close {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* 立ち上がりだけを動かす。既定値（opacity: 1・変形なし）は @starting-style の
   外にあるので、遷移が1つも走らない環境でも「即座に開く」に落ちるだけになる。
   閉じる側は動かさない。exit を動かすには display と overlay の遷移が要り、
   対応がまだ揃っていない。 */
@media (prefers-reduced-motion: no-preference) {
  .tpl--motion .lightbox {
    opacity: 1;
    transform: scale(1);
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  .tpl--motion .lightbox::backdrop {
    transition: background-color 180ms ease;
  }

  @starting-style {
    .tpl--motion .lightbox[open] {
      opacity: 0;
      transform: scale(0.97);
    }

    .tpl--motion .lightbox[open]::backdrop {
      background-color: rgb(8 11 15 / 0%);
    }
  }
}

/* ------------------------------------------------------------------
   施工事例の横スライダー（検証4 / 2026-08-26）

   スマートフォン幅でだけ、施工事例を横に送れるようにする。
   幅40em以上では従来どおりのグリッドのままで、何も変わらない。

   実測（Chromium 151 / Firefox 153 / WebKit 26.5）:
     scroll-snap                        3エンジンとも動く
     ::scroll-button / ::scroll-marker  Chromiumのみ。前/次もドットも出ない
     <a href="#slide-3">                3エンジンとも 0px -> 519px と同一に動く

   前/次はアンカーリンクで書いてある。ChromiumだけCSSの擬似要素で、
   他は何も無し、という差を作らないためである。JavaScriptは1行も使わない。

   [D-169] がスマートフォン幅の横スクロールをやめた理由は「スクロールバーは
   指で触るまで出ないので、右にまだ続きがあると気づけない」だった。
   番号の送りを常に画面へ出しているのはその条件を満たすためで、
   送りが出せないなら横に並べない。
   ------------------------------------------------------------------ */

.tpl--motion .gallery-nav {
  display: none;
}

@media (max-width: 39.999em) {
  .tpl--motion .gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* カードの影が切れないように、上下へ少しだけ余白を持たせる。 */
    padding-block: var(--space-2xs);
  }

  .tpl--motion .gallery > .case-card {
    scroll-snap-align: center;
  }

  .tpl--motion .gallery-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    justify-content: center;
    margin-block-start: var(--space-xs);
  }

  .tpl--motion .gallery-nav a {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--ink-sub);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
  }
}

/* 現在のスライドを送りの番号にも示す（検証4の続き、2026-08-27）。
   id末尾の通し番号（-slide-N）と、送りリンクの並び順（nth-child(N)）を
   対応付けて光らせる。section.id に依存しない書き方なので、他の gallery節
   （施工事例以外）にもそのまま効く。

   :target はページを開いた直後の1件目を指さないため、送りを一度も押していない
   間はどれも光らない。件数は「件数可変」（construction.ts）なので、
   実務上あり得る範囲として12件まで書いた。それを超える件数では送り自体は
   動くが、ハイライトだけ付かない（壊れ方をしない）。
   Chromium 151 / Firefox 153 / WebKit 26.5 で実測済み。 */
@supports selector(:has(a)) {
  .tpl--motion .gallery:has([id$="-slide-1"]:target) ~ .gallery-nav a:nth-child(1),
  .tpl--motion .gallery:has([id$="-slide-2"]:target) ~ .gallery-nav a:nth-child(2),
  .tpl--motion .gallery:has([id$="-slide-3"]:target) ~ .gallery-nav a:nth-child(3),
  .tpl--motion .gallery:has([id$="-slide-4"]:target) ~ .gallery-nav a:nth-child(4),
  .tpl--motion .gallery:has([id$="-slide-5"]:target) ~ .gallery-nav a:nth-child(5),
  .tpl--motion .gallery:has([id$="-slide-6"]:target) ~ .gallery-nav a:nth-child(6),
  .tpl--motion .gallery:has([id$="-slide-7"]:target) ~ .gallery-nav a:nth-child(7),
  .tpl--motion .gallery:has([id$="-slide-8"]:target) ~ .gallery-nav a:nth-child(8),
  .tpl--motion .gallery:has([id$="-slide-9"]:target) ~ .gallery-nav a:nth-child(9),
  .tpl--motion .gallery:has([id$="-slide-10"]:target) ~ .gallery-nav a:nth-child(10),
  .tpl--motion .gallery:has([id$="-slide-11"]:target) ~ .gallery-nav a:nth-child(11),
  .tpl--motion .gallery:has([id$="-slide-12"]:target) ~ .gallery-nav a:nth-child(12) {
    border-color: var(--accent-bg);
    background: var(--accent-bg);
    color: var(--accent-ink);
  }
}