/* "Possum in my roof": the torchlight section (home page, direction B).
   A real photo of a brushtail possum, in the dark. The mouse (or a finger) is a torch: the beam reveals
   the photo, the possum's eyeshine glows as the light nears it, and a catchlight in each eye sits toward
   the torch. possum.js draws the darkness on one small canvas and moves four tiny elements (opacity and
   transforms only). Without the script, or with reduced motion, the beam rests on the possum's face.
   Uses B's tokens (style.css). Every class is scoped under .px. */

.px { position: relative; overflow: hidden; isolation: isolate; }
.px > .wrap { position: relative; z-index: 1; }

.px-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "fig" "body";
}
.px-head { grid-area: head; }
.px-head .lede { color: var(--ink2-n); margin: 0 0 26px; }

/* ---------- The panel: a fixed aspect ratio, so nothing shifts ---------- */
.px-fig { grid-area: fig; margin: 0 calc(var(--gut) * -1); min-width: 0; }
.px-stage {
  --ar: .8;          /* panel width / height */
  --iar: 1.4995;     /* the photo's width / height (1600 x 1067) */
  --fx: .472;        /* the point of the photo (the possum's face) kept in the middle */
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #050607;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* The photo's box: as tall as the panel, cropped at the sides, the face centred. The eyes layer
   shares this box, so the eye positions are plain percentages of the photo. */
.px-plate {
  position: absolute; top: 0; height: 100%;
  width: calc(100% * var(--iar) / var(--ar));
  left: calc(50% - 100% * var(--iar) / var(--ar) * var(--fx));
}
.px-img {
  display: block; max-width: none; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
/* No script: a still torch on the face, in plain CSS */
.px-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle closest-side at 50% 47%,
    rgba(4, 6, 9, 0) 0, rgba(4, 6, 9, .01) 24%, rgba(4, 6, 9, .22) 38%, rgba(4, 6, 9, .64) 54%,
    rgba(4, 6, 9, .83) 66%, rgba(4, 6, 9, .91) 84%, rgba(4, 6, 9, .94) 105%, rgba(4, 6, 9, .955) 130%);
}
.px-stage.is-live .px-shade { display: none; }
.px-dark { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Eyeshine and catchlights, above the darkness */
.px-eyes { pointer-events: none; z-index: 2; }
.px-eye { position: absolute; display: block; width: .95%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.px-glow {
  position: absolute; left: 50%; top: 50%;
  width: 1100%; aspect-ratio: 1; margin: -550% 0 0 -550%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 250, 253, 1) 0, rgba(255, 240, 250, .97) 5%, rgba(247, 205, 235, .72) 8.5%,
    rgba(238, 190, 222, .24) 13%, rgba(232, 196, 220, .1) 24%, rgba(226, 204, 222, .04) 46%,
    rgba(226, 204, 222, 0) 100%);
  opacity: .9;
  will-change: opacity, transform;
}
.px-cl {
  position: absolute; left: 50%; top: 50%;
  width: 46%; aspect-ratio: 1; margin: -23% 0 0 -23%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0, #fff 40%, rgba(255, 255, 255, .6) 64%, rgba(255, 255, 255, 0));
  will-change: transform, opacity;
}

/* A thin edge, so the panel reads as a plate even when it's dark */
.px-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .1);
}

/* The plate label: species, credit (with the effect named), and how to use the torch */
.px-cap {
  display: grid; gap: 3px; padding: 11px var(--gut) 0;
  font-stretch: 75%; font-size: 13px; line-height: 1.32; color: var(--ink2-n);
}
.px-sp { font-weight: 750; font-size: 14.5px; color: #fff; }
.px-sp i { font-weight: 500; font-style: italic; margin-left: 3px; color: var(--ink2-n); }
.px-cr a { color: inherit; text-decoration-color: rgba(179, 185, 182, .5); }
.px-hint {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font-weight: 700; font-size: 14px; color: var(--paper-n);
}
.px-hint::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0, #fff 34%, rgba(255, 244, 228, .5) 60%, rgba(255, 244, 228, 0));
}
.px-hint-d { display: none; }
@media (hover: hover) and (pointer: fine) {
  .px-hint-m { display: none; }
  .px-hint-d { display: inline; }
  .px-stage { cursor: none; }
}

