/* =====================================================================
   DRAFT ONLY - whofor-lens-a.html / whofor-lens-b.html
   Surfacing the Work With Me lens on the home "Who it's for" panel.
   Nothing here touches the live pages: this file is loaded by the two
   draft pages only, after styles.css/styles2.css so it wins on ties.

   What it changes on that panel:
   - the right column becomes a stack: pull-quote on TOP, lens beneath
   - the left column keeps its vertical centring, untouched
   - the panel's third beat is re-cast: it used to fly the quote to the
     centre of the screen at 1.5x. It can't do that AND hold a lens, so
     here stage 2 reveals the lens instead. That is the one structural
     decision in this draft.
   ===================================================================== */

/* ---------- shared: the right column ---------- */
.whofor--lens .whofor__right{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2.6vh,34px);width:100%;}

/* the lens block (link in A, live lens in B) */
.whofor__lens{position:relative;display:block;width:var(--lensz);max-width:100%;
  text-decoration:none;color:inherit;
  opacity:0;transform:translateY(26px);
  transition:opacity 1s ease .05s,transform 1.1s cubic-bezier(.16,1,.3,1) .05s;}
.whofor--lens[data-stage="2"] .whofor__lens{opacity:1;transform:none;}
html:not(.js) .whofor__lens{opacity:1;transform:none;}

/* the lens object itself: a square that the WebGL canvas (or the SVG ring) fills.
   display:block matters - these are spans (they live inside an <a> in option A). */
.wl__stage{display:block;position:relative;width:100%;aspect-ratio:1;}
/* a soft contact shadow so the lens sits ON the paper instead of floating over it */
.wl__stage::after{content:"";position:absolute;left:12%;right:12%;bottom:-2%;height:9%;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(23,19,16,.16),rgba(23,19,16,0) 70%);
  pointer-events:none;}
.wl__lens{display:block;position:absolute;inset:0;z-index:1;}
.wl__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.wl__lens[hidden]{display:none;}

/* caption / CTA under the lens */
.wl__cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,2vh,22px);
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);}
.wl__cta::after{content:"";width:22px;height:1px;background:currentColor;
  transition:width .45s cubic-bezier(.16,1,.3,1);}
.whofor__lens:hover .wl__cta::after,.whofor__lens:focus-visible .wl__cta::after{width:40px;}

/* ---------- SVG fallback ring (no WebGL / reduced motion) ---------- */
.wl__ring{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;}
.wl__ring .wl__arc{fill:var(--paper-3);stroke:var(--hairline);stroke-width:1;}
.wl__ring .wl__glassdisc{fill:var(--paper-2);stroke:var(--hairline);stroke-width:1;}
/* once the WebGL lens mounts, the static ring goes; and it never flashes beforehand */
html.lensh-pending .wl__ring,.whofor.has-lensh .wl__ring{display:none;}
html.lensh-pending .whofor .lens,.whofor.has-lensh .lens{display:none;}

/* ---------- A: teaser ---------- */
.whofor--lens-a{--lensz:clamp(190px,min(23vw,36vh),320px);}
.whofor--lens-a .whofor__lens{cursor:pointer;}
.whofor--lens-a .wl__stage{transition:transform .7s cubic-bezier(.16,1,.3,1);}
.whofor--lens-a .whofor__lens:hover .wl__stage,
.whofor--lens-a .whofor__lens:focus-visible .wl__stage{transform:scale(1.035);}

/* ---------- B: the full interactive lens ---------- */
.whofor--lens-b{--lensz:clamp(240px,min(30vw,54vh),470px);}
.whofor--lens-b .whofor__lens{width:var(--lensz);}
/* the SVG wheel fallback, sized down to the column (lens.css sizes it for a full hero) */
.whofor--lens-b .lens-stage{width:100%;max-width:none;}
.whofor--lens-b .lens__hint,.whofor--lens-b .lens__menu,.whofor--lens-b .lens__chip{display:none;}
.whofor--lens-b .seg__txt{font-size:22px;}
/* ---------- C: quote joins the left column, the lens owns the whole right side ----------
   The lens is no longer a companion to the quote, it is the panel's right-hand half. At this
   size the curved labels carry themselves, so the readout under the lens is dropped. */
