/* ============================================================
   omiso-falling.css — 現行テーマ用の上書きレイヤー【完全版 v2】
   「Falling Editorial」案から 動き / フォント / 配置(余白・行間)
   だけを移植。色・構成・HTMLは現行サイトのまま。帯(ティッカー)なし。

   v2の変更点:
     ・文字落下をスクロール連動化(見出しが画面に入ってから落ちる)
       → セクション9を追加
   その他は前回と同じ(フォント / 落下 / メモ用紙 / 傾き維持)。

   ▼ フェイルセーフ
     html.omiso-motion が付いた時だけ非表示状態が有効
     (JSが動かない環境でもコンテンツは普通に見える)
   ============================================================ */

:root {
  /* ★指定フォントスタック
     Eloquent JF / Linotype Didot は有償(Adobe Fonts等で有効化時に適用)
     未導入環境は Didot → Playfair Display に自動フォールバック */
  --omiso-eloquent: "Eloquent JF Pro", "Eloquent JF", "Linotype Didot", Didot,
                    "Didot LT Pro", "Playfair Display", serif;
  --omiso-didot: "Linotype Didot", Didot, "Didot LT Pro", "Playfair Display", serif;
  --omiso-script: "Petit Formal Script", cursive;
  --omiso-jp: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;

  --omiso-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --omiso-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   1. フォント: 日本語 = 游ゴシック細字
   ============================================================ */
body {
  font-family: var(--omiso-jp);
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 2.1;
}
/* 見出しは少しだけ重く(細字のまま潰れないように) */
h1, h2, h3, h4 {
  font-family: var(--omiso-jp);
  font-weight: 400;
  letter-spacing: .1em;
}
strong, b { font-weight: 500; }

/* 日付・時刻はDidotのイタリックに */
time, .entry-date, .post-date, .posted-on, .post-card__date {
  font-family: var(--omiso-didot);
  font-style: italic;
  letter-spacing: .1em;
}

/* ============================================================
   2. 英字用ユーティリティ(テンプレートに class を足すだけ)
      例: <span class="omiso-en">New Posts</span>
          <span class="omiso-paren">02</span> → ( 02 )
          <span class="omiso-script">otsukaresama</span>
   ============================================================ */
.omiso-en {
  font-family: var(--omiso-eloquent);
  font-style: italic;
  letter-spacing: .02em;
}
.omiso-didot { font-family: var(--omiso-didot); font-style: italic; letter-spacing: .08em; }
.omiso-script { font-family: var(--omiso-script); }
.omiso-paren { font-family: var(--omiso-didot); font-style: italic; letter-spacing: .1em; }
.omiso-paren::before { content: "( "; }
.omiso-paren::after  { content: " )"; }

/* 既存の英字ラベル(section-header__en)もDidotイタリックに寄せる */
.section-header__en {
  font-family: var(--omiso-didot);
  font-style: italic;
  letter-spacing: .14em;
}

/* ============================================================
   3. 動き: 「上から落ちてきて、ぽとんと着地」
      JSが対象要素に data-omiso-drop を自動付与します
   ============================================================ */
html.omiso-motion [data-omiso-drop] {
  opacity: 0;
  transform: translateY(-56px) rotate(-1.2deg);
  transition: opacity .55s ease,
              transform .85s var(--omiso-bounce);
  will-change: opacity, transform;
}
html.omiso-motion [data-omiso-drop].omiso-in {
  opacity: 1;
  transform: none;
}

/* 1文字ずつ落下(JSが見出しを .omiso-ch に分割) */
@keyframes omisoDropIn {
  0%   { opacity: 0; transform: translateY(-90vh) rotate(var(--omiso-r, -6deg)); }
  55%  { opacity: 1; transform: translateY(0) rotate(calc(var(--omiso-r, -6deg) * -0.4)); }
  72%  { transform: translateY(-14px) rotate(calc(var(--omiso-r, -6deg) * 0.2)); }
  86%  { transform: translateY(0) rotate(calc(var(--omiso-r, -6deg) * -0.08)); }
  94%  { transform: translateY(-4px) rotate(0); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
html.omiso-motion .omiso-ch {
  display: inline-block;
  opacity: 0;
  animation: omisoDropIn 1.5s var(--omiso-ease-out) forwards;
  animation-delay: var(--omiso-d, 0s);
}
html:not(.omiso-motion) .omiso-ch { opacity: 1; }

/* ============================================================
   4. 配置: 余白・行間のリズムを最新案に(幅は触らない)
   ============================================================ */
.entry-content > * + * { margin-top: 1.6em; }
.entry-content h2 { margin-top: 3.2em; }
.entry-content h3 { margin-top: 2.4em; }

/* ============================================================
   5. デバッグモード(?omiso-debug をURLに付けると有効)
   ============================================================ */
html.omiso-debug [data-omiso-drop],
html.omiso-debug .omiso-ch {
  outline: 2px dashed #C93A2E !important;
  outline-offset: 2px;
}
.omiso-debug-badge {
  position: fixed; bottom: 14px; left: 14px; z-index: 99999;
  background: #C93A2E; color: #fff;
  font: 700 12px/1.6 sans-serif;
  padding: 8px 14px; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* ============================================================
   6. アクセシビリティ: 動きを減らす設定を尊重
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.omiso-motion [data-omiso-drop],
  html.omiso-motion .omiso-ch {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   7. ひとりごと メモ用紙スタイル
      対象: .hg-feed > .hg-card(ひとりごとページ・個別ページ)
   ============================================================ */

/* ---------- 紙(メモ用紙) ---------- */
.hg-card {
  position: relative;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 27px,
      rgba(155, 58, 107, .07) 27px,
      rgba(155, 58, 107, .07) 28px
    ),
    #FFFDF8;
  border: 1px solid rgba(155, 58, 107, .12);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(107, 65, 96, .06),
    0 10px 24px rgba(107, 65, 96, .10);
  overflow: visible;                    /* テープがはみ出せるように */
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow .35s ease;
}

/* フィード内では1枚ごとにわずかに傾ける(貼った感じ) */
.hg-feed .hg-card:nth-child(odd)  { transform: rotate(-.8deg); }
.hg-feed .hg-card:nth-child(even) { transform: rotate(.6deg); }

/* ホバーでまっすぐになって少し浮く */
.hg-feed .hg-card:hover {
  transform: rotate(0) translateY(-5px);
  box-shadow:
    0 2px 4px rgba(107, 65, 96, .07),
    0 16px 34px rgba(107, 65, 96, .14);
}

/* ---------- マスキングテープ ---------- */
.hg-card::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 88px; height: 24px;
  translate: -50% 0;
  transform: rotate(-3deg);
  background: rgba(252, 228, 240, .82);          /* ピンク(journal色) */
  clip-path: polygon(
    0 12%, 4% 0, 8% 14%, 12% 2%, 16% 12%, 20% 0, 24% 10%, 100% 0,
    100% 88%, 96% 100%, 92% 86%, 88% 98%, 84% 88%, 80% 100%, 76% 90%, 0 100%
  );
  box-shadow: 0 2px 4px rgba(107, 65, 96, .12);
  pointer-events: none;
  z-index: 2;
}
/* テープの透け感(白いひと筋) */
.hg-card::after {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 88px; height: 5px;
  translate: -50% 0;
  transform: rotate(-3deg);
  background: rgba(255, 255, 255, .35);
  pointer-events: none;
  z-index: 3;
}

/* テープの色ローテーション(現行カテゴリーカラー) */
.hg-feed .hg-card:nth-child(3n+2)::before {
  background: rgba(224, 255, 255, .85);          /* 水色(beauty色) */
  transform: rotate(2.5deg);
}
.hg-feed .hg-card:nth-child(3n+2)::after { transform: rotate(2.5deg); }
.hg-feed .hg-card:nth-child(3n)::before {
  background: rgba(255, 250, 208, .88);          /* クリーム(sake色) */
  transform: rotate(-2deg);
}
.hg-feed .hg-card:nth-child(3n)::after { transform: rotate(-2deg); }

/* ---------- 中身の雰囲気合わせ ---------- */
.hg-card .hg-card__header { padding-top: 8px; }
.hg-card .hg-card__time {
  font-family: var(--omiso-didot, Didot, "Playfair Display", serif);
  font-style: italic;
  letter-spacing: .08em;
}

/* トップページのひとりごとプレビューにも同じメモ用紙を適用 */
.fp-hg-card {
  position: relative;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 27px,
      rgba(155, 58, 107, .07) 27px,
      rgba(155, 58, 107, .07) 28px
    ),
    #FFFDF8;
  border: 1px solid rgba(155, 58, 107, .12);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(107, 65, 96, .06),
    0 10px 24px rgba(107, 65, 96, .10);
  overflow: visible;
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow .35s ease;
}
.fp-hitorigoto__grid .fp-hg-card:nth-child(odd)  { transform: rotate(-.8deg); }
.fp-hitorigoto__grid .fp-hg-card:nth-child(even) { transform: rotate(.6deg); }
.fp-hitorigoto__grid .fp-hg-card:hover {
  transform: rotate(0) translateY(-5px);
  box-shadow:
    0 2px 4px rgba(107, 65, 96, .07),
    0 16px 34px rgba(107, 65, 96, .14);
}
.fp-hg-card::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  width: 74px; height: 20px;
  translate: -50% 0;
  transform: rotate(-3deg);
  background: rgba(252, 228, 240, .82);
  clip-path: polygon(
    0 12%, 4% 0, 8% 14%, 12% 2%, 16% 12%, 20% 0, 24% 10%, 100% 0,
    100% 88%, 96% 100%, 92% 86%, 88% 98%, 84% 88%, 80% 100%, 76% 90%, 0 100%
  );
  box-shadow: 0 2px 4px rgba(107, 65, 96, .12);
  pointer-events: none;
  z-index: 2;
}
.fp-hitorigoto__grid .fp-hg-card:nth-child(2)::before {
  background: rgba(224, 255, 255, .85);
  transform: rotate(2.5deg);
}
.fp-hitorigoto__grid .fp-hg-card:nth-child(3)::before {
  background: rgba(255, 250, 208, .88);
  transform: rotate(-2deg);
}
.fp-hg-card .fp-hg-card__time {
  font-family: var(--omiso-didot);
  font-style: italic;
  letter-spacing: .08em;
}

/* 動きを減らす設定では傾きの変化を止める */
@media (prefers-reduced-motion: reduce) {
  .hg-card, .hg-feed .hg-card, .fp-hg-card { transition: none; }
}

/* ============================================================
   8. 落下着地後もメモの傾きを維持(重要)
      落下の着地ルール(transform: none)が傾きより強いため、
      着地後の傾きをここで上書きし直す
   ============================================================ */
html.omiso-motion .hg-feed .hg-card.omiso-in:nth-child(odd) {
  transform: rotate(-.8deg);
}
html.omiso-motion .hg-feed .hg-card.omiso-in:nth-child(even) {
  transform: rotate(.6deg);
}
html.omiso-motion .hg-feed .hg-card.omiso-in:hover {
  transform: rotate(0) translateY(-5px);
}
html.omiso-motion .fp-hitorigoto__grid .fp-hg-card.omiso-in:nth-child(odd) {
  transform: rotate(-.8deg);
}
html.omiso-motion .fp-hitorigoto__grid .fp-hg-card.omiso-in:nth-child(even) {
  transform: rotate(.6deg);
}
html.omiso-motion .fp-hitorigoto__grid .fp-hg-card.omiso-in:hover {
  transform: rotate(0) translateY(-5px);
}

/* ============================================================
   9. 文字落下のスクロール連動化【v2で追加】
      分割された文字は、見出しが画面に入るまで一時停止し、
      JSが .omiso-play を付けた瞬間に落ち始める
   ============================================================ */
html.omiso-motion .omiso-ch {
  animation-play-state: paused;
}
html.omiso-motion .omiso-play .omiso-ch {
  animation-play-state: running;
}

/* ============================================================
   10. すりガラスヘッダー【v3で追加】
       スクロールすると .site-header が半透明のガラス風に変化。
       (JSが .omiso-scrolled を付け外しします)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color .4s ease,
              box-shadow .4s ease,
              -webkit-backdrop-filter .4s ease,
              backdrop-filter .4s ease;
}
.site-header.omiso-scrolled {
  background: rgba(255, 253, 250, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(155, 58, 107, .10),
              0 8px 30px rgba(155, 58, 107, .08);
}
/* ガラス化しても文字が読めるように念のため */
.site-header.omiso-scrolled .site-logo,
.site-header.omiso-scrolled .site-nav a {
  text-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* ============================================================
   11. トップページのひとりごと: 改行を反映【v4で追加】
       本文の改行(\n)をそのまま表示する
   ============================================================ */
.fp-hg-card__text {
  white-space: pre-line;
}