/* =====================================================================
   WORK WITH ME — circle of pathways (ref: steven.com, our brand).
   A large brand-coloured ring split into 5 workshop segments, in its own
   section BELOW the hero, revealed on scroll. Hover a segment: it rises +
   highlights, and the centre reveals that pathway's image. Click navigates.
   Mobile = tappable list.
   ===================================================================== */

/* wheel section — compact on desktop so it sits within a hero-height view */
.wheel-sec{padding-block:clamp(40px,7vh,96px);}
.wheel-sec .frame{display:flex;flex-direction:column;align-items:center;}
.lens{width:100%;display:flex;flex-direction:column;align-items:center;}
.lens-stage{position:relative;width:min(44vw,42vh);max-width:460px;aspect-ratio:1;}
.lens__svg{position:relative;z-index:2;width:100%;height:100%;display:block;overflow:visible;transform-origin:50% 50%;}

/* ---- dark aperture body + brass rim ----
   Visual parity with the WebGL lens (lens3d.js): a dark machined barrel (::before, sits
   behind everything) with a brass ring defining its outer edge (::after, sits above the
   wedges). Together with the wedges' own dark fill + brass hover treatment below, this is
   the SAME object as the WebGL lens, just static. Both are decorative + pointer-events:none
   so they never interfere with the segments' hit areas. */
.lens-stage::before{content:"";position:absolute;inset:0;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 36% 28%, #2a2019 0%, var(--ink) 55%, #0c0b0a 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 -16px 34px rgba(0,0,0,.4), inset 0 14px 30px rgba(255,255,255,.03);}
.lens-stage::after{content:"";position:absolute;inset:0;z-index:3;border-radius:50%;pointer-events:none;
  border:2px solid var(--brass);
  box-shadow:inset 0 0 0 1px rgba(12,11,10,.55), 0 0 16px rgba(199,154,83,.28);}

/* centre image (shows in the ring hole; swaps on hover) — the "glass", brass-rimmed like the WebGL lens */
.lens-center{position:absolute;z-index:1;top:25%;left:25%;width:50%;height:50%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 42% 34%, #2b241c, #171310 72%);
  box-shadow:inset 0 0 0 2px var(--brass), inset 0 0 0 3px rgba(0,0,0,.55), inset 0 10px 30px rgba(0,0,0,.4);}
.lens-center__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);transition:opacity .5s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.lens.is-active .lens-center__img{opacity:1;transform:scale(1);}
.lens-center__idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 14%;font-family:var(--sans);font-size:clamp(11px,1.1vw,14px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-2);transition:opacity .35s ease;}
.lens.is-active .lens-center__idle{opacity:0;}

/* ---- segments ----
   Idle: transparent (the dark aperture body behind shows through) with a hairline-thin dark
   seam between wedges (blade seams). Hover/focus/tap/chosen: brass wash, matching the WebGL
   ring's brass highlight — same colour language site-wide (index, work-with-me, drafts). */
.seg{cursor:pointer;transform-box:view-box;transition:transform var(--rev-fast) var(--ease-gravity);}
.seg__arc{fill:transparent;stroke:rgba(12,11,10,.4);stroke-width:1;
  transition:fill var(--rev-fast) var(--ease-gravity),stroke var(--rev-fast) var(--ease-gravity);}
.seg__txt{fill:var(--on-dark-2);font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:.08em;
  text-transform:uppercase;transition:fill var(--rev-fast) var(--ease-gravity);}
.seg:hover,.seg:focus-visible{outline:none;transform:translate(var(--tx),var(--ty));}
.seg:hover .seg__arc,.seg:focus-visible .seg__arc{fill:rgba(199,154,83,.26);stroke:var(--brass);}
.seg:hover .seg__txt,.seg:focus-visible .seg__txt{fill:#fff;}
/* the clicked wedge stays highlighted through the spin + rest (no hover during the transition) */
.seg.is-chosen .seg__arc{fill:rgba(199,154,83,.32);stroke:var(--brass);}
.seg.is-chosen .seg__txt{fill:#fff;}

/* hint */
.lens__hint{margin-top:20px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);transition:opacity .3s ease;}
.lens.is-active .lens__hint{opacity:0;}

.lens__menu{display:none;}
.lens__chip{display:none;}

/* ---- experiential click transition: spin + zoom into the chosen pathway ---- */
body.lens-warping{overflow:hidden;}
/* the stage is PINNED in JS to its on-screen rect, so the wheel does not move when it lifts to
   the body — it scales in place. A DARK backdrop fades in (is-cover) as the zoom scales, matching
   the dark destination pages so the hand-off is seamless (the destination fades up from the same
   dark via the lensDive flag). No recentering, no rotation here. */
.lens.is-zooming{position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-color:rgba(12,11,10,0);transition:background-color .5s ease;}
.lens.is-zooming.is-cover{background-color:rgba(12,11,10,1);}
.lens.is-zooming .lens-stage{z-index:1;opacity:1;
  transform-origin:center;animation:warpZoom .7s cubic-bezier(.5,0,.7,.25) forwards;}
.lens.is-zooming .lens-center__img{opacity:1;transform:scale(1);}
.lens.is-zooming .lens__hint,.lens.is-zooming .lens-center__idle{opacity:0;}
@keyframes warpZoom{
  0%{transform:scale(1);opacity:1;}
  45%{opacity:1;}
  100%{transform:scale(7);opacity:0;}
}

/* ---- reveal on scroll: starts compact, enlarges slightly as it comes in ---- */
.lens-stage{opacity:0;transform:scale(.8);}
.reveal.in .lens-stage{opacity:1;transform:none;transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1);}

