/* ───────────────────────────────
   Universe CSS
   ─────────────────────────────── */

/* JSがなくても動くデフォルト周期（JSがあれば上書きされる） */
:root {
  --period-mercury: 10s;  /* planet--data     用（Smartmeter） */
  --period-venus:   18s;  /* planet--bcp      用（Portable Power） */
  --period-earth:   30s;  /* planet--autonomous / planet--eco 用 */
  --period-mars:    55s;  /* planet--gx       用（GX / DECARBON） */
}

html,
body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", "Segoe UI",
    "Hiragino Sans", "Yu Gothic UI", "Yu Gothic",
    sans-serif;
  height: 100%;
  overflow: hidden;
}

/* 星空用の基準レイヤー設定 */
body {
  position: relative;
  background: #000;
}

/* ★ 星層A：遠い星（かなり増やして、はっきり見えるように） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(circle at 5% 10%,  rgba(255,255,255,0.35) 0, transparent 2px),
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.30) 0, transparent 2px),
    radial-gradient(circle at 45% 15%, rgba(255,255,255,0.32) 0, transparent 2px),
    radial-gradient(circle at 70% 8%,  rgba(255,255,255,0.28) 0, transparent 2px),
    radial-gradient(circle at 90% 18%, rgba(255,255,255,0.30) 0, transparent 2px),

    radial-gradient(circle at 12% 60%, rgba(255,255,255,0.30) 0, transparent 2px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,0.28) 0, transparent 2px),
    radial-gradient(circle at 60% 75%, rgba(255,255,255,0.32) 0, transparent 2px),
    radial-gradient(circle at 82% 65%, rgba(255,255,255,0.30) 0, transparent 2px),
    radial-gradient(circle at 95% 85%, rgba(255,255,255,0.26) 0, transparent 2px);

  background-size:
    260px 260px, 280px 280px, 320px 320px, 300px 300px, 340px 340px,
    260px 260px, 280px 280px, 320px 320px, 300px 300px, 340px 340px;

  opacity: 0.7;
}

/* ★ 星層B：中間層の星（少し大きめ・さらに目立つ） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,0.45) 0, transparent 3px),
    radial-gradient(circle at 55% 40%, rgba(255,255,255,0.40) 0, transparent 3px),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,0.42) 0, transparent 3px),

    radial-gradient(circle at 20% 75%, rgba(255,255,255,0.38) 0, transparent 3px),
    radial-gradient(circle at 70% 85%, rgba(255,255,255,0.40) 0, transparent 3px);

  background-size:
    320px 320px, 360px 360px, 380px 380px,
    320px 320px, 360px 360px;

  opacity: 0.8;
}

/* ★ 星層C：手前の星（漂うアニメーション） */
.stars-near {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(circle at 30% 55%, rgba(255,255,255,0.6) 0, transparent 4px),
    radial-gradient(circle at 75% 45%, rgba(255,255,255,0.55) 0, transparent 4px),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.5) 0, transparent 4px);

  background-size: 380px 380px, 420px 420px, 400px 400px;

  animation: drift-stars 60s linear infinite;
  opacity: 0.9;
}

@keyframes drift-stars {
  from { transform: translateY(0); }
  to   { transform: translateY(-30px); }
}

/* 宇宙UIとリード文は前面に */
.universe {
  position: relative;
  z-index: 1;
}

.site-lead {
  z-index: 5;
}


/* ───────────────
   検索エンジン用＋人間にも一応見えるリード文
   ─────────────── */
.site-lead {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.6rem;
  max-width: 22rem;
  line-height: 1.4;

  /* 最初は完全に透明 */
  opacity: 0;

  /* 宇宙と同期させるため少し長めのフェード */
  transition: opacity 5s ease 2.5s; /* 宇宙フェードin後にゆっくり出る */
  color: rgba(255, 255, 255, 0.35); /* 超薄い色 */

  z-index: 5;
}

/* 宇宙が active（＝フェードイン完了）してから、文章が現れる */
.universe.active ~ .site-lead {
  opacity: 1;
}

/* ───────────────
   画面中央に宇宙を配置
   ─────────────── */
.universe {
  position: relative;
  width: min(80vw, 80vh);
  height: min(80vw, 80vh);
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;                      /* 初期状態は透明 */
  transition: opacity 3.5s ease;   /* フェードイン */

  z-index: 1;                      /* 星空より前面に */
}

/* 起動後（JSから .active 付与） */
.universe.active {
  opacity: 1;
}

/* active になるまで全アニメーション停止 */
.universe:not(.active) .planet,
.universe:not(.active) .moon {
  animation-play-state: paused;
}

