/* トム・リドルの日記 — 見た目の定数はすべて :root に集約 */
:root {
  /* 表紙（黒っぽい革装） */
  --cover-color-1: #241a14;
  --cover-color-2: #3a2b20;
  --cover-peek: clamp(10px, 2.2vmin, 22px);   /* 表紙が外枠に見える幅 */
  --cover-spine-extra: clamp(6px, 1.6vmin, 14px); /* 左側（背表紙側）は少し太く */
  --page-radius: 6px;

  /* 表紙が開く演出 + カメラズーム（開始・終了は完全に同期） */
  --cover-open-delay: 700ms;
  --cover-open-ms: 3000ms;
  --cover-open-angle: -150deg;
  --cover-title-color: #8a6d3f;
  --cover-inside-color-1: #2e2119;
  --cover-inside-color-2: #1f1610;

  /* カメラ。寸法はすべて vmax 基準（px 固定だと 4K で広角になり破綻する） */
  --camera-perspective: 110vmax;
  --book-perspective: 125vmax;
  /* 初期 = 引きの画: 斜め上から机を見下ろし、わずかにダッチアングル */
  --camera-start-scale: 0.14; /* 引きの画でのノートの大きさ */
  --camera-tilt: 18deg;       /* 俯瞰チルト（斜め上から机を見る角度） */
  --camera-yaw: -18deg;       /* 横回り込み（負 = ノートの右側から見る） */
  --camera-roll: -2.5deg;     /* 画面の傾き（ダッチアングル） */
  /* 中間 = 忍び寄り終わり・ダイブ直前 */
  --camera-mid-tilt: 13.5deg;
  --camera-mid-yaw: -12.5deg;
  --camera-mid-roll: -1.6deg;
  --camera-mid-scale: 0.235;
  /* 着地直前 = わずかに行き過ぎてから戻る */
  --camera-land-tilt: -1.6deg;
  --camera-land-yaw: 1.4deg;
  --camera-land-roll: 0.4deg;
  --camera-land-scale: 1.045;

  /* 部屋（引きの画） */
  /* 部屋の寸法(vmax)をこの係数で割ってレイアウトし、transform: scale で戻す。
     見た目は同一のまま描画寸法を抑える（4K では 540vmax ≈ 2万px となり、
     Chromium のラスタ上限を超えて下半分が黒く欠けるため） */
  --room-paint-shrink: 2.5;
  --room-dark: #0a0603;       /* 部屋の闇。床の果てはこの色に溶ける */
  --floor-color-1: #17110c;
  --floor-color-2: #100b07;
  --desk-color-1: #4a3522;
  --desk-color-2: #33220f;
  --desk-w: 300vmax;
  --desk-h: 230vmax;
  --candle-light: rgba(255, 178, 82, 0.12); /* 蝋燭の灯り */

  /* わら半紙 */
  --paper-color: #e5d7b2;
  --paper-color-dark: #d8c69a;
  --paper-fleck: rgba(110, 86, 50, 0.25);     /* 繊維の斑点 */
  --paper-vignette: rgba(87, 64, 34, 0.38);   /* 縁の焼け */

  /* インク */
  --ink-color: #1d2440;

  /* 返事のテキスト */
  --reply-font: "Yuji Syuku", "Hiragino Mincho ProN", serif;
  --reply-size: clamp(22px, 3.4vmin, 36px);
  --reply-max-width: min(72vw, 560px);
  --reply-appear-ms: 2000ms;
  --reply-fade-ms: 3200ms;

  /* 手書きインクの滲み・消滅 */
  --ink-fade-ms: 2800ms;
  --ink-fade-blur: 14px;

  /* 問い合わせ中のインク溜まり（右下固定） */
  --blot-size: 10px;
  --blot-corner-offset: clamp(18px, 4vmin, 36px);

  /* ヒント文 */
  --hint-size: clamp(20px, 3vmin, 32px);
  --hint-color: rgba(58, 48, 30, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background: var(--room-dark);
}

/* ---- カメラ ---- */
body { perspective: var(--camera-perspective); }
#zoom {
  position: fixed;
  inset: 0;
  transform: rotateX(var(--camera-tilt)) rotateY(var(--camera-yaw)) rotateZ(var(--camera-roll)) scale(var(--camera-start-scale));
  /* preserve-3d で #room を独立レイヤにする。#zoom の平面に描き込むと
     部屋の実寸(4K で約2万px)がラスタ上限を超えて下半分が黒く欠ける */
  transform-style: preserve-3d;
  will-change: transform;
}
body.book-opening #zoom {
  animation: camera-zoom var(--cover-open-ms) linear var(--cover-open-delay) forwards;
}
/* 忍び寄り (0-38%) → ダイブ (38-88%) → 行き過ぎてふわっと着地 (88-100%) */
@keyframes camera-zoom {
  0% {
    transform: rotateX(var(--camera-tilt)) rotateY(var(--camera-yaw)) rotateZ(var(--camera-roll)) scale(var(--camera-start-scale));
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.55);
  }
  38% {
    transform: rotateX(var(--camera-mid-tilt)) rotateY(var(--camera-mid-yaw)) rotateZ(var(--camera-mid-roll)) scale(var(--camera-mid-scale));
    animation-timing-function: cubic-bezier(0.45, 0, 0.14, 1);
  }
  88% {
    transform: rotateX(var(--camera-land-tilt)) rotateY(var(--camera-land-yaw)) rotateZ(var(--camera-land-roll)) scale(var(--camera-land-scale));
    animation-timing-function: cubic-bezier(0.35, 0, 0.55, 1);
  }
  100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
}

