/* ============================================================
   oasis.css —「オアシスとしての絨毯」意味レイヤー
   絨毯＝過酷な自然に築く物理/精神のオアシス・祈りの空間・最古のテクノロジー。
   躍動感：織る(weave)・咲く(bloom)・脈打つ(pulse)を CSS keyframes で。
   ビルドレス・素のCSS。prefers-reduced-motion で全モーション静止。
   tokens.css / app.css の後に読み込む（ホーム・産地物語ページ共用）。
   ============================================================ */

/* ───────────────── 思想シークエンス（ホーム中核） ───────────────── */
.oasis {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--red-tint), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 55%, var(--paper) 100%);
  overflow: clip;
  padding-block: var(--s-2xl);
}
.oasis__head { max-width: 60ch; }
.oasis__head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-jp);
  margin-block: var(--s-xs) var(--s-md);
  color: var(--ink);
}
.oasis__head h2 em { font-style: normal; color: var(--red); position: relative; white-space: nowrap; }
.oasis__head h2 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .5em;
  background: var(--red-tint); z-index: -1;
}
.oasis__lead {
  font-size: var(--t-md);
  line-height: var(--lh-snug);
  color: var(--ink-2);
  max-width: 56ch;
}

/* 機織りステージ：オアシスが織り上がる */
.oasis__stage {
  position: relative;
  margin-block: var(--s-xl);
  display: grid;
  place-items: center;
}
.oasis-loom { width: min(760px, 100%); height: auto; display: block; }
.oasis-loom { --len: 900; }
.oasis-loom .warp { stroke: var(--line); stroke-width: 1.4; opacity: .55; }
.oasis-loom .weft { stroke: var(--line-2); stroke-width: 2.4; opacity: .5; }
.oasis-loom .petal,
.oasis-loom .stem,
.oasis-loom .ring {
  fill: none; stroke: var(--red); stroke-linecap: round; stroke-linejoin: round;
}
.oasis-loom .ring { stroke-width: 3.4; }
.oasis-loom .petal { stroke-width: 3.4; }
.oasis-loom .stem { stroke: var(--red-deep); stroke-width: 2.2; }
.oasis-loom .bud { fill: var(--red); }
.oasis-loom .heart { fill: var(--red); }
.oasis-loom .soil { fill: var(--paper-3); }
.oasis-loom .horizon { stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 2 6; opacity: .5; }
.oasis-loom .sun { fill: none; stroke: var(--red); stroke-width: 2; opacity: .5; }

/* 3本柱：物理／祈り／技術 */
.oasis__pillars {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md);
  border-block-start: var(--rule);
  padding-block-start: var(--s-lg);
}
.opillar { position: relative; padding-inline-start: var(--s-sm); }
.opillar__ic { width: 46px; height: 46px; color: var(--red); margin-block-end: var(--s-xs); }
.opillar__ic svg { width: 100%; height: 100%; display: block; }
.opillar__k {
  font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-3); display: block; margin-block-end: var(--s-3xs);
}
.opillar h3 {
  font-family: var(--serif); font-weight: 600; font-size: var(--t-md);
  color: var(--ink); margin: 0 0 var(--s-2xs);
}
.opillar p { font-size: var(--t-sm); line-height: var(--lh-snug); color: var(--ink-2); margin: 0; }

.oasis__coda {
  margin-block-start: var(--s-xl);
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-align: center;
  max-width: 40ch; margin-inline: auto;
}
.oasis__coda em { font-style: normal; color: var(--red); box-shadow: inset 0 -.32em var(--red-tint); }

@media (max-width: 820px) {
  .oasis__pillars { grid-template-columns: 1fr; gap: var(--s-lg); border-block-start: var(--hair-2); }
  .opillar { padding-inline-start: 0; border-inline-start: 3px solid var(--red); padding-inline-start: var(--s-sm); }
}

