/* 21:45 The whole family: Pooppy in the middle of the household, the
   members on gently orbiting dotted lines, a log travelling from a member
   into the shared diary and fanning out to everyone else, and the pushes
   stacking on your iPhone ("Anna logged a poop (Ideal Log).").
   Geometry is pure CSS: the cluster is a size container and each arm takes
   its angle and length from its --fx/--fy (fractions of the half width and
   half height) with atan2() and hypot(). The orbit runs only while the
   stage is on screen (.is-live, set by family.js). */

#stage-family { --stage-h: 600px; }

#stage-family .x-fam {
  --av: 54px;
  --mascot: 94px;
  --x-fam-dot: rgba(91, 46, 232, 0.5);
  --x-fam-dot-hot: rgba(91, 46, 232, 0.95);
  --x-fam-glow: rgba(160, 120, 255, 0.32);
  position: relative;
  width: min(100%, 560px);
  display: grid;
  gap: 10px;
}
html[data-ink="light"] #stage-family .x-fam {
  --x-fam-dot: rgba(205, 188, 255, 0.55);
  --x-fam-dot-hot: rgba(232, 222, 255, 1);
  --x-fam-glow: rgba(150, 110, 255, 0.36);
}

/* ---- The cluster ------------------------------------------------------- */

#stage-family .x-fam-cluster {
  position: relative;
  width: 100%;
  aspect-ratio: 1.24;
  container-type: size;
}
#stage-family .x-fam-glow {
  position: absolute; left: 50%; top: 50%;
  width: 78cqh; height: 78cqh;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--x-fam-glow) 0%, transparent 66%);
  pointer-events: none;
}

/* An arm runs from the centre to a member; its dotted line is the arm
   itself, and the member rides its far end, kept upright. */
#stage-family .x-fam-arm {
  --dx: calc(var(--fx) * 50cqw);
  --dy: calc(var(--fy) * 50cqh);
  --a: atan2(var(--dy), var(--dx));
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: hypot(var(--dx), var(--dy));
  height: 0;
  transform-origin: 0 0;
  rotate: var(--a);
}
#stage-family .x-fam-line {
  position: absolute; left: 0; right: 0; top: -2px; height: 4px;
  background: radial-gradient(circle, var(--x-fam-dot) 0 1.25px, transparent 1.75px) 0 50% / 9px 4px repeat-x;
  transition: opacity 0.3s var(--ease-fade);
}
#stage-family .x-fam-line-soft { opacity: 0.55; }
#stage-family .x-fam-line.is-hot {
  background-image: radial-gradient(circle, var(--x-fam-dot-hot) 0 1.5px, transparent 2px);
}
#stage-family .x-fam-node {
  position: absolute; left: 100%; top: 0;
  display: grid; justify-items: center;
  translate: -50% calc(var(--av) / -2);
  transform-origin: 50% calc(var(--av) / 2);
  rotate: calc(-1 * var(--a));
}
#stage-family .x-fam.is-live .x-fam-arm { animation: x-fam-sway var(--dur) ease-in-out var(--delay) infinite alternate; }
#stage-family .x-fam.is-live .x-fam-node { animation: x-fam-upright var(--dur) ease-in-out var(--delay) infinite alternate; }
#stage-family .x-fam.is-live .x-fam-line.is-hot { animation: x-fam-march 0.6s linear infinite; }
@keyframes x-fam-sway {
  from { rotate: calc(var(--a) - var(--sw)); }
  to { rotate: calc(var(--a) + var(--sw)); }
}
@keyframes x-fam-upright {
  from { rotate: calc(-1 * (var(--a) - var(--sw))); }
  to { rotate: calc(-1 * (var(--a) + var(--sw))); }
}
@keyframes x-fam-march { to { background-position-x: -9px; } }

/* Members. */
#stage-family .x-fam-av {
  position: relative;
  display: grid; place-items: center;
  width: var(--av); height: var(--av);
  padding: 0; border: 0; border-radius: 50%;
  color: #fff;
  font: 700 calc(var(--av) * 0.42)/1 var(--font-round);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 10px 24px rgba(20, 10, 60, 0.32);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--spring-pop);
}
#stage-family button.x-fam-av:hover { transform: scale(1.06); }
#stage-family button.x-fam-av:active { transform: scale(0.94); transition-duration: 0.12s; }
#stage-family .x-fam-av:focus-visible { outline: 3px solid #8B6CFF; outline-offset: 5px; border-radius: 50%; }
html[data-ink="light"] #stage-family .x-fam-av:focus-visible,
html[data-ink="light"] #stage-family .x-fam-replay:focus-visible,
html[data-ink="light"] #stage-family .mascot-btn:focus-visible { outline-color: #fff; }
#stage-family .x-fam-av svg { width: 54%; height: 54%; }
#stage-family .x-fam-av-anna { background: linear-gradient(150deg, #D98BFF 0%, #9B4DF0 48%, #6A34E0 100%); }
#stage-family .x-fam-av-ben { background: linear-gradient(150deg, #72EDB5 0%, #2CC27F 50%, #15996A 100%); }
#stage-family .x-fam-av-you { background: linear-gradient(150deg, #FFB199 0%, #FF7A80 50%, #E84B7A 100%); }
#stage-family .x-fam-av-invite {
  background: var(--glass);
  color: #8B6CFF;
  box-shadow: inset 0 0 0 2px transparent;
  border: 2px dashed color-mix(in srgb, #8B6CFF 75%, transparent);
  cursor: default;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-ink="light"] #stage-family .x-fam-av-invite { color: #C9B8FF; border-color: rgba(201, 184, 255, 0.75); }
