/*
 * good-o モバイルナビ（.gd-nav） — ヘッダー右上のメニュートリガーと、そこから降りる面。
 *
 * 読み込むページ: 全ページ（src/components/Header.astro が固定名で読む）
 *
 * 方針は service-flow.css / makasu.css と同じ:
 *  - 新しい色・書体を持ち込まない。--color-* と motion-system.css と同値の
 *    トークン（未読込ページ用の fallback 付き）だけで組む。
 *  - public/ の固定名で配信し、_astro のハッシュに影響を与えない。
 *  - 旧 .mobile-menu 系のCSS（global.css / final-home.css / polish-home.css）は
 *    クラス名を変えたので当たらない。_astro を触らないための措置で、
 *    死んだCSSの削除は _astro を作り直す別releaseで行う。
 *
 * 設計の核 ——「線が引かれる」:
 *  このサイトでブランドグラデーションは常に《線》として出る（ロゴのストローク、
 *  MAKASUプレートの上端、セクションの罫）。トリガーもその言語で組む。
 *   閉: 墨の3本線（20 / 12 / 20px）。長短があるので「並んだ項目」に見える。
 *   開: 上下が交差して ×、中央の短い線は左へ引っ込む（消えるのではなく「引かれ戻る」）。
 *       同時にタイルが霞→墨へ反転し、面の上端をスペクトルの罫が左から右へ引かれる。
 *  基底状態＝再生後の完成形。状態そのものは base CSS が持ち、transition/animation
 *  だけを @media (prefers-reduced-motion: no-preference) で囲う。
 *  （後から animation: none で打ち消す書き方は詳細度で負けるので採らない）
 */