/* ───────────────
   太陽：Personal Energy
   ─────────────── */
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  text-align: center;
  white-space: nowrap;
}

.sun a {
  color: #fff;
  text-decoration: none;
}
.sun a:hover {
  text-decoration: underline;
}

/* 太陽の下に “LATEST INFORMATION” への薄い入り口テキスト */
.sun::after {
  content: "LATEST INFORMATION";
  display: block;
  font-size: 0.6rem;
  margin-top: 0.4rem;
  opacity: 0;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: opacity 0.6s ease;
}

/* ホバーでふわっと見える（クリック領域は .library-link で取る） */
.sun:hover::after {
  opacity: 0.5;
}

/* /articles への見えないリンク（HTML側で .library-link を追加） */
.sun .library-link {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 20px;
  opacity: 0;
}

/* ───────────────
   惑星（ドメイン）共通
   ─────────────── */
.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.9;
}

.planet-label {
  pointer-events: none; /* クリックは衛星側に持たせる */
}

/* ───────────────
   衛星（GPT）共通
   ─────────────── */
.moon {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  font-size: 0.55rem;
  margin-left: 1rem;
  opacity: 0.35;  /* 常に薄く見える */
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    color 0.4s ease;
  animation: orbit-moon 60s linear infinite; /* ゆっくり周回 */
}

.moon a {
  color: #888;
  text-decoration: none;
}
.moon a:hover {
  text-decoration: underline;
  color: #fff;
}

/* 惑星に近づいたとき、衛星とラベルを強調 */
.planet:hover .moon {
  opacity: 1;
  transform: translateY(-0.5vmin); /* ほんの少し浮く */
}
.planet:hover .moon a {
  color: #fff;
}

.planet:hover .planet-label {
  color: #fff;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* ───────────────
   惑星ごとの半径と周期
   ─────────────── */

/* Smartmeter（Data / Evidence） → planet--data */
.planet--data {
  --radius: 10vmin;
  animation: orbit-data var(--period-mercury) linear infinite;
}

/* Portable Power → planet--bcp */
.planet--bcp {
  --radius: 17vmin;
  animation: orbit-bcp var(--period-venus) linear infinite;
}

/* Off Grid（自律分散） → planet--autonomous */
.planet--autonomous {
  --radius: 24vmin;
  animation: orbit-autonomous var(--period-earth) linear infinite;
}

/* Eco One Solar → planet--eco（独立惑星扱い） */
.planet--eco {
  --radius: 28vmin;
  animation: orbit-eco var(--period-earth) linear infinite;
}

/* GX / Decarbon → planet--gx */
.planet--gx {
  --radius: 32vmin;
  animation: orbit-gx var(--period-mars) linear infinite;
}

/* ───────────────
   公転アニメーション
   開始角度を変えて位相（傾き感）を出す
   ─────────────── */

/* Smartmeter: 0度スタート */
@keyframes orbit-data {
  from { transform: rotate(0deg) translateX(var(--radius)); }
  to   { transform: rotate(360deg) translateX(var(--radius)); }
}

/* Portable Power: 20度オフセット */
@keyframes orbit-bcp {
  from { transform: rotate(20deg) translateX(var(--radius)); }
  to   { transform: rotate(380deg) translateX(var(--radius)); }
}

/* Off Grid: -35度オフセット */
@keyframes orbit-autonomous {
  from { transform: rotate(-35deg) translateX(var(--radius)); }
  to   { transform: rotate(325deg) translateX(var(--radius)); }
}

/* Eco One Solar: 120度オフセット */
@keyframes orbit-eco {
  from { transform: rotate(120deg) translateX(var(--radius)); }
  to   { transform: rotate(480deg) translateX(var(--radius)); }
}

/* GX: 60度オフセット */
@keyframes orbit-gx {
  from { transform: rotate(60deg) translateX(var(--radius)); }
  to   { transform: rotate(420deg) translateX(var(--radius)); }
}

/* 衛星（GPT）の公転 */
@keyframes orbit-moon {
  from { transform: rotate(0deg) translateX(5vmin); }
  to   { transform: rotate(360deg) translateX(5vmin); }
}

/* ───────────────
   動きが苦手なユーザー向け
   （JSから .reduce-motion を html に付与）
   ─────────────── */
.reduce-motion * {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
}

/* ───────────────
   レスポンシブ調整
   ─────────────── */
@media (max-width: 768px) {
  .universe {
    width: 95vw;
    height: 95vw;
  }
  .sun {
    font-size: 0.8rem;
  }
  .planet {
    font-size: 0.65rem;
  }
  .moon {
    font-size: 0.5rem;
  }
  .site-lead {
    font-size: 0.65rem;
    max-width: 18rem;
  }
}