#stage-family .x-fam-pro {
  position: absolute; right: -16px; top: -8px;
  padding: 3px 6px 2px;
  font-size: 9.5px;
  color: #fff;
  background: var(--pro-glow);
  box-shadow: 0 4px 12px rgba(139, 108, 255, 0.4);
}
#stage-family .x-fam-name {
  margin-top: 7px;
  font: 650 13px/1.2 var(--font-round);
  color: var(--ink-2);
  white-space: nowrap;
}
#stage-family .x-fam-ring {
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid #8B6CFF;
  pointer-events: none; opacity: 0;
}
html[data-ink="light"] #stage-family .x-fam-ring { border-color: #D7C9FF; }

/* Pooppy in the middle: the shared diary. */
#stage-family .x-fam-center {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: var(--mascot);
  translate: -50% -50%;
}
#stage-family .x-fam-center .mascot-btn { position: relative; z-index: 1; }
#stage-family .x-fam-halo {
  position: absolute; inset: -6%;
  border-radius: 28%;
  border: 2.5px solid #8B6CFF;
  opacity: 0; pointer-events: none;
}
html[data-ink="light"] #stage-family .x-fam-halo { border-color: #D7C9FF; }

/* Travelling chips and pulses. */
#stage-family .x-fam-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* The log chip is a piece of app UI (the brand slide's white pill: the
   kind's art and a check), so it stays white on the day and night sky. */
#stage-family .x-fam-chip {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 7px 5px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 2px rgba(20, 10, 60, 0.12), 0 10px 26px rgba(20, 10, 60, 0.28);
  will-change: transform, opacity;
}
#stage-family .x-fam-chip img { width: 30px; height: 30px; object-fit: contain; }
#stage-family .x-fam-ok {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--ok) url('/img/ui/check.svg') center / 100% no-repeat;
}
/* The still state's chip (reduced motion, paused, no script): Ben's pee
   on its way in along his line. */
#stage-family .x-fam-chip-still { display: none; transform: translate(-50%, -50%); }
#stage-family .x-fam-chip-still[data-for="ben"] { left: calc(50% - 0.7 * 50cqw * 0.55); top: calc(50% + 0.62 * 50cqh * 0.55); }
html:not(.js) #stage-family .x-fam-chip-still,
#stage-family .x-fam.is-still .x-fam-chip-still { display: inline-flex; }
#stage-family .x-fam-pulse {
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 32%, #C9B6FF 52%, rgba(139, 108, 255, 0) 74%);
  box-shadow: 0 0 16px 5px rgba(160, 130, 255, 0.6);
  will-change: transform, opacity;
}

/* ---- Your iPhone: the notification stack -------------------------------- */

#stage-family .x-fam-phone {
  width: min(100%, 380px);
  justify-self: center;
}
#stage-family .x-fam-k {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 8px 6px;
  font: 650 13px/1 var(--font-round);
  letter-spacing: 0.01em;
  color: var(--ink-3);
}
#stage-family .x-fam-k svg { width: 15px; height: 15px; }
#stage-family .x-fam-stack {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; align-content: start;
  gap: calc(8 * var(--pt));
  min-height: calc(210 * var(--pt));
}
#stage-family .x-fam-card { will-change: transform; }
#stage-family .x-fam-card .notif { box-shadow: 0 calc(6 * var(--pt)) calc(24 * var(--pt)) rgba(10, 4, 40, 0.22); }
#stage-family .x-fam-card time { font-variant-numeric: tabular-nums; }

/* ---- Hint and replay ---------------------------------------------------- */

#stage-family .x-fam-hint {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  min-height: 34px;
  font-size: 14px; color: var(--ink-3); text-align: center;
  text-wrap: balance;
}
#stage-family .x-fam-replay {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px 0 11px;
  border-radius: var(--r-pill);
  background: var(--glass-strong); border: 1px solid var(--glass-line);
  color: var(--ink); font: 650 14px/1 var(--font-body);
  cursor: pointer;
  transition: transform 0.45s var(--spring-pop);
}
#stage-family .x-fam-replay { position: relative; }
#stage-family .x-fam-replay::before { content: ""; position: absolute; inset: -5px; }   /* a 44 px hit area */
#stage-family .x-fam-replay:hover { transform: scale(1.04); }
#stage-family .x-fam-replay:focus-visible { outline: 3px solid #8B6CFF; outline-offset: 3px; }
#stage-family .x-fam-replay svg { width: 16px; height: 16px; }

@media (min-width: 600px) {
  #stage-family { --stage-h: 640px; }
  #stage-family .x-fam { --av: 62px; --mascot: 116px; gap: 12px; }
  #stage-family .x-fam-cluster { aspect-ratio: 1.6; }
  #stage-family .x-fam-phone, #stage-family .x-fam-hint { justify-self: end; margin-right: 2%; width: min(100%, 380px); }
}

@media (prefers-reduced-motion: reduce) {
  #stage-family .x-fam-arm, #stage-family .x-fam-node, #stage-family .x-fam-line { animation: none !important; }
}
html.motion-paused #stage-family .x-fam-arm,
html.motion-paused #stage-family .x-fam-node,
html.motion-paused #stage-family .x-fam-line { animation: none !important; }

/* Phones: a smaller chip, so the still chips of reduced motion sit on
   their lines clear of the mascot. */
@media (max-width: 599px) {
  #stage-family .x-fam-chip { gap: 4px; padding: 4px 5px 4px 6px; }
  #stage-family .x-fam-chip img { width: 24px; height: 24px; }
  #stage-family .x-fam-ok { width: 16px; height: 16px; }
}