/* OptionWheel — port a CSS vanilla del componente OptionWheel de React Bits.
   El proyecto no usa React. Las variables van scoped a .option-wheel para no
   contaminar el resto del sitio. El layout de cada opción (transform / opacity
   / filter) lo escribe el rAF de assets/js/option-wheel.js. */

.option-wheel {
  --ow-text-color: #a6a6a6;
  --ow-active-color: #ffffff;
  --ow-font-size: 3rem;
  --ow-inset: 80px;

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
  outline: none;
}

.option-wheel--dragging {
  cursor: grabbing;
}

/* Cada opción está centrada en absoluto y el rAF la desplaza por la curva. */
.option-wheel__item {
  position: absolute;
  top: 50%;
  left: var(--ow-inset);
  white-space: nowrap;
  font-size: var(--ow-font-size);
  line-height: 1;
  font-weight: 200;
  transform-origin: left center;
  cursor: pointer;
  will-change: transform, opacity, filter;
  /* --ow-p va de 0 -> 1 conforme la opción se acerca al centro de la rueda */
  color: color-mix(in srgb, var(--ow-active-color) calc(var(--ow-p, 0) * 100%), var(--ow-text-color));
}

.option-wheel--right .option-wheel__item {
  left: auto;
  right: var(--ow-inset);
  transform-origin: right center;
}

.option-wheel__item--selected {
  font-weight: 500;
}