/* ============================================================
   emie（キャラクター）配置 — ヒーロー「真っ白なスタジオ」
   ・ヒーローの背景を白ホリゾント（壁→床の柔らかな折れ目）に見立てた多層グラデーションにする
   ・emie は白背景の画像のまま置き、mix-blend-mode: multiply で白を背景に溶かす
     （切り抜き不要・縁の崩れなし）。超巨大＋低不透明度で、透かしのように馴染ませる
   ・外す時はこのCSSと index.html の .emma-hero-slot を削除するだけ
   ============================================================ */

:root { --emie-tint: 0.30; }   /* emie の淡さ（ヒーロー・フッター共通）。0.25〜0.4 で調整 */

/* ---------- 白いスタジオ（ホリゾント） ----------
   上 56% は壁（純白）、64% 付近に壁と床の折れ目（最も淡いグレー）、
   そこから手前（下）へ向けて床がわずかに明るさを取り戻しつつ、最下部でまた少し沈む。
   右奥（emie の立ち位置）にだけ、ごく淡い光だまりを足して奥行きを作る */
.hero {
  --studio-horizon: 64%;
  background:
    radial-gradient(ellipse 34% 22% at 82% var(--studio-horizon), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 120% 50% at 50% 118%, rgba(8, 27, 35, 0.045), rgba(8, 27, 35, 0) 70%),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 52%,
      #f2f3f3 var(--studio-horizon),
      #fafafa calc(var(--studio-horizon) + 10%),
      #f6f7f7 100%
    );
}

/* ---------- emie：超巨大に、淡く（デザインの一部として） ----------
   ヒーロー右側に画面からはみ出す大きさで置き、乗算合成＋低い不透明度で透かしのように馴染ませる。
   顔（目）は右上の空白に、体の下側は見出しの背後に回る。
   .emma-hero-slot = 位置とサイズ（.hero 直下。site.js のスクロール連動が transform/opacity を書き込む要素）
   .emma-hero-wrap = 淡さ（opacity）。site.js に上書きされないよう slot ではなく内側に持つ */
.hero { overflow: hidden; }                 /* はみ出した体を端で切る */
.emma-hero-slot {
  position: absolute;
  right: -6%;
  top: -4%;
  height: 124%;
  aspect-ratio: 1616 / 1434;
  z-index: -1;                   /* .hero(stacking context) の背景より前・本文より後ろ */
  pointer-events: none;
  mix-blend-mode: multiply;      /* 画像の白 × 背景 = 背景。乗算は stacking context 単位で効くので slot に指定 */
}
.emma-hero-wrap {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  opacity: 0;
  animation: emmaIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
@keyframes emmaIn { to { opacity: var(--emie-tint); } }
.emma.emma-hero {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}


/* ---------- フッター：同じく超巨大・淡く ----------
   .site-footer は sticky + z-index:0 の stacking context。slot を z-index:-1 にして
   フッター背景より前・本文（ロゴ／地図／住所／ナビ）より後ろに敷く。
   画面左側に配置。この画像は顔が左寄りなので、左端で体が少し切れても顔は見える */
.emma-footer-slot {
  position: absolute;
  left: -6%;
  bottom: -16%;
  height: 92%;
  aspect-ratio: 2000 / 1301;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.emma-footer-wrap {
  display: block;
  width: 100%; height: 100%;
  opacity: var(--emie-tint);
}
.emma.emma-footer {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- フッター最下段の注記：小さな emie の写真 ＋ 説明 ----------
   写真は白背景のまま、乗算合成で背景（淡い巨大 emie を含む）に馴染ませる */
.footer-bottom { flex-wrap: wrap; }
.footer-bottom .emie-note {
  flex: 0 1 auto;
  margin-left: auto;                   /* 同じ行に収まれば右端、収まらなければ次の行の右端に */
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.02em; color: var(--muted);
  white-space: nowrap;
}
.footer-bottom .emie-note-img {
  flex: none;
  height: 36px; width: auto;
  mix-blend-mode: multiply;
  pointer-events: none; user-select: none;
}

/* ---------- モバイル ---------- */
@media (max-width: 960px) {
  .hero { --studio-horizon: 60%; }
  .emma-hero-slot { right: -28%; top: 10%; height: 78%; }
  /* モバイルは top.css がフッターを static にするため、配置基準と stacking context をここで復元 */
  .site-footer { position: relative; z-index: 0; overflow: hidden; }
  .emma-footer-slot { left: -24%; bottom: -4%; height: 44%; }
  .footer-bottom .emie-note { margin-left: 0; white-space: normal; line-height: 1.6; flex-wrap: wrap; }
  .footer-bottom .emie-note-img { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .emma-hero-wrap { animation: none; opacity: var(--emie-tint); }
}