:root {
  --gn-ink: var(--color-ink, #1b1a1f);
  --gn-paper: var(--color-white, #ffffff);
  --gn-mist: var(--color-mist, #f4f3f5);
  --gn-line: var(--color-line, #dedde2);
  --gn-plum: var(--color-teal, #5d2e54);
  /* 現在地の色。global.css の .desktop-nav a[aria-current="page"] と同値 */
  --gn-current: #7b2e60;
  --gn-focus-on-ink: var(--color-ochre-light, #f6f4de);
  --gn-spectrum: var(
    --mo-spectrum,
    linear-gradient(90deg, #d7d93e 0%, #4ad7a8 32%, #7f99ce 68%, #d760ae 100%)
  );
  --gn-ease-out: var(--mo-ease-out, cubic-bezier(0.22, 0.75, 0.2, 1));
  /* 交差だけ僅かに行き過ぎてから収める（「効く」感じの正体） */
  --gn-ease-snap: cubic-bezier(0.34, 1.4, 0.44, 1);
  --gn-dur-icon: 240ms;
  --gn-dur-tile: 200ms;
  --gn-dur-sheet: 280ms;
  --gn-dur-rule: 420ms;
  --gn-dur-close: 180ms;
}

/* ================================================================
 * 土台
 * ================================================================ */

.gd-nav {
  display: none;
}

.gd-nav > summary {
  list-style: none;
}

.gd-nav > summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 68.75rem) {
  .gd-nav {
    display: block;
  }
}

/* ================================================================
 * トリガー
 * ================================================================ */

.gd-nav__trigger {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  background: var(--gn-mist);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gd-nav[open] > .gd-nav__trigger {
  background: var(--gn-ink);
}

.gd-nav__trigger:focus-visible {
  outline: 2px solid var(--gn-plum);
  outline-offset: 3px;
}

.gd-nav[open] > .gd-nav__trigger:focus-visible {
  outline-color: var(--gn-focus-on-ink);
}

.gd-nav__icon {
  display: flex;
  width: 1.375rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.gd-nav__stroke {
  display: block;
  height: 0.15625rem;
  border-radius: 0.15625rem;
  background: var(--gn-ink);
}

.gd-nav__stroke:nth-child(1),
.gd-nav__stroke:nth-child(3) {
  width: 1.375rem;
}

/* 短い1本。「項目が並んでいる」ことを言うためで、装飾ではない */
.gd-nav__stroke:nth-child(2) {
  width: 0.8125rem;
}

.gd-nav[open] .gd-nav__stroke {
  background: var(--gn-paper);
}

/* 上下が中央で交差して × になる。中央の短い線は左へ引っ込む */
.gd-nav[open] .gd-nav__stroke:nth-child(1) {
  transform: translateY(0.53125rem) rotate(45deg);
}

.gd-nav[open] .gd-nav__stroke:nth-child(2) {
  transform: scaleX(0);
  opacity: 0;
}

.gd-nav[open] .gd-nav__stroke:nth-child(3) {
  transform: translateY(-0.53125rem) rotate(-45deg);
}

/* ================================================================
 * 面（ヘッダーの下端から降りてくる紙）
 * ================================================================ */

.gd-nav__scrim {
  position: absolute;
  z-index: 1;
  top: 100%;
  right: 0;
  left: 0;
  min-height: 100vh;
  background: rgb(27 26 31 / 0.32);
}

.gd-nav__sheet {
  position: absolute;
  z-index: 2;
  top: 100%;
  right: 0;
  left: 0;
  padding: 0.5rem 1rem 1.25rem;
  border-bottom: 1px solid var(--gn-line);
  border-radius: 0 0 1.25rem 1.25rem;
  background: var(--gn-paper);
  box-shadow: 0 1.5rem 3rem rgb(27 26 31 / 0.16);
}

/* 面の上端に引かれるスペクトルの罫。ロゴとMAKASUプレートと同じ言語 */
.gd-nav__sheet::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.1875rem;
  background: var(--gn-spectrum);
  content: "";
  transform-origin: left center;
}

.gd-nav__list {
  display: grid;
}

.gd-nav__link {
  position: relative;
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  border-bottom: 1px solid var(--gn-line);
  color: var(--gn-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.gd-nav__link:last-of-type {
  border-bottom: 0;
}

.gd-nav__link:focus-visible {
  outline: 2px solid var(--gn-plum);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* 現在地は desktop nav と同じ色に、加えて余白へ罫を出す（台帳の欄外の印） */
.gd-nav__link[aria-current="page"] {
  color: var(--gn-current);
}

.gd-nav__link[aria-current="page"]::before {
  position: absolute;
  top: 50%;
  left: -1rem;
  width: 0.1875rem;
  height: 1.5rem;
  border-radius: 0 0.1875rem 0.1875rem 0;
  background: var(--gn-spectrum);
  content: "";
  transform: translateY(-50%);
}

.gd-nav__cta {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: var(--gn-ink);
  color: var(--gn-paper);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.gd-nav__cta::after {
  margin-left: 0.625rem;
  content: "→";
}

.gd-nav__cta:focus-visible {
  outline: 2px solid var(--gn-plum);
  outline-offset: 3px;
}

/* ================================================================
 * 動き
 * 状態は上の base が持っている。ここは「どう移るか」だけを足す。
 * ================================================================ */

@media (prefers-reduced-motion: no-preference) {
  html:not(.gd-nav-reduced) .gd-nav__trigger {
    transition: background-color var(--gn-dur-tile) var(--gn-ease-out),
      transform 90ms var(--gn-ease-out);
  }

  html:not(.gd-nav-reduced) .gd-nav__trigger:active {
    transform: scale(0.94);
  }

  html:not(.gd-nav-reduced) .gd-nav__stroke {
    transition: transform var(--gn-dur-icon) var(--gn-ease-snap),
      opacity 120ms var(--gn-ease-out),
      background-color var(--gn-dur-tile) var(--gn-ease-out);
  }

  /* 開くとき: 中央が先に引っ込み、わずかに遅れて上下が交差する */
  html:not(.gd-nav-reduced) .gd-nav[open] .gd-nav__stroke:nth-child(1),
  html:not(.gd-nav-reduced) .gd-nav[open] .gd-nav__stroke:nth-child(3) {
    transition-delay: 40ms;
  }

  html:not(.gd-nav-reduced) .gd-nav[open] .gd-nav__sheet {
    animation: gd-nav-sheet var(--gn-dur-sheet) var(--gn-ease-out) both;
  }

  html:not(.gd-nav-reduced) .gd-nav[open] .gd-nav__sheet::before {
    animation: gd-nav-rule var(--gn-dur-rule) var(--gn-ease-out) both;
  }

  html:not(.gd-nav-reduced) .gd-nav[open] .gd-nav__scrim {
    animation: gd-nav-fade 200ms var(--gn-ease-out) both;
  }

  html:not(.gd-nav-reduced) .gd-nav[open] .gd-nav__link,
  html:not(.gd-nav-reduced) .gd-nav[open] .gd-nav__cta {
    animation: gd-nav-row 220ms var(--gn-ease-out) both;
    animation-delay: calc(60ms + var(--i, 0) * 28ms);
  }

  /*
   * 閉じるとき: 面は畳まれ、段送りはしない（出るときだけ順に出る）。
   * 開くときと同じ animation-name を direction だけ変えて使い回すと、
   * 実行中のアニメーションが差し替わるだけで再生されず animationend も来ない。
   * 逆再生は必ず別名の keyframes として書く。
   */
  html:not(.gd-nav-reduced) .gd-nav[data-state="closing"] .gd-nav__sheet {
    animation: gd-nav-sheet-out var(--gn-dur-close) var(--gn-ease-out) both;
  }

  html:not(.gd-nav-reduced) .gd-nav[data-state="closing"] .gd-nav__sheet::before,
  html:not(.gd-nav-reduced) .gd-nav[data-state="closing"] .gd-nav__link,
  html:not(.gd-nav-reduced) .gd-nav[data-state="closing"] .gd-nav__cta {
    animation: none;
  }

  html:not(.gd-nav-reduced) .gd-nav[data-state="closing"] .gd-nav__scrim {
    animation: gd-nav-fade-out var(--gn-dur-close) var(--gn-ease-out) both;
  }

  /* 閉じ切る側でも中央の線は「引かれ戻る」ので、上下より遅らせる */
  html:not(.gd-nav-reduced) .gd-nav[data-state="closing"] .gd-nav__stroke:nth-child(2) {
    transition-delay: 90ms;
  }
}

/*
 * 閉じ始めた時点で、面より先にアイコンとタイルを閉状態へ戻す。
 * この間 [open] はまだ付いているので、上の開状態より詳細度を1つ上げて指定する
 * （後から打ち消すのではなく、勝つ形で書く）。
 */
.gd-nav[open][data-state="closing"] > .gd-nav__trigger {
  background: var(--gn-mist);
}

.gd-nav[open][data-state="closing"] .gd-nav__stroke {
  background: var(--gn-ink);
}

.gd-nav[open][data-state="closing"] .gd-nav__stroke:nth-child(1),
.gd-nav[open][data-state="closing"] .gd-nav__stroke:nth-child(2),
.gd-nav[open][data-state="closing"] .gd-nav__stroke:nth-child(3) {
  opacity: 1;
  transform: none;
}

@keyframes gd-nav-sheet {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-0.375rem);
  }

  to {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes gd-nav-sheet-out {
  from {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }

  to {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-0.375rem);
  }
}

@keyframes gd-nav-rule {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes gd-nav-row {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gd-nav-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes gd-nav-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ================================================================
 * 開いている間は背後を動かさない
 * ================================================================ */

html.gd-nav-open,
html.gd-nav-open body {
  overflow: hidden;
}