/* Beonyx — Vehicle Configuration Slider
   Geometry is expressed as percentages of a 957 x 540 stage so the whole
   composition scales as one piece. Every value traces back to the Figma spec.
   The stage is 540 tall rather than the 503 of the artwork so the sonar ring,
   which expands to 540, fits exactly instead of clipping flat at the bottom. */

.bnx-slider {
  --bnx-exit: 300ms;
  --bnx-beat: 250ms;
  --bnx-enter: 420ms;
  --bnx-travel: 200px;
  --bnx-sonar: #51732f;
  --bnx-dot: #b3b3b3;
  --bnx-dot-active: #51732f;
  --bnx-label: #231f20;

  position: relative;
  width: 100%;
  max-width: 957px;
  /* centre in containers wider than the cap, instead of leaving all the
     leftover space on the right */
  margin-left: auto;
  margin-right: auto;
}

/* ---------- stage ---------- */

.bnx-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 957 / 540;
  overflow: hidden;
}

.bnx-stage > * { position: absolute; }

/* ---------- drag / swipe ---------- */
/* pan-y keeps vertical page scrolling working on touch while horizontal
   movement is claimed by the slider */

.bnx-slider.is-draggable .bnx-stage {
  cursor: grab;
  touch-action: pan-y;
}

.bnx-slider.is-dragging .bnx-stage { cursor: grabbing; }

/* while a finger or cursor is down the unit must track it with no easing */
.bnx-slider.is-dragging .bnx-vehicle { transition: none; }

/* stop the browser starting its own image drag, and stop text selecting */
.bnx-stage img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- sphere ---------- */
/* three concentric pieces, each turning at its own rate so the gradient
   highlight drifts rather than the shape moving */

.bnx-sphere {
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  transition: transform var(--bnx-enter) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  pointer-events: none;
}

.bnx-sphere--core { left: 30.51%; top: 10.56%; width: 44.51%; }
.bnx-sphere--ring { left: 28.42%; top:  6.85%; width: 48.69%; }
.bnx-sphere--glow { left: 33.39%; top: 15.65%; width: 38.77%; mix-blend-mode: soft-light; }

/* ---------- sonar pulse ---------- */
/* one ring replayed per slide. Figma used three phase-cycled rings only because
   it cannot stagger inside a transition — in CSS a single keyframe run is enough. */

.bnx-ping {
  left: 24.56%;
  top: 0;
  width: 56.43%;
  aspect-ratio: 1;
  border: 1px solid var(--bnx-sonar);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.bnx-ping.is-pinging {
  animation: bnx-ping var(--bnx-ping-dur, 900ms) cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes bnx-ping {
  0%   { transform: scale(0.556); opacity: 0;    border-width: 2.5px; }
  57%  { transform: scale(0.811); opacity: 0.45; border-width: 1.5px; }
  100% { transform: scale(1);     opacity: 0;    border-width: 0.75px; }
}

/* ---------- terrain ---------- */
/* the window never moves. Only the line inside it scales, anchored to its
   baseline, so the flat base of the path stays hidden below the window. */

.bnx-terrain-window {
  left: 0;
  top: 5.56%;
  width: 79.83%;
  height: 50.93%;
  overflow: hidden;
  pointer-events: none;

  /* Two mask layers, intersected. The horizontal one fades the line in from the
     left (as in the original artwork). The vertical one fades it out at the
     bottom — without it the window's bottom edge slices the path's stroke, which
     is yellow near its right end, leaving a visible sliver. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.bnx-terrain {
  position: absolute;
  left: 5.89%;
  bottom: -4%;
  width: 93.98%;
  height: 74.18%;
  transform-origin: 50% 100%;
  transform: translateX(var(--bnx-shift, 0%)) scaleY(var(--bnx-amp, 1));
  transition: transform var(--bnx-enter) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ---------- vehicle ---------- */

.bnx-vehicle {
  left: 10.14%;
  top: 0;
  width: 89.86%;
  height: auto;
  opacity: 1;
  transform: translateX(0);
  will-change: transform, opacity;
}

.bnx-vehicle.is-leaving {
  transition: transform var(--bnx-exit) cubic-bezier(0.55, 0, 1, 0.45),
              opacity   var(--bnx-exit) cubic-bezier(0.55, 0, 1, 0.45);
  opacity: 0;
}

/* no transition: used to jump the unit to the far side while it is invisible */
.bnx-vehicle.is-waiting { transition: none; opacity: 0; }

.bnx-vehicle.is-arriving {
  transition: transform var(--bnx-enter) cubic-bezier(0.16, 1, 0.3, 1),
              opacity   var(--bnx-enter) cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(0);
  opacity: 1;
}

/* ---------- controls ---------- */

.bnx-ui {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.bnx-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--bnx-label);
  text-transform: uppercase;
}

.bnx-dots { display: flex; align-items: center; gap: 8px; }

/* Selectors are deliberately heavy (.bnx-slider button.bnx-*): Elementor's Site
   Settings paint every <button> via .elementor-kit-N button, which outranks a
   single class and turns these into theme-coloured squares. Every property a
   kit or theme commonly sets is pinned here explicitly. */

.bnx-slider button.bnx-dot {
  appearance: none;
  -webkit-appearance: none;
  width: 6px;
  height: 6px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: var(--bnx-dot);
  background-image: none;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: width 300ms ease, background 300ms ease;
}

.bnx-slider button.bnx-dot[aria-current="true"] {
  width: 26px;
  background: var(--bnx-dot-active);
}

.bnx-arrows { display: flex; gap: 8px; margin-left: auto; }

.bnx-slider button.bnx-arrow {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(35, 31, 32, 0.25);
  border-radius: 999px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--bnx-label);
  /* kits commonly force a display face on every button, which mangles the
     arrow glyphs — take the body font instead */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.bnx-slider button.bnx-arrow:hover {
  border-color: rgba(35, 31, 32, 0.6);
  background: transparent;
  color: var(--bnx-label);
}

.bnx-slider button.bnx-arrow:focus-visible,
.bnx-slider button.bnx-dot:focus-visible {
  outline: 2px solid var(--bnx-sonar);
  outline-offset: 3px;
}

/* ---------- accessibility ---------- */
/* people who ask their OS to reduce motion get the slider without the movement */

@media (prefers-reduced-motion: reduce) {
  .bnx-sphere,
  .bnx-terrain,
  .bnx-vehicle.is-leaving,
  .bnx-vehicle.is-arriving { transition-duration: 1ms; }
  .bnx-ping.is-pinging { animation: none; }
}