/* ============================================================
 * AtoBoo Header
 *
 * トンボ（印刷の位置合わせマーク）モチーフのヘッダー。
 * 初期状態：背景透過 / ロゴ＋トンボ＝ダークオリーブ
 * スクロール後：背景＝ダークオリーブ / ロゴ＋トンボ＝ベージュ
 * ============================================================ */

:root {
  --atb-olive:       #3f3b00;
  --atb-olive-dark:  #1a1800;
  --atb-beige:       #ededdc;
  --atb-beige-dim:   rgba(237,237,220,0.42);
  --atb-beige-dimmer:rgba(237,237,220,0.14);
}

/* ------------------------------------------------------------
 * Header container
 * ------------------------------------------------------------ */

.atb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 64px;
  background: transparent;
  color: var(--atb-olive);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.atb-header[data-scrolled="true"] {
  background: var(--atb-olive);
  color: var(--atb-beige);
}

.atb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .atb-header__inner {
    padding: 0 16px;
  }
}

/* ------------------------------------------------------------
 * トップページ（body.home）のみ：
 * トンボボタンをヒーローセクション .nav-list の右端と揃える
 * ヒーローナビは right: 2.5vw + li padding-right: 1rem なので、
 * テキスト右端はビューポート右端から calc(2.5vw + 1rem) 内側
 * ------------------------------------------------------------ */

body.home .atb-tombo-btn {
  position: absolute;
  right: calc(2.5vw + 1rem);
  top: 10px; /* (header 64 - btn 44) / 2 */
}

@media (max-width: 999px) {
  /* ヒーローナビが消える幅では通常 flex 配置に戻す */
  body.home .atb-tombo-btn {
    position: static;
    right: auto;
    top: auto;
  }
}

/* ------------------------------------------------------------
 * Logo
 * ------------------------------------------------------------ */

.atb-header__logo {
  display: inline-flex;
  align-items: center;
  height: 28px;
  text-decoration: none;
  color: inherit;
}

.atb-header__logo svg {
  height: 100%;
  width: auto;
  display: block;
}

/* ------------------------------------------------------------
 * Tombo Menu Button
 * ------------------------------------------------------------ */

.atb-tombo-btn {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.atb-tombo-btn__svg {
  width: 30px;
  height: 30px;
  overflow: visible;
}

.atb-tombo-btn__corner {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: square;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  animation: atb-tombo-breathe 4s ease-in-out infinite;
}

.atb-tombo-btn__cross {
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  animation: atb-tombo-breathe 4s ease-in-out infinite;
}

.atb-tombo-btn__circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  animation: atb-tombo-breathe 4s ease-in-out infinite;
}

@keyframes atb-tombo-breathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.85; }
}

.atb-tombo-btn:hover .atb-tombo-btn__corner { opacity: 1; }
.atb-tombo-btn:hover .atb-tombo-btn__cross  { opacity: 1; }
.atb-tombo-btn:hover .atb-tombo-btn__circle { opacity: 1; }

/* ホバー時：4隅 L マークが外側にわずかに散る */
.atb-tombo-btn__g {
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.atb-tombo-btn__g--tl { transform-origin: 4px 4px; }
.atb-tombo-btn__g--tr { transform-origin: 26px 4px; }
.atb-tombo-btn__g--bl { transform-origin: 4px 26px; }
.atb-tombo-btn__g--br { transform-origin: 26px 26px; }

.atb-tombo-btn:hover .atb-tombo-btn__g--tl { transform: translate(-1.5px, -1.5px); }
.atb-tombo-btn:hover .atb-tombo-btn__g--tr { transform: translate(1.5px, -1.5px); }
.atb-tombo-btn:hover .atb-tombo-btn__g--bl { transform: translate(-1.5px, 1.5px); }
.atb-tombo-btn:hover .atb-tombo-btn__g--br { transform: translate(1.5px, 1.5px); }

/* ------------------------------------------------------------
 * Drawer (全画面オーバーレイ)
 * ------------------------------------------------------------ */

.atb-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--atb-olive-dark);
  color: var(--atb-beige);
  clip-path: inset(0 0 100% 100%);
  transition: clip-path 0.72s cubic-bezier(0.86, 0, 0.07, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.atb-drawer.is-open {
  clip-path: inset(0 0 0 0);
}

/* 横方向の細い罫線 */
.atb-drawer__rule {
  position: absolute;
  left: 64px;
  right: 64px;
  height: 0.5px;
  background: rgba(237, 237, 220, 0.07);
}
.atb-drawer__rule--top    { top: 62px; }
.atb-drawer__rule--bottom { bottom: 62px; }

@media (max-width: 768px) {
  .atb-drawer__rule {
    left: 32px;
    right: 32px;
  }
}

/* ラベル */
.atb-drawer__label {
  position: absolute;
  top: 36px;
  left: 64px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--atb-beige-dim);
}

@media (max-width: 768px) {
  .atb-drawer__label {
    left: 32px;
    top: 28px;
  }
}

