/* ============================================================
   v0.19.12: ORB BUTTONS - round dark-glass icon capsules.
   Adapted from an MIT-licensed Uiverse.io element by Itskrish01,
   rebuilt on the house vocabulary: no Tailwind, one component-local
   token (--orb-accent, an r,g,b triplet) that every painted layer
   derives from - border, glow, shine sweep and the glyph ink - so an
   accent variant class sets ONLY the variable (the same idiom as
   --accent on .profile-card; StudioDesignDocTests pins it).

   Placement: self-contained .orb-* namespace that paints its OWN dark
   glass (like the profile and Pit surfaces), so it reads identically in
   both themes and needs no dark override - anywhere after the tokens
   works, and it sits before 24-theme-dark.css, which must stay last.
   Base rules ARE the phone layout: a 64px disc clears the 44px touch
   floor, :active gives the press feedback everywhere, and the hover
   theatre (scale, tilt, glow, sweep) is gated behind (hover:hover) so
   touch never gets a sticky half-lit orb.

   Product consumers: the share toolbar on /u/{username} since
   v0.19.12.1, and the social links right under it since v0.19.12.2 -
   six .orb-sm on the card's own dark ground. The socials are ANCHORS
   with page-scoped brand accents (14-profile-share.css sets
   --orb-accent per network), which is why the base rule below carries
   text-decoration: none. The contract stays this file, the Buttons
   chapter in DESIGN.md and /studio section 31.
   ============================================================ */

.orb-btn {
  --orb-accent: 255, 255, 255; /* r,g,b so each layer picks its own alpha */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--orb-accent), 0.22);
  /* Same dark ink the voice overlay dims with - the house "glass over anything". */
  background: linear-gradient(to top right, rgba(10, 8, 20, 0.72), rgba(10, 8, 20, 0.45));
  color: rgb(var(--orb-accent));
  cursor: pointer;
  /* An orb can be an <a> (the share-card socials are): no underline, ink from the accent. */
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out,
              border-color 0.3s ease-out, background 0.3s ease-out;
}
.orb-btn .material-icons { font-size: 26px; position: relative; z-index: 1; }
.orb-btn svg { width: 26px; height: 26px; fill: currentColor; position: relative; z-index: 1; }

/* The shine sweep: one accent-tinted stripe parked off the left edge; hover sends it
   across. Transform-only, and the transition lives here so the stripe also slides back
   out on un-hover instead of teleporting. */
.orb-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--orb-accent), 0.16), transparent);
  transform: translateX(-110%);
  transition: transform 0.7s ease-out;
}

.orb-btn:active:not(:disabled) { transform: scale(0.94); }
.orb-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* The global 19-a11y ring is violet; on an accented glass disc the ring follows the
   accent instead, and the circle needs no radius-3 correction. */
.orb-btn:focus-visible {
  outline: 2px solid rgb(var(--orb-accent));
  outline-offset: 2px;
  border-radius: 50%;
}

/* Accent variants: ONE declaration each, nothing else (see the header). */
.orb-violet { --orb-accent: 168, 85, 247; } /* --chronos-lavender #A855F7 */
.orb-green  { --orb-accent: 16, 185, 129; } /* the house success green */
.orb-red    { --orb-accent: 239, 68, 68; }  /* --chronos-red #EF4444 */

/* Density step for toolbars; still above the 44px touch floor. */
.orb-sm { width: 52px; height: 52px; }
.orb-sm .material-icons { font-size: 22px; }
.orb-sm svg { width: 22px; height: 22px; }

/* Hover theatre only where a real hover exists (desktop pointer). The tilt alternates
   by modifier, not by nth-child: which way an orb leans is the caller's layout call. */
@media (hover: hover) and (pointer: fine) {
  .orb-btn:hover:not(:disabled) {
    transform: scale(1.08) rotate(2deg);
    border-color: rgba(var(--orb-accent), 0.55);
    background: linear-gradient(to top right, rgba(var(--orb-accent), 0.10), rgba(10, 8, 20, 0.45));
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.40), 0 0 24px rgba(var(--orb-accent), 0.28);
  }
  .orb-btn.orb-tilt-l:hover:not(:disabled) { transform: scale(1.08) rotate(-2deg); }
  .orb-btn:hover:not(:disabled)::before { transform: translateX(110%); }
}

/* Freeze, not delete: the orb keeps its resting look and the press still answers
   instantly - only the glide between states goes. */
@media (prefers-reduced-motion: reduce) {
  .orb-btn, .orb-btn::before { transition: none; }
}