/* =========================================================================
   LEAP Player — generic runtime stylesheet.
   Contains ONLY structural/mechanical rules (positioning, flex, transitions).
   Every value that differs between diagrams (colors, positions, timing,
   text) lives in the diagram's JSON and is applied at render time via
   inline styles / CSS custom properties. This file is meant to be shared,
   unmodified, across any LEAP wheel-diagram JSON.

   Embed rules (Webflow iframe): no page background, no viewport-height
   floor, no vertical padding. The page reports its natural content height
   to the host via the resize script in index.html, so it must be allowed
   to shrink. tokens.colors.pageBackground in the JSON is no longer painted.
   ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--leap-white, #fff);
  font-family: var(--leap-font-family, sans-serif);
  overflow-x: hidden;
}

.leap-viewport {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.leap-stage-scaler {
  position: relative;
  width: calc(var(--leap-stage-w) * 1px);
  height: calc(var(--leap-stage-h) * 1px);
  transform: scale(var(--leap-scale, 1));
  transform-origin: top center;
}

.leap-stage {
  position: relative;
  width: calc(var(--leap-stage-w) * 1px);
  height: calc(var(--leap-stage-h) * 1px);
  background: transparent;
  overflow: hidden;
}

/* ---- background wheel ---- */
.leap-wheel-mask { position: absolute; overflow: hidden; z-index: 1; }
.leap-wheel-svg-wrap { position: absolute; }
.leap-wheel-svg-wrap svg { display: block; width: 100%; height: 100%; }

.leap-wedge-active {
  opacity: 0;
  transition: opacity var(--leap-hover-duration, 320ms) var(--leap-hover-easing, ease);
}
.leap-wheel[data-active] .leap-wedge-active { opacity: 0; }
.leap-wheel .leap-wedge-active.is-on { opacity: 1; }

/* ---- decorative rotating rings ---- */
.leap-dot-ring { position: absolute; display: flex; align-items: center; justify-content: center; }
.leap-dot-ring__rotor {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes leap-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes leap-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .leap-dot-ring__rotor { animation: none !important; }
}
.leap-dot-ring__spin { flex: none; }
.leap-dot-ring__inner { position: relative; }
.leap-dot-quad { position: absolute; display: flex; align-items: center; justify-content: center; }
.leap-dot-quad img { display: block; width: 100%; height: 100%; }
.leap-dot-quad__spin { width: 100%; height: 100%; }

/* ---- center title ---- */
.leap-center-title {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  margin: 0;
  pointer-events: none;
}

/* ---- icon buttons ---- */
.leap-icon-btn {
  position: absolute;
  border-radius: var(--leap-icon-radius, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  border-style: solid;
  background: var(--leap-icon-idle-bg);
  border-color: var(--leap-accent);
  border-width: var(--leap-icon-border-idle, 5px);
  transition:
    background-color var(--leap-icon-duration, 260ms) var(--leap-icon-easing, ease),
    border-width var(--leap-icon-duration, 260ms) var(--leap-icon-easing, ease);
  -webkit-tap-highlight-color: transparent;
}
.leap-icon-btn:focus-visible { outline: 2px solid var(--leap-white, #fff); outline-offset: 3px; }
.leap-icon-btn__glyph {
  color: var(--leap-accent);
  transition: color var(--leap-icon-duration, 260ms) var(--leap-icon-easing, ease);
}
.leap-icon-btn__glyph svg { display: block; width: 100%; height: 100%; }

.leap-icon-btn.is-active {
  background: var(--leap-white, #fff);
  border-width: var(--leap-icon-border-active, 10px);
}
.leap-icon-btn.is-active .leap-icon-btn__glyph { color: var(--leap-icon-active-glyph); }

/* ---- tooltips ---- */
.leap-tooltip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: left var(--leap-tooltip-duration, 280ms) var(--leap-tooltip-easing, ease),
              top var(--leap-tooltip-duration, 280ms) var(--leap-tooltip-easing, ease);
}
.leap-tooltip__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: var(--leap-tooltip-radius, 10px);
  background: var(--leap-tooltip-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.leap-tooltip__label {
  margin: 0;
  text-align: center;
}
.leap-tooltip__list {
  list-style: disc;
  margin: 8px 0 0;
  padding-left: 22px;
  text-align: left;
  align-self: stretch;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--leap-tooltip-duration, 280ms) var(--leap-tooltip-easing, ease),
              opacity var(--leap-tooltip-duration, 280ms) var(--leap-tooltip-easing, ease);
}
.leap-tooltip__list li { margin-bottom: 2px; }
.leap-tooltip.is-active .leap-tooltip__list { max-height: 140px; opacity: 1; }