/* Coco, the page background.
 *
 * Eight neon poses of the rabbit holding a magnifying glass, centred and fixed behind every
 * page, switching to face wherever the pointer is. She is the one piece of furniture that is
 * the same on the landing page, the legal pages, the DAML page and the workspace, so she lives
 * here rather than being pasted into each file's inline <style>.
 *
 * The markup is built by coco.js rather than written into each page — every page in this app
 * is a standalone HTML file with no templating, so a shared element has to come from a shared
 * script or it is nine copies drifting apart.
 *
 * Pages tune her with two custom properties on :root, both optional:
 *   --coco-opacity   how present she is behind content (default .37)
 *   --coco-height    how tall she stands (default min(76vh, 660px))
 *   --coco-bloom     a filter for the neon glow around her strokes (default none)
 *   --coco-justify   `center` (default) or `end` to stand her in the right-hand gutter
 *   --coco-glow-x    where the warmth pools, matched to --coco-justify (default 50%)
 * A page that wants her gone sets --coco-opacity: 0.
 */

.coco-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  /* Second value is justify-items: a page with a centred document column sets --coco-justify:end
     so she stands in the gutter beside the text rather than behind it. */
  place-items: center var(--coco-justify, center);
  box-sizing: border-box;
  padding-right: var(--coco-inset-right, 0);
  /* Fixed rather than absolute: she holds still while the page scrolls past, which is what
     makes her read as the room the content is in rather than a picture stuck to the hero. */
}

.coco-bg img {
  grid-area: 1 / 1;
  height: var(--coco-height, min(76vh, 660px));
  width: auto;
  opacity: 0;
  transition: opacity .34s ease;
  will-change: opacity;
  /* Neon reads as bright because of the halo around the stroke, not the alpha of the stroke.
     Default none, so pages that do not ask for it are byte-for-byte unchanged. */
  filter: var(--coco-bloom, none);
}

/* Two of the six drawings do double duty, mirrored, to cover the opposite diagonals. */
.coco-bg img.coco-flip { transform: scaleX(-1); }

/* --coco-fade is a 0..1 multiplier a page may drive from scroll, so she can be at full strength
   where nothing sits on her and fade out where content covers her. Unset means 1, so a page that
   never touches it behaves exactly as before. */
.coco-bg img.coco-on { opacity: calc(var(--coco-opacity, .37) * var(--coco-fade, 1)); }

/* A little warmth pooled under her, so she stands on the page rather than floating on it. */
.coco-bg::after {
  content: '';
  position: absolute;
  left: var(--coco-glow-x, 50%);
  top: 50%;
  width: 900px;
  height: 520px;
  max-width: 90vw;
  transform: translate(-50%, -28%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse,
    rgba(var(--coco-glow-rgb, 255, 150, 60), calc(var(--coco-glow, .07) * var(--coco-fade, 1))), transparent 68%);
}

/* Content has to sit in front of her. Every page's own sections need a stacking position for
   that to hold; `.coco-front` is the opt-in for anything that does not already have one. */
.coco-front { position: relative; z-index: 1; }

/* On a phone she is behind a single narrow column of text rather than beside it, so she comes
   down to something that does not fight the copy. */
/* Safety net for a page that opts into the right gutter: she is 0.947 as wide as she is tall, so
   below this there is no gutter wide enough to hold her and she would sit on the column. Set on
   .coco-bg itself so it beats the page's own :root value, which wins by inheritance otherwise. */
@media (max-width: 1440px) {
  .coco-bg { --coco-justify: center; --coco-inset-right: 0; --coco-glow-x: 50%; }
}

@media (max-width: 720px) {
  .coco-bg img { height: var(--coco-height-sm, min(52vh, 420px)); }
  .coco-bg img.coco-on { opacity: calc(var(--coco-opacity-sm, .22) * var(--coco-fade, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .coco-bg img { transition: none; }
}