/* ============================================================
   COMPONENT · KNOB
   Rotary selector — pure decoration / display. Set
   --knob-angle 0deg..270deg on the element to rotate the pointer.
   ============================================================ */

.c-knob {
  --knob-angle: 0deg;
  --knob-size: 4rem;

  position: relative;
  display: inline-block;
  width: var(--knob-size);
  height: var(--knob-size);
  border-radius: var(--radius-circle);
  background:
    radial-gradient(circle at 35% 30%,
      var(--c-bezel-hi) 0%,
      var(--c-bezel-light) 30%,
      var(--c-bezel) 70%,
      var(--c-bezel-dark) 100%);
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(255,255,255,0.1),
    0 4px 12px rgba(0,0,0,0.5),
    0 0 0 2px var(--color-bezel-dark);
}

.c-knob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  background: var(--pattern-brushed);
  mix-blend-mode: overlay;
}

.c-knob__pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: calc(var(--knob-size) * 0.42);
  background: var(--color-accent);
  box-shadow: 0 0 6px var(--color-accent);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--knob-angle));
  transition: transform var(--dur-medium) var(--ease-snap);
  border-radius: 1px;
}

.c-knob__cap {
  position: absolute;
  top: 50%; left: 50%;
  width: 30%; height: 30%;
  background: radial-gradient(circle at 30% 30%, var(--c-bezel-hi), var(--c-bezel-dark));
  border-radius: var(--radius-circle);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Tick ring around the knob */
.c-knob-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--space-3);
}
.c-knob-ring__ticks {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  background:
    conic-gradient(from -135deg,
      var(--color-bezel-light) 0deg,
      var(--color-bezel-light) 1deg,
      transparent 1deg,
      transparent 30deg,
      var(--color-bezel-light) 30deg,
      var(--color-bezel-light) 31deg,
      transparent 31deg,
      transparent 270deg);
  mask: radial-gradient(circle, transparent 60%, black 62%, black 70%, transparent 72%);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 62%, black 70%, transparent 72%);
}