/* ========================================
   トップページ（ja/en の index.html）— 「ページが1枚の色紙」

   ページ全体を大きな寄せ書きの台紙に見立て、文章を形の違うカード（付箋・罫線のメモ・
   値札・レシートなど）として台紙に貼る。
   - <html class="is-camera">（js/board-camera.js が付ける）のとき: 台紙を画面に固定し、
     スクロールでカメラが台紙の上を移動してカードを1枚ずつ読ませる。カードの位置は
     下の「台紙の上の配置」で決める
   - それ以外（JS 無効・視差効果を減らす・画面が小さすぎる）: カードを縦に並べて読ませる
   配色トークンと共通部品は css/site.css
   ======================================== */

/* ── ステージ（スクロールの長さを作る入れ物） ── */
.board-stage {
  position: relative;
  /* ヘッダー・固定CTAに隠れる高さ。js/board-camera.js が読む */
  --board-safe-top: 84px;
  --board-safe-bottom: 76px;
  /* 1手順あたりのスクロール量 */
  --camera-step: 80vh;
}

/* ヒーロー（最初のカード）を見ているあいだは固定CTAを出さないための目印（js/sticky-cta.js） */
.board-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100vh;
  pointer-events: none;
}

/* ── 台紙（見た目は css/cards.css の .board） ── */
.board {
  margin: 96px 12px 0;
  padding: 40px 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* ── A: 色紙のまん中に書く見出し（カードの地は無し） ── */
.bcard--center {
  background: transparent;
  box-shadow: none;
  text-align: center;
  padding: 8px 4px;
}

.bcard--center > * + * {
  margin-top: 20px;
}

.center-title {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.center-title .marker {
  --marker: var(--c-pink-tint);
}

.center-title-accent {
  color: var(--c-berry);
}

.center-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* ── スマホの画面（実物の色紙の例。飾り） ── */
.bcard--phone {
  padding: 0;
  background: transparent;
  box-shadow: none;
  width: 190px;
  max-width: 190px;
}

.bcard--phone .phone-frame {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border: 9px solid var(--c-ink);
  border-radius: 2.2rem;
  overflow: hidden;
  background: var(--c-white);
  box-shadow: 0 24px 48px rgba(58, 46, 63, 0.22);
}

.bcard--phone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.7s ease;
}

/* シーンの写真。白いフチのポラロイドを台紙に散らす（飾り。カメラは止まらない） */
.bcard--photos {
  padding: 0;
  background: transparent;
  box-shadow: none;
  aspect-ratio: 1 / 1;
}

.bcard--photos .scene-random {
  position: absolute;
  width: 54%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 7px solid var(--c-white);
  border-bottom-width: 22px;
  border-radius: 6px;
  background: var(--c-white);
  box-shadow: 0 10px 24px rgba(58, 46, 63, 0.16);
}

/* 傾けた角がカードの外へはみ出さないよう、端から少し内側に置く */
.bcard--photos .scene-random:nth-child(1) { left: 4%;  top: 4%;  transform: rotate(-7deg); }
.bcard--photos .scene-random:nth-child(2) { right: 4%; top: 2%;  transform: rotate(5deg); }
.bcard--photos .scene-random:nth-child(3) { left: 6%;  bottom: 2%; transform: rotate(4deg); }
.bcard--photos .scene-random:nth-child(4) { right: 5%; bottom: 4%; transform: rotate(-4deg); }

/* ── 落書き（飾り） ── */
.doodle {
  display: none;
}

/* ========================================
   カメラのとき: 台紙を画面に固定し、カードを台紙の上の決まった位置に貼る
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
  .is-camera .board-stage {
    /* 最初の1画面＋手順ごとのスクロール量 */
    height: calc(100vh + var(--camera-steps, 0) * var(--camera-step));
  }

  .is-camera .board-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: clip;
    /* 台紙の外は机の上の見立て */
    background:
      radial-gradient(circle, rgba(58, 46, 63, 0.06) 1px, transparent 1.5px) 0 0 / 18px 18px,
      var(--c-cream);
  }

  /* main の overflow-x: hidden はスクロール領域を作って sticky を効かなくするので clip にする */
  .is-camera main {
    overflow-x: clip;
  }

  .is-camera .board {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: var(--board-w);
    height: var(--board-h);
    display: block;
    transform-origin: 0 0;
  }

  .is-camera .bcard {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w, 360px);
    max-width: none;
  }

  /* カメラが止まっているカード以外は少し下げて、読むカードを目立たせる */
  .is-camera .board[data-focus] .bcard:not(.is-focus) {
    opacity: 0.45;
  }

  /* 地の無いカード（見出し・スマホの画面・写真）と、形を切り抜いたカードには影を足さない */
  .is-camera .bcard.is-focus:not(.bcard--center):not(.bcard--ribbon):not(.bcard--tag):not(.bcard--phone):not(.bcard--photos) {
    box-shadow: 0 24px 56px rgba(58, 46, 63, 0.18);
  }

  .is-camera .doodle {
    display: block;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w, 80px);
    height: var(--w, 80px);
    color: var(--doodle, var(--c-pink-tint));
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(var(--r, 0deg));
  }

  /* ── 台紙の上の配置（台紙の左上からの位置。読む順番は data-camera-path） ──
     まん中に見出し（A）を書き、そのまわりを右回りにメッセージが囲む */
  /* 大きさはふち（border）を含む。いちばん下の M（英語は文章が長く背が高い）の下にも余白が残る高さにする */
  .is-camera .board { --board-w: 1720px; --board-h: 2680px; }

  .is-camera [data-card="a"]  { --x: 660px;  --y: 860px;  --w: 400px; --r: 0deg; }
  .is-camera .bcard--phone    { --x: 430px;  --y: 690px;  --w: 190px; --r: -8deg; }
  .is-camera [data-card="b"]  { --x: 1150px; --y: 820px;  --w: 360px; --r: 3deg; }
  .is-camera [data-card="c"]  { --x: 1230px; --y: 330px;  --w: 360px; --r: -4deg; }
  .is-camera [data-card="d"]  { --x: 800px;  --y: 140px;  --w: 340px; --r: 2deg; }
  .is-camera [data-card="e"]  { --x: 380px;  --y: 200px;  --w: 340px; --r: -3deg; }
  .is-camera [data-card="f"]  { --x: 30px;   --y: 520px;  --w: 340px; --r: 3deg; }
  .is-camera [data-card="g"]  { --x: 40px;   --y: 1150px; --w: 360px; --r: -2deg; }
  .is-camera [data-card="h"]  { --x: 60px;   --y: 1390px; --w: 360px; --r: 2deg; }
  .is-camera [data-card="i"]  { --x: 480px;  --y: 1440px; --w: 360px; --r: -3deg; }
  .is-camera [data-card="j"]  { --x: 900px;  --y: 1360px; --w: 360px; --r: 2deg; }
  /* 写真は傾けてあり角がはみ出すので、寄ったときに画面の端で切れないよう少し小さめにする */
  .is-camera .bcard--photos   { --x: 1300px; --y: 1260px; --w: 340px; --r: 0deg; }
  .is-camera [data-card="l1"] { --x: 500px;  --y: 1860px; --w: 340px; --r: -2deg; }
  .is-camera [data-card="l2"] { --x: 900px;  --y: 1800px; --w: 360px; --r: 2deg; }
  .is-camera [data-card="l3"] { --x: 1310px; --y: 1740px; --w: 340px; --r: -3deg; }
  .is-camera [data-card="m"]  { --x: 660px;  --y: 2180px; --w: 380px; --r: -1deg; }

  .is-camera .doodle--heart  { --x: 120px;  --y: 140px;  --w: 90px;  --r: -12deg; --doodle: var(--c-pink-tint); }
  .is-camera .doodle--star   { --x: 1380px; --y: 120px;  --w: 100px; --r: 10deg;  --doodle: var(--c-lemon-tint); }
  .is-camera .doodle--swirl  { --x: 1500px; --y: 1050px; --w: 110px; --r: 0deg;   --doodle: var(--c-mint-tint); }
  .is-camera .doodle--note   { --x: 200px;  --y: 2100px; --w: 100px; --r: -8deg;  --doodle: var(--c-lavender-tint); }
  .is-camera .doodle--heart2 { --x: 1400px; --y: 2200px; --w: 90px;  --r: 14deg;  --doodle: var(--c-peach-tint); }
  .is-camera .doodle--star2  { --x: 520px;  --y: 1250px; --w: 60px;  --r: -6deg;  --doodle: var(--c-sky-tint); }
}

/* ========================================
   縦に並べるとき（カメラなし）の調整
   ======================================== */
/* 交互に少し傾けて、台紙に貼った感じを残す（カメラのときは配置ごとの --r を使う） */
html:not(.is-camera) .board > .bcard:nth-child(odd):not(.bcard--center) {
  --r: -1.5deg;
}

html:not(.is-camera) .board > .bcard:nth-child(even):not(.bcard--center) {
  --r: 1.5deg;
}

@media (prefers-reduced-motion: reduce) {
  .bcard,
  .bcard--phone img {
    transition: none;
  }
}