/* ==========================================================================
   この新しい音には、理由がある。— CEAR FIELDの図（WebGL）と、技術の3項目
   技術の3項目の図そのものの色と線は tech-art.css。
   ========================================================================== */
.technology, .company {
  --paper: #090b0e; --ink: #f5f6f8; --ink-soft: #d4dae2;
  --muted: #b4bcc7; --faint: #929daa; --line: #30363e;
  --accent: #83baf0; --accent-strong: #9cc9f4;
  color: var(--ink); background: var(--paper);
}
.technology { padding-block: 0 clamp(48px, 7vh, 72px); }
.technology-opening {
  min-height: clamp(280px, 44svh, 400px); padding-block: 60px 48px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.technology .technology-opening .display { width: 100%; font-size: clamp(42px, 5.5vw, 76px); line-height: 1.25; letter-spacing: -.035em; }
.technology .technology-opening .eyebrow { margin: 0 0 24px; }
html[data-motion="on"] .technology-opening.reveal { transition: opacity .8s var(--ease-soft), transform .8s var(--ease); }
html[data-motion="on"] .technology-opening.reveal-pending { transform: translate3d(0, 12px, 0); }
.technology-overview { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 32px; align-items: center; }
.technology-overview:not(:has(.field-stage)) { grid-template-columns: 1fr; }
.technology .section-intro { font-size: 18px; margin-top: 0; }
.technology-copy { max-width: 410px; }
.technology .tech-art { --ta-line: #929daa; --ta-object: var(--ink-soft); --ta-accent: var(--accent); }
.technology .eyebrow { margin-bottom: 16px; }
.technology .eyebrow { color: var(--accent-strong); }
.technology .tech-grid { gap: 32px; margin-top: 32px; }
.technology .tech-item { border-top-color: var(--line); padding-top: 16px; }
.technology .index { color: var(--faint); }
.technology .tech-item h3 { margin: 0 0 12px; font-size: 22px; }

/* ---- CEAR FIELD：製品のレンダーと同じ視点で、定位（音の粒）・床・側面からの波を描く ---- */
.field-stage {
  position: relative; width: 100%; margin: 0;
  height: clamp(300px, 42vh, 390px); border-radius: var(--radius-xl); overflow: hidden;
  background: radial-gradient(70% 70% at 50% 45%, #f8f8f8 0%, #ececec 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.field-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.field-stage[data-ready] canvas { opacity: 1; }
.field-stage figcaption { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 1; font-size: 12px; line-height: 1.7; color: #6b6e74; pointer-events: none; }

@media (max-width: 1000px) and (min-width: 701px) {
  .technology-overview { grid-template-columns: 1fr 1.2fr; gap: 24px; }
  .technology .section-intro { font-size: 16px; }
  .technology .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .technology .tech-item h3 { font-size: 19px; }
}
@media (max-width: 700px) {
  .technology-overview { grid-template-columns: 1fr; gap: 24px; }
  .technology-opening { min-height: 290px; padding-block: 52px 40px; }
  .technology .technology-opening .display { font-size: clamp(29px, 9.2vw, 46px); }
  .technology .technology-opening .eyebrow { margin-bottom: 20px; }
  .technology .section-intro { font-size: 16px; margin-top: 0; }
  .field-stage { height: 260px; border-radius: var(--radius-l); }
  .field-stage figcaption { left: 18px; right: 18px; bottom: 14px; font-size: 12px; }
  .technology .tech-grid { margin-top: 28px; }

  /* 01〜03：図は画面の上に留まり、01→02→03 の文を読み進めると、上の図が替わる。
     tech-art.mjs が動きのオンのときだけ .is-scrolly と data-active（いま読んでいる項目）を付ける。
     図の3枚は同じ升目に重ね、文は下に続けて流す（項目の箱は display: contents で外す） */
  .technology .tech-grid.is-scrolly {
    --ta-w: min(300px, 100vw - 40px);
    --ta-h: calc(var(--ta-w) * 230 / 360);                     /* 図の高さ（viewBox 360×230） */
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 4vh;
  }
  /* 図の後ろの地：流れていく文を隠し、下の縁で淡く消す */
  .tech-grid.is-scrolly::before {
    content: ""; grid-row: 1; grid-column: 1; position: sticky; top: var(--nav-height); z-index: 1; align-self: start;
    height: calc(var(--ta-h) + 40px); margin: 0 -20px; pointer-events: none;
    background: linear-gradient(var(--paper) 82%, transparent);
  }
  .tech-grid.is-scrolly .tech-item { display: contents; }
  .technology .tech-grid.is-scrolly .tech-art {
    grid-row: 1; grid-column: 1; position: sticky; top: calc(var(--nav-height) + 10px); z-index: 2; align-self: start;
    width: var(--ta-w); margin: 10px auto 18px; opacity: 0; transition: opacity .6s var(--ease-soft);
  }
  .tech-grid.is-scrolly[data-active="0"] .tech-item:nth-child(1) .tech-art,
  .tech-grid.is-scrolly[data-active="1"] .tech-item:nth-child(2) .tech-art,
  .tech-grid.is-scrolly[data-active="2"] .tech-item:nth-child(3) .tech-art { opacity: 1; }
  /* 文：3つの項目を順に。いま読んでいる項目だけくっきり */
  .tech-grid.is-scrolly .index { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 22px; }
  .tech-grid.is-scrolly .tech-item:first-child .index { margin-top: 6px; }
  .tech-grid.is-scrolly .tech-item:nth-child(1) .index { grid-row: 2; }
  .tech-grid.is-scrolly .tech-item:nth-child(1) h3 { grid-row: 3; }
  .tech-grid.is-scrolly .tech-item:nth-child(1) p { grid-row: 4; }
  .tech-grid.is-scrolly .tech-item:nth-child(2) .index { grid-row: 5; }
  .tech-grid.is-scrolly .tech-item:nth-child(2) h3 { grid-row: 6; }
  .tech-grid.is-scrolly .tech-item:nth-child(2) p { grid-row: 7; }
  .tech-grid.is-scrolly .tech-item:nth-child(3) .index { grid-row: 8; }
  .tech-grid.is-scrolly .tech-item:nth-child(3) h3 { grid-row: 9; }
  .tech-grid.is-scrolly .tech-item:nth-child(3) p { grid-row: 10; }
  .tech-grid.is-scrolly .tech-item :is(.index, h3, p) { opacity: .7; transition: opacity .5s var(--ease-soft); }
  .tech-grid.is-scrolly[data-active="0"] .tech-item:nth-child(1) :is(.index, h3, p),
  .tech-grid.is-scrolly[data-active="1"] .tech-item:nth-child(2) :is(.index, h3, p),
  .tech-grid.is-scrolly[data-active="2"] .tech-item:nth-child(3) :is(.index, h3, p) { opacity: 1; }
}
@media print { .field-stage { display: none !important; } }

/* 高さの小さいノートPCでも、CGと3つの説明を同時に見渡せる。 */
@media (min-width: 1001px) and (max-height: 780px) {
  .technology { padding-block: 0 40px; }
  .technology-opening { min-height: 280px; padding-block: 48px 36px; }
  .technology .technology-opening .display { font-size: clamp(48px, 5vw, 64px); }
  .technology .field-stage { height: 250px; }
  .technology .tech-grid { margin-top: 24px; }
  .technology .tech-grid .tech-art { height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .technology-opening.reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
}
@media print {
  .technology, .company { --paper: #fff; --ink: #111; --ink-soft: #333; --muted: #444; --faint: #555; --line: #bbb; --accent: #1e64b4; --accent-strong: #1e64b4; }
  .technology-opening { min-height: 0; padding-block: 24px; }
}