/* ============================================================
   VENE · DRÔLERIES — living marginalia
   The hand-drawn vector bestiary is retired. Each drôlerie is
   now a small set of real manuscript images that cross-fade on
   a slow loop, and once more on hover, the way a flipped page
   seems to breathe. The convention, documented in ATELIER.md:

     assets/droleries/<name>/state-1.png   (shown first / still)
     assets/droleries/<name>/state-2.png
     assets/droleries/<name>/state-3.png

   PNGs are transparent cutouts. js/main.js loads them by this
   convention, so dropping new art into a folder changes the
   creature with no code change. Where no art exists yet, a
   labelled placeholder holds the slot. Under reduced motion,
   only state-1 is shown and nothing cycles.
   ============================================================ */

/* ---------- The living drôlerie: an illuminated parchment medallion ----------
   These manuscript creatures cannot all be cut cleanly from their plates (the
   knight is loose painted strokes, the monkey is a full parchment crop), so
   each is seated in a small roundel of parchment with a gold ring. A ragged
   cutting then reads as an intentional illuminated medallion rather than a
   floating, halftone-haloed scrap. The disc holds still and only the creature
   inside cross-fades, so the breathing stays gentle. */
.drolerie {
  position: relative; display: inline-block; line-height: 0;
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  /* aged parchment ground, lit from the top-left like the rest of the page */
  background: radial-gradient(58% 58% at 40% 32%, #f1e8d4 0%, #e3d7bc 60%, #d6c7a3 100%);
  box-shadow: 0 7px 18px -9px rgba(26, 22, 16, 0.55), 0 2px 5px -2px rgba(26, 22, 16, 0.4);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 600ms var(--ease-settle);
}
.drolerie::after {  /* the gold ring and a faint inner shadow, painted above the art */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; z-index: 3;
  box-shadow:
    inset 0 0 0 1.5px rgba(196, 162, 74, 0.6),
    inset 0 0 0 3px rgba(26, 22, 16, 0.14),
    inset 0 7px 15px -7px rgba(60, 46, 24, 0.42);
}
.drolerie__img {  /* the creature is pre-centred in a square, so a small inset seats it in the ring.
                      (img is a replaced element, so it needs an explicit size, not inset alone) */
  position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; max-width: none;
  object-fit: contain;
  /* a touch of contrast and a soft shadow lift each creature off the parchment,
     so even the mid-tone ones (the snail, the knight) read as a clear cutting */
  filter: contrast(1.05) saturate(1.05) drop-shadow(0 1px 2px rgba(26, 22, 16, 0.5));
}
/* ---------- Per-creature crops: seat each WHOLE beast inside the circle's safe zone ----------
   A circle's corner-safe inscribed square is ~70% of the diameter, so a figure whose content
   reaches the canvas corners (rabbit ears/legs, monkey's reaching hand) needs a smaller footprint
   than the 88% base; a wide-but-short figure (the knight) can stay broad because contain scales it
   to the circle's mid-band where the disc is at full width. */

/* the knight is a wide horizontal jousting scene (horse edge-to-edge, lance to the right, flowers
   at the top corners). contain in an 84% box scales the wide figure to ~84% width and a shorter
   height, centred at the circle's mid-band — so the lance/horse sit where the disc is widest and
   the top flowers tuck inside the ring. */
.drolerie[data-drolerie="knight"] .drolerie__img { top: 8%; left: 8%; width: 84%; height: 84%; object-fit: contain; }

/* the rabbit nearly fills its plate — ears reach the top, the body the left edge, the legs the
   bottom — so it must shrink toward the inscribed safe zone to keep ears and feet uncut. */
.drolerie[data-drolerie="rabbit"] .drolerie__img { top: 11%; left: 11%; width: 78%; height: 78%; object-fit: contain; }

/* the monkey reclines on the diagonal with its hand reaching into the top-left corner; cover clipped
   that hand and the corners, so it now uses contain at ~76% (diagonal extent ≤ the ~70% inscribed
   square + a hair) so the WHOLE monkey reads. Its own parchment blends with the roundel's ground. */
.drolerie[data-drolerie="monkey"] .drolerie__img {
  top: 7%; left: 7%; width: 86%; height: 86%; object-fit: contain;
  /* the grey manuscript ground is washed up toward the cream parchment
     (brighter, softer, warmer) so it melts into the roundel, while the ink
     monkey stays readable; a soft radial mask dissolves the rectangular edge. */
  filter: brightness(1.3) contrast(0.82) saturate(0.72) sepia(0.34);
  -webkit-mask-image: radial-gradient(circle at 48% 50%, #000 52%, transparent 86%);
  mask-image: radial-gradient(circle at 48% 50%, #000 52%, transparent 86%);
}

.drolerie.is-stack .drolerie__img { transition: opacity 1400ms var(--ease-drift); }
.drolerie.is-stack .drolerie__img--overlay { opacity: 0; }
.drolerie.is-stack .drolerie__img.is-active { opacity: 1; }
.drolerie.is-stack .drolerie__img--base:not(.is-active) { opacity: 0; }

.drolerie:hover { transform: rotate(var(--tilt, 0deg)) translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .drolerie:hover { transform: rotate(var(--tilt, 0deg)); }
  .drolerie.is-stack .drolerie__img { transition: none; }
}
/* each drôlerie leans a little, so the margins feel hand-placed, never gridded */
.reframe .ornament__beast { --tilt: -3deg; }
.schole  .ornament__beast { --tilt: 2.5deg; }
.margin-note--mech  .drolerie { --tilt: -2.5deg; }
.margin-note--accum .drolerie { --tilt: 3deg; }
.colophon__scene .beast--knight { --tilt: -1deg; }
.colophon__scene .beast--snail  { --tilt: 2deg; }

/* ---------- Placeholder: holds the slot until real art is dropped in ---------- */
.drolerie__placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; min-height: 44px;
  font-family: var(--serif); font-style: italic; font-size: 0.8125rem;
  color: var(--ink-ghost);
  background: color-mix(in srgb, var(--vellum-shade) 60%, transparent);
  border: 1px dashed var(--gold-whisper);
  border-radius: 2px;
  line-height: 1.15; text-align: center; padding: 0.5em;
}
.guilt .drolerie__placeholder,
.gallery .drolerie__placeholder,
.vespers .drolerie__placeholder,
.colophon .drolerie__placeholder {
  color: var(--on-night-ghost);
  background: rgba(239, 233, 223, 0.04);
  border-color: rgba(232, 204, 126, 0.22);
}

/* ---------- Section ornament: the drôlerie between two gold rules ---------- */
.ornament {
  display: flex; align-items: center; gap: 1.25rem;
  width: min(100% - 2 * var(--page-margin), 30rem);
  margin: var(--s-16) auto;
}
.ornament .rule-gold { flex: 1; margin: 0; }
.ornament__beast { width: 54px; flex: 0 0 auto; opacity: 0.92; }

/* ---------- Margin notes (monkey scribe, rabbit herald) ---------- */
.margin-note .drolerie { width: clamp(96px, 11vw, 140px); margin: 0 auto; }

/* ---------- Footer scene: the knight trembles before the snail ---------- */
.colophon__scene .beast--snail { cursor: pointer; }
.colophon__scene .beast--knight { transform-origin: 50% 95%; }
.colophon__scene:hover .beast--knight { animation: tremble 360ms ease-in-out infinite; }
@keyframes tremble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.6deg) translateX(-1px); }
  75% { transform: rotate(1.4deg) translateX(1px); }
}
@media (prefers-reduced-motion: reduce) {
  .colophon__scene:hover .beast--knight { animation: none; }
}

/* festina lente — the snail's banner, raised on the third click */
.snail-motto {
  position: absolute;
  transform: translate(-10%, -130%);
  font-family: var(--serif); font-style: italic; font-size: 0.9375rem;
  color: var(--gold-bright);
  background: rgba(20, 17, 12, 0.85);
  border: 1px solid rgba(232, 204, 126, 0.4);
  padding: 0.45em 1em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 600ms var(--ease-drift), transform 600ms var(--ease-settle);
  pointer-events: none;
}
.snail-motto.is-raised { opacity: 1; transform: translate(-10%, -160%); }