/* ---- 部屋（引きの画: 床・机・小物） ---- */
/* 以下、部屋の中の寸法は「見た目の vmax ÷ var(--room-paint-shrink)」で書く */
#room {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(540vmax / var(--room-paint-shrink));
  height: calc(540vmax / var(--room-paint-shrink));
  transform: translate(-50%, -50%) scale(var(--room-paint-shrink));
}
#floor {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent calc(26vmax / var(--room-paint-shrink)),
      rgba(0, 0, 0, 0.5) calc(26vmax / var(--room-paint-shrink)),
      rgba(0, 0, 0, 0.5) calc(26.6vmax / var(--room-paint-shrink))),
    linear-gradient(100deg, var(--floor-color-1), var(--floor-color-2));
}
#desk {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--desk-w) / var(--room-paint-shrink));
  height: calc(var(--desk-h) / var(--room-paint-shrink));
  transform: translate(-50%, -50%);
  border-radius: calc(5vmax / var(--room-paint-shrink));
  background:
    repeating-linear-gradient(93deg,
      rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(7vmax / var(--room-paint-shrink)),
      rgba(0, 0, 0, 0.14) calc(7vmax / var(--room-paint-shrink)),
      rgba(0, 0, 0, 0.14) calc(7.4vmax / var(--room-paint-shrink))),
    linear-gradient(115deg, var(--desk-color-1), var(--desk-color-2) 70%);
  box-shadow: 0 calc(3vmax / var(--room-paint-shrink)) calc(9vmax / var(--room-paint-shrink)) rgba(0, 0, 0, 0.85);
}
#parchment {
  position: absolute;
  left: calc(50% - 80vmax / var(--room-paint-shrink));
  top: calc(50% + 58vmax / var(--room-paint-shrink));
  width: calc(56vmax / var(--room-paint-shrink));
  height: calc(40vmax / var(--room-paint-shrink));
  transform: translate(-50%, -50%) rotate(-11deg);
  border-radius: calc(1.2vmax / var(--room-paint-shrink));
  background: linear-gradient(120deg, #cbbc93, #b3a377);
  box-shadow: 0 calc(1.2vmax / var(--room-paint-shrink)) calc(3.5vmax / var(--room-paint-shrink)) rgba(0, 0, 0, 0.6);
}
#quill {
  position: absolute;
  left: calc(50% + 88vmax / var(--room-paint-shrink));
  top: calc(50% - 68vmax / var(--room-paint-shrink));
  width: calc(44vmax / var(--room-paint-shrink));
  height: calc(44vmax / var(--room-paint-shrink));
  transform: translate(-50%, -50%) rotate(14deg);
  filter: drop-shadow(0 calc(1vmax / var(--room-paint-shrink)) calc(2vmax / var(--room-paint-shrink)) rgba(0, 0, 0, 0.65));
}
#room-light { /* 蝋燭の灯りと部屋の暗がり。床の端が見える前に完全な闇に落とす */
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side at 41% 39%, var(--candle-light), transparent 85%),
    radial-gradient(ellipse 62% 62% at 50% 50%,
      transparent 34%,
      rgba(10, 6, 3, 0.6) 60%,
      var(--room-dark) 76%);
}

/* ---- 表紙 ---- */
#cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 30% 20%, var(--cover-color-2), var(--cover-color-1) 70%),
    var(--cover-color-1);
  box-shadow: 0 2.5vmax 8vmax rgba(0, 0, 0, 0.75); /* 机に置かれた本の影 */
}
#cover::after { /* 革のしわ */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.03' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23l)'/%3E%3C/svg%3E");
}