/* 4隅トンボマーク */
.atb-drawer__mark {
  position: absolute;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
}
.atb-drawer__mark--tl { top: 18px; left: 18px; }
.atb-drawer__mark--tr { top: 18px; right: 18px; cursor: pointer; }
.atb-drawer__mark--bl { bottom: 18px; left: 18px; }
.atb-drawer__mark--br { bottom: 18px; right: 18px; }

/* PC ではドロワー装飾全体を拡大 */
@media (min-width: 769px) {
  /* 4隅すべてのトンボマークを 96px に拡大 */
  .atb-drawer__mark {
    width: 96px;
    height: 96px;
  }
  .atb-drawer__mark svg {
    width: 96px;
    height: 96px;
  }

  /* マーク配置位置をさらに内側に（32px → 48px） */
  .atb-drawer__mark--tl { top: 48px; left: 48px; }
  .atb-drawer__mark--tr { top: 48px; right: 48px; }
  .atb-drawer__mark--bl { bottom: 48px; left: 48px; }
  .atb-drawer__mark--br { bottom: 48px; right: 48px; }

  /* NAVIGATION ラベル */
  .atb-drawer__label {
    font-size: 1.1rem;
    top: 64px;
    left: 128px;
  }

  /* 横方向の罫線を装飾サイズに合わせて内側に */
  .atb-drawer__rule {
    left: 128px;
    right: 128px;
  }
  .atb-drawer__rule--top    { top: 112px; }
  .atb-drawer__rule--bottom { bottom: 112px; }

  /* ESC ヒント */
  .atb-drawer__esc {
    font-size: 0.95rem;
    bottom: 64px;
  }
}

.atb-drawer__mark svg {
  width: 40px;
  height: 40px;
  overflow: visible;
}

/* 閉じるボタンの呼吸アニメ（常時、視覚的アンカー） */
.atb-drawer.is-open .atb-drawer__mark--tr .atb-drawer__mark-corner,
.atb-drawer.is-open .atb-drawer__mark--tr .atb-drawer__mark-x {
  animation: atb-drawer-close-breathe 3s ease-in-out infinite;
}

@keyframes atb-drawer-close-breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}

.atb-drawer__mark-corner {
  fill: none;
  stroke: var(--atb-beige);
  stroke-width: 1;
  stroke-linecap: square;
  opacity: 0.22;
  transition: opacity 0.25s ease;
}

.atb-drawer__mark--tr:hover .atb-drawer__mark-corner { opacity: 0.6 !important; }

.atb-drawer__mark-x {
  stroke: var(--atb-beige);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.3;
  transition: opacity 0.25s ease;
}

.atb-drawer__mark--tr:hover .atb-drawer__mark-x { opacity: 0.9 !important; }

/* ナビゲーション */
.atb-drawer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.atb-drawer__item {
  display: block;
  text-decoration: none;
  text-align: center;
  margin-bottom: 0.8rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1, 0.64, 1);
}

.atb-drawer.is-open .atb-drawer__item { opacity: 1; transform: translateY(0); }
.atb-drawer.is-open .atb-drawer__item:nth-child(1) { transition-delay: 0.30s; }
.atb-drawer.is-open .atb-drawer__item:nth-child(2) { transition-delay: 0.38s; }
.atb-drawer.is-open .atb-drawer__item:nth-child(3) { transition-delay: 0.46s; }
.atb-drawer.is-open .atb-drawer__item:nth-child(4) { transition-delay: 0.54s; }
.atb-drawer.is-open .atb-drawer__item:nth-child(5) { transition-delay: 0.62s; }
.atb-drawer.is-open .atb-drawer__item:nth-child(6) { transition-delay: 0.70s; }

.atb-drawer__item-en {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: rgba(237, 237, 220, 0.45);
  transition: color 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.atb-drawer__item-jp {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--atb-beige-dim);
  opacity: 0;
  transform: translateY(-4px);
  margin-bottom: 0.5rem;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.atb-drawer__item:hover .atb-drawer__item-en {
  color: var(--atb-beige);
  transform: translateX(10px);
}

.atb-drawer__item:hover .atb-drawer__item-jp {
  opacity: 0.7;
  transform: translateY(0);
}

/* ESC ヒント */
.atb-drawer__esc {
  position: absolute;
  bottom: 30px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--atb-beige-dim);
  opacity: 0.3;
  user-select: none;
}

/* SP では ESC キーが押せないため非表示 */
@media (max-width: 768px) {
  .atb-drawer__esc {
    display: none;
  }
}

/* body スクロールロック（drawer 開放中） */
body.atb-drawer-open {
  overflow: hidden;
}

/* ------------------------------------------------------------
 * トップページ以外（body:not(.home)）：
 * - ヘッダーを最初から濃色固定（透過にしない）
 * - コンテンツに 64px の上端余白を確保（ヘッダー被り防止）
 * ------------------------------------------------------------ */

body:not(.home) .atb-header {
  background: var(--atb-olive);
  color: var(--atb-beige);
}

/* ------------------------------------------------------------
 * アーカイブと個別記事ページのみ：
 * 独自ヒーロー帯を持たないテンプレートのため、
 * ヘッダー被り防止に上部余白を確保する。
 * ------------------------------------------------------------ */

body.archive,
body.single {
  padding-top: 64px;
}