/* ---------- Tom Riddle's Diary ---------- */

@font-face {
  font-family: "Riddle";
  src: url("fonts/Riddle-Script.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  margin: 0;
  overflow: hidden;               /* the page itself is the scroll surface */
  background: #0c0805;
  font-family: "Pinyon Script", cursive;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ---------- The page (full screen, the diary page you write on) ---------- */

.page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* iOS Safari: accounts for dynamic toolbars */
  overflow: hidden;
  background-color: #ecdfc4;
  background-image:
    /* light falling on the open page */
    radial-gradient(ellipse at 50% 0%, rgba(255, 250, 235, 0.55), rgba(255, 250, 235, 0) 55%),
    radial-gradient(ellipse at 50% 120%, rgba(90, 65, 35, 0.24), rgba(90, 65, 35, 0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(90, 65, 35, 0.04), rgba(90, 65, 35, 0.15) 90%),
    /* age mottling: soft irregular damp-stains, like the prop's blank pages */
    radial-gradient(ellipse 34% 26% at 14% 82%, rgba(140, 100, 55, 0.10), rgba(140, 100, 55, 0) 70%),
    radial-gradient(ellipse 28% 20% at 88% 12%, rgba(140, 100, 55, 0.08), rgba(140, 100, 55, 0) 70%),
    radial-gradient(ellipse 20% 16% at 72% 88%, rgba(120, 85, 45, 0.07), rgba(120, 85, 45, 0) 70%),
    /* paper grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
  background-size: cover, cover, cover, cover, cover, cover, 220px 220px;
  /* gutter shadow: the page curving into the binding on the left */
  box-shadow:
    inset 70px 0 70px -50px rgba(90, 60, 30, 0.4),
    inset 0 0 140px rgba(110, 80, 40, 0.24),
    inset 0 0 24px rgba(60, 40, 20, 0.2);
  /* A quill nib; the hotspot (2,30) sits at the nib's point. */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M2 30 L6 22 C10 12 18 4 29 2 C24 5 21 8 19 12 L22 13 C18 16 14 18 11 19 L14 20 C10 24 6 27 2 30 Z' fill='%2333251a' stroke='%23e9dcc0' stroke-width='1'/></svg>") 2 30, crosshair;
}

/* ---------- The stirring ink: a blot that breathes while the page prepares its answer ---------- */

.stir {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(var(--x, 50vw), var(--y, 50vh));
  pointer-events: none;
}

.stir::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; /* irregular blot, not a circle */
  background: radial-gradient(circle at 40% 40%, rgba(51, 37, 26, 0.85), rgba(51, 37, 26, 0.35) 70%, rgba(51, 37, 26, 0) 100%);
  animation: stirBlot 2.2s ease-in-out infinite;
}

@keyframes stirBlot {
  0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0.25; }
  50% { transform: scale(1) rotate(8deg); opacity: 0.7; }
}

#ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  display: block;
  z-index: 1;
}

/* Text overlay: holds the typed replies (Pinyon Script). Same plane as ink. */
.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;           /* clicks/touches pass through to the canvas */
  overflow: hidden;
}

/* One line of reply text inside the overlay. */
.reply {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(var(--x, 0px), var(--y, 0px));
  font-family: "Riddle", "Pinyon Script", cursive;
  font-weight: 700;
  font-size: clamp(30px, 5.2vw, 40px);
  line-height: 1.5;
  color: #33251a;
  text-align: left;
  letter-spacing: 0.2px;
  word-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.35);
  max-width: 88vw;                 /* wrap, never overflow horizontally */
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
  opacity: 0;
}

.caret {
  display: none;
}

/*
 * The cover IS the screen: shabby black leather, seen close up.
 * Layers, back to front: leather color + grain noise, corner/edge wear,
 * a spine shadow down the left, and a blind-embossed name plate.
 */
.cover {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #3a2b1d;
  background-image:
    /* scuffed sheen: a broad diagonal light across the leather */
    linear-gradient(160deg, rgba(190, 150, 100, 0.22) 0%, rgba(120, 90, 55, 0.06) 45%, rgba(0, 0, 0, 0.3) 100%),
    /* a soft light pooling behind the name plate */
    radial-gradient(ellipse 55% 40% at 50% 46%, rgba(200, 160, 105, 0.16), rgba(0, 0, 0, 0) 70%),
    /* corner and edge wear */
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%),
    /* leather grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)' opacity='0.14'/></svg>");
  background-size: cover, cover, cover, 180px 180px;
  /* spine: the book's fold darkening the left edge */
  box-shadow:
    inset 60px 0 80px -40px rgba(0, 0, 0, 0.9),
    inset -20px 0 60px -30px rgba(0, 0, 0, 0.5),
    inset 0 0 140px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* a single blind-tooled rule pressed into the leather, near the edges */
.cover::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 4vw, 40px);
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: 0 1px 0 rgba(200, 160, 110, 0.35), inset 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(200, 160, 110, 0.18);
  border-radius: 2px;
  pointer-events: none;
}

.cover.hidden {
  opacity: 0;
  transform: scale(1.08);
  visibility: hidden;
  pointer-events: none;
}

.cover-emboss {
  text-align: center;
}

/* Blind embossing: type pressed into the leather, not printed on it.
 * Dark fill, a hair of light catching the lower edge of each letter. */
.cover-title {
  margin: 0;
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-size: clamp(34px, 8vw, 64px);
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: #17100a;
  text-shadow:
    0 1px 0 rgba(215, 175, 120, 0.55),
    0 2px 2px rgba(230, 190, 130, 0.18),
    0 -1px 1px rgba(0, 0, 0, 0.85);
}

.cover-year,
.cover-maker {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #17100a;
  text-shadow: 0 1px 0 rgba(215, 175, 120, 0.45), 0 -1px 1px rgba(0, 0, 0, 0.7);
}

.cover-year {
  margin: 0 0 1.2rem;
  font-size: clamp(13px, 2.2vw, 17px);
}

.cover-maker {
  margin: 1.6rem 0 0;
  font-size: clamp(10px, 1.6vw, 13px);
  opacity: 0.85;
}

.cover-hint {
  position: absolute;
  bottom: clamp(28px, 7vh, 64px);
  margin: 0;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(18px, 3.4vw, 24px);
  color: rgba(210, 170, 115, 0.75);
  animation: pulseHint 2.4s ease-in-out infinite;
}

@keyframes pulseHint {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-hint { animation: none; opacity: 0.7; }
  .stir::before { animation: none; opacity: 0.5; }
}