@charset "UTF-8";
/* 株式会社まえびー — 季節・時間帯アンビエント層
 *
 * 非破壊アドオン。既存の maebe.css / pages.css は一切変更せず、
 * (1) 時間帯に応じて和紙地のトークンだけを差し替え
 * (2) パーティクル用の固定キャンバスを最前面手前（ヘッダーより下）に敷く
 * の2点のみを追加する。
 *
 * 重要な前提（実測）:
 *   .site-header = z-index:100 / .nav = 110 → キャンバスは 5 に置けば干渉しない
 *   .hero::before / .page-hero::before は未使用 → 時間帯の光の演出に使用
 *   ブランド色 --orange / --orange-deep / --orange-br は変更しない
 */

/* ------------------------------------------------------------------ *
 * 1. 時間帯トーン（和紙地トークンの差し替え）
 *    html[data-mb-tod] が付いている時だけ効く。JS無効時は完全に無変化。
 * ------------------------------------------------------------------ */
html[data-mb-tod="dawn"] {
  --cream-bg:    #ffede0;
  --paper:       #fce7d4;
  --paper-2:     #f9dbc2;
  --paper-3:     #fff7eb;
  --orange-pale: #fce0cb;
  --orange-pale2:#f8c49d;
}
html[data-mb-tod="dusk"] {
  --cream-bg:    #ffecdb;
  --paper:       #fde7ce;
  --paper-2:     #fbdcbb;
  --paper-3:     #fff6e6;
  --orange-pale: #fed8b7;
  --orange-pale2:#fcbf86;
}
html[data-mb-tod="night"] {
  --cream-bg:    #fcead5;
  --paper:       #f3e5cf;
  --paper-2:     #eedabf;
  --paper-3:     #fdf4df;
  --orange-pale: #f5dac1;
  --orange-pale2:#eec196;
}
/* day は既定値（maebe.css の :root）をそのまま使うため定義しない */

/* 地の色が切り替わるときだけ滑らかに。既存のホバー等には影響しない */
html[data-mb-tod] body,
html[data-mb-tod] .section--paper,
html[data-mb-tod] .section--cream,
html[data-mb-tod] .section--washi,
html[data-mb-tod] .card,
html[data-mb-tod] .company-table th,
html[data-mb-tod] .company-table td {
  transition: background-color 900ms ease, border-color 900ms ease;
}

/* ------------------------------------------------------------------ *
 * 2. ヒーローに差す時間帯の光
 *    ::before は最初の子として描画されるため、本文より必ず下に入る。
 * ------------------------------------------------------------------ */
html[data-mb-tod] {
  --mb-wash-color: transparent;
  --mb-wash-pos: 50% 0%;
  --mb-wash-size: 92% 62%;
  --mb-wash-opacity: 0;
}
html[data-mb-tod="dawn"] {
  --mb-wash-color: rgba(255, 176, 140, 0.34);   /* 朝焼けの桃。朝日は東＝画面右から */
  --mb-wash-pos: 86% 4%;
  --mb-wash-opacity: 1;
}
html[data-mb-tod="dusk"] {
  --mb-wash-color: rgba(232, 115, 43, 0.24);    /* 夕暮れの琥珀。日没は西＝画面左から */
  --mb-wash-pos: 14% 6%;
  --mb-wash-opacity: 1;
}
html[data-mb-tod="night"] {
  --mb-wash-color: rgba(201, 162, 75, 0.20);    /* 夜の金（--gold 由来） */
  --mb-wash-pos: 50% -8%;
  --mb-wash-opacity: 1;
}

html[data-mb-tod] .hero::before,
html[data-mb-tod] .page-hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(var(--mb-wash-size) at var(--mb-wash-pos), var(--mb-wash-color), transparent 62%);
  opacity: var(--mb-wash-opacity);
  transition: opacity 900ms ease;
}

/* ------------------------------------------------------------------ *
 * 3. パーティクル用キャンバス
 * ------------------------------------------------------------------ */
.mb-ambient {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;                 /* .site-header(100) / .nav(110) より下 */
  pointer-events: none;       /* クリック・スクロールを一切妨げない */
  opacity: 0;
  transition: opacity 1200ms ease;
  contain: layout style paint;
}
.mb-ambient.is-on { opacity: 1; }

/* 印刷・アニメーション抑制・データセーバーでは出さない */
@media print {
  .mb-ambient { display: none !important; }
  html[data-mb-tod] .hero::before,
  html[data-mb-tod] .page-hero::before { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-ambient { display: none !important; }
  html[data-mb-tod] body,
  html[data-mb-tod] .section--paper,
  html[data-mb-tod] .section--cream,
  html[data-mb-tod] .section--washi,
  html[data-mb-tod] .hero::before,
  html[data-mb-tod] .page-hero::before { transition: none !important; }
}

/* モバイルでは光をさらに控えめに（可読性優先） */
@media (max-width: 767px) {
  html[data-mb-tod="dawn"]  { --mb-wash-color: rgba(255, 176, 140, 0.24); }
  html[data-mb-tod="dusk"]  { --mb-wash-color: rgba(232, 115, 43, 0.18); }
  html[data-mb-tod="night"] { --mb-wash-color: rgba(201, 162, 75, 0.15); }
}

/* ------------------------------------------------------------------ *
 * 4. 富士山に差す朝夕の光
 *    静岡県側から望む向きのため、朝日は東（右）から、夕日は西（左）から当てる。
 *    .hero__bg::after は未使用だったので、画像の上に薄い朱を重ねる。
 * ------------------------------------------------------------------ */
html[data-mb-tod="dawn"] .hero__bg::after,
html[data-mb-tod="dusk"] .hero__bg::after,
html[data-mb-tod="night"] .hero__bg::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: background 900ms ease;
}
/* 朝：東（右）から差す淡い光 */
html[data-mb-tod="dawn"] .hero__bg::after {
  background: radial-gradient(56% 50% at 80% 26%, rgba(255, 178, 132, 0.30), rgba(255, 200, 165, 0.10) 46%, transparent 70%);
}
/* 夕：西（左）から山肌の左側を染める */
html[data-mb-tod="dusk"] .hero__bg::after {
  background: radial-gradient(58% 56% at 58% 33%, rgba(226, 104, 38, 0.34), rgba(240, 150, 80, 0.14) 44%, transparent 72%);
}
/* 夜：上からの淡い金（月あかり） */
html[data-mb-tod="night"] .hero__bg::after {
  background: radial-gradient(70% 46% at 62% 2%, rgba(201, 162, 75, 0.20), transparent 62%);
}
@media (max-width: 767px) {
  html[data-mb-tod="dusk"] .hero__bg::after { background: radial-gradient(70% 50% at 50% 30%, rgba(226, 104, 38, 0.24), transparent 70%); }
}
@media print {
  .hero__bg::after { display: none !important; }
}