/* ============================================================
   Vanilla port of the SlingButton (React Bits).
   Drag the pad away and release to launch; a tap sends too.
   ============================================================ */

.sling-button {
  --sl-size: 56px;
  --sl-svg: 90px;
  --sl-pad: #f5f5f5;
  --sl-icon: #18181b;
  --sl-accent: #f5f5f5;
  --sl-well: #27272a;
  --sl-band: #52525b;
  --sl-stroke: 3px;
  --sl-dot: 8px;
  --sl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  position: relative;
  display: inline-block;
  width: var(--sl-size);
  height: var(--sl-size);
  flex: none;
  vertical-align: middle;
}

.sling-button__fx {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sl-svg);
  height: var(--sl-svg);
  margin: calc(var(--sl-svg) / -2) 0 0 calc(var(--sl-svg) / -2);
  overflow: visible;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}

.sling-button__well {
  fill: var(--sl-well);
  transition: fill 200ms ease;
}

.sling-button[data-sent] .sling-button__well {
  fill: var(--sl-accent);
}

.sling-button__band {
  fill: none;
  stroke: var(--sl-band);
  stroke-width: var(--sl-stroke);
  stroke-linecap: round;
  transition: stroke-width 160ms var(--sl-ease-out);
}

.sling-button[data-armed] .sling-button__band {
  stroke-width: calc(var(--sl-stroke) * 1.5);
}

.sling-button__band--hot {
  stroke: var(--sl-accent);
}

.sling-button__arc {
  fill: none;
  stroke: var(--sl-accent);
  stroke-width: var(--sl-stroke);
  stroke-linecap: butt;
  transition: stroke-width 160ms var(--sl-ease-out);
}

.sling-button[data-armed] .sling-button__arc {
  stroke-width: calc(var(--sl-stroke) * 1.5);
}

.sling-button__move {
  position: absolute;
  inset: 0;
}

.sling-button__pad {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: grab;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.sling-button__pad::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.sling-button__pad[data-held] {
  cursor: grabbing;
}

.sling-button__pad[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.5;
}

.sling-button__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--sl-pad);
  color: var(--sl-icon);
  transition: transform 160ms var(--sl-ease-out);
}

.sling-button__pad[data-held] .sling-button__face {
  transform: scale(0.97);
}

.sling-button__pad[data-armed] .sling-button__face {
  transform: scale(1.04);
}

@media (hover: hover) and (pointer: fine) {
  .sling-button__pad:not([data-held]):not([aria-disabled='true']):hover .sling-button__face {
    transform: scale(1.02);
  }
}

.sling-button__icon {
  display: inline-flex;
  will-change: transform;
}

.sling-button__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sl-dot);
  height: var(--sl-dot);
  margin: calc(var(--sl-dot) / -2) 0 0 calc(var(--sl-dot) / -2);
  border-radius: 50%;
  background: var(--sl-accent);
  opacity: 0;
  pointer-events: none;
}

.sling-button__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sling-button__face {
    transform: none !important;
    transition: none;
  }
}

/* ---- Site integration: custom cursor + hosts ---- */
.sling-button__pad,
.sling-button__pad[data-held] { cursor: none; }
html.no-motion .sling-button__pad,
html.no-motion .sling-button__pad[data-held] { cursor: none; }

.sling-button__face {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.settings-sling { position: relative; z-index: 2; }
.back-top.sling-button { position: fixed; }