/* ---- ページ（わら半紙） ---- */
#page {
  position: absolute;
  top: var(--cover-peek);
  right: var(--cover-peek);
  bottom: var(--cover-peek);
  left: calc(var(--cover-peek) + var(--cover-spine-extra));
  border-radius: var(--page-radius);
  background: var(--paper-color);
  /* 紙の重なり・縁の焼け・表紙との段差 */
  box-shadow:
    inset 0 0 clamp(30px, 8vmin, 90px) var(--paper-vignette),
    inset 0 0 4px rgba(60, 40, 15, 0.55),
    2px 3px 10px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
}
/* 紙の質感: 粗いむら + 細かい繊維 */
#page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0.30 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.05' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.50 0 0 0 0 0.40 0 0 0 0 0.22 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23m)'/%3E%3C/svg%3E");
}
/* 繊維の斑点（わら半紙らしい混ざりもの） */
#page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 1px at 12% 24%, var(--paper-fleck), transparent),
    radial-gradient(1.5px 1px at 33% 61%, var(--paper-fleck), transparent),
    radial-gradient(2px 1.5px at 58% 12%, var(--paper-fleck), transparent),
    radial-gradient(1px 2px at 71% 83%, var(--paper-fleck), transparent),
    radial-gradient(2.5px 1px at 87% 42%, var(--paper-fleck), transparent),
    radial-gradient(1px 1px at 44% 90%, var(--paper-fleck), transparent),
    radial-gradient(2px 1px at 24% 78%, var(--paper-fleck), transparent),
    radial-gradient(1.5px 1.5px at 92% 71%, var(--paper-fleck), transparent);
  background-size: 520px 520px;
}

/* ---- ロード時に開く表紙 (3D) ---- */
#book3d {
  position: absolute;
  inset: 0;
  z-index: 20;
  perspective: var(--book-perspective);
  pointer-events: none;
}
#front-cover {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
}
body.book-opening #front-cover {
  animation: open-cover var(--cover-open-ms) linear var(--cover-open-delay) forwards;
}
/* カメラの忍び寄りの間 (0-30%) は閉じたまま、ダイブに合わせて一気に開く */
@keyframes open-cover {
  0%, 30% {
    transform: rotateY(0deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 0.25, 1);
  }
  85%  { transform: rotateY(calc(var(--cover-open-angle) * 0.92)); opacity: 1; animation-timing-function: ease-out; }
  100% { transform: rotateY(var(--cover-open-angle)); opacity: 0; }
}
#front-cover .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#front-cover .front {
  background:
    radial-gradient(120% 100% at 30% 20%, var(--cover-color-2), var(--cover-color-1) 70%),
    var(--cover-color-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
#front-cover .front::before { /* 革のしわ */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.03' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23l)'/%3E%3C/svg%3E");
}
#front-cover .front::after { /* 型押しの枠 */
  content: "";
  position: absolute;
  inset: clamp(18px, 4vmin, 40px);
  border: 2px solid rgba(160, 120, 60, 0.22);
  border-radius: 4px;
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.25);
}
.cover-title {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(28px, 5vmin, 52px);
  letter-spacing: 0.18em;
  color: var(--cover-title-color);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 220, 150, 0.15);
}
#front-cover .inside {
  transform: rotateY(180deg);
  background: linear-gradient(105deg, var(--cover-inside-color-1), var(--cover-inside-color-2));
}
#page-shade { /* 表紙が開くのに合わせて晴れる影 */
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to right, rgba(20, 10, 0, 0.5), rgba(20, 10, 0, 0.2) 45%, rgba(20, 10, 0, 0.12));
}
body.book-opening #page-shade {
  animation: shade-lift var(--cover-open-ms) linear var(--cover-open-delay) forwards;
}
/* 表紙が開くのに合わせて影も晴れる */
@keyframes shade-lift {
  0%, 30% { opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.25, 1); }
  90%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #book3d, #page-shade, #room { display: none; }
  #zoom { transform: none; }
}

/* ---- 手書きバッチの canvas ---- */
#strokes { position: absolute; inset: 0; }
#strokes canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#strokes canvas.fading {
  transition: filter var(--ink-fade-ms) ease-in, opacity var(--ink-fade-ms) ease-in;
  filter: blur(var(--ink-fade-blur));
  opacity: 0;
}

/* ---- 日記の返事 ---- */
.reply {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: var(--reply-max-width);
  font-family: var(--reply-font);
  font-size: var(--reply-size);
  line-height: 1.7;
  color: var(--ink-color);
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
.reply span {
  opacity: 0;
  filter: blur(9px);
  transition: opacity var(--reply-appear-ms) ease-out, filter var(--reply-appear-ms) ease-out;
}
.reply.show span { opacity: 1; filter: blur(0); }
.reply.hide {
  transition: opacity var(--reply-fade-ms) ease-in, filter var(--reply-fade-ms) ease-in;
  opacity: 0;
  filter: blur(12px);
}

/* ---- 考え中のインク溜まり（右下に固定） ---- */
.blot {
  position: absolute;
  right: var(--blot-corner-offset);
  bottom: var(--blot-corner-offset);
  width: var(--blot-size);
  height: var(--blot-size);
  border-radius: 50%;
  background: var(--ink-color);
  filter: blur(2px);
  animation: blot-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes blot-pulse {
  0%, 100% { opacity: 0.12; transform: scale(0.7); }
  50%      { opacity: 0.5;  transform: scale(1.2); }
}

/* ---- 最初のヒント ---- */
#hint {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--reply-font);
  font-size: var(--hint-size);
  color: var(--hint-color);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 2200ms ease, filter 2200ms ease;
}
#hint.show { opacity: 1; filter: blur(0); }
#hint.hide { opacity: 0; filter: blur(8px); transition-duration: 900ms; }