/* ===============================================
   枕草子を題材に、視差効果と桜・蛍・紅葉・雪の為のCSS
   =============================================== */

/* Reset CSS をレイヤー内に取り込む
 * ----------------------------------------------- */
@import url('https://cdn.jsdelivr.net/npm/@acab/reset.css@0.11.0/index.min.css') layer(reset);

/* 和の色カラーパレット
 * ----------------------------------------------- */
:root {
  --sumi2:      #171917;     /* 墨(すみ): 本文テキストの色 */
  --sakurairo:  #fef4f4;     /* 桜色: ヘッダー背景・メニュー文字など */
  --kurohairo:  #0d0d0d;     /* 黒羽色: モバイルフッターメニューの背景 */
  --botaniro:   #e7609e;     /* 牡丹色: 春ボタンの背景色 */
  --sanaeiro:   #67a70c;     /* 早苗色: 夏ボタンの背景色 */
  --utsushiiro: #3d6eda;     /* 移色: 秋ボタンの背景色 */
  --momijiiro:  #a61017;     /* 紅葉色: 冬ボタンの背景色 */
}

/* 固定フッター / 追随メニュー 共通: スクロール挙動
 * ----------------------------------------------- */
.parallax-wrapper {
  scroll-behavior: smooth;       /* ゆっくり遷移する */
  scroll-padding-top: 20px;      /* 上に20px余白を設けて停止する */
}

/* ボディー
 * ----------------------------------------------- */
body {
  display: grid;
  grid-template-columns: 1fr 5fr;
  min-height: 100vh;
  overflow-x: hidden;        /* 横スクロール防止 */
  margin: 0;                 /* 上部の余白を完全に削除 */

  font-family: "New Tegomin", serif;   /* 手書き風の書体を指定 */
  font-size: 2rem;
  word-wrap: break-word;

  background: url(images/washi.webp);  /* 和紙の背景画像 */
  color: var(--sumi2); /* 墨色 */
}

/* ヘッダー（＝枕草子）
 * ----------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  display: grid;
  justify-content: center;

  height: 100vh;       /* 1vhは画面高さの1%を表す単位 */
  padding: 150px 0 0 0;

  background: var(--sakurairo); /* 桜色 */

  h1 {
    font-size: 2.5rem;         /* rem は １文字分の大きさ を表す単位 */
    letter-spacing: 1.5rem;    /* 文字間隔 */
    writing-mode: vertical-rl; /* 縦書き */
  }
}

/* 視差スクロール用コンテナ（メイン）
 * ----------------------------------------------- */
.parallax-wrapper {
  grid-column: 2 / 3;               /* 左カラムにヘッダー、右カラムに本文を置くため、右側 2 列目に配置 */

  height: 100vh;                    /* 画面の高さちょうど 1 枚分をスクロール領域にする */
  margin: 0;
  padding: 0;                        /* 画像の上に余白を残さない */
  overflow-x: hidden;                /* 横方向のスクロールを無効化 */
  overflow-y: auto;                  /* この要素の中だけ縦スクロールさせる */

  perspective: 1px;                  /* 3D空間の奥行き基準（値を小さくすると奥行き感が強くなる） */
  transform-style: preserve-3d;      /* 子要素の 3D 変形（translateZ など）を有効にする */
}

/* 季節を彩る背景写真を個別指定する
 * ----------------------------------------------- */
.haru  .photograph { background-image: url(images/haru.webp); }
.natsu .photograph { background-image: url(images/natsu.webp); }
.aki   .photograph { background-image: url(images/aki.webp); }
.fuyu  .photograph { background-image: url(images/fuyu.webp); }

/* 各季節セクション
 * ----------------------------------------------- */
.kisetsu {
  display: grid;                        /* 写真と本文を縦方向に並べる */
  grid-template-rows: auto auto;       /* 1 行目: 文章エリア / 2 行目: 写真エリア */
  transform-style: preserve-3d;        /* セクション内の要素にも 3D 効果を適用する */

  /* 背景写真（奥に配置してゆっくり動く） */
  .parallax-bg {
    grid-row: 2;                        /* セクション内で写真を下側に表示 */
    height: 45vh;                       /* 写真の高さ */
    background-size: cover;             /* 左右をトリミングして全面表示 */
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(-0.5px) scale(1.5);  /* Z 軸方向に奥へ移動＆拡大して、スクロール速度を遅く見せる（疑似 3D） */
    transform-origin: center center;           /* 拡大・縮小の基準点を画像の中心にする */
  }

  /* 前面コンテンツ（基準位置） */
  .parallax-content {
    display: grid;                      /* 見出し + 本文をグリッドで配置 */
    grid-template-columns: 1fr auto;    /* 左: 余白 / 右: 文章用の細いカラム（右側に寄せて本文を表示） */
    grid-row: 1;                        /* 文章（見出し + 本文）を先に表示 */

    padding-block-start: 5vh;           /* セクション全体を少し下げる（論理プロパティ） */
    padding-block-end: 50px;

    background: url(images/washi.webp); /* 和紙背景で文字の視認性確保 */

    transform: translateZ(0);           /* カメラに最も近い「基準面」に固定する */
  }

  /* 見出し */
  .heading {
    display: grid;
    grid-column: 1 / -1;                /* グリッド全体を横断して中央に配置 */
    place-items: center;                /* グリッド内の要素を中央に配置 */
    h2 {
      font-size: 2.0rem;
      writing-mode: vertical-rl;
      text-orientation: upright;
      letter-spacing: 0.2em;
      margin-inline: 0;
      margin-block: 0em 0.4em;   /* 見出し上下の余白を詰める */
    }
  }

  /* 随筆 */
  article {
    grid-column: 2 / 3;            /* 右側のカラムに配置して右端寄せにする */

    height: 40vh;                  /* 40vh の高さで折り返し */
    margin: 0;                     /* グリッド上で位置を制御する */
    margin-inline-start: 0.8em;    /* 見出しと本文の間にわずかに余白を空けて読みやすくする */
    padding-right: 1em;            /* 内側に1行分の余白を確保（右端の空き） */

    writing-mode: vertical-rl;
    line-height: 1.5;
    p {
      margin: 0;                  /* 上余白をなくして左端から開始 */
    }
  }
}

