/*
  Chrome Shine Text Stroke  (CST)
  ─────────────────────────────────────────────────
  Reveals hidden text by proximity — like discovering a secret
  message etched into a wall. Stroke color NEVER changes; only
  opacity increases near the cursor.

  80px radius — tight enough that visitors must sweep to read,
  creating engagement and discovery. Not a torch, not a flood.

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

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

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

/* ── Base — near-invisible stroke, same color always ── */
.cst {
  --cst-x: -9999px;
  --cst-y: -9999px;
  --cst-stroke: rgba(255, 255, 255, 0);
  --cst-stroke-lit: #ffffff;

  position: relative;
  -webkit-text-stroke: 1px var(--cst-stroke);
  paint-order: stroke fill;
}

/*
  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.
*/
.cst::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;

  /* Fill stays invisible — only stroke is revealed */
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* Same stroke, higher opacity — no color shift */
  -webkit-text-stroke: 1.5px var(--cst-stroke-lit);
  paint-order: stroke fill;

  /*  80px radius — discovery-sized
      Smooth bell-curve falloff, no flat zones  */
  -webkit-mask-image: radial-gradient(
    circle 80px at var(--cst-x) var(--cst-y),
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.92) 18%,
    rgba(0,0,0,0.65) 36%,
    rgba(0,0,0,0.22) 60%,
    rgba(0,0,0,0.08) 80%,
    transparent      100%
  );
  mask-image: radial-gradient(
    circle 80px at var(--cst-x) var(--cst-y),
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.92) 18%,
    rgba(0,0,0,0.65) 36%,
    rgba(0,0,0,0.22) 60%,
    rgba(0,0,0,0.08) 80%,
    transparent      100%
  );

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


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

/* ── Subtle — even fainter base, softer reveal ── */
.cst.cst-subtle {
  --cst-stroke:     rgba(255, 255, 255, 0.03);
  --cst-stroke-lit: rgba(255, 255, 255, 0.35);
}