/* ===================================================================
   hub.css — トップページ（3 つの肩書きの入口）
   photography/ と同じ黒とオフホワイトの配色。写真だけが色を持つ。
   html.js が付いているときだけ演出前の初期状態を隠す。
   =================================================================== */

@font-face {
  font-family: 'Unbounded';
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212;
}
@font-face {
  font-family: 'M PLUS 1p';
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/mplus1p-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212;
}

:root {
  --bg: #0a0a0a;
  --fg: #ecebe6;
  --dim: rgba(236, 235, 230, 0.5);
  --dim-solid: #9b9a95;  /* 説明文用の不透明なグレー。半透明色の遷移だと戻り際にちらつくため */
  --line: rgba(236, 235, 230, 0.16);
  --display: 'Unbounded', 'Helvetica Neue', Arial, sans-serif;
  --text: 'M PLUS 1p', 'Helvetica Neue', Arial, sans-serif;
  --pad: clamp(18px, 3vw, 48px);
  --ease: cubic-bezier(.19, 1, .22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overscroll-behavior: none; background: var(--bg); }
body {
  margin: 0; color: var(--fg); font-family: var(--text); font-size: 12px; line-height: 1.6; letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: -6px; }
::selection { background: var(--fg); color: var(--bg); }

/* ---------- 固定ヘッダー（写真の上でも読めるよう差分合成） ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
  padding: 20px var(--pad); mix-blend-mode: difference; color: #fff; pointer-events: none;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- フッター：背景をぼかした帯。ボタンは枠ごと押せる ---------- */
.bottom {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 12px var(--pad); color: var(--fg);
  background: rgba(10, 10, 10, 0.38); border-top: 1px solid rgba(236, 235, 230, 0.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.bottom-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bottom-links a, .bottom-email {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px;
  border-radius: 999px; color: var(--fg); text-transform: uppercase; letter-spacing: 0.14em;
  transition: background-color .3s;
}
.bottom-email { text-transform: none; letter-spacing: 0.06em; }
.bottom-links a:hover, .bottom-email:hover { background: rgba(236, 235, 230, 0.16); }   /* 枠は付けず、ホバーでうっすら面が出るだけ */
html.js .top, html.js .bottom { opacity: 0; }

/* ---------- Panels ---------- */
.panels { display: flex; height: 100svh; min-height: 560px; }
.panel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--pad) + 44px) var(--pad) calc(var(--pad) + 64px);
  border-left: 1px solid var(--line);
  transition: flex-grow .9s var(--ease);
}
.panel:first-child { border-left: 0; }
a.panel, .bottom a, .bottom button { cursor: pointer; }  /* href をホバー中に外すので手動で指定 */
html.js .panel { clip-path: inset(100% 0 0 0); }

.panel-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: filter .8s, opacity .8s; }
.panel-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.78), rgba(10,10,10,.12) 55%, rgba(10,10,10,.4)); }
.panel > *:not(.panel-bg) { position: relative; z-index: 1; }

/* 01: エンジニアページと同じ濃いグレー（#242424）の地に、同ページの見出しと同じ "Ske"。
   遷移先と同じ空気を、写真なしで静かに見せる */
.p-eng .panel-bg { background: #242424; overflow: hidden; }
.p-eng .panel-bg::after { background: linear-gradient(to top, rgba(10,10,10,.5), rgba(10,10,10,0) 55%); }
.eng-mark {
  position: absolute; left: var(--pad); top: 16%;
  font-family: var(--display); font-weight: 800; font-size: clamp(90px, 10.2vw, 190px); line-height: 1; letter-spacing: -0.03em;
  color: #fafafa; white-space: nowrap; user-select: none;
}
.p-photo .panel-bg { background-image: url('assets/photos/thumb/photo-03.jpg'); }
.p-nature .panel-bg { background-image: url('assets/photos/thumb/photo-07.jpg'); }
/* 何もホバーしていないときは写真はフルカラー。文字が読めるよう少しだけ暗くする */
.p-eng .panel-bg, .p-photo .panel-bg, .p-nature .panel-bg { filter: grayscale(0) brightness(.85); }

.panel-body { display: flex; flex-direction: column; gap: 1.4rem; }
.panel-role {
  display: block; font-family: var(--display); font-weight: 300; line-height: 1.02; letter-spacing: -0.055em;
  font-size: clamp(28px, 3.5vw, 66px); white-space: nowrap;
}
.ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ln > span { display: block; }
html.js .ln > span { opacity: 0; }
.panel-desc { display: flex; flex-direction: column; white-space: nowrap; color: #c9c8c2; font-size: 12px; letter-spacing: 0.06em; }  /* 色は固定。ホバーで色を遷移させない（戻り際のちらつき防止） */
.panel-go { display: inline-flex; gap: .8rem; align-items: center; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; }
.panel-go i { font-style: normal; display: inline-block; transition: transform .6s var(--ease); }
html.js .panel-desc, html.js .panel-go { opacity: 0; }

/* ホバー（とキーボードフォーカス）で幅が広がり、写真が起き上がる。ほかの 2 枚は沈む */
@media (hover: hover) and (min-width: 861px) {
  .panels .panel:hover, .panels .panel:focus-visible { flex-grow: 1.6; }
  /* どれかにホバーしている間、ホバーしていない写真は完全にモノクロにして沈める */
  .panel:hover .panel-bg, .panel:focus-visible .panel-bg { filter: grayscale(0) brightness(1); }
  .panels:has(.panel:hover) .panel:not(:hover) .panel-bg,
  .panels:has(.panel:focus-visible) .panel:not(:focus-visible) .panel-bg { filter: grayscale(1) brightness(.55); }
  .panel:hover .panel-go i { transform: translateX(8px); }
}

/* ---------- Mobile: 縦に 3 枚 ---------- */
@media (max-width: 860px) {
  .panels { flex-direction: column; height: auto; min-height: 0; }
  .panel { flex: none; min-height: 34svh; border-left: 0; border-top: 1px solid var(--line); padding: 28px var(--pad); }
  .panel:first-child { padding-top: calc(var(--pad) + 52px); min-height: calc(34svh + 52px); }
  .panel:last-child { padding-bottom: 28px; }
  .panel-body { gap: .9rem; }
  .panel-role { font-size: clamp(30px, 9vw, 52px); }
  .top-meta { display: none; }
  .bottom { position: static; padding: 20px var(--pad) 28px; flex-wrap: wrap; -webkit-backdrop-filter: none; backdrop-filter: none; background: none; }
  .bottom-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}