/* iPhone 用 固定フッター
 * ----------------------------------------------- */
#mobile-footer-nav {
  position: fixed;
  left: 0;
  bottom: -90px;                 /* 通常は下に隠しておく */
  z-index: 1000;
  display: none;                 /* メディアクエリで表示切り替え */

  width: 100%;

  background: transparent;

  transition-property: bottom;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0.3s;

  &.active {
    bottom: 0;                   /* active 時にせり上がる */
  }

  nav {
    ul {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-flow: column;
      margin: 0 -1px;
      padding: 0;
      list-style: none;

      li {
        a {
          display: block;
          position: relative;

          height: 60px;
          padding-top: 12px;
          border-left: 1px solid var(--sakurairo); /* 桜色 */

          font-size: 11px;
          text-align: center;
          text-decoration: none;

          background: var(--kurohairo); /* 黒羽色 */
          color: var(--sakurairo);     /* 桜色 */

          i {
            margin-block-end: 4px;
          }

          span {
            display: block;
          }
        }

        &:first-child a {
          border-left: none;
        }
      }
    }
  }

  /* フッターメニューの hover は枠線なし */
  a:hover {
    border: none;
  }
}

/* iPad / デスクトップ 用 追随メニュー
 * ----------------------------------------------- */
.desktop-follow-nav {
  position: fixed;
  left: 20px;
  bottom: 40px;
  z-index: 10000;
  display: none;                  /* メディアクエリで表示切り替え */

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: block;
    position: relative;

    width: 100px;
    height: 100px;
    margin-block: 6px;
    border-radius: 50%;
    box-sizing: border-box;

    &:nth-child(1) { background: var(--botaniro);  border: 1px solid var(--botaniro); }
    &:nth-child(2) { background: var(--sanaeiro);  border: 1px solid var(--sanaeiro); }
    &:nth-child(3) { background: var(--utsushiiro); border: 1px solid var(--utsushiiro); }
    &:nth-child(4) { background: var(--momijiiro); border: 1px solid var(--momijiiro); }
  }

  a {
    display: block;
    position: relative;

    box-sizing: border-box;
    padding: 20px 10px;
    border-bottom: none;            /* reset.css の下線を消す */

    font-size: 1.5rem;
    line-height: 20px;
    text-align: center;
    text-decoration: none;

    color: var(--sakurairo);     /* 桜色 */

    i {
      margin-block-end: 4px;        /* アイコンとテキストの間に少し余白を作る */
    }

    /* マウスオーバー時にふわっと現れる白い円（装飾用の枠線） */
    &::after {
      content: "";                  /* 擬似要素を表示するためのダミー内容 */

      display: block;                /* ブロック要素として円の大きさを指定できるようにする */
      position: absolute;            /* 親の a 要素の左上に重ねる */
      left: 0;
      top: 0;

      width: 98px;                   /* 本体 100px より少し小さい正円にする */
      height: 98px;
      border: 0 solid var(--sakurairo); /* 最初は枠線なし（ボーダー幅 0 の白い円） */
      border-radius: 50%;            /* 正円にする */
      box-sizing: border-box;        /* 枠線を含めて 98px 四方に収まるようにする */

      opacity: 0;                    /* 通常時は透明で見えない */
      transition-property: all;      /* すべての変化をアニメーション対象にする */
      transition-duration: 0.3s;     /* アニメーション時間 0.3 秒 */
      transition-timing-function: ease; /* ゆっくり始まりゆっくり終わる動き */
    }

    /* ホバーすると円の枠線が太くなり、白いリングが現れる */
    &:hover::after {
      opacity: 1;                    /* 透明 → 不透明にして見えるようにする */
      border-width: 7px;             /* 太い枠線を表示してリング状に見せる */
    }
  }
}

/* メニュー表示の出し分け + モバイル用レイアウト調整
 * ----------------------------------------------- */
@media (width < 768px) {
  #mobile-footer-nav { display: block; }

  /* iPhone では季節の文章を少し小さくして表示する */
  .kisetsu article {
    font-size: 1.6rem;
  }

  /* モバイル幅で見出し「春・夏・秋・冬」をより中央寄せに */
  .kisetsu .heading h2 {
    margin-inline: 0;
  }
}

@media (width >= 768px) {
  .desktop-follow-nav { display: block; }
}