/* A corner that turns up and folds over, a dog-ear: on the AMA's page, each note's (ama.js),
   and on the desk, each card's picture (desk.js). Mustafa chose it on the board (F,
   2026-10-31) to mark a card to share: under the pointer the corner lifts past upright, its back
   beginning to show; at the corner it folds right over along the diagonal; and a chosen card
   keeps it folded down.

   Its host holds it as `.corner`: two faces turned in 3D about the diagonal
   (`rotate3d(1, 1, 0, …)`), each hidden as it faces away. The front is what the host's corner
   was; the back is the paper's back, lit along the crease, casting the fold's shadow on what
   it's folded onto. States, on the host: .is-lifted (under the pointer), .is-folded (the
   pointer on the corner), .is-dogeared (chosen: folded for good). While the corner is up the
   host cuts it from itself with `--cut` (a note's paper in ama.css, a picture in desk.css), so
   under the fold is the table, never the card; it's put back only once the corner has landed.

   - The cut stops 1.5px short of the diagonal and the front reaches it, so lying flat the
     front's soft edge is over the card, not the table (a hairline showed there); folded, the
     back reaches as far past the crease.
   - The shadow is the back's alone (on its wrapper, as the clip that makes it a triangle would
     cut a shadow of its own off): lying flat, a shadow on the whole corner drew a line along
     its edge before it had turned at all (Mustafa, 2026-10-31) */
@property --cut { syntax: '<length>'; inherits: false; initial-value: 0px; }
:root {
  --fold-shadow-near: oklch(0.2 0.02 60 / 0.26);
  --fold-shadow-far: oklch(0.2 0.02 60 / 0.12);
}
:root[data-theme="dark"] {
  --fold-shadow-near: oklch(0 0 0 / 0.6);
  --fold-shadow-far: oklch(0 0 0 / 0.35);
}
.corner {
  position: absolute; top: 0; right: 0; z-index: 3; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  visibility: hidden; transition: visibility 0s 340ms;
}
.is-lifted > .corner, .is-dogeared > .corner { visibility: visible; transition: visibility 0s; }
.corner > span { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-origin: 50% 50%; transition: transform 300ms var(--ease-out); }
/* A note's corner: its paper, its grain and its top and right tears where the note's are */
.corner-front {
  background: var(--bg-canvas); clip-path: polygon(0 0, 100% 0, 100% 100%);
  -webkit-mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-right);
  mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-right);
  -webkit-mask-size: 100% 100%, 240px 5px, 5px 240px; mask-size: 100% 100%, 240px 5px, 5px 240px;
  -webkit-mask-position: 0 0, calc(var(--tear-x, 0px) + var(--corner-x, 0px)) 0, 100% calc(0px - var(--tear-y, 0px));
  mask-position: 0 0, calc(var(--tear-x, 0px) + var(--corner-x, 0px)) 0, 100% calc(0px - var(--tear-y, 0px));
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-y; mask-repeat: no-repeat, repeat-x, repeat-y;
  -webkit-mask-composite: source-out, source-over; mask-composite: subtract, add;
  transform: perspective(160px) rotate3d(1, 1, 0, 0deg);
}
.corner-front::before {
  content: ""; position: absolute; inset: 0;
  background: var(--paper-texture) var(--corner-x, 0px) 0 / var(--paper-texture-size) repeat;
  filter: var(--paper-texture-filter); mix-blend-mode: var(--paper-texture-blend); opacity: var(--paper-texture-opacity);
}
.corner-back { filter: drop-shadow(-0.6px 1.2px 0.9px var(--fold-shadow-near)) drop-shadow(-1.5px 3px 3.5px var(--fold-shadow-far)); transform: perspective(160px) rotate3d(1, 1, 0, 180deg); }
/* Its torn edges are the note's top and right edges, folded */
.corner-back > i {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom left, var(--bg-surface) 50%, color-mix(in oklch, var(--bg-canvas), var(--fg-default) 6%) 100%);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% calc(100% - 2px), 2px 0);
  -webkit-mask-image: linear-gradient(#000 0 0), var(--tear-left), var(--tear-bottom);
  mask-image: linear-gradient(#000 0 0), var(--tear-left), var(--tear-bottom);
  -webkit-mask-size: 100% 100%, 5px 240px, 240px 5px; mask-size: 100% 100%, 5px 240px, 240px 5px;
  -webkit-mask-position: 0 0, 0 calc(var(--tear-x, 0px) + var(--corner-x, 0px)), calc(0px - var(--tear-y, 0px)) 100%;
  mask-position: 0 0, 0 calc(var(--tear-x, 0px) + var(--corner-x, 0px)), calc(0px - var(--tear-y, 0px)) 100%;
  -webkit-mask-repeat: no-repeat, repeat-y, repeat-x; mask-repeat: no-repeat, repeat-y, repeat-x;
  -webkit-mask-composite: source-out, source-over; mask-composite: subtract, add;
}
/* Lifted, past upright and leaning over: its back begins to show, the table under it */
.is-lifted > .corner > .corner-front { transform: perspective(160px) rotate3d(1, 1, 0, -118deg); }
.is-lifted > .corner > .corner-back { transform: perspective(160px) rotate3d(1, 1, 0, 62deg); }
/* Folded right over: under the pointer at the corner, and for good once the card's chosen */
.is-folded > .corner > span, .is-dogeared > .corner > span { transition-duration: 420ms; transition-timing-function: var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)); }
.is-folded > .corner > .corner-front, .is-dogeared > .corner > .corner-front { transform: perspective(160px) rotate3d(1, 1, 0, -180deg); }
.is-folded > .corner > .corner-back, .is-dogeared > .corner > .corner-back { transform: perspective(160px) rotate3d(1, 1, 0, 0deg); }
@media (prefers-reduced-motion: reduce) { .corner > span { transition: none; } }