/* ============ Design tokens / base ============ */
/* --accent は点・線・塗りなど「面」で見せる用。同じ色を文字に使うと
   暗い背景では沈む（Lc 44.5 ＝ 本文に必要な値のおよそ半分）ので、
   文字には明るい --accent-text を使う。青の印象は保ったまま読める。 */
:root { --accent: #6f8cff; --accent-text: #adbcff; }

body {
  margin: 0;
  background: #060608;
  color: #f4f4f5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(77, 166, 255, .35); }
img { display: block; }

/* ============ Keyframes ============ */
@keyframes cuePulse { 0%, 100% { opacity: .25; transform: translateY(0) } 50% { opacity: .7; transform: translateY(6px) } }
/* orb の鼓動: transform/opacity のみ（コンポジタ合成）。box-shadow / blur を
   毎フレーム再描画させるとモバイル Safari がクラッシュするため使用禁止 */
@keyframes orbGlow { 0%, 100% { opacity: .55; transform: scale(.85) } 50% { opacity: .95; transform: scale(1.15) } }
@keyframes charIn { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
@keyframes eq { from { transform: scaleY(.15) } to { transform: scaleY(1) } }

/* ============ Orb（青い点→光の玉）============ */
/* グローは box-shadow ではなく「描き済みのグラデーション」を transform で
   拡縮するだけにする（Apple 方式）。GPU 合成のみで完結し再描画が起きない */
.orb {
  border-radius: 50%;
  background: #bfe0ff;
}
.orb::before {
  content: '';
  position: absolute;
  inset: -54px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191,224,255,.6) 0%, rgba(77,166,255,.38) 18%, rgba(77,166,255,.12) 46%, rgba(77,166,255,0) 72%);
  animation: orbGlow 4s ease-in-out infinite;
}

/* ============ Nav ============ */
.nav-links { display: flex; align-items: center; gap: 26px; }

/* Henro（うどん遍路）は日々の食べ歩き記録で、経歴を載せた他のページとは
   性格が違う。区切り線と小さな点を添えて、ひと目で別枠だと分かるようにする */
.nav-sep { width: 1px; height: 12px; background: rgba(255,255,255,.2); flex: none; }
.nav-log { display: inline-flex; align-items: center; gap: 7px; }
.nav-log::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent, #6f8cff);
  flex: none;
}
.menu-sep { width: 44px; height: 1px; background: rgba(255,255,255,.2); margin: 18px 0; }
.menu-log { display: inline-flex; align-items: baseline; gap: 12px; }
.menu-log small { font: 400 14px 'Noto Sans JP', sans-serif; color: var(--accent-text, #adbcff); }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px 4px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-burger span { display: block; width: 20px; height: 1.5px; background: #f4f4f5; transition: transform .3s ease, opacity .3s ease; }
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6,6,8,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  gap: 8px;
}
body.menu-open .menu-overlay { display: flex; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 819px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ============ Hover helpers（プロトタイプの style-hover 相当）============ */
.hw { transition: color .3s ease; }
.hw:hover { color: #f4f4f5 !important; }
.hbg { transition: background .3s ease; }
.hbg:hover { background: rgba(255,255,255,.03); }
.pill:hover { background: var(--accent) !important; color: #060608 !important; }

/* Works カード（hover 浮上） */
.wcard { transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s ease; }
.wcard:hover { transform: translateY(-8px); border-color: rgba(255,255,255,.3); }
/* Home 帯カード（傾き→水平+浮上） */
.gcard { transform: rotate(var(--tilt, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s ease; }
.gcard:hover { transform: rotate(0deg) translateY(-8px); border-color: rgba(255,255,255,.3); }

/* Contact: SNS/リンクカード（hover 浮上） */
.lcard:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.3); }
/* Contact: フォーム入力欄 */
.field::placeholder { color: rgba(244,244,245,.78); }
.field:focus { border-color: var(--accent, #6f8cff) !important; }
select.field { background-image: linear-gradient(45deg, transparent 50%, rgba(244,244,245,.5) 50%), linear-gradient(135deg, rgba(244,244,245,.5) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
select.field option { background: #0a0a0e; color: #f4f4f5; }

/* ============ 線が左から引かれる演出（style-before 相当）============ */
/* スクラブ駆動（Home 柱の具体行） */
.kline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  transform: scaleX(var(--k, 0));
  transform-origin: left;
  background: rgba(255,255,255,.35);
}
/* IntersectionObserver 駆動（About メタ表・Research 受賞） */
.rline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  transform: scaleX(var(--r, 0));
  transform-origin: left;
  background: rgba(255,255,255,.25);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}

/* ============ 軽量 YouTube 埋め込み（About 演奏欄）============ */
/* 普段はポスター画像＋再生ボタンだけ。クリックで site.js が iframe を差し込む。
   これで YouTube の重いスクリプトを「押すまで」読み込まない（Apple 式の軽さ）。 */
.yt-lite {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
}
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(6,6,8,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s ease;
}
.yt-play::before {
  content: '';
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #f4f4f5;
}
.yt-lite:hover .yt-play { transform: translate(-50%, -50%) scale(1.09); background: rgba(111,140,255,.9); }

/* ============ フィルタチップ（Works / Archive）============ */
.chip {
  font: 400 12px 'Noto Sans JP', sans-serif;
  letter-spacing: .1em;
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .3s ease;
  background: none;
  color: rgba(244,244,245,.88);
  border: 1px solid rgba(255,255,255,.2);
}
.chip.on { background: #f4f4f5; color: #060608; border-color: #f4f4f5; }

/* ============ Archive アコーディオン ============ */
.acc-body { display: none; }
.arch-item.open .acc-body { display: block; }
.chev { color: var(--accent-text, #adbcff); display: inline-block; transition: transform .35s ease; transform: rotate(0deg); }
.arch-item.open .chev { transform: rotate(180deg); }
.hidden-by-filter { display: none !important; }

/* ============ レスポンシブ（プロトタイプの data-m 相当）============ */
@media (max-width: 760px) {
  [data-m="stack"] { display: flex !important; flex-direction: column !important; gap: 34px !important; align-items: stretch !important; }
  .p-archive [data-m="stack"] { gap: 10px !important; }
  [data-m="stack6"] { display: flex !important; flex-direction: column !important; gap: 6px !important; }
  [data-m="wrap"] { flex-wrap: wrap !important; row-gap: 4px !important; }
  [data-m="wrapc"] { flex-wrap: wrap !important; justify-content: center !important; row-gap: 14px !important; }
  [data-m="pad0"] { padding-left: 6px !important; }
  [data-m="photo"] { height: min(52vh, 420px) !important; }
  [data-m="statcol"] { display: flex !important; flex-direction: column !important; gap: 0 !important; border-top: 1px solid rgba(255,255,255,.12); }
  [data-m="statrow"] { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; border-radius: 0 !important; background: none !important; padding: 22px 4px !important; }
  [data-m="statrow"] p { margin: 0 !important; text-align: right !important; max-width: 46%; }
  [data-m="vflow"] { flex-direction: column !important; align-items: stretch !important; }
  [data-m="varrow"] { transform: rotate(90deg) !important; align-self: center !important; }
  [data-m="poster"] { position: static !important; }
  [data-m="ystick"] { position: static !important; border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 8px; }
  /* 柱写真の上のグラデーション: モバイルでは文字が下寄せなので縦方向に切り替える */
  [data-m="shade"] { background: linear-gradient(180deg, rgba(6,6,8,.4) 0%, rgba(6,6,8,.62) 40%, rgba(6,6,8,.92) 78%, rgba(6,6,8,.96) 100%) !important; }
  /* Home 導入の4行: モバイルでは大きすぎて左右が見切れるので縮小＋インデント解除 */
  [data-m="intro"] { font-size: clamp(18px, 5vw, 26px) !important; margin-left: 0 !important; }
  /* 列を画面幅に固定（非表示の「バラバラに見える。」が字間拡大で列を広げ中央寄せで見切れるのを防ぐ） */
  [data-m="introwrap"] { width: 100% !important; box-sizing: border-box !important; }
  /* フッター: モバイルは Sitemap / Links を横並び2列に。名前と Contact（長いメール）は全幅 */
  [data-m="fgrid"] { grid-template-columns: 1fr 1fr !important; gap: 34px 20px !important; }
  [data-m="fgrid"] > div:nth-child(1) { grid-column: 1 / -1; }
  [data-m="fgrid"] > div:nth-child(3) { grid-column: 1 / -1; order: 4; }
}