/* ============================================================
   Cursor layer (StringTune) - shared, opt-in styles.

   A page opts in by loading this file and its init script (e.g.
   src/scripts/home-cursor.js). The script adds html.st-cursor only on a
   fine pointer at desktop width with motion allowed, and every rule that
   shows an effect is gated on that class. Every variable has a resting
   fallback, so with the layer off (touch, reduced motion, JS failure) the
   page is static and complete.

   The modules only WRITE CSS variables; everything they look like is here:
     StringSpotlight  --spotlight-angle (deg), --spotlight-distance (px)
     StringCursor     --x / --y (-1..1) on targets; px on portals
     StringMagnetic   --magnetic-x / --magnetic-y (px, unitless)

   (The attorneys page predates this file and keeps its own copy of these
   rules in attorneys-v2.css.)
   ============================================================ */

/* ---- .st-spot: a glow that follows the pointer + a lit edge ----------
   The glow sits at z-index -1 inside the card's own stacking context
   (isolation), which paints it above the card's background and below its
   content - so no child needs repositioning, and absolutely positioned
   children keep their own layout. */
.st-spot{position:relative;isolation:isolate;overflow:hidden}
.st-spot::before{content:"";position:absolute;z-index:-1;
  top:50%;left:50%;width:560px;height:560px;border-radius:50%;
  pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(124,46,40,.12),transparent 62%);
  transform:translate(-50%,-50%)
    rotate(calc((var(--spotlight-angle,0) + 90) * 1deg))
    translateY(calc(min(var(--spotlight-distance,0), 240) * -1px));
  transition:opacity .45s var(--ease)}
/* The edge: a 1px ring whose bright arc points at the pointer (same angle
   as the glow, so the two agree). */
.st-spot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;padding:1px;opacity:0;
  background:conic-gradient(from calc((var(--spotlight-angle,0) + 90) * 1deg),
    rgba(124,46,40,.7) 0deg,rgba(124,46,40,0) 70deg,
    rgba(124,46,40,0) 290deg,rgba(124,46,40,.7) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .45s var(--ease)}
/* On dark grounds: rose light instead of oxblood. */
.st-spot--dark::before{background:radial-gradient(circle,rgba(240,220,216,.14),transparent 62%)}
.st-spot--dark::after{background:conic-gradient(from calc((var(--spotlight-angle,0) + 90) * 1deg),
  rgba(240,220,216,.85) 0deg,rgba(240,220,216,0) 70deg,
  rgba(240,220,216,0) 290deg,rgba(240,220,216,.85) 360deg)}
html.st-cursor .st-spot:hover::before,
html.st-cursor .st-spot:hover::after{opacity:1}

/* ---- Magnetic -------------------------------------------------------
   Through `translate`, NOT `transform`, so it composes with a button's own
   hover lift instead of overwriting it (one owner per property). */
html.st-cursor [string="magnetic"]{
  translate:calc(var(--magnetic-x,0) * 1px) calc(var(--magnetic-y,0) * 1px)}

/* ---- The cursor badge -------------------------------------------------
   Rides beside the system cursor (never replaces it) and only while a
   linked target is hovered: StringCursor adds .-show then. */
.tcur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:.95rem;
  box-shadow:0 10px 24px -10px rgba(36,19,16,.7),inset 0 1px 0 rgba(255,255,255,.25);
  /* Position and scale are SEPARATE properties: with one transform and a
     transition, the per-frame position updates would be eased too and the
     badge would trail behind the cursor. Only scale is transitioned. */
  translate:calc(var(--x,-200) * 1px + 18px) calc(var(--y,-200) * 1px + 18px);
  scale:0;opacity:0;
  transition:opacity .25s var(--ease),scale .35s var(--ease)}
html:not(.st-cursor) .tcur{display:none}
.tcur.-show{opacity:1;scale:1}
/* Over a link that goes somewhere: the arrow turns to point there. */
/* Kept as an up-right arrow (the same "goes somewhere" mark as the menu
   rows), nudged up and right rather than turned flat. */
.tcur i{transition:transform .3s var(--ease)}
.tcur.-go i{transform:translate(1px,-1px)}