/* ── Full Effect Mechanism — sticky-scroll rotating dial ── */

.fem-section {
  background: #000;
  color: #fff;
  direction: rtl;
  /* height set by JS: (numSteps + 1) * 100dvh */
}

/* sticky container stays pinned while section scrolls past */
.fem-sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding-top: clamp(24px, 5vh, 60px);
  box-sizing: border-box;
}

/* ── heading ── */
.fem-heading {
  font-size: clamp(26px, 4.5vw, 52px);
  font-weight: 400;
  color: #fff;
  /* margin: 0 0 clamp(8px, 2vh, 24px); */
  margin: clamp(72px, 2vh, 24px) 0 0;
  text-align: center;
  line-height: 1.3;
}

/* ── dial wrapper: holds SVG + rotating dots + static indicator ── */
.fem-dial-wrapper {
  position: relative;
  width: 100%;
  max-width: min(900px, 95vw);
  overflow: visible;
  flex-shrink: 0;
  margin-top: -40px;
}

.fem-svg {
  width: 100%;
  height: auto;
  display: block;
}

.fem-arc-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1.5;
}

/*
  .fem-dial is the same footprint as .fem-svg.
  Its transform-origin is the arc's geometric centre:
    SVG viewBox 800×420, arc centre at (400, 480)
    → x = 50%,  y = 480/420 × 100% ≈ 114.29%
  Rotating this element spins all dots around that centre.
*/
.fem-dial {
  position: absolute;
  inset: 0;
  transform-origin: 50% 114.29%;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── dots (children of rotating dial) ── */
.fem-dot {
  position: absolute;
  /* JS sets left/top as % of viewBox dimensions */
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s;
}

/* small coloured marker */
.fem-pip {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #c8a96e);
  opacity: 0.5;
  transition: opacity 0.4s;
  pointer-events: none;
}

/* number circle */
.fem-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.6);
  /* counter-rotation applied by JS so numbers stay upright */
  transition:
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s,
    color 0.4s;
}

/* active dot (at 12 o'clock) */
.fem-dot.is-active .fem-pip {
  opacity: 0;
} /* hidden — indicator pip shows instead */
.fem-dot.is-active .fem-badge {
  border-color: var(--color-primary, #c8a96e);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.15);
}

/* ── indicator: fixed at the top of the arc, never rotates ── */
.fem-indicator {
  position: absolute;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -40%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}

.fem-ind-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
  transition: opacity 0.3s;
}

.fem-ind-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #c8a96e);
  margin: 5px 0;
  flex-shrink: 0;
}

@keyframes fem-draw-line {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.fem-ind-line {
  width: 1.5px;
  background: linear-gradient(
    to bottom,
    var(--color-primary, #c8a96e) 0%,
    transparent 100%
  );
  flex-shrink: 0;
  transform-origin: top center;
  /* height set by JS; animation triggered by JS on each step */
}

/* ── step content ── */
.fem-content-area {
  position: relative;
  width: 100%;
  max-width: min(640px, 92vw);
  padding: 0 16px;
  text-align: center;
  margin-top: clamp(12px, 3vh, 32px);
  flex-shrink: 0;
}

.fem-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  pointer-events: none;
}

.fem-step.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

.fem-step h3 {
  /*   font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 400; */
  color: var(--color-primary, #c8a96e);
  margin: 0 0 12px;
  line-height: 1.6;
}

.fem-step p {
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 2;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* ── responsive ── */
@media (max-width: 480px) {
  .fem-sticky-wrapper {
    justify-content: center;
  }

  .fem-badge {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
  .fem-ind-num {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .fem-pip,
  .fem-ind-pip {
    width: 6px;
    height: 6px;
  }
}