/* ============================================================
   pages/about.css
   「私たちについて」固有のレイアウト・モーション
   設計事務所トーン(明朝×ゴシック / オレンジ抑制 / 余白潤沢)を継承。
   下層ページの設計言語の基準として整備。
   ============================================================ */

@layer pages {

  /* ===== 共通: スクロールリビール(下層用) =====
     main.js が [data-reveal] を監視して .is-visible を付与する。
     home.css の [data-animate] と役割を分け、こちらは
     「親に付けて子を順次出す」用途で使う。 */
  [data-reveal] {
    --reveal-y: 24px;
  }

  /* ============================================================
     01 Origin(社名の由来) — 図面ビジュアルを主役に
     ============================================================ */
  .p-origin__lead { max-width: 64ch; margin-bottom: var(--sp-7); }
  .p-origin__close { max-width: 64ch; margin-top: var(--sp-7); }

  /* 由来の2語(Cue / 9pt)を2列で */
  .p-origin__terms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--sp-5), 4vw, var(--sp-8));
    margin-top: var(--sp-7);
  }
  .p-origin__term {
    padding-left: var(--sp-5);
    border-left: 2px solid var(--c-line);
  }
  .p-origin__term-key {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    color: var(--c-text);
    margin-bottom: var(--sp-2);
  }
  .p-origin__term-key small {
    font-size: var(--fs-caption);
    font-family: var(--ff-sans);
    color: var(--c-accent);
    letter-spacing: var(--tr-eyebrow);
    margin-left: 0.6em;
    text-transform: uppercase;
  }
  .p-origin__term-desc {
    font-size: var(--fs-small);
    color: var(--c-text-muted);
    line-height: var(--lh-body);
  }

  /* 図面ビジュアル(MV_company)の額装 */
  .p-blueprint {
    position: relative;
    border: 1px solid var(--c-line);
    background: var(--c-bg-alt);
    padding: var(--sp-3);
    overflow: hidden;
    opacity: 0;
    transform: translateY(var(--reveal-y, 24px));
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .p-blueprint.is-visible { opacity: 1; transform: translateY(0); }
  .p-blueprint img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* コーナーの設計図的なトンボ */
  .p-blueprint::before,
  .p-blueprint::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--c-text-subtle);
    z-index: 2;
  }
  .p-blueprint::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
  .p-blueprint::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

  /* 図面の上に「キューを打つ」マーカー(由来＝重要な転換点) */
  .p-blueprint__marker {
    position: absolute;
    top: 38%; left: 30%;
    width: 18px; height: 18px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
  }
  .p-blueprint.is-visible .p-blueprint__marker {
    animation: cuePoint 0.6s var(--ease) 0.7s forwards;
  }
  .p-blueprint__marker::before {
    content: "";
    position: absolute; inset: 0;
    border: 1.5px solid var(--c-accent);
    border-radius: 50%;
  }
  .p-blueprint.is-visible .p-blueprint__marker::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 3px; height: 3px;
    background: var(--c-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  /* マーカーから外へ広がる波紋 */
  .p-blueprint__ping {
    position: absolute;
    top: 38%; left: 30%;
    width: 18px; height: 18px;
    border: 1.5px solid var(--c-accent);
    border-radius: 50%;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
  }
  .p-blueprint.is-visible .p-blueprint__ping {
    animation: cuePing 2.4s var(--ease) 1.3s infinite;
  }
  .p-blueprint__cap {
    position: absolute;
    bottom: var(--sp-4);
    left: var(--sp-4);
    z-index: 3;
    font-family: var(--ff-sans);
    font-size: var(--fs-caption);
    letter-spacing: 0.15em;
    color: var(--c-text-muted);
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(4px);
    padding: 0.4em 0.9em;
  }
  .p-blueprint__cap b {
    color: var(--c-accent);
    font-weight: var(--fw-medium);
  }

  @keyframes cuePoint {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes cuePing {
    0%   { opacity: 0.7; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(3.4); }
    100% { opacity: 0;   transform: scale(3.4); }
  }

  /* ============================================================
     02 Statement(ブランドステートメント帯)
     ============================================================ */
  .p-statement {
    position: relative;
    text-align: center;
    overflow: hidden;
  }
  /* 背景に明朝の "9" + 右上の○(ブランドの意匠)を大きく薄く敷く */
  .p-statement__watermark {
    position: absolute;
    right: clamp(0.5rem, 3vw, 3rem);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--ff-display);
    font-size: clamp(12rem, 30vw, 26rem);
    line-height: 1;
    color: var(--c-line-soft);
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  .p-statement__watermark span { position: relative; }
  .p-statement__watermark span::after {
    content: "";
    position: absolute;
    top: 0.07em;
    right: -0.2em;
    width: 0.17em;
    height: 0.17em;
    border-radius: 50%;
    background: var(--c-brand-200);
  }
  .p-statement__inner {
    position: relative;
    z-index: 1;
  }
  .p-statement__lead {
    font-family: var(--ff-display);
    font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    letter-spacing: var(--tr-display);
    color: var(--c-text);
    margin: 0 0 var(--sp-5);
  }
  .p-statement__sub {
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--c-text-muted);
    max-width: 40ch;
    margin: 0 auto;
  }

  /* ============================================================
     03 Values(大事にしていること)
     ============================================================ */
  .p-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--c-line);
  }
  .p-value {
    padding: var(--sp-7) var(--sp-6);
    border-bottom: 1px solid var(--c-line);
    /* 縦の区切り線 */
    border-left: 1px solid var(--c-line);
  }
  .p-value:first-child { border-left: 0; }
  /* リビール前のみ伏せておく(再生後は通常状態=表示に戻る) */
  .p-values[data-reveal]:not(.is-visible) .p-value {
    opacity: 0;
    transform: translateY(20px);
  }
  .p-values.is-visible .p-value {
    animation: valueIn 0.6s var(--ease) backwards;
  }
  .p-values.is-visible .p-value:nth-child(1) { animation-delay: 0s; }
  .p-values.is-visible .p-value:nth-child(2) { animation-delay: 0.12s; }
  .p-values.is-visible .p-value:nth-child(3) { animation-delay: 0.24s; }
  @keyframes valueIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .p-value__num {
    font-family: var(--ff-num);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.2em;
    color: var(--c-accent);
    margin-bottom: var(--sp-4);
  }
  .p-value__title {
    font-family: var(--ff-display);
    font-size: clamp(1.05rem, 1.4vw + 0.7rem, 1.3rem);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    letter-spacing: 0.01em;
    color: var(--c-text);
    margin: 0 0 var(--sp-4);
    white-space: nowrap;
  }
  .p-value__title::before { display: none; }   /* h3デフォルトの小四角を消す */
  .p-value__desc {
    font-size: var(--fs-small);
    color: var(--c-text-muted);
    line-height: var(--lh-body);
    margin: 0;
  }

  /* ============================================================
     04 Message(代表メッセージ)
     ============================================================ */
  .p-message__grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: clamp(var(--sp-6), 5vw, var(--sp-9));
    align-items: start;
  }
  .p-message__portrait {
    aspect-ratio: 4 / 5;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    overflow: hidden;
  }
  .p-message__portrait img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .p-message__body > p + p { margin-top: var(--sp-4); }
  .p-message__sign {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line);
  }
  .p-message__sign-role {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    letter-spacing: 0.1em;
  }
  .p-message__sign-name {
    font-family: var(--ff-display);
    font-size: 1.25rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    color: var(--c-text);
  }

  /* ============================================================
     05 Members(6名の少数精鋭)
     ============================================================ */
  .p-members {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6) var(--sp-5);
  }
  .p-member__photo {
    aspect-ratio: 1 / 1;
    background: var(--c-surface-emphasis);
    border: 1px solid var(--c-line);
    overflow: hidden;
    margin-bottom: var(--sp-4);
    position: relative;
  }
  .p-member__photo img { width: 100%; height: 100%; object-fit: cover; }
  .p-member__name {
    font-family: var(--ff-display);
    font-size: 1.3rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    color: var(--c-text);
    margin: 0 0 var(--sp-2);
    display: flex;
    align-items: baseline;
    gap: 0.5em;
  }
  .p-member__name small {
    font-family: var(--ff-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
  }
  .p-member__role {
    font-size: var(--fs-small);
    color: var(--c-accent);
    letter-spacing: 0.08em;
    margin: 0;
  }

  /* ============================================================
     06 Stats(数字で見るキューポイント) — カウントアップ
     ============================================================ */
  .p-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
    border-top: 1px solid rgba(255,255,255,0.14);
    border-bottom: 1px solid rgba(255,255,255,0.14);
    padding: var(--sp-8) 0;
  }
  .p-stat {
    text-align: center;
    border-left: 1px solid rgba(255,255,255,0.14);
  }
  .p-stat:first-child { border-left: 0; }
  .p-stat__num {
    font-family: var(--ff-display);
    font-size: clamp(2.75rem, 5vw, 4rem);
    font-weight: var(--fw-medium);
    line-height: 1;
    color: var(--c-text-invert);
    letter-spacing: 0.02em;
  }
  .p-stat__num .p-stat__suffix {
    font-size: 0.4em;
    color: var(--c-brand-500);
    margin-left: 0.15em;
  }
  .p-stat__label {
    font-size: var(--fs-caption);
    letter-spacing: 0.15em;
    color: var(--c-text-on-dark-muted);
    margin-top: var(--sp-4);
  }

  /* ============================================================
     07 Emaki(鳥獣戯画の絵巻帯) — メンバーへの導入
     ============================================================ */
  .p-emaki {
    overflow: hidden;
  }
  .p-emaki__strip {
    margin: 0;
  }
  .p-emaki__strip img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ============================================================
     08 Company info(会社情報への動線)
     ============================================================ */
  .p-info-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    flex-wrap: wrap;
  }
  .p-info-link__text { font-size: var(--fs-small); color: var(--c-text-muted); }

  /* ============================================================
     Responsive
     ============================================================ */
  @media (max-width: 900px) {
    .p-message__grid { grid-template-columns: 280px 1fr; }
    .p-members { grid-template-columns: repeat(2, 1fr); }
    .p-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-5); }
    .p-stat:nth-child(odd) { border-left: 0; }
  }

  @media (max-width: 768px) {
    .p-origin__terms { grid-template-columns: 1fr; }
    .p-values { grid-template-columns: 1fr; border-top: 0; }
    .p-value { border-left: 0; border-top: 1px solid var(--c-line); padding: var(--sp-6) 0; }
    .p-message__grid { grid-template-columns: 1fr; }
    .p-message__portrait { max-width: 300px; }
    .p-statement__watermark { font-size: clamp(9rem, 50vw, 16rem); opacity: 0.7; }
  }

  /* ============================================================
     スクロール挙動(統合ページ)
     ============================================================ */
  html { scroll-behavior: smooth; }

  /* アンカー着地時のヘッダー+ナビ分オフセット */
  [data-spy] { scroll-margin-top: 140px; }

  /* ============================================================
     History(沿革) — 年表 + 物語 + ギャラリー
     ============================================================ */
  .p-history__lead { max-width: 60ch; margin-bottom: var(--sp-8); }
  .p-history__lead--wide { max-width: none; }
  .p-history__byline {
    font-size: var(--fs-small);
    color: var(--c-text-muted);
    border-left: 2px solid var(--c-accent);
    padding-left: var(--sp-4);
    margin: var(--sp-7) 0 var(--sp-2);
    line-height: var(--lh-body);
  }

  .p-history__timeline {
    border-left: 1px solid var(--c-line);
    padding-left: var(--sp-6);
    margin-bottom: var(--sp-9);
  }
  .p-history__row {
    position: relative;
    display: grid;
    grid-template-columns: 5.5em 1fr;
    gap: var(--sp-5);
    padding-bottom: var(--sp-5);
    align-items: baseline;
  }
  .p-history__row:last-child { padding-bottom: 0; }
  .p-history__row::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-6) - 5px);
    top: 0.55em;
    width: 9px; height: 9px;
    background: var(--c-bg);
    border: 1px solid var(--c-accent);
    border-radius: 50%;
  }
  .p-history__year {
    font-family: var(--ff-num);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    color: var(--c-accent);
  }
  .p-history__event {
    font-size: var(--fs-small);
    color: var(--c-text);
    line-height: var(--lh-body);
    margin: 0;
  }

  /* 各時代の語り */
  .p-history__eras { display: grid; gap: var(--sp-9); }
  .p-era {
    display: grid;
    grid-template-columns: 13em 1fr;
    gap: clamp(var(--sp-5), 4vw, var(--sp-8));
    padding-top: var(--sp-7);
    border-top: 1px solid var(--c-line);
  }
  .p-era__head {
    position: sticky;
    top: 140px;          /* ヘッダー + ローカルナビ分 */
    align-self: start;
    height: max-content;
  }
  .p-era__period {
    font-family: var(--ff-num);
    font-size: var(--fs-caption);
    letter-spacing: 0.15em;
    color: var(--c-accent);
    margin-bottom: var(--sp-2);
  }
  .p-era__title {
    font-family: var(--ff-display);
    font-size: 1.3rem;
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-heading);
    line-height: var(--lh-heading);
    color: var(--c-text);
    margin: 0;
  }
  .p-era__title::before { display: none; }   /* h3デフォルトの小四角を消す */
  .p-era__body { max-width: none; }
  .p-era__body > p + p { margin-top: var(--sp-4); }
  .p-era__body strong {
    font-weight: var(--fw-bold);
    color: var(--c-text);
  }
  /* 旧サイト踏襲のマーカー下線(オレンジは彩度を落として静かに) */
  .p-era__body .u-mark {
    font-weight: var(--fw-medium);
    background-image: linear-gradient(to top, var(--c-brand-200) 0, var(--c-brand-200) 0.34em, transparent 0.34em);
    background-repeat: no-repeat;
    padding-bottom: 0.02em;
  }

  /* 沿革ギャラリー(名刺・周年・企画) */
  .p-history__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    margin-top: var(--sp-9);
  }
  .p-history__shot { margin: 0; }
  .p-history__shot img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--c-line);
    background: var(--c-bg-alt);
  }
  .p-history__shot figcaption {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    margin-top: var(--sp-3);
  }

  /* ============================================================
     Company(会社概要テーブル) / Access(地図)
     ============================================================ */
  .p-company__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .p-access__map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    border: 1px solid var(--c-line);
    background: var(--c-bg-alt);
    overflow: hidden;
  }
  .p-access__map iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
  }
  .p-access__addr {
    margin-top: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5) var(--sp-8);
  }
  .p-access__addr dt {
    font-size: var(--fs-caption);
    letter-spacing: 0.12em;
    color: var(--c-accent);
    margin-bottom: var(--sp-2);
  }
  .p-access__addr dd {
    font-size: var(--fs-small);
    color: var(--c-text);
    line-height: var(--lh-body);
    margin: 0;
  }

  @media (max-width: 768px) {
    .p-era { grid-template-columns: 1fr; gap: var(--sp-3); }
    .p-history__gallery { grid-template-columns: 1fr; }
    .p-history__shot img { aspect-ratio: 16 / 10; }
  }

  /* モーション削減 */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .p-blueprint,
    .p-value { opacity: 1; transform: none; }
    .p-blueprint.is-visible .p-blueprint__marker,
    .p-blueprint.is-visible .p-blueprint__ping { animation: none; opacity: 1; }
    .p-values.is-visible .p-value { animation: none; }
  }
}