/*
  Chrome Shine Text  (CSX)
  ─────────────────────────────────────────────────
  Reveals hidden text by proximity — same behavior as CST
  but shines the text fill instead of the stroke.
  No stroke involved. Only text color opacity changes near cursor.

  80px radius — tight enough that visitors must sweep to read,
  creating engagement and discovery.

  Works through any z-index / stacking layer (document-level tracking).
  JS sets --csx-x / --csx-y (mouse pos relative to element).

  Requires:
    - data-text="..." attribute matching inner text  (auto-set by JS)
    - script.js CSX tracking block

  Usage:
    <h1 class="csx" data-text="Hello">Hello</h1>
    <p class="csx csx-blue" data-text="...">...</p>
*/

/* ── Base — near-invisible text, same color always ── */
.csx {
  --csx-x: -9999px;
  --csx-y: -9999px;
  --csx-text: rgba(255, 255, 255, 0);
  --csx-text-lit: rgba(255, 255, 255, 0.6);

  position: relative;
  color: var(--csx-text);
  -webkit-text-stroke: 0;
}

/*
  Reveal layer — same text, same color, higher opacity.
  Masked to an 80px radius so only the area near the cursor is visible.
  Smooth falloff: peak at center → 0 at edge, every pixel fades.
*/
.csx::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;

  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  white-space: inherit;
  word-spacing: inherit;
  text-align: inherit;

  /* Text fill — higher opacity, no stroke */
  color: var(--csx-text-lit);
  -webkit-text-fill-color: var(--csx-text-lit);
  -webkit-text-stroke: 0;

  /*  80px radius — discovery-sized
      Smooth bell-curve falloff, no flat zones  */
  -webkit-mask-image: radial-gradient(
    circle 80px at var(--csx-x) var(--csx-y),
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.72) 20%,
    rgba(0,0,0,0.38) 45%,
    rgba(0,0,0,0.14) 70%,
    rgba(0,0,0,0.03) 90%,
    transparent      100%
  );
  mask-image: radial-gradient(
    circle 80px at var(--csx-x) var(--csx-y),
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.72) 20%,
    rgba(0,0,0,0.38) 45%,
    rgba(0,0,0,0.14) 70%,
    rgba(0,0,0,0.03) 90%,
    transparent      100%
  );

  pointer-events: none;
  z-index: 1;
}


/* ── Color variants — same hue, opacity only ── */
.csx.csx-blue {
  --csx-text:     rgba(0, 212, 255, 0);
  --csx-text-lit: rgba(0, 212, 255, 0.6);
}
.csx.csx-purple {
  --csx-text:     rgba(168, 85, 247, 0);
  --csx-text-lit: rgba(168, 85, 247, 0.6);
}
.csx.csx-cyan {
  --csx-text:     rgba(6, 249, 212, 0);
  --csx-text-lit: rgba(6, 249, 212, 0.6);
}
.csx.csx-pink {
  --csx-text:     rgba(244, 114, 182, 0);
  --csx-text-lit: rgba(244, 114, 182, 0.6);
}

/* ── Subtle — softer reveal ── */
.csx.csx-subtle {
  --csx-text:     rgba(255, 255, 255, 0);
  --csx-text-lit: rgba(255, 255, 255, 0.35);
}


/* ══════════════════════════════════════════════
   SVG support — mask applied directly on element,
   no ::before needed. Same proximity reveal.

   Usage:
     <svg class="csx" ...>...</svg>
     <svg class="csx csx-blue" ...>...</svg>
   ══════════════════════════════════════════════ */
svg.csx {
  color: var(--csx-text-lit);
  fill: var(--csx-text-lit);

  -webkit-mask-image: radial-gradient(
    circle 80px at var(--csx-x) var(--csx-y),
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.72) 20%,
    rgba(0,0,0,0.38) 45%,
    rgba(0,0,0,0.14) 70%,
    rgba(0,0,0,0.03) 90%,
    transparent      100%
  );
  mask-image: radial-gradient(
    circle 80px at var(--csx-x) var(--csx-y),
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.72) 20%,
    rgba(0,0,0,0.38) 45%,
    rgba(0,0,0,0.14) 70%,
    rgba(0,0,0,0.03) 90%,
    transparent      100%
  );
}

/* No pseudo layer for SVGs */
svg.csx::before {
  display: none;
}