/* ---- mobile: keep the wheel (ref steven.com), drive it with a chip selector ---- */
@media(max-width:680px){
  .wheel-sec{padding-block:clamp(12px,3vh,28px) clamp(28px,5vh,44px);}
  .lens-stage{display:block;width:min(86vw,60vh);}
  .seg__txt{font-size:18px;}                 /* compensate for the smaller render size */
  .lens__menu{display:none;}
  .lens-center__idle{display:none;}          /* the hint below the wheel carries the prompt */
  /* prompt to tap a pathway (replaces the prev/next chip navigator) */
  .lens__hint{display:block;margin-top:22px;font-size:12px;letter-spacing:.16em;color:var(--accent-deep);}
  /* the wheel auto-previews a pathway on mobile, so keep the tap prompt visible even when a
     segment is active (desktop hides it on hover; on touch there is no hover to end) */
  .lens.is-active .lens__hint{opacity:1;}
  /* the centre always shows a pathway photo on mobile — give it a touch more presence */
  .lens-center{box-shadow:inset 0 0 0 2px var(--brass), inset 0 0 0 3px rgba(0,0,0,.55), inset 0 12px 34px rgba(0,0,0,.45);}
  /* no hover on touch — the chip/tap drives an .is-on segment instead */
  .seg.is-on{transform:translate(var(--tx),var(--ty));}
  .seg.is-on .seg__arc{fill:rgba(199,154,83,.32);stroke:var(--brass);}
  .seg.is-on .seg__txt{fill:#fff;}
  /* chip selector removed — pathways are tapped directly on the wheel */
  .lens__chip{display:none;}
  .lens__chip--unused{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;width:100%;}
  .lens__nav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;
    border:1px solid var(--hairline);border-radius:50%;background:var(--paper);color:var(--ink);
    font-family:var(--serif);font-size:24px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:background .2s ease,border-color .2s ease;}
  .lens__nav:active{background:var(--paper-3);border-color:var(--accent);}
  .lens__chip-label{flex:0 1 240px;min-width:0;text-align:center;min-height:46px;
    display:flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:999px;
    background:var(--ink);color:var(--on-dark);text-decoration:none;
    font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
  .lens__chip-label:active{background:var(--accent-deep);}
}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .reveal.in .lens-stage{transition:none;}
  .lens-stage{opacity:1;transform:none;}
  .seg,.seg__arc,.seg__txt,.lens-center__img{transition:none;}
}

/* mobile: wheel showcased inside the hero (moved by lens.js), above the scroll cue */
@media(max-width:680px){
  .phero--wheel{min-height:auto;justify-content:flex-start;padding-bottom:clamp(96px,18vh,140px);}
  .phero--wheel .frame{flex:0 0 auto;}
  /* clear gap below the wheel so the scroll cue isn't crowding it */
  .phero--wheel #wheel{width:100%;padding-block:clamp(6px,1.6vh,16px) clamp(40px,7vh,64px);}
  .phero--wheel #wheel .frame{padding:0;}
}

/* ---- NUMBERED PATHWAY CARDS ----
   The numbered .vbreak card language (Robin's chosen default for the key Work With Me
   cards) applied to the hub's pathway grid: paper-2 surface, brass left edge, big ghosted
   serif index numeral, soft shadow + hover lift. Reuses the .cards grid + .go link. */
.cards--num .card{position:relative;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:10px;
  box-shadow:0 12px 30px rgba(23,19,16,.07);transition:border-color .3s,transform .2s,box-shadow .3s;}
.cards--num .card::before{content:attr(data-n);position:absolute;top:0;right:16px;
  font-family:var(--serif);font-weight:500;font-size:clamp(3.6rem,7vw,5.2rem);line-height:1;
  color:var(--accent);opacity:.12;pointer-events:none;}
.cards--num .card:hover{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(23,19,16,.11);}
.cards--num .card > *{position:relative;}      /* keep copy above the ghost numeral */
.cards--num .card h3{padding-right:1.6em;}      /* clear the numeral from the title */