/* DESK SETTINGS - the only numbers i should need to touch up here */
:root {
  --ratio: 1.702;        /* shape of the desk = width / height. things are laid out on a 1600 x 940 sheet */
  --ink: #1e1e1e;
  --paper: #f7f1e2;
  --pop: #ff8fab;        /* colour of the glow around a thing when it's hovered (same as the room) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;      /* no scrolling - the desk is the whole page */
}

body {
  /* the tablecloth. fills the whole window - swap for any file in patternsbg */
  background: #b38e67 url("../images/patternsbg/whiteredchecks.jpg") repeat;
  background-size: 15% auto;   /* bigger % = bigger checks */

  color: var(--ink);
  font-family: "Courier New", monospace;

  /* the things sit in the middle of the window */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* THE DESK ITSELF
   an invisible sheet the things are arranged on (no box, no border - the tablecloth shows through).
   as big as it can be while still fitting the window, so nothing ever gets cut off.
   container-type lets the text inside size off the desk (cqw) and not the screen */
.desk {
  position: relative;
  flex: none;
  aspect-ratio: var(--ratio);
  width: min(100vw, calc(100vh * var(--ratio)));
  container-type: inline-size;
}


/* EVERY THING ON THE DESK
   a positioned shell holding the picture + its hover shape + its tag.
   the shell itself ignores the mouse (pointer-events: none) - otherwise the empty
   corners of one picture would block the thing next to it */
.thing {
  position: absolute;
  display: block;
  pointer-events: none;
  text-decoration: none;
  color: var(--ink);
}

.thing img {
  display: block;
  width: 100%;
  rotate: var(--tilt);                                    /* each thing's tilt is set further down */
  filter: drop-shadow(0.3cqw 0.3cqw 0.5cqw rgba(0, 0, 0, 0.3));   /* soft shadow so it sits ON the cloth */
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* the invisible hover shape. covers the whole shell, tilts with the picture, then gets
   trimmed to the picture's outline by the clip-path lines at the bottom of this file */
.hit {
  position: absolute;
  inset: 0;
  rotate: var(--tilt);
  pointer-events: auto;
  cursor: pointer;
}

/* hover = grows a tiny bit + pink glow around its outline, same as the room.
   bigger number in scale() = bigger jump */
.thing:hover img,
.thing:focus-visible img {
  transform: scale(1.03);
  filter:
    drop-shadow(0 0 0.25cqw var(--pop))
    drop-shadow(0 0 0.5cqw var(--pop));
}

/* whatever is hovered jumps in front of its neighbours */
.thing:hover,
.thing:focus-visible {
  z-index: 30;
}


/* HOVER TAG - the little text box */
.tag {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font: bold clamp(8px, 1.1cqw, 14px) "Courier New", monospace;
  letter-spacing: 1px;
  padding: 3px 8px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

.thing:hover .tag,
.thing:focus-visible .tag {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* phones can't hover, so there the tags just stay on */
@media (hover: none) {
  .tag {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    letter-spacing: 0;
    padding: 1px 4px;
  }
}


/* THE CRAYON FONT for the sticky note.
   the font file has to sit in a folder called "fonts" next to desk.html, with exactly this name.
   until it's there, the note quietly uses the backup handwriting (Caveat) instead */
@font-face {
  font-family: "DK Crayon Crumble";
  src: url("../fonts/DKCrayonCrumble.ttf") format("truetype");
  font-display: swap;
}


/* THE NOTE - a yellow sticky note held down with a bit of tape. not a link, so no hover.
   left / top = where it sits, --w = how wide it is, rotate = its tilt.
   the writing is sized off --w, so making the note bigger or smaller scales the words with it */
.note {
  --w: 16.5cqw;                    /* width of the note */
  --lift: 0cqw;                    /* nudges ALL the writing up (minus) or down (plus) */

  position: absolute;
  left: 4.5%;
  top: 61%;
  width: var(--w);
  aspect-ratio: 0.9599;            /* same shape as stickynote.png */
  rotate: -5deg;

  /* top = big, so the writing starts underneath the tape. then right, bottom, left */
  padding: calc(var(--w) * 0.3035 + var(--lift)) calc(var(--w) * 0.06) 0 calc(var(--w) * 0.10);

  font-family: "DK Crayon Crumble", "Caveat", "Segoe Print", cursive;   /* crayon first, the rest are backups */
  font-size: calc(var(--w) * 0.088);       /* size of the writing */
  line-height: calc(var(--w) * 0.105);     /* gap between rows of writing */
  color: #26306e;                          /* blue */
  overflow-wrap: break-word;
}

/* the note + tape picture, behind the writing, with a soft shadow that follows its shape */
.note::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/home/stickynote.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0.2cqw 0.3cqw 0.4cqw rgba(0, 0, 0, 0.35));
}

.note p { margin: 0; }

/* "currently" - the bigger word on the first row */
.note .note-title { font-size: calc(var(--w) * 0.10); }

/* the little red words: reading, playing, thinking of, last updated */
.note .note-label { color: #b8322b; }

.note .note-label::after { content: ":"; }

/* a small gap before "last updated" so it reads as a separate thing */
.note .note-updated { margin-top: calc(var(--w) * 0.03); }


/* WHERE EVERYTHING SITS
   left / top = where its top left corner is, width = how big, all in % of the desk.
   --tilt = how much it's turned (minus = anticlockwise). change any of these to rearrange the desk */
.map        { left: 13.35%; top: 7.66%; width: 20.12%; --tilt: -22deg; }
.openbook   { left: 38.88%; top: 3.83%; width: 23.44%; --tilt: 2deg; }
.tank       { left: 76.08%; top: 2.2%; width: 22.29%; --tilt: 0deg; }
.about      { left: 80.94%; top: 40.43%; width: 14.69%; --tilt: 4deg; }
.chai       { left: -1.5%; top: 33.57%; width: 18.3%; --tilt: 0deg; }
.sketchbook { left: 21.75%; top: 39.51%; width: 25.6%; --tilt: -9deg; }
.tarot      { left: 66.98%; top: 8.3%; width: 8.84%; --tilt: 0deg; }
.letter     { left: 44.96%; top: 53.6%; width: 30.04%; --tilt: 0deg; }
.camera     { left: 28.0%; top: 71.5%; width: 16.1%; --tilt: 5deg; }
.diary      { left: 83.41%; top: 71.4%; width: 10.68%; --tilt: -68deg; }
.knit       { left: 53.78%; top: 34.63%; width: 19.04%; --tilt: 7deg; }

/* anything turned a LOT (like the diary lying on its side): a shadow turns with its picture,
   so its shadow is aimed "backwards" here to still land down + right like everyone else's.
   if i change that thing's --tilt by much, this needs redoing */
.diary img { filter: drop-shadow(-0.17cqw 0.39cqw 0.5cqw rgba(0, 0, 0, 0.3)); }


/* HOVER SHAPES
   the outline of each picture, as a list of corner points (% across, % down the picture).
   traced from the pictures, not by hand - if i swap a picture for a new one, its line needs remaking.
   deleting a line is safe: that thing's whole box just becomes hoverable */
.map .hit { clip-path: polygon(2.3% 6.3%, 3.1% 7.8%, 1.1% 18.0%, 2.3% 52.2%, 2.0% 92.2%, 5.7% 94.5%, 8.0% 98.8%, 96.6% 94.9%, 99.4% 92.5%, 97.4% 9.0%, 96.0% 4.7%, 4.9% 3.5%); }
.openbook .hit { clip-path: polygon(0.0% 0.0%, 0.0% 99.9%, 99.9% 99.9%, 99.9% 0.0%); }
.tank .hit { clip-path: polygon(50.8% 3.2%, 36.5% 5.0%, 22.8% 11.9%, 15.7% 18.7%, 9.8% 29.0%, 8.3% 36.3%, 8.3% 43.2%, 9.8% 50.9%, 13.9% 61.2%, 18.6% 68.9%, 19.5% 74.7%, 22.1% 80.8%, 31.5% 90.2%, 39.1% 93.6%, 44.7% 94.5%, 56.2% 92.9%, 63.8% 88.4%, 70.5% 80.1%, 76.5% 76.0%, 86.4% 66.0%, 91.3% 57.8%, 94.0% 47.9%, 94.0% 40.9%, 91.7% 31.5%, 84.6% 19.6%, 77.9% 13.2%, 68.9% 7.8%, 58.2% 4.1%); }
.about .hit { clip-path: polygon(0.0% 0.0%, 0.0% 99.9%, 99.9% 99.9%, 99.9% 0.0%); }
.chai .hit { clip-path: polygon(41.8% 11.1%, 31.0% 19.3%, 26.2% 26.4%, 22.7% 34.4%, 20.2% 47.3%, 20.3% 54.2%, 22.5% 66.0%, 29.7% 80.0%, 34.7% 86.0%, 40.0% 90.0%, 50.8% 93.3%, 58.3% 93.1%, 66.2% 90.2%, 71.7% 86.0%, 77.2% 79.3%, 83.2% 66.7%, 85.0% 57.3%, 85.2% 50.0%, 82.8% 36.7%, 77.8% 25.6%, 72.0% 18.2%, 66.0% 13.3%, 53.8% 9.3%); }
.sketchbook .hit { clip-path: polygon(89.4% 8.1%, 56.9% 8.1%, 51.8% 9.2%, 50.2% 8.1%, 49.2% 9.5%, 10.4% 9.8%, 8.3% 15.3%, 7.7% 49.1%, 2.2% 48.0%, 0.0% 52.0%, 0.2% 55.2%, 2.4% 58.7%, 7.7% 57.5%, 8.3% 93.1%, 12.4% 96.8%, 86.4% 96.0%, 90.4% 94.5%, 92.3% 90.5%, 92.3% 58.4%, 97.6% 60.4%, 99.4% 56.6%, 99.2% 53.5%, 97.0% 49.7%, 92.3% 51.2%, 91.3% 13.6%); }
.tarot .hit { clip-path: polygon(2.3% 0.0%, 0.8% 1.4%, 0.0% 98.3%, 2.6% 99.8%, 96.4% 99.8%, 98.7% 98.0%, 99.0% 1.1%, 97.2% 0.0%); }
.letter .hit { clip-path: polygon(78.2% 1.5%, 76.0% 0.3%, 59.2% 1.2%, 42.1% 4.1%, 25.2% 5.0%, 21.3% 7.0%, 23.6% 41.5%, 0.1% 67.6%, 23.7% 96.8%, 27.1% 93.1%, 27.3% 97.7%, 29.3% 99.9%, 38.8% 99.9%, 87.1% 94.1%, 88.6% 92.4%, 87.5% 75.3%, 97.0% 88.4%, 99.8% 86.5%, 98.5% 82.8%, 86.4% 62.8%, 82.5% 6.6%); }
.camera .hit { clip-path: polygon(1.9% 22.3%, 1.2% 25.5%, 1.7% 64.4%, 0.5% 70.6%, 2.8% 78.6%, 7.2% 83.7%, 47.7% 84.6%, 90.7% 82.3%, 94.8% 80.5%, 99.3% 73.1%, 98.1% 69.7%, 99.1% 22.3%, 96.3% 18.4%, 76.9% 14.7%, 74.3% 13.1%, 28.1% 12.9%, 8.9% 14.3%, 5.2% 16.8%); }
.diary .hit { clip-path: polygon(5.2% 0.0%, 4.4% 1.4%, 0.5% 3.6%, 0.8% 4.7%, 3.9% 6.0%, 3.6% 45.1%, 2.6% 45.7%, 3.4% 85.4%, 0.0% 87.1%, 0.0% 89.5%, 3.1% 90.5%, 4.9% 92.9%, 85.0% 93.0%, 92.8% 92.2%, 96.4% 89.9%, 97.9% 86.7%, 97.9% 54.3%, 99.5% 53.3%, 99.7% 39.8%, 98.2% 38.9%, 99.0% 4.3%, 97.7% 2.5%, 94.8% 0.8%, 91.5% 0.0%); }
.knit .hit { clip-path: polygon(1.6% 40.9%, 1.8% 58.5%, 3.4% 72.5%, 5.5% 80.2%, 8.5% 83.7%, 13.7% 80.2%, 19.7% 69.3%, 24.0% 65.8%, 37.5% 87.9%, 41.7% 91.4%, 50.8% 93.6%, 58.8% 92.0%, 67.1% 93.3%, 87.7% 85.3%, 94.3% 80.2%, 98.0% 72.2%, 97.5% 60.4%, 95.9% 52.7%, 98.4% 48.6%, 98.6% 45.0%, 95.9% 39.6%, 96.3% 31.3%, 93.3% 24.6%, 90.4% 23.3%, 84.9% 15.3%, 78.5% 19.5%, 54.7% 14.1%, 41.0% 14.4%, 34.6% 21.1%, 28.2% 33.5%, 24.7% 35.8%, 20.2% 31.0%, 15.1% 16.9%, 11.9% 15.0%, 5.5% 25.2%); }