/* 3D desk calendar: an A-frame stand with wire-o bound sheets that flip over the top.
   Size is set by --w (the width of one sheet). Everything else is derived from it. */
.c3 {
  --w: 280px;
  --hs: calc(var(--w) * 1.4189);            /* sheet height: A5, 148 x 210 mm */
  --bw: calc(var(--w) * 1.07);              /* stand board width */
  --bh: calc(var(--hs) + var(--w) * .11);   /* stand board height, a lip shows below the sheets */
  --lean-f: 13deg;
  --lean-b: 21deg;
  --board: #f3f1ec;
  --board-edge: #dcd7cd;
  --back: #e7e2d8;
  --ring: #2c2c2e;
  --ring-hi: #77777c;
  --paper-back: #f1eee8;
  --hole: #4a4740;
  position: relative;
  width: var(--bw);
  height: calc(var(--bh) + var(--w) * .2);
  perspective: calc(var(--w) * 9);
  perspective-origin: 50% 30%;
  -webkit-user-select: none; user-select: none;
}
.c3--black { --board: #161617; --board-edge: #0b0b0c; --back: #0f0f10; --ring: #1d1d1f; --ring-hi: #5d5d62; --hole: #2a2a2c; }
.c3--white { --board: #fbfbfa; --board-edge: #e2e2e0; --back: #f2f1ee; --ring: #1b1b1c; --ring-hi: #6a6a6e; }
.c3--white .c3-back > .c3-plane { background: linear-gradient(180deg, #f7f6f3, #e7e5e0); }

.c3-rig, .c3-front, .c3-back, .c3-sheet { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.c3-rig {
  position: absolute; left: 0; top: calc(var(--w) * .09);
  width: var(--bw); height: var(--bh);
  transform-origin: 50% 46%;
  will-change: transform;
}
.c3-front, .c3-back { position: absolute; left: 0; top: 0; width: var(--bw); height: var(--bh); transform-origin: 50% 0; }
.c3-front { transform: rotateX(var(--lean-f)); }
.c3-back { height: calc(var(--bh) * 1.046); transform: rotateX(calc(var(--lean-b) * -1)) translateZ(-.5px); }
.c3-plane { position: absolute; inset: 0; border-radius: 2px; }
.c3-front > .c3-plane { background: linear-gradient(180deg, var(--board) 0%, var(--board) 88%, var(--board-edge) 100%); }
.c3-back > .c3-plane { background: linear-gradient(180deg, var(--back), color-mix(in srgb, var(--back) 80%, #000)); }

.c3-sheet {
  position: absolute; left: calc((var(--bw) - var(--w)) / 2); top: 0;   /* hinged exactly at the binding */
  width: var(--w); height: var(--hs);
  transform-origin: 50% 0;
}
.c3-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 1px;
  background: #fff;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06);
}
.c3-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* the back is turned about the vertical axis, so artwork on it reads upright once the sheet has gone over the top */
.c3-rear { transform: rotateY(180deg); background: var(--paper-back); }
.c3-blank .c3-face { background: #fbfaf7; }

/* punched holes along the top of each sheet, lined up with the rings */
/* one element per face: each tile is one ring's share of the width, with the hole drawn in its middle */
.c3-holes {
  position: absolute; left: calc(var(--w) * .062); right: calc(var(--w) * .062); top: calc(var(--w) * .011); height: calc(var(--w) * .022); pointer-events: none;
  background: linear-gradient(90deg, transparent 33%, var(--hole) 33%, var(--hole) 67%, transparent 67%) 0 0 / calc(100% / var(--rings, 17)) 100% repeat-x;
  border-radius: 1px;
}
.c3-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,5,.55), rgba(10,8,5,.18) 60%, rgba(10,8,5,.08)); opacity: 0; pointer-events: none; }

/* wire-o rings, drawn as loops that rise over the top edge and drop into the holes */
.c3-rings {
  position: absolute; left: calc((var(--bw) - var(--w)) / 2 + var(--w) * .062); right: calc((var(--bw) - var(--w)) / 2 + var(--w) * .062);
  top: calc(var(--w) * -.03); height: calc(var(--w) * .07);
  display: grid; grid-template-columns: repeat(var(--rings, 17), 1fr); justify-items: center; pointer-events: none;
  transform: translateZ(calc(var(--w) * .012));
}
.c3-rings i {
  position: relative; width: calc(var(--w) * .017); height: 100%;
  border-radius: calc(var(--w) * .02);
  border: calc(var(--w) * .0055) solid var(--ring);
  border-left-color: var(--ring-hi);
  box-shadow: calc(var(--w) * .004) 0 0 color-mix(in srgb, var(--ring) 70%, #000);
}

.c3-ground {
  position: absolute; left: -12%; right: -12%; bottom: 0; height: calc(var(--w) * .26);
  background: radial-gradient(50% 50% at 50% 50%, rgba(20,16,10,.34), rgba(20,16,10,.14) 45%, rgba(20,16,10,0) 72%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}