/* "Our Approach": a liquid of blues flowing through MAP / SHAPE / BUILD / GROW
   (site/princypl/approach-liquid.js). The canvas sits over the words inside their
   clipping wrap and is blended with the page: 'lighten' in the light theme (black
   letters take the colour, the brighter paper around them wins and stays as it is),
   'darken' in the inverted theme (light letters take it, the black page wins).
   The letter edges come from the type itself, so they stay as crisp as the text. */
#approach .words-wrap { position: relative; }

#approach .pw-liquid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: lighten;
  opacity: 0;
  transition: opacity .35s ease;
}
#approach .pw-liquid.is-dark { mix-blend-mode: darken; }  /* set by the script once the theme fade is over */
#approach .pw-liquid.is-on { opacity: 1; }

/* no WebGL: a still wash of the same blues clipped to the letters */
#approach.pw-liquid-static .word-item {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    radial-gradient(60% 90% at 78% 30%, rgb(26 92 255 / .9), rgb(26 92 255 / 0) 70%),
    radial-gradient(70% 120% at 20% 80%, rgb(18 56 232 / .85), rgb(18 56 232 / 0) 70%),
    linear-gradient(100deg, #040b6a, #0716a0 40%, #0a2bc4 75%, #0716a0);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme=dark] #approach.pw-liquid-static .word-item {
  background-image:
    radial-gradient(60% 90% at 78% 30%, rgb(108 197 225 / .8), rgb(108 197 225 / 0) 70%),
    linear-gradient(100deg, #1238e8, #1a5cff 45%, #3483c7 80%, #1a5cff);
}

/* The template fades the whole section out at its end (opacity on #approach). Opacity below 1
   isolates the section, which leaves the 'lighten' canvas with nothing to blend against: it showed
   as a solid blue block. The section stays at 1 and the same fade (--pw-ao, copied from the
   template's inline opacity by approach-liquid.js) is applied to its content instead, as an opacity
   filter so each word keeps its own active / faint level; the blues then fade with the letters */
#approach { opacity: 1 !important; }
#approach .title-wrap,
#approach .description-wrap,
#approach .word-item { filter: opacity(var(--pw-ao, 1)); }