/* Circle appearance and compass animation from the supplied Circul site. */
#project-home { --black:#000; --track-wide:.18em; position:relative; color:#000; background:#fff; min-height:100dvh; }
#project-circles { position:relative; width:100%; height:100dvh; min-height:540px; overflow:hidden; }
.project-home-logo { position:absolute; z-index:2; top:20px; left:24px; display:block; width:140px; }
.project-home-logo img { display:block; width:100%; height:auto; }
.project-home-logout { position:absolute; z-index:2; top:18px; right:28px; border:0; background:transparent; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
#project-home .circle-node { padding:0; border:0; background:transparent; }
#project-home .circle-node:disabled { cursor:wait; opacity:1; }
#project-home .circle-label { font-size:var(--label-size,10px); }
#project-home-error { position:fixed; z-index:3; bottom:20px; left:50%; transform:translateX(-50%); width:min(460px,calc(100% - 36px)); padding:12px 18px; background:#fff; border:1px solid #ddd; font-size:12px; }
#project-home-error button { border:0; text-decoration:underline; }
#home-return { white-space:nowrap; }
.circle-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-radius: 50%;
}
.circle-node svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.circle-node .circle-label {
  position: relative;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  padding: 0 12px;
  pointer-events: none;
  z-index: 1;
}

/* ── Compass arc system ──────────────────────────────────────
   Static state: open arc with a randomised gap (per-circle vars
   --gap-len & --gap-rot set inline). Click → JS adds .drawing
   which makes the compass-pen sweep around once and closes
   the circle, then we navigate. */
.circle-node .arc-full {
  stroke: var(--black);
  stroke-width: 1.1;
  fill: none;
  /* dash pattern = visible arc, gap, then huge length so only
     one gap shows. Rotated to randomise gap angle. */
  stroke-dasharray: calc(var(--circ) - var(--gap-len, 40px)) 9999px;
  stroke-dashoffset: 0;
  transform: rotate(var(--gap-rot, 0deg));
  transform-origin: 50% 50%;
  transition: stroke-dasharray 0.6s cubic-bezier(0.65,0,0.35,1);
  stroke-linecap: round;
}
.circle-node.drawing .arc-full,
.circle-node.closed  .arc-full {
  /* Close the gap → solid circle */
  stroke-dasharray: var(--circ) 0;
}
/* The "compass pen" — a tiny sweeping arc that traces around */
.circle-node .arc-draw {
  stroke: var(--black);
  stroke-width: 1.6;
  fill: none;
  /* Show only a small visible segment that travels around the circle */
  stroke-dasharray: 0 var(--circ);
  stroke-dashoffset: 0;
  transform: rotate(var(--gap-rot, 0deg));
  transform-origin: 50% 50%;
  stroke-linecap: round;
  opacity: 0;
}
.circle-node.drawing .arc-draw {
  /* sweep one full revolution while drawing */
  opacity: 1;
  animation: compassSweep 0.7s cubic-bezier(0.65,0,0.35,1) forwards;
}
@keyframes compassSweep {
  0%   { stroke-dasharray: 0 var(--circ);          stroke-dashoffset: 0; }
  50%  { stroke-dasharray: calc(var(--circ) * 0.55) var(--circ); }
  100% { stroke-dasharray: var(--circ) 0;          stroke-dashoffset: 0; opacity: 0; }
}
.circle-node:focus-visible { outline: 2px dashed var(--black); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .circle-node .arc-full,
  .circle-node .arc-draw { transition: none; animation: none; }
  .circle-node.drawing .arc-full { stroke-dasharray: var(--circ) 0; }
}


@media (max-width:640px), (orientation:landscape) and (max-height:500px) {
  #project-circles { height:auto; min-height:100dvh; padding:100px 0 60px; overflow:visible; }
  #project-home .circle-node { position:relative; left:50%; top:auto; transform:translateX(-50%); margin:32px 0 0; width:min(160px,45vw); height:min(160px,45vw); }
  #project-home .circle-node:first-child { margin-top:0; }
  .project-home-logo { width:64px; top:25px; left:18px; }
  .project-home-logout { top:16px; right:18px; }
  #home-return { font-size:10px; }
}

.project-home-up { position:absolute; z-index:2; top:18px; left:50%; transform:translateX(-50%); border:0; background:transparent; font-size:10px; font-weight:700; letter-spacing:.1em; }
#project-home-context { position:absolute; left:50%; top:84px; transform:translateX(-50%); font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
@media (max-width:640px), (orientation:landscape) and (max-height:500px) {
  .project-home-up { top:16px; }
  #project-home-context { position:relative; left:auto; top:auto; transform:none; text-align:center; padding-top:95px; }
  #project-home.is-branch #project-circles { min-height:calc(100dvh - 111px); padding-top:40px; }
}