/* ── Hero レイアウト ─────────────────────────────────────── */
#hero {
  padding: clamp(16rem, 28vh, 24rem) clamp(1.5rem, 5vw, 4rem) clamp(12rem, 22vh, 18rem);
}

#hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

#hero-subtitle-words {
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-weight: 400;
  color: var(--text-muted);
}

/* ── Hero 中央ロゴ ──────────────────────────────────────── */
.hero-center-logo {
  display: block;
  margin: 0 auto;
  width: clamp(200px, 22vw, 300px);
  height: auto;
  opacity: 0;
  will-change: opacity, transform;
  transform: translateY(clamp(-2rem, -4vh, -3rem));
  margin-bottom: -0.5rem;
}

.hero-center-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Hero テキスト — アニメーションまで非表示 ────────────── */
#hero-text-c,
#hero-words,
#hero-subtitle-words {
  opacity: 0;
}

/* ── ヘッダーロゴ ────────────────────────────────────────── */
#nav-logo .nav-logo-img,
#nav-logo img {
  display: block;
  width: 40px;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s 0.8s;
  will-change: opacity;
}

/* ── 2回目以降（repeat visit） ───────────────────────────── */
.hero-logo-animated .hero-center-logo {
  opacity: 0 !important;
}

.hero-logo-animated #hero-text-c,
.hero-logo-animated #hero-words,
.hero-logo-animated #hero-subtitle-words {
  opacity: 1;
}

.hero-logo-animated #nav-logo .nav-logo-img,
.hero-logo-animated #nav-logo img {
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* ── prefers-reduced-motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-center-logo {
    opacity: 1;
  }
  #hero-text-c,
  #hero-words,
  #hero-subtitle-words {
    opacity: 1;
  }
  #nav-logo .nav-logo-img,
  #nav-logo img {
    opacity: 1;
    visibility: visible;
  }
}

/* ── About 等、ヒーローロゴがないページ ───────────────── */
body.page-about #nav-logo .nav-logo-img,
body.page-about #nav-logo img {
  opacity: 1;
  visibility: visible;
}

/* ── ダークモード: 黒ロゴを反転して表示 ─────────────────── */
[data-theme="dark"] .hero-center-logo img,
[data-theme="dark"] #nav-logo img {
  filter: invert(1);
}

/* JS 適用前のフォールバック（OS ダーク + 明示ライト以外） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-center-logo img,
  :root:not([data-theme="light"]) #nav-logo img {
    filter: invert(1);
  }
}