/* Shared pointer: a fixed pivot, the wheel's actual color, and a short spring
   response. A light and dark edge keeps every palette legible. */

:root{
  --sc-wheel-pointer-shadow-filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.95))
    drop-shadow(0 1px 1px rgba(15,23,42,0.90))
    drop-shadow(0 2px 2px rgba(15,23,42,0.16));
  --sc-wheel-pointer-blade-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

html[data-theme="light"]{
  --sc-wheel-pointer-shadow-filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.95))
    drop-shadow(0 1px 1px rgba(15,23,42,0.90))
    drop-shadow(0 2px 2px rgba(15,23,42,0.16));
  --sc-wheel-pointer-blade-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(15,23,42,0.10);
}

.wheel-pointer{
  --sc-pointer-color: #0b0b10;
  --sc-pointer-outline: #f9fafb;
  --sc-pointer-rot: 0deg;

  position: absolute;
  left: 50%;

  /* Half-ish in/out (tweak ±3px if needed) */
  top: -20px;

  /* smaller + a bit fatter */
  width: 40px;
  height: 46px;

  border: 0;
  background: transparent;

  /* ✅ ONLY center it — DO NOT rotate container */
  transform: translateX(-50%);

  z-index: 10;
  pointer-events: none;

  /* ✅ outside shadow only (base stays still) */
  filter: var(--sc-wheel-pointer-shadow-filter);
}

/* ✅ The premium triangle blade ONLY (this rotates) */
.wheel-pointer::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  /* Slight chamfered “premium” triangle (still reads as a triangle) */
  clip-path: polygon(
    50% 100%,
    7% 30%,
    16% 22%,
    84% 22%,
    93% 30%
  );

  background: var(--sc-pointer-color);

  /* crisp edge */
  outline: 1px solid rgba(255,255,255,0.22);
  outline-offset: -1px;

  /* subtle internal definition (no gradients) */
  box-shadow: var(--sc-wheel-pointer-blade-shadow);

  /* ✅ ONLY the blade rotates */
  transform: rotate(var(--sc-pointer-rot));
  transform-origin: 50% 26%;
  transition: none;
}

.wheel-pointer[data-animating]::before,
.wheel-pointer[data-animating]::after{
  will-change: transform;
}

/* This crisp edge remains visible when the wheel's shadow is turned off. */
.wheel-pointer::after{
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background: var(--sc-pointer-outline);
  clip-path: polygon(50% 100%, 7% 30%, 16% 22%, 84% 22%, 93% 30%);
  transform: rotate(var(--sc-pointer-rot));
  transform-origin: 50% 26%;
  transition: none;
}

/* Light theme tuning */
html[data-theme="light"] .wheel-pointer{
  --sc-pointer-color: #f9fafb;
  --sc-pointer-outline: #111827;
  filter: var(--sc-wheel-pointer-shadow-filter);
}
html[data-theme="light"] .wheel-pointer::before{
  outline-color: rgba(15,23,42,0.16);
  box-shadow: var(--sc-wheel-pointer-blade-shadow);
}
/* =========================================================
   Responsive pointer scaling (ONLY when wheel shrink helper is active)
   Uses --sc-wheel-size set by wheel-section-responsive
   ========================================================= */
html.sc-wheelresp-850 .wheel-pointer{
  /* keep it half-in/half-out while wheel shrinks */
  top: clamp(-20px, calc(var(--sc-wheel-size, 760px) * -0.026), -12px);

  /* scale size with the wheel (but keep readable minimums) */
  width:  clamp(28px, calc(var(--sc-wheel-size, 760px) * 0.053), 40px);
  height: clamp(32px, calc(var(--sc-wheel-size, 760px) * 0.061), 46px);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wheel-pointer{ --sc-pointer-rot: 0deg !important; }
}



/* =========================================================
   Responsive pointer scaling (STACKED mode < 880px)
   Matches your stacked wheel size formula:
   width: min(740px, max(40px, calc(100vw - var(--sc-stack-wheel-cut, 140px))))
   ========================================================= */
@media (max-width: 879.98px){
  .wheel-pointer{
    /* same wheel size logic as your stacked wheel-wrapper */
    --sc-wheel-size-live: min(740px, max(40px, calc(100vw - var(--sc-stack-wheel-cut, 140px))));

top: clamp(-20px, calc(var(--sc-wheel-size-live) * -0.026), -6px);
width:  clamp(4px,  calc(var(--sc-wheel-size-live) * 0.053), 40px);
height: clamp(6px,  calc(var(--sc-wheel-size-live) * 0.061), 46px);
  }
}