/* ───────────────── 産地地図イントロ（結び目イントロと同作法） ───────────────── */
.mapintro__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-xl); align-items: center;
}
.mapintro__fig {
  position: relative; margin: 0; aspect-ratio: 16 / 10;
  background: var(--paper-2); border: var(--hair); overflow: clip;
}
.mapintro__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; display: block; filter: saturate(1.02); }
.mapintro__route {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.mapintro__route .road { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 7; }
.mapintro__route .stop { fill: var(--paper); stroke: var(--red); stroke-width: 2.6; }
.mapintro__capline {
  position: absolute; left: 0; bottom: 0; right: 0; padding: var(--s-2xs) var(--s-sm);
  font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--on-dark); background: linear-gradient(0deg, rgba(26,20,13,.82), transparent);
}
.mapintro__text h2 { font-family: var(--serif); font-weight: 600; font-size: var(--t-xl); line-height: var(--lh-tight); margin: 0 0 var(--s-sm); }
.mapintro__text h2 em { font-style: normal; color: var(--red); }
.mapintro__text p { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); margin: 0 0 var(--s-md); }
.mapintro__cities {
  display: flex; flex-wrap: wrap; gap: var(--s-2xs) var(--s-xs); margin-block-end: var(--s-md);
}
.mapintro__cities span {
  font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--ink-3); padding: .25em .6em; border: var(--hair);
}
@media (max-width: 820px) {
  .mapintro__grid { grid-template-columns: 1fr; gap: var(--s-lg); }
}

/* ───────────────── 産地物語ページ（guide/origins） ───────────────── */
.ostory { }
.ostory__hero {
  position: relative; overflow: clip;
  background:
    radial-gradient(90% 120% at 80% 0%, var(--red-tint), transparent 55%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
  padding-block: var(--s-2xl) var(--s-xl);
  border-block-end: var(--rule);
}
.ostory__hero .eyebrow { color: var(--red); }
.ostory__hero h1 {
  font-family: var(--serif); font-weight: 700; font-size: var(--t-2xl);
  line-height: var(--lh-tight); letter-spacing: var(--ls-jp); margin: var(--s-xs) 0 var(--s-md);
}
.ostory__hero h1 em { font-style: normal; color: var(--red); }
.ostory__hero .lead { font-size: var(--t-md); line-height: var(--lh-snug); color: var(--ink-2); max-width: 60ch; }

.ostory__thesis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md);
  padding-block: var(--s-xl);
}
.ostory__thesis .opillar { padding-inline-start: var(--s-sm); border-inline-start: 3px solid var(--red); }

.ostory__map { padding-block: var(--s-lg) var(--s-2xl); }
.ostory__map .heading { margin-block-end: var(--s-md); }

.ostory__regions { padding-block-end: var(--s-2xl); }
.oregion {
  border-block-start: var(--rule); padding-block: var(--s-lg);
  display: grid; grid-template-columns: 13rem 1fr; gap: var(--s-lg);
}
.oregion__head { position: sticky; top: var(--s-md); align-self: start; }
.oregion__n { font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-label); color: var(--red); }
.oregion__head h2 { font-family: var(--serif); font-weight: 600; font-size: var(--t-lg); line-height: var(--lh-tight); margin: var(--s-3xs) 0 var(--s-2xs); }
.oregion__head .en { font-family: var(--grotesk); font-size: var(--t-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); }
.oregion__body p { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); margin: 0 0 var(--s-sm); }
.oregion__cities { display: flex; flex-wrap: wrap; gap: var(--s-2xs) var(--s-xs); margin-block-start: var(--s-sm); }
.oregion__cities a {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink); text-decoration: none;
  padding: .3em .8em; border: var(--hair-2); transition: color var(--d1) var(--ease), border-color var(--d1) var(--ease), background var(--d1) var(--ease);
}
.oregion__cities a:hover { color: var(--paper); background: var(--red); border-color: var(--red); }
/* 東トルキスタン：在庫非依存の文化節（赤アクセントで「遺産」を示す） */
.oregion--heritage { background: linear-gradient(90deg, var(--red-tint), transparent 46%); }
.oregion--heritage .oregion__head h2 { color: var(--red-deep); }
.oregion--heritage .oregion__head .en { color: var(--red); }

