/**
 * ヌマルミの見た目（2026-09-05）。**正本は `docs/site_redesign.md` の3章。**
 *
 * 【なぜ別ファイルにしたか】
 * **トップとプロフィールが同じ見た目を使うから。**片方の `<style>` に書くと、
 * 次に色や速さを変えるときに**もう片方が古くなる。**
 *
 * 【読ませる順番】
 * `renai_numa/styles.css` → **このファイル** → 各ページの `<style>`。
 * **この順でないと `.card` の枠が消えない**（あちらの指定を上書きしている）。
 *
 * 【どのページが読むか】
 * いまは `index.html` と `about.html` の2枚だけ。
 * **診断ページには入れていない。**入れると `.card` の枠が全部消えて、
 * 設問画面の作りまで変わる（広げるかどうかは `site_redesign.md` 7章で未決着）。
 */

/* ============ 紫の煙 ============
   動画と同じ絵（`tools/build_video.py` の build_smoke が書き出したもの）。
   絵は「2880pxの継ぎ目のない1枚」を縦に2つ並べたものなので、
   **画像の半分ぶん上へ動かすと元の位置に戻る。**そこで無限に繰り返す。
   動かすのは transform。描き直しではなく合成で済むのでスマホでも軽い */
.smoke-stage { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.smoke {
  position: absolute; top: 0; left: -5vw; width: 110vw;
  height: calc(100vh + 196vw);          /* 1周ぶん＋画面1つぶん。これだけあれば切れない */
  background-repeat: repeat-y; background-size: 100% auto;
  opacity: 0.60;                        /* 動画は1.00。文章を読ませるので落とす */
  will-change: transform;
}

/* 1周＝画像の半分＝110vw × (1920/2) ÷ 540 = 195.556vw */
@keyframes smoke-drift { to { transform: translate3d(0, -195.556vw, 0); } }
@keyframes smoke-sway-1 { 0%, 100% { transform: translateX(-15px); } 50% { transform: translateX(15px); } }
@keyframes smoke-sway-2 { 0%, 100% { transform: translateX(11px); }  50% { transform: translateX(-11px); } }

.smoke-sway { position: absolute; inset: 0; }

/* 速さは動画の200%（動画は30秒と65.45秒）。**周期を2枚でずらす**——
   揃えると2枚が一緒に動いて、煙ではなく壁紙が流れて見える。
   **パスは `app/` の直下から見た形。**両ページとも `app/` 直下にあるので同じで済む */
.smoke-1 { background-image: url(images/smoke1.webp); animation: smoke-drift 15s linear infinite; }
.smoke-2 { background-image: url(images/smoke2.webp); animation: smoke-drift 32.7s linear infinite; }
.smoke-sway-1 { animation: smoke-sway-1 11.5s ease-in-out infinite; }
.smoke-sway-2 { animation: smoke-sway-2 8.5s ease-in-out infinite; }

/* **動く背景で酔う人がいる。**止めて出す（絵としては成立する） */
@media (prefers-reduced-motion: reduce) {
  .smoke, .smoke-sway { animation: none !important; }
}

/* 本文を煙の上に置く */
.app, .site-footer { position: relative; z-index: 1; }

/* ============ 外枠を外す ============
   濃い四角があると煙がほとんど見えない。幅と余白だけ card から引き継ぐ */
.card { background: none; border: none; box-shadow: none; backdrop-filter: none; }

/* 枠を外すと地の色が無くなるので、**文字の側に影を持たせて読めるようにする** */
.app { text-shadow: 0 1px 14px rgba(8, 3, 10, 0.85), 0 0 3px rgba(8, 3, 10, 0.7); }

/* ============ タイトル ============
   **中央にするのは大見出しとタグラインの2つだけ。**
   **丸囲み（`.eyebrow`）は全ページ共通で左揃え**なので触らない。
   親の `.card` に text-align を掛けると丸囲みまで動く。
   丸囲みを flex にして中央へ寄せるのも駄目——**幅いっぱいに伸びる** */
.brand-title { margin: 6px 0 0; line-height: 1.06; text-align: center; }

.brand-title .t1 {
  display: block; font-size: 15px; font-weight: 600;
  letter-spacing: 0.42em; color: var(--text-muted);
}

/* **白→金。**明るい範囲だけで振るので、どの文字も地から浮く。
   金→赤→紫にすると最後の文字が紫のまま紫の煙に乗って読めない */
.brand-title .t2 {
  display: block; margin-top: 4px;
  font-size: clamp(38px, 12.5vw, 62px); font-weight: 800; letter-spacing: 0.06em;
  background: linear-gradient(100deg, #fffaf0 0%, #ffe6ad 48%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.85));
}

/* タグラインを飾り罫で挟む。**11字で16タイプの構造を説明している一行** */
.brand-tag {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 0; font-size: 12.5px; letter-spacing: 0.16em;
  color: var(--gold); text-shadow: none;
}

.brand-tag::before, .brand-tag::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 179, 90, 0.55), transparent);
}

/* ============ 迎える文＋ヌマルミの絵 ============ */
.welcome { display: flex; align-items: center; gap: 16px; margin: 24px 0 0; text-align: left; }

/* **絵と名前でひとかたまりのリンクにする。**名前はプロフィールへの入口。
   絵だけだと押せるものに見えないので、名前を添えて下線を持たせる */
.devil-link {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 132px; text-decoration: none; color: var(--text-muted);
}

.welcome img {
  width: 100%; height: 132px; object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6)); transition: transform 0.2s;
}

.devil-name {
  font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.5; text-align: center;
  border-bottom: 1px solid rgba(214, 179, 90, 0.4); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.devil-link:hover .devil-name,
.devil-link:focus-visible .devil-name {
  color: var(--gold); border-bottom-color: var(--gold);
}

.devil-link:hover img { transform: translateY(-2px); }

.welcome-text { flex: 1 1 auto; min-width: 0; }

/* **迎える文はここだけ地の色で出す。**他のページの補足は薄いが、
   これは読ませたい本文。**`styles.css` 側は触らない**
   （無料2診断の説明文まで濃くなる） */
.welcome p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--text); }
.welcome .intro-lead { margin: 12px 0 0; }

@media (max-width: 460px) {
  .welcome { gap: 12px; }
  .devil-link { width: 104px; }
  .welcome img { height: 104px; }
  .welcome p { font-size: 13.5px; line-height: 1.85; }
}

@media (max-width: 360px) {
  .devil-link { width: 92px; }
  .welcome img { height: 92px; }
}