/* THE HOLD BUTTON's look, one owner (with auth/hold.js): the Hub (enter.html) and sign-up (start.html) both load it.
   Every value falls back to the Hub's own, so a page without the Foundation draws the same button. */
@property --hold { syntax: "<number>"; initial-value: 0; inherits: true; }
.holdbtn {
  position: relative; background: none; border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: var(--eden-r-pill, 999px); color: var(--dim, #a3a3a3); font: inherit; font-size: var(--eden-t-13, 13px);
  padding: var(--eden-space-10, 10px) var(--eden-space-24, 24px); cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none; transition: color 200ms var(--ease, cubic-bezier(.2,.7,.2,1));
}
.holdbtn:hover, .holdbtn.holding { color: var(--ink, #f4f5f3); }
.holdbtn::before, .holdring::before {
  content: ""; position: absolute; inset: -1px; border-radius: var(--eden-r-pill, 999px);
  pointer-events: none;
  background: conic-gradient(from -90deg,
    rgba(158,231,255,.95) 0deg,
    rgba(201,183,255,.95) calc(var(--hold) * 120deg),
    rgba(246,199,231,.92) calc(var(--hold) * 240deg),
    rgba(255,244,194,.92) calc(var(--hold) * 355deg),
    rgba(255,255,255,0) calc(var(--hold) * 360deg),
    rgba(255,255,255,0) 360deg);
  /* Slightly thicker than a hairline so the arc reads while it grows. */
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 160ms var(--ease, cubic-bezier(.2,.7,.2,1));
}
.holdbtn.holding::before, .holdbtn.filled::before, .holdring.holding::before, .holdring.filled::before { opacity: 1; }
.holdbtn.filled { border-color: transparent; }
.holdbtn.filled::before, .holdring.filled::before {
  background: conic-gradient(from -90deg,
    rgba(158,231,255,.95), rgba(201,183,255,.95), rgba(246,199,231,.92),
    rgba(255,244,194,.92), rgba(158,231,255,.95));
}
.holdbtn .lbl { position: relative; }
/* THE RING ALONE (Josh, 2026-10-28: the website's outline buttons "NEED to be the same style as the hub onboarding buttons with the
   gradient border that you hold"): a button that keeps its own look (its component master's) and takes only the hold's ring. */
.holdring { position: relative; user-select: none; -webkit-user-select: none; touch-action: none; }
@media (prefers-reduced-motion: reduce) { .holdbtn::before, .holdring::before { transition: none; } }