.whofor--lens-c{--lensz:min(100%,82vh);}  /* bumped from 74vh: client asked for the lens larger (mobile especially, but a touch on desktop too) */
.whofor--lens-c .whofor__lens{width:var(--lensz);}
.whofor--lens-c .lens-stage{width:100%;max-width:none;}
.whofor--lens-c .lens__hint,.whofor--lens-c .lens__menu,.whofor--lens-c .lens__chip{display:none;}

/* hovered-pathway readout + hint, under the lens */
.wl__read{display:block;margin-top:clamp(12px,1.8vh,18px);
  font-family:var(--serif);font-weight:700;font-size:clamp(1rem,1.5vw,1.25rem);color:var(--ink);line-height:1.2;}
.wl__hint{margin:6px 0 0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);transition:opacity .4s ease;}
/* dive: the lens goes full-screen for the plunge, exactly as it does on Work With Me */
.wl__lens.is-diving{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;}
.lens3d__veil{position:fixed;inset:0;z-index:100000;background:#0c0b0a;opacity:0;pointer-events:none;transition:opacity .5s ease;}
.lens3d__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.lens3d__sr:focus{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:auto;height:auto;clip:auto;
  padding:8px 14px;background:var(--paper);color:var(--ink);border:1px solid var(--hairline);z-index:10;}

/* =====================================================================
   DESKTOP (the horizontal journey). Undo the panel's original stage-2
   (quote flies to screen centre at 1.5x, left column fades out) and make
   stage 2 the lens's entrance instead.
   ===================================================================== */
@media(min-width:901px){
  .whofor--lens .whofor__in{align-items:start;}
  .whofor--lens .whofor__text{align-self:center;}     /* left column: unchanged, still centred */

  /* The quote and the lens share ONE centre axis down the right column. Without this the
     quote hangs off the column's left edge while the lens sits on its own centre, and the
     two read as unrelated objects that happen to be stacked. */
  .whofor--lens .whofor__right{align-items:center;text-align:center;}

  .whofor--lens .whofor__pq{position:static;left:auto;width:auto;justify-self:auto;
    max-width:15ch;margin:0;text-align:center;
    font-size:clamp(2rem,3.1vw,2.9rem);line-height:1.1;
    text-wrap:balance;   /* centred rag: stops "work." stranding on a line of its own */
    opacity:0;transform:translateX(44px);
    transition:opacity .8s ease,transform .85s cubic-bezier(.16,1,.3,1);}
  /* text-align is repeated on the stage rules because the panel's own stage-2 rule sets its
     own alignment for the fly-to-middle move, and that rule out-specifies the base one above. */
  .whofor--lens[data-stage="1"] .whofor__pq,
  .whofor--lens[data-stage="2"] .whofor__pq{opacity:1;transform:none;text-align:center;}
  /* the left column stays put now - it is no longer sacrificed for the centred quote */
  .whofor--lens[data-stage="2"] .whofor__text{opacity:1;transform:none;pointer-events:auto;}

  /* M6: the lens used to wait for data-stage="2" (one extra scroll-tick past panel entry),
     so a visitor who paused on entry, or arrived via the rail's "Who it's for" link, sat on a
     half-empty right column with no cue more was coming. The lens is the payoff of the whole
     journey - reveal it as soon as the panel is active (stage 0) instead. The pull-quote above
     and the left-column safeguard above still stage in on stage 1 / stage 2 exactly as before;
     only the lens's own gate moves earlier. Desktop only (>=901px, this panel's own breakpoint
     for the horizontal-journey layout) - the <=680px rule already forces the lens visible
     regardless of stage, and the 681-900px tier is untouched, still gated to stage 2. */
  .whofor--lens .whofor__lens{opacity:1;transform:none;}

  /* caption (A) and pathway readout (B) centre under the lens, on the same axis */
  .whofor--lens .wl__cta{align-self:center;}
  .whofor--lens .wl__read,.whofor--lens .wl__hint{text-align:center;}

  /* ---- C overrides: both halves centre, the lens fills its column ---- */
  .whofor--lens-c .whofor__in{align-items:center;}
  .whofor--lens-c .whofor__right{align-items:center;justify-content:center;height:100%;}
  /* the quote is now the LAST line of the left column, so it reads left-aligned with the copy
     above it, not centred like it is in A and B */
  .whofor--lens-c .whofor__pq{max-width:26ch;margin-top:clamp(28px,4vh,48px);text-align:left;
    font-size:clamp(1.7rem,2.5vw,2.35rem);text-wrap:balance;}
  .whofor--lens-c[data-stage="1"] .whofor__pq,
  .whofor--lens-c[data-stage="2"] .whofor__pq{text-align:left;}
}

/* 681-900px: single column, quote + lens below the copy */
@media(max-width:900px){
  .whofor--lens .whofor__right{margin-top:var(--s4);gap:var(--s4);}
  .whofor--lens .whofor__pq{justify-self:start;}
}

/* =====================================================================
   MOBILE (<=680px) - the journey is a normal vertical page here, and the
   stage machine never runs, so nothing may be gated behind data-stage.
   ===================================================================== */
@media(max-width:680px){
  .whofor--lens .whofor__right{display:block;margin-top:clamp(24px,4vh,36px);}
  .whofor__lens{opacity:1!important;transform:none!important;
    width:min(78vw,340px);margin:clamp(26px,4vh,40px) auto 0;}
  .whofor--lens-b .whofor__lens{width:min(88vw,380px);}
  /* home page (lens-c): client asked for the lens larger, mobile especially, because the two
     longest labels (SPORTING TEAMS & CLUBS, SCHOOLS & EDUCATION) crowd together at the old size.
     Investigated first: the five labels sit at even 72deg angles in both renderers (lens-home.js's
     LANG array and this SVG's arc paths), so the crowding is not an uneven-angle bug. But a bigger
     box ALONE does not fix it either - proven by measuring actual arc-fill (getComputedTextLength
     for the SVG, canvas measureText for the WebGL texture): both renderers scale their label font
     proportionally with the box (SVG font-size resolves in the viewBox's user units; the WebGL
     label texture is a fixed-ratio decal projected by a constant-FOV camera), so the text-to-arc
     RATIO stays identical no matter how wide this box gets, right up until the box crosses 520px
     (see lens-home.js's LABEL_PX threshold) - unreachable on a phone without overflowing. At the
     old mobile size, measurement showed SPORTING TEAMS & CLUBS filling 103.5% of its own 72deg
     sector in the WebGL renderer: a literal overflow into the neighbour, not just a visual
     impression. So this is two changes together, not diameter alone: widen the box (this rule,
     mirrored below for the SVG label font) AND drop the label font size for lens-c mobile so the
     text actually fits its sector (see lens-home.js and the .seg__txt rule below). Bleed 16px past
     the section's 24px gutter on each side (safe 8px margin to the viewport edge at 390-430px) via
     explicit margin-left/margin-right (tried margin-inline:auto first and rejected it - this
     browser does not split a negative/over-width auto-margin evenly, it clamps one side to 0 and
     dumps the whole bleed on the other, an asymmetric result; explicit -16px each side has no such
     ambiguity). Both the WebGL canvas (.wl__stage) and the SVG fallback (.lens-stage) already size
     to 100% of this box, so both paths grow identically. Note: past 460px (viewport ~476px+, above
     the three widths this brief tests) the fixed -16px margins stop being exactly centred since
     width no longer tracks 100% - out of scope for this fix, phones tested are all well under it. */
  .whofor--lens-c .whofor__lens{width:min(calc(100% + 32px),460px);max-width:460px;margin-left:-16px;margin-right:-16px;}
  /* SVG fallback only: measured at 14px the two long labels fill 66.1% / 59.6% of their sector
     (was 85% / 76.7% at the old shared 18px) - comfortable, no more crowded than Organisations'
     52.9%->41.1%. Scoped to lens-c so the separate Work With Me page's own wheel (.seg__txt at
     18px, shared rule in lens.css) is untouched. */
  .whofor--lens-c .seg__txt{font-size:14px;}
  .wl__cta{margin-top:16px;}
  .wl__read,.wl__hint{text-align:center;}
  .wl__cta{width:100%;justify-content:center;}
}

/* reduced motion: no idle, no entrance - everything visible immediately. The lens itself
   (WebGL when it mounts, else the SVG fallback) is left to the existing lensh-pending /
   has-lensh gating above: when the real lens mounts (lens-home.js renders it fully static
   under reduced motion) the SVG fallback stays hidden exactly as it does with motion on;
   when there is no WebGL, lensh-pending never gets added and the SVG fallback shows as
   always. Robin: reduced motion should show the same design, not a lesser one. */
@media(prefers-reduced-motion:reduce){
  .whofor__lens{opacity:1!important;transform:none!important;}
  .whofor--lens .whofor__pq{opacity:1!important;transform:none!important;}
}