/* ==========================================================================
   Procescirkels — animated process-wheel component
   Pure SVG + CSS. Step state is driven entirely by [data-step] on the root.
   ========================================================================== */

.procescirkels {
  position: relative;
  width: 100%;
  aspect-ratio: 1538 / 1000;
  container-type: inline-size;
  margin-block: clamp(40px, 6vw, 96px);
}

/* Wraps the SVG plus its HTML overlays (.ring-glow, .checkin-cover) so
   their percentage-based positions can stay relative to the diagram's
   own box specifically — on mobile .procescirkels also stacks the text
   panel underneath in the same flex column, so its box no longer
   matches the diagram's own bounds the way it does on desktop (see the
   mobile override below). Matches .procescirkels exactly here on
   desktop, so nothing about the current absolute-fill layout changes. */
.procescirkels__diagram {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Per Figma (node 160:328): a very subtle radial glow sitting behind each
   fase's own circles — not a shared backdrop behind the whole diagram —
   both to draw the eye to the rings and to soften the transition into the
   text panel beside them. One div per fase (not one shared one, toggled
   like the ghost/label opacity elsewhere) since each is centered on that
   fase's own ring cluster specifically; the two live before the SVG in
   the DOM (this file's only unordered element here) so they paint behind
   the rings and the .ring-glow/.checkin-cover overlays above them.
   Centered via left/top + translate(-50%,-50%) rather than computing a
   corner offset — width/height are the same percentages at every
   breakpoint (proportional to the diagram's own box, not to fixed SVG
   units), only left changes between desktop and mobile below, since
   mobile crops the shared viewBox to one fase at a time (see
   MOBILE_VIEWBOX in procescirkels.js) and so has its own, different
   horizontal center point for each fase's ring cluster. */
.procescirkels__glow {
  position: absolute;
  top: 50%;
  width: 62%;
  height: 90%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(188, 185, 255, 0.08) 0%, rgba(188, 185, 255, 0.03) 45%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

.procescirkels__glow--vraagfase {
  left: 36.28%;
}

.procescirkels__glow--maakfase {
  left: 61.04%;
}

.procescirkels[data-step="1"] .procescirkels__glow--vraagfase,
.procescirkels[data-step="2"] .procescirkels__glow--vraagfase {
  opacity: 1;
}

.procescirkels[data-step="3"] .procescirkels__glow--maakfase,
.procescirkels[data-step="4"] .procescirkels__glow--maakfase {
  opacity: 1;
}

.procescirkels__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Guide paths exist only to carry curved <textPath> labels — SVG gives an
   open path a default black fill (auto-closed edge-to-edge), which painted
   solid wedges across the rings. They must never paint anything. */
.procescirkels__svg path[id] {
  fill: none;
  stroke: none;
}

/* ---------------------------------------------------------------------
   Rings
   --------------------------------------------------------------------- */

.ring__base {
  fill: none;
  stroke: var(--color-white);
  stroke-opacity: 0.1;
  stroke-width: 2;
  transition: stroke-width 0.7s var(--ease);
}

.ring__active {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2;
  opacity: 0.2;
  transition: opacity 0.7s var(--ease), stroke-width 0.7s var(--ease);
}

.ring-hotspot {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
  outline: none;
}

.axis-line {
  stroke: var(--color-white);
  stroke-opacity: 0.2;
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------------
   Rotating glow — a spinning conic-gradient highlight on the active ring,
   matching the double-peak sweep baked into the Figma ring asset.

   Plain HTML divs, positioned with the same percentages used elsewhere
   for this component (the container's aspect-ratio is locked to the SVG
   viewBox, so container % == SVG-unit %). The ring shape itself is cut
   with the standard "padding + mask-composite: exclude" technique: two
   solid mask layers (full box vs. the padding-inset content box) XORed
   together leave only the padding band visible. Because both layers are
   plain `linear-gradient(#fff 0 0)` — a flat fill, not a circle needing
   percentage tuning — there's no radial-gradient sizing keyword
   (closest-side / farthest-corner, etc.) to get wrong, unlike an earlier
   attempt here. No SVG mask, no foreignObject, no filter: blur() — all
   three were involved in a real cross-browser rendering bug (stray
   triangular bleed outside the ring), so this version avoids that whole
   combination in favor of a single well-supported CSS pattern.
   --------------------------------------------------------------------- */

@keyframes ring-glow-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ring-glow-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

.ring-glow {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  /* Must equal the active ring's stroke-width (8 SVG units) exactly, at
     every viewport size — not a fixed px value, which would only match
     at one specific rendered width. .procescirkels has
     container-type: inline-size and its aspect-ratio is locked to the
     SVG's 1538-unit-wide viewBox, so 1cqw == 15.38 SVG units; scaling
     8 units into that same cqw space keeps the two in lockstep as the
     component resizes. */
  padding: calc(100cqw * 8 / 1538);
  /* Shooting-star shape: each peak has a long, gradual approach on its
     LOW-angle side and a short, steep drop on its HIGH-angle side.
     transform: rotate(360deg) turns this div clockwise (increasing
     angle over time), so at any fixed point on the ring, the animation
     sweeps local gradient-angle from high to low as time passes — the
     high-angle (steep) side is what a viewer sees arrive first, and the
     low-angle (gradual) side trails behind it. That makes the steep
     side the comet's head and the gradual side its tail. */
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 35deg,
    var(--color-white) 90deg,
    transparent 98deg,
    transparent 215deg,
    var(--color-white) 270deg,
    transparent 278deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: ring-glow-spin 7s linear infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease);
  will-change: transform;
}

/* SVG strokes are centered on their path, extending stroke-width/2 both
   inward and outward — but padding-based masking can only cut inward
   from a div's own edge. So each box here is sized to the ring's true
   radius PLUS half the active stroke-width (4 of the 8 total), meaning
   the div's outer edge lands at r+4 and the padding (the full 8, see
   .ring-glow above) cuts back to r-4 — centering the band on r exactly,
   the same way the stroke is centered on its path. Previously the box
   matched r exactly, so the band only extended inward from r, landing
   ~4px too far in relative to the actual stroke. */
.ring-glow--vf-big,
.ring-glow--mf-big {
  top: 28.6%;
  width: 27.8283%;
  height: 42.8%;
}

.ring-glow--vf-small,
.ring-glow--mf-small {
  top: 39.1%;
  width: 14.1743%;
  height: 21.8%;
}

.ring-glow--vf-big {
  left: 22.3667%;
}

.ring-glow--vf-small {
  left: 36.0208%;
}

.ring-glow--mf-big,
.ring-glow--mf-small {
  left: 49.6749%;
}

/* Maakfase spins counter-clockwise (rotate(-360deg): local angle at a
   fixed point increases over time, the reverse of the clockwise case
   above). To keep the steep edge leading and the gradual edge trailing
   — same shooting-star look, opposite direction — the gradient itself
   is mirrored: steep on the LOW-angle side of each peak, gradual on the
   HIGH-angle side. */
.ring-glow--mf-big,
.ring-glow--mf-small {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 82deg,
    var(--color-white) 90deg,
    transparent 145deg,
    transparent 262deg,
    var(--color-white) 270deg,
    transparent 325deg,
    transparent 360deg
  );
  animation-name: ring-glow-spin-reverse;
}

.ring-label {
  fill: var(--color-lavender);
  opacity: 0.25;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: opacity 0.7s var(--ease);
}

/* ---------------------------------------------------------------------
   Badges (step number circles)
   --------------------------------------------------------------------- */

.badge circle {
  fill: var(--color-bg);
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2;
  transition: r 0.6s var(--ease);
}

.badge text {
  fill: var(--color-lime);
  font-family: var(--font-family);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  transition: font-size 0.6s var(--ease);
}

.badge {
  opacity: 0.3;
  /* Decorative only — the ring-hotspot circle beneath is the sole click
     target, so clicks here must fall through to it rather than being
     swallowed by these SVG shapes sitting on top in paint order. */
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

/* ---------------------------------------------------------------------
   Pills (Conceptueel / Richtinggevend / Outcome / Output)
   --------------------------------------------------------------------- */

.pill rect {
  fill: var(--color-bg-lavender-20);
}

.pill text {
  fill: var(--color-white);
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-anchor: middle;
  dominant-baseline: central;
}

/* ---------------------------------------------------------------------
   Checkin bubble (shared, always visible, fixed position)

   Sits at x=768 (vf-big's right edge, global SVG units) for every step —
   including steps 3/4, where .fase-group--maakfase's own transform is
   tuned so mf-big's left edge lands on this same x (see that group's
   comment), rather than Checkin moving to meet mf-big's own original
   edge. Checkin never needing to move keeps it (and the panel-bg cut,
   which sits at a fixed 50% ≈ this same x) aligned identically in both
   phases, instead of drifting off-center and sliding between two
   different resting spots during the phase switch.
   --------------------------------------------------------------------- */

.checkin circle {
  fill: var(--color-bg);
  stroke: var(--color-blue);
  stroke-width: 3;
}

.checkin text {
  fill: var(--color-lavender);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 17px;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Solid HTML repaint of the circle above, sized a touch larger (r=52 vs
   the SVG circle's r=50 + 1.5 half-stroke) so it fully occludes any glow
   bleed at the boundary. See the HTML comment at its call site. */
.checkin-cover {
  position: absolute;
  left: 46.554%;
  top: 44.8%;
  width: 6.762%;
  height: 10.4%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
  border: calc(100cqw * 3 / 1538) solid var(--color-blue);
  pointer-events: none;
}

.checkin-cover span {
  color: var(--color-lavender);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: clamp(11px, 1.1cqw, 17px);
  letter-spacing: -0.01em;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Celebration badge (maakfase ring, bottom)
   --------------------------------------------------------------------- */

.celebration {
  opacity: 0.25;
  transition: opacity 0.7s var(--ease);
}

.celebration circle {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.5;
}

.celebration text {
  font-size: 22px;
  text-anchor: middle;
  dominant-baseline: central;
}

/* ---------------------------------------------------------------------
   Fase groups — vraagfase (left circles) / maakfase (right circles)
   --------------------------------------------------------------------- */

.fase-group {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.procescirkels[data-step="1"] .fase-group--vraagfase,
.procescirkels[data-step="2"] .fase-group--vraagfase {
  opacity: 1;
  pointer-events: auto;
}

.procescirkels[data-step="3"] .fase-group--maakfase,
.procescirkels[data-step="4"] .fase-group--maakfase {
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------------------
   Ring bundles — each ring (big or small), with its own guide paths,
   label, badge and hotspot, animates independently during the phase
   switch (step 2 <-> 3) instead of the whole fase-group moving as one
   rigid unit. This lets the big and small rings use different scale
   amounts and start at different times (staggered).

   fill-box + center so scale shrinks/grows around each bundle's own
   visual center rather than the SVG's (0,0) origin. Bundles have no
   SVG transform attribute of their own (unlike .fase-group), so their
   keyframes use plain origin-relative translateX/scale — no baseline
   coordinate to re-state.
   --------------------------------------------------------------------- */

.ring-bundle {
  transform-box: fill-box;
  transform-origin: center;
}

/* Large rings scale 30% smaller as they leave/arrive; small rings only
   slide and fade, with no scale change — the large ring's scale change
   is 30 percentage points more than the small ring's (zero). */
@keyframes vf-big-slide-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(48px) scale(0.7); }
}

@keyframes vf-big-slide-in {
  from { opacity: 0; transform: translateX(48px) scale(0.7); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes vf-small-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(48px); }
}

@keyframes vf-small-slide-in {
  from { opacity: 0; transform: translateX(48px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mf-big-slide-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(-48px) scale(0.7); }
}

@keyframes mf-big-slide-in {
  from { opacity: 0; transform: translateX(-48px) scale(0.7); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes mf-small-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-48px); }
}

@keyframes mf-small-slide-in {
  from { opacity: 0; transform: translateX(-48px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Forward (Vraagfase -> Maakfase): the leaving side goes big-then-small;
   the arriving side goes small-then-big — a 0.15s stagger between them. */
.procescirkels[data-transition="phase-forward"][data-step="3"] .ring-bundle--vf-big {
  animation: vf-big-slide-out 0.35s ease-out 0.25s both;
}

.procescirkels[data-transition="phase-forward"][data-step="3"] .ring-bundle--vf-small {
  animation: vf-small-slide-out 0.35s ease-out 0.4s both;
}

.procescirkels[data-transition="phase-forward"][data-step="3"] .ring-bundle--mf-small {
  animation: mf-small-slide-in 0.35s ease-out 0.75s backwards;
}

.procescirkels[data-transition="phase-forward"][data-step="3"] .ring-bundle--mf-big {
  animation: mf-big-slide-in 0.35s ease-out 0.9s backwards;
}

/* Backward (Maakfase -> Vraagfase): sequence inverted — the leaving side
   goes small-then-big; the arriving side goes big-then-small. */
.procescirkels[data-transition="phase-backward"][data-step="2"] .ring-bundle--mf-small {
  animation: mf-small-slide-out 0.35s ease-out 0.25s both;
}

.procescirkels[data-transition="phase-backward"][data-step="2"] .ring-bundle--mf-big {
  animation: mf-big-slide-out 0.35s ease-out 0.4s both;
}

.procescirkels[data-transition="phase-backward"][data-step="2"] .ring-bundle--vf-big {
  animation: vf-big-slide-in 0.35s ease-out 0.75s backwards;
}

.procescirkels[data-transition="phase-backward"][data-step="2"] .ring-bundle--vf-small {
  animation: vf-small-slide-in 0.35s ease-out 0.9s backwards;
}

/* Ring-glow is a plain HTML overlay pinned to fixed % coordinates, not a
   child of the ring-bundle, so it can't ride along with the slide above.
   Fade the outgoing ring's glow out right as its own bundle starts
   leaving, and hold the incoming ring's glow back until its bundle has
   fully arrived, so it never appears misaligned mid-slide. Only the
   small rings are ever active right at the step 2/3 boundary, so only
   their glows need this override. */
.procescirkels[data-transition="phase-forward"][data-step="3"] .ring-glow--vf-small {
  transition: opacity 0.2s var(--ease) 0.4s;
}

.procescirkels[data-transition="phase-forward"][data-step="3"] .ring-glow--mf-small {
  transition: opacity 0.3s var(--ease) 1.1s;
}

.procescirkels[data-transition="phase-backward"][data-step="2"] .ring-glow--mf-small {
  transition: opacity 0.2s var(--ease) 0.25s;
}

.procescirkels[data-transition="phase-backward"][data-step="2"] .ring-glow--vf-small {
  transition: opacity 0.3s var(--ease) 1.25s;
}

/* Step 1: big ring active, small ring dim */
.procescirkels[data-step="1"] .ring--vf-big .ring__active { opacity: 0.45; stroke-width: 8; }
.procescirkels[data-step="1"] .ring--vf-big .ring__base { stroke-width: 8; }
.procescirkels[data-step="1"] .ring--vf-small .ring__active { opacity: 0.2; stroke-width: 2; }
.procescirkels[data-step="1"] .label--vf-big { opacity: 0.95; }
.procescirkels[data-step="1"] .label--vf-small { opacity: 0.2; }
.procescirkels[data-step="1"] .badge--1 { opacity: 1; }
.procescirkels[data-step="1"] .badge--1 circle { r: 24; }
.procescirkels[data-step="1"] .badge--1 text { font-size: 20px; }
.procescirkels[data-step="1"] .badge--2 { opacity: 0.3; }
.procescirkels[data-step="1"] .badge--2 circle { r: 16; }
.procescirkels[data-step="1"] .badge--2 text { font-size: 14px; }
.procescirkels[data-step="1"] .ring-glow--vf-big { opacity: 1; }

/* Step 2: small ring active, big ring dim */
.procescirkels[data-step="2"] .ring--vf-small .ring__active { opacity: 0.45; stroke-width: 8; }
.procescirkels[data-step="2"] .ring--vf-small .ring__base { stroke-width: 8; }
.procescirkels[data-step="2"] .ring--vf-big .ring__active { opacity: 0.2; stroke-width: 2; }
.procescirkels[data-step="2"] .label--vf-small { opacity: 0.95; }
.procescirkels[data-step="2"] .label--vf-big { opacity: 0.2; }
.procescirkels[data-step="2"] .badge--2 { opacity: 1; }
.procescirkels[data-step="2"] .badge--2 circle { r: 24; }
.procescirkels[data-step="2"] .badge--2 text { font-size: 20px; }
.procescirkels[data-step="2"] .badge--1 { opacity: 0.3; }
.procescirkels[data-step="2"] .badge--1 circle { r: 16; }
.procescirkels[data-step="2"] .badge--1 text { font-size: 14px; }
.procescirkels[data-step="2"] .ring-glow--vf-small { opacity: 1; }

/* Step 3: small ring active, big ring dim (maakfase mirrors step 2) */
.procescirkels[data-step="3"] .ring--mf-small .ring__active { opacity: 0.45; stroke-width: 8; }
.procescirkels[data-step="3"] .ring--mf-small .ring__base { stroke-width: 8; }
.procescirkels[data-step="3"] .ring--mf-big .ring__active { opacity: 0.2; stroke-width: 2; }
.procescirkels[data-step="3"] .label--mf-small { opacity: 0.95; }
.procescirkels[data-step="3"] .label--mf-big { opacity: 0.2; }
.procescirkels[data-step="3"] .badge--3 { opacity: 1; }
.procescirkels[data-step="3"] .badge--3 circle { r: 24; }
.procescirkels[data-step="3"] .badge--3 text { font-size: 20px; }
.procescirkels[data-step="3"] .badge--4 { opacity: 0.3; }
.procescirkels[data-step="3"] .badge--4 circle { r: 16; }
.procescirkels[data-step="3"] .badge--4 text { font-size: 14px; }
.procescirkels[data-step="3"] .celebration { opacity: 0.3; }
.procescirkels[data-step="3"] .ring-glow--mf-small { opacity: 1; }

/* Step 4: big ring active, small ring dim (maakfase mirrors step 1) */
.procescirkels[data-step="4"] .ring--mf-big .ring__active { opacity: 0.45; stroke-width: 8; }
.procescirkels[data-step="4"] .ring--mf-big .ring__base { stroke-width: 8; }
.procescirkels[data-step="4"] .ring--mf-small .ring__active { opacity: 0.2; stroke-width: 2; }
.procescirkels[data-step="4"] .label--mf-big { opacity: 0.95; }
.procescirkels[data-step="4"] .label--mf-small { opacity: 0.2; }
.procescirkels[data-step="4"] .badge--4 { opacity: 1; }
.procescirkels[data-step="4"] .badge--4 circle { r: 24; }
.procescirkels[data-step="4"] .badge--4 text { font-size: 20px; }
.procescirkels[data-step="4"] .badge--3 { opacity: 0.3; }
.procescirkels[data-step="4"] .badge--3 circle { r: 16; }
.procescirkels[data-step="4"] .badge--3 text { font-size: 14px; }
.procescirkels[data-step="4"] .celebration { opacity: 1; }
.procescirkels[data-step="4"] .ring-glow--mf-big { opacity: 1; }

/* ---------------------------------------------------------------------
   Text panel background — a flat cut (not a fade) at the frame's own
   midpoint, matching the Figma source's own "BG Right"/"BG Left" masks:
   .procescirkels__glow (above) is centered on the active ring cluster and
   is wide enough that its own soft falloff was still faintly visible
   behind the text on the other half of the frame. Solid var(--color-bg)
   — the same color the rest of the page already sits on — gives that
   half a hard, deliberate edge instead of a lingering gradient tail.
   Toggled with the same [data-step] pairing as its own fase's glow, since
   this needs to cover whichever half currently holds that fase's text —
   not the other half, which right now holds the *other* fase's own
   active circles and must stay uncovered. Desktop-only: mobile stacks
   circles above text in one column, so there's no glow-behind-text
   overlap to cut in the first place (see the mobile override below). */
.procescirkels__panel-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

.procescirkels__panel-bg--vraagfase {
  left: 50%;
  right: 0;
}

.procescirkels__panel-bg--maakfase {
  left: 0;
  right: 50%;
}

.procescirkels[data-step="1"] .procescirkels__panel-bg--vraagfase,
.procescirkels[data-step="2"] .procescirkels__panel-bg--vraagfase {
  opacity: 1;
}

.procescirkels[data-step="3"] .procescirkels__panel-bg--maakfase,
.procescirkels[data-step="4"] .procescirkels__panel-bg--maakfase {
  opacity: 1;
}

/* ---------------------------------------------------------------------
   Text panels
   --------------------------------------------------------------------- */

.procescirkels__panel {
  position: absolute;
  top: 13.2%;
  width: 40.2%;
  height: 73%;
  display: flex;
  flex-direction: column;
  /* Empty panels (inactive phase) must not intercept clicks meant for the
     ring/hotspots underneath — only the active phase-step re-enables it. */
  pointer-events: none;
}

.procescirkels__panel--vraagfase {
  right: 4.5%;
}

.procescirkels__panel--maakfase {
  left: 5.3%;
}

/* Wraps just the two crossfading .phase-step elements, as a sibling of
   the (now hoisted, shared) .phase-step__title below — flex:1 so it
   fills whatever's left of the panel's own height after the title's own
   row, giving the absolutely-positioned .phase-step children (inset:0)
   a containing block that starts below the title instead of behind it. */
.procescirkels__panel-steps {
  position: relative;
  flex: 1;
}

.phase-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}

.phase-step.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Phase switch: the incoming panel's text waits for the outgoing text to
   finish fading (0.25s) and both old rings to finish leaving, staggered,
   (0.25s-0.75s) before fading in, so it arrives as the new rings start
   arriving rather than crossfading immediately under the old content. */
.procescirkels[data-transition="phase-forward"] .phase-step[data-step="3"].is-active,
.procescirkels[data-transition="phase-backward"] .phase-step[data-step="2"].is-active {
  transition-delay: 0.75s;
}

/* One title per panel now (not one per phase-step, which used to
   duplicate "Vraagfase"/"Maakfase" identically across steps 1/2 and 3/4)
   — living outside .phase-step, in .procescirkels__panel directly, so
   switching between same-phase steps (1<->2, 3<->4) never touches its
   opacity at all: it was previously nested inside .phase-step, so its
   parent's own crossfade (see .phase-step above) visually faded it too,
   even though the title text never actually changes on a same-phase
   step change — only the panel-level [data-step] pairing below moves
   its opacity, which only happens when switching phases (2<->3). */
.phase-step__title {
  font-size: clamp(28px, 4.2cqw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: clamp(24px, 4cqw, 56px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.procescirkels[data-step="1"] .procescirkels__panel--vraagfase .phase-step__title,
.procescirkels[data-step="2"] .procescirkels__panel--vraagfase .phase-step__title,
.procescirkels[data-step="3"] .procescirkels__panel--maakfase .phase-step__title,
.procescirkels[data-step="4"] .procescirkels__panel--maakfase .phase-step__title {
  opacity: 1;
}

/* Matches the incoming phase-step's own fade-in delay (see above) so the
   arriving panel's title appears in sync with its content, not before it. */
.procescirkels[data-transition="phase-forward"] .procescirkels__panel--maakfase .phase-step__title,
.procescirkels[data-transition="phase-backward"] .procescirkels__panel--vraagfase .phase-step__title {
  transition-delay: 0.75s;
}

.phase-step__blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2cqw, 32px);
  flex: 1;
}

.phase-step__block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phase-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 2.3cqw, 36px);
  height: clamp(28px, 2.3cqw, 36px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: var(--color-lime);
  font-size: clamp(14px, 1.3cqw, 20px);
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 12px;
}

.phase-step__heading {
  font-size: clamp(17px, 1.56cqw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-lavender);
}

.phase-step__text {
  font-size: clamp(14px, 1.17cqw, 18px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--color-text-p);
}

.phase-step__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(16px, 2.6cqw, 40px);
}

.phase-step__back {
  padding: 16px;
  flex-shrink: 0;
}

.phase-step__back img {
  transform: scaleX(-1);
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
  .procescirkels {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* Takes over the aspect-ratio sizing .procescirkels__svg has on desktop
     — matches the cropped mobile viewBox set in procescirkels.js (both
     phases are 560x470.4), so the active fase-group's rings fill the
     width edge-to-edge with just the JS-side padding as margin. Sizing
     this wrapper instead of the svg itself keeps .ring-glow/.checkin-cover
     (see below) positioned against the same box as the rings, rather
     than against .procescirkels's own box, which on mobile also includes
     the text panel stacked underneath. overflow:hidden clips those two
     HTML overlays at the diagram's edges the same way the SVG's own
     viewBox already clips its native content — needed since the Checkin
     bubble (and so .checkin-cover) sits right at the seam between the
     two phases and is only ever partially inside a single phase's crop. */
  .procescirkels__diagram {
    position: relative;
    aspect-ratio: 560 / 470.4;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .ring-label,
  .pill,
  .procescirkels__panel-bg {
    display: none;
  }

  /* Each fase's own ring cluster sits at a different horizontal center
     once the shared viewBox is cropped per-phase (see the .procescirkels__
     glow comment above) — width/height/top stay the same percentages as
     desktop, only the center point moves. */
  .procescirkels__glow--vraagfase {
    left: 56.9643%;
  }

  .procescirkels__glow--maakfase {
    left: 43.0357%;
  }

  /* Both use "100cqw * Nunits / 1538" on desktop, since .procescirkels's
     own container-size (what cqw measures) maps to the full 1538-unit
     desktop viewBox — on mobile it maps to the cropped 560-unit viewBox
     instead, so the same ratio needs the smaller divisor or these render
     at roughly a third of their intended thickness. */
  .ring-glow {
    padding: calc(100cqw * 8 / 560);
  }

  .checkin-cover {
    border-width: calc(100cqw * 3 / 560);
  }

  /* Percentages below are each ring/badge's global SVG-unit bounding box
     (see the desktop values above this media query) re-expressed against
     the *cropped* mobile viewBox's own origin and size (239.0/698.0,
     264.8, 560.0x470.4 — see MOBILE_VIEWBOX in procescirkels.js), since
     .procescirkels__diagram now maps 1:1 to that crop instead of the full
     1538x1000 desktop viewBox. */
  .ring-glow--vf-big,
  .ring-glow--mf-big {
    top: 4.5068%;
    width: 76.4286%;
    height: 90.9864%;
  }

  .ring-glow--vf-small,
  .ring-glow--mf-small {
    top: 26.8281%;
    width: 38.9286%;
    height: 46.3435%;
  }

  .ring-glow--vf-big,
  .ring-glow--vf-small {
    left: 18.75%;
  }

  /* mf-big and mf-small share the same left offset on mobile too (same
     as the desktop values above), since both maakfase rings are tangent
     to the same boundary. */
  .ring-glow--mf-big,
  .ring-glow--mf-small {
    left: 4.8214%;
  }

  .checkin-cover {
    top: 38.9455%;
    width: 18.5714%;
    height: 22.1088%;
    left: 85.1786%;
  }

  .procescirkels[data-step="3"] .checkin-cover,
  .procescirkels[data-step="4"] .checkin-cover {
    /* Negative — at this width the Checkin bubble sits mostly outside
       the maakfase crop's left edge, same as its SVG-native counterpart;
       .procescirkels__diagram's own overflow:hidden (above) clips both
       the same way. */
    left: -3.75%;
  }

  .procescirkels__panel {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
  }

  /* The desktop crossfade needs .phase-step absolutely positioned so panels
     can overlap; on mobile the panel is a normal-flow block, so the active
     step must go back to being the only one actually laid out. */
  .phase-step {
    position: static;
    display: none;
    opacity: 1;
    transition: none;
  }

  .phase-step.is-active {
    display: flex;
  }

  /* Desktop crossfades the title by opacity (see the base rule above);
     mobile has no crossfade to begin with (.phase-step itself snaps via
     display, not opacity), so the title switches the same way — display,
     not opacity, so the inactive panel's title doesn't reserve blank
     space in this single stacked column. */
  .phase-step__title {
    font-size: clamp(32px, 9vw, 48px);
    display: none;
    opacity: 1;
    transition: none;
  }

  .procescirkels[data-step="1"] .procescirkels__panel--vraagfase .phase-step__title,
  .procescirkels[data-step="2"] .procescirkels__panel--vraagfase .phase-step__title,
  .procescirkels[data-step="3"] .procescirkels__panel--maakfase .phase-step__title,
  .procescirkels[data-step="4"] .procescirkels__panel--maakfase .phase-step__title {
    display: block;
  }

  .phase-step__heading {
    font-size: 20px;
  }

  .phase-step__text {
    font-size: 16px;
  }

  .phase-step__actions {
    flex-wrap: nowrap;
  }

  .phase-step__actions .btn {
    width: auto;
  }

  .phase-step__actions .btn-primary {
    flex: 1;
  }

  .phase-step__back {
    flex: 0 0 auto;
  }
}