@media (max-width: 760px) {
  .ostory__thesis { grid-template-columns: 1fr; gap: var(--s-lg); }
  .oregion { grid-template-columns: 1fr; gap: var(--s-sm); }
  .oregion__head { position: static; }
}

/* ============================================================
   躍動感：モーション（prefers-reduced-motion: no-preference のみ）
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* 緯糸が左から織り込まれる（無限・生命の鼓動として止まらない） */
  .oasis-loom .weft {
    stroke-dasharray: 24 760;
    animation: oasisWeave 5.4s linear infinite;
  }
  .oasis-loom .weft:nth-of-type(2n) { animation-duration: 6.6s; }
  .oasis-loom .weft:nth-of-type(3n) { animation-duration: 7.8s; }

  /* 描画系は常に dasharray を持たせる（offset 0 = 既定で可視＝no-JS でも見える） */
  .oasis-loom .petal, .oasis-loom .ring, .oasis-loom .stem {
    stroke-dasharray: var(--len);
  }
  /* JS 起動時のみ reveal 前に隠す（reveal-init は app.js が付与） */
  .oasis__stage.reveal-init .petal,
  .oasis__stage.reveal-init .ring,
  .oasis__stage.reveal-init .stem { stroke-dashoffset: var(--len); }

  /* 楽園のメダリオン／花が咲く（reveal で開始、forwards で保持） */
  .oasis__stage.reveal-in .petal,
  .oasis__stage.reveal-in .ring,
  .oasis__stage.reveal-in .stem {
    animation: oasisBloom 2.2s var(--ease) forwards;
  }
  .oasis__stage.reveal-in .ring  { animation-delay: .1s; }
  .oasis__stage.reveal-in .stem  { animation-delay: .5s; }
  .oasis__stage.reveal-in .petal { animation-delay: .8s; }
  .oasis__stage.reveal-in .petal:nth-of-type(2n) { animation-delay: 1.0s; }
  .oasis__stage.reveal-in .petal:nth-of-type(3n) { animation-delay: 1.2s; }

  /* 蕾が遅れて点灯 */
  .oasis__stage.reveal-in .bud { opacity: 0; animation: oasisBudIn .6s var(--ease) forwards; animation-delay: 1.6s; }

  /* 中心が脈打つ＝生命 */
  .oasis-loom .heart { transform-box: fill-box; transform-origin: center; animation: oasisPulse 2.1s var(--ease-ink) infinite; }
  .oasis-loom .sun   { transform-box: fill-box; transform-origin: center; animation: oasisPulse 4s var(--ease) infinite; }

  /* 隊商路が流れる */
  .mapintro__route .road { stroke-dasharray: 7 7; animation: oasisCaravan 1.6s linear infinite; }
  .mapintro__fig img { transform: scale(1.03); transition: transform 1.2s var(--ease); }
  .mapintro__grid:hover .mapintro__fig img { transform: scale(1.07); }
}

@keyframes oasisWeave  { to { stroke-dashoffset: -760; } }
@keyframes oasisBloom  { to { stroke-dashoffset: 0; } }
@keyframes oasisBudIn  { to { opacity: 1; } }
@keyframes oasisPulse  { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.16); opacity: .78; } }
@keyframes oasisCaravan{ to { stroke-dashoffset: -28; } }

/* 静止時（reduced-motion / 非対応）の最終状態を保証 */
@media (prefers-reduced-motion: reduce) {
  .oasis-loom .weft { opacity: .4; stroke-dashoffset: 0; }
  .oasis-loom .petal, .oasis-loom .ring, .oasis-loom .stem { stroke-dashoffset: 0; }
  .oasis-loom .bud { opacity: 1; }
}