/**
 * ヌマルミの見た目（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); }

/* ============ トップのヌマルミを漂わせる（2026-09-26確定・見本D） ============
   **絵と目の光を一緒に動かすため、動きは絵を包む `.numarumi` に掛ける。**
   **左右・上下・傾きを別の周期にして別のプロパティで動かす**（7.3秒・4.9秒・6.1秒）。
   同じ transform に書くと必ず同時に折り返して機械の往復に見える——プロフィールの
   浮かせ方と同じ理由。**translate・transform・rotate は別々に動かせる**ので要素を増やさずに済む */
.numarumi {
  position: relative; display: block; width: 100%; line-height: 0;
  animation: numarumi-drift-x 7.3s ease-in-out infinite,
             numarumi-drift-y 4.9s ease-in-out infinite,
             numarumi-tilt 6.1s ease-in-out infinite;
}

/* 紫の光は絵のほうに掛ける（影と同じ filter なので、ふだんの影もここで持つ） */
.welcome .numarumi img { animation: numarumi-aura 6.2s ease-in-out infinite; }

@keyframes numarumi-drift-x { 0%, 100% { translate: -10px 0; } 50% { translate: 10px 0; } }
@keyframes numarumi-drift-y { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-14px); } }
@keyframes numarumi-tilt    { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes numarumi-aura {
  0%, 100% { filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 2px rgba(168, 85, 247, 0.2)); }
  50%      { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 20px rgba(168, 85, 247, 0.9)); }
}

/* 目の位置は元絵 `numarumi.webp`（640px四方）の割合。左はルーペ越しで大きい */
.numarumi .eye-l { left: calc(37.5% - 12%); top: calc(51.5% - 12%); width: 24%; height: 24%; }
.numarumi .eye-r { left: calc(55.9% - 10%); top: calc(48.2% - 10%); width: 20%; height: 20%; }

/* ============ 目が赤く光る（トップとプロフィールで共通・2026-09-26確定） ============
   **約8秒に1度、両目がキラッと1回光る**（本人指示「1回でいい。眩しいくらいに。目を覆うくらいで大丈夫」）。
   **光は目ごとに独立した要素にする**——1つの要素の ::before/::after に両目を持たせた版は、
   本人の画面で片目しか光らなかった。位置と大きさはページごとに `.eye-l` `.eye-r` で決める */
.eye {
  position: absolute; z-index: 2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #fff 9%, rgba(255, 90, 90, 1) 20%,
              rgba(255, 20, 20, 0.95) 34%, rgba(230, 0, 0, 0.55) 52%, rgba(200, 0, 0, 0) 72%);
  opacity: 0; scale: 0.4;
  animation: numarumi-eye 8.3s ease-out infinite;
}

/* キラッの筋。横長と縦長の2本を十字に重ねる */
.eye::before, .eye::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%;
  background: radial-gradient(ellipse, #fff 0%, rgba(255, 200, 200, 0.95) 18%,
              rgba(255, 40, 40, 0.6) 45%, rgba(255, 0, 0, 0) 70%);
}
.eye::before { width: 260%; height: 14%; margin: -7% 0 0 -130%; }
.eye::after  { width: 14%; height: 150%; margin: -75% 0 0 -7%; }

/* 一瞬で光って、ゆっくり引く */
@keyframes numarumi-eye {
  0%, 84%   { opacity: 0; scale: 0.4; }
  86%       { opacity: 1; scale: 1.15; }
  89%       { opacity: 0.9; scale: 1; }
  96%, 100% { opacity: 0; scale: 0.8; }
}

/* **動く絵・光る絵で酔う人がいる。**煙と同じ扱いで止める（目は光らせない） */
@media (prefers-reduced-motion: reduce) {
  .numarumi, .welcome .numarumi img, .eye { animation: none !important; }
}

.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; }
}