/* ---------- What to do ---------- */
.px-body { grid-area: body; margin-top: 34px; min-width: 0; }
.px-steps { list-style: none; counter-reset: px; margin: 0; padding: 0; border-top: 3px solid var(--paper-n); }
.px-steps li {
  counter-increment: px;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px;
  padding: 15px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .2);
  font-size: 15.5px; line-height: 1.45; color: var(--ink2-n);
}
.px-steps li::before {
  content: counter(px, decimal-leading-zero);
  font-stretch: 75%; font-weight: 800; font-size: 24px; line-height: 1.05; font-variant-numeric: tabular-nums;
  color: var(--blue-n);
}
.px-steps b {
  display: block; margin-bottom: 4px;
  font-stretch: 112%; font-weight: 800; font-size: 20px; line-height: 1.1; letter-spacing: -.012em; color: #fff;
}
.px-steps p { margin: 0; }
.px-check { margin: 14px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink2-n); }
.px-check b { color: var(--paper-n); font-weight: 700; }

.px-dont { margin: 30px 0 0; padding: 14px 0 0; border-top: 3px solid #FF6B74; }
.px-dont h3 {
  margin: 0 0 8px;
  font-stretch: 112%; font-weight: 820; font-size: 22px; line-height: 1.08; letter-spacing: -.014em; color: #fff;
}
.px-dont p { margin: 0 0 9px; font-size: 15.5px; line-height: 1.45; color: var(--ink2-n); }
.px-dont p b { color: #fff; font-weight: 700; }
.px-law { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.px-src { margin: 10px 0 0; font-stretch: 75%; font-size: 13px; line-height: 1.35; color: var(--ink2-n); }
.px-more { margin-top: 26px; color: #fff; }
.dark .px-more { color: #fff; }

/* A faint spill of light on the wall around the panel, following the torch (mouse only) */
.px-lamp { display: none; }
@media (hover: hover) and (pointer: fine) {
  .px-lamp {
    display: block; position: absolute; left: 0; top: 0; z-index: 0;
    width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(226, 230, 255, .075), rgba(226, 230, 255, .032) 42%, rgba(226, 230, 255, 0));
    pointer-events: none; opacity: 0; will-change: transform;
    transition: opacity .6s var(--ease);
  }
  .px.is-lamp .px-lamp { opacity: 1; }
}

/* ---------- Wider phones and tablets ---------- */
@media (min-width: 600px) {
  .px-fig { margin: 0; }
  .px-stage { --ar: 1.25; aspect-ratio: 5 / 4; }
  .px-stage::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  .px-cap { padding: 11px 0 0; }
}

/* ---------- Desktop: the panel on the left, what to do on the right ---------- */
@media (min-width: 1024px) {
  .px-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "head head" "fig body";
    column-gap: 64px;
  }
  .px-head .lede { margin-bottom: 44px; }
  .px-stage { --ar: 1; aspect-ratio: 1 / 1; }
  .px-cap { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
  .px-cap .px-sp, .px-cap .px-cr { grid-column: 1; }
  .px-hint { grid-column: 2; grid-row: 1 / span 2; margin-top: 2px; }
  .px-body { margin-top: 0; }
  .px-steps li { grid-template-columns: 52px minmax(0, 1fr); padding: 18px 0 19px; font-size: 16px; }
  .px-steps li::before { font-size: 28px; }
  .px-steps b { font-size: 22px; }
  .px-dont h3 { font-size: 24px; }
  .px-dont p { font-size: 16px; }
}
@media (min-width: 1280px) {
  .px-grid { column-gap: 80px; }
}

/* Reduced motion: the beam rests on the face, nothing moves, nothing to tell people to do */
@media (prefers-reduced-motion: reduce) {
  .px-hint, .px-lamp { display: none !important; }
  .px-stage { cursor: auto; }
}