/* ============================================================================
 * MASK-COMPOSITE BORDER-RING DECLARATIONS — DO NOT MOVE TO src/
 * ============================================================================
 *
 * This file lives in public/ on purpose. Files under public/ are copied to
 * the build output verbatim — Vite never parses them, and the @tailwindcss/vite
 * plugin (which routes every src/ CSS file through Lightning CSS) never sees
 * them. That insulation is the whole point.
 *
 * Background: three places in src/ use the standard two-layer mask + subtract
 * trick to clip a conic/radial gradient to just the border ring of a card:
 *   - .bento-cell::after                            (marketing hero tiles)
 *   - .card-border-glow::after                      (universal card glow)
 *   - .portfolio-treemap-card--border-glow::after   (treemap tiles)
 *
 * The mask-composite property was already known to be fragile under
 * Tailwind/Lightning CSS minification — the source CSS files have header
 * comments saying "Kept in a separate file because Tailwind/Lightning CSS
 * strips mask-composite in production builds." On 2026-05-11 the Sprint 16
 * Dependabot triage bumped Vite to 8.0.12 + @tailwindcss/vite to 4.3.0, which
 * brought in lightningcss@1.32.0. That version strips both `mask-composite`
 * AND the `-webkit-mask` shorthand entirely — even from files kept outside
 * the Tailwind import chain — because @tailwindcss/vite v4 processes the
 * full CSS bundle, not just its own output. The result: the ring mask becomes
 * a full-coverage mask (composite defaults to `add`), so the conic gradient
 * bleeds across the entire card. Animation still plays, just unmasked.
 *
 * Putting the mask declarations in public/ side-loaded via index.html is the
 * only known build-pipeline-resistant fix. If you ever decide to remove this
 * file, you must verify (in a production build, NOT dev) that mask-composite
 * survives in the bundled CSS — check the computed style of .bento-cell::after
 * on the marketing hero. See the source files for the rest of each rule.
 *
 * ============================================================================ */

.bento-cell::after,
.card-border-glow::after,
.portfolio-treemap-card--border-glow::after {
  /* Legacy WebKit first (pre-Safari 15.4) so modern wins the cascade.
   * In modern Chrome, `-webkit-mask-composite` aliases to the standard
   * `mask-composite`, so order matters: whichever is declared last wins.
   * `xor` is the legacy Porter-Duff name; `subtract` is the modern spec. */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: subtract;
}
