/* Styles for bits.js — the React Bits effects. Nothing here applies until the
   script has marked an element up, so a page without it looks as it always did. */

/* ---------- DecryptedText: the mono labels ---------- */

/* The labels are set in DM Mono, where every character is the same width, so
   the noise never moves the line. Unresolved characters sit back a little. */
.decrypt-pending { opacity: .5; }

/* styles.css draws the label's red rule as `.eyebrow > span`, and the quote
   band turns `.quote .eyebrow span` white, so the text's own spans have to be
   told they are text. Qualified with the element to outrank both. */
.eyebrow span.decrypt,
.eyebrow span.decrypt-pending {
  display: inline;
  width: auto;
  height: auto;
  background: none;
}

/* ---------- SpotlightCard ---------- */

/* Red light on paper; white light on the dark cards, with the rim red on both. */
.spotlight {
  position: relative;
  isolation: isolate;
  --spot-fill-color: var(--red);
  --spot-fill: .07;
  --spot-edge-color: var(--red);
  --spot-edge: .85;
}

.dark .spotlight,
.dark-block .spotlight,
.portal-grid article + article.spotlight {
  --spot-fill-color: #fff;
  --spot-fill: .075;
}

.spotlight::before,
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* The falloff is React Bits' own curve at its default softness of 0.7: a flat
   core, then a smoothstep blended with a gaussian glow, so the light has no
   visible edge. Computed once and written out rather than built per card. */
.spotlight::before {
  z-index: -1;
  opacity: calc(var(--spot-on, 0) * var(--spot-fill));
  background: radial-gradient(
    circle 260px at var(--spot-x, 50%) var(--spot-y, 50%),
    color-mix(in srgb, var(--spot-fill-color) 100%, transparent) 0%,
    color-mix(in srgb, var(--spot-fill-color) 100%, transparent) 14%,
    color-mix(in srgb, var(--spot-fill-color) 92.1%, transparent) 26.3%,
    color-mix(in srgb, var(--spot-fill-color) 72.1%, transparent) 38.5%,
    color-mix(in srgb, var(--spot-fill-color) 48.1%, transparent) 50.8%,
    color-mix(in srgb, var(--spot-fill-color) 26.9%, transparent) 63.1%,
    color-mix(in srgb, var(--spot-fill-color) 11.8%, transparent) 75.4%,
    color-mix(in srgb, var(--spot-fill-color) 3.1%, transparent) 87.7%,
    transparent 100%
  );
}

/* The rim: the same light, smaller, through a one-pixel ring. It also wakes
   when the pointer is near a card, so a grid's shared lines light up ahead of it. */
.spotlight::after {
  z-index: 1;
  padding: 1px;
  opacity: calc(var(--spot-on, 0) * var(--spot-edge));
  background: radial-gradient(
    circle 156px at var(--spot-x, 50%) var(--spot-y, 50%),
    color-mix(in srgb, var(--spot-edge-color) 100%, transparent) 0%,
    color-mix(in srgb, var(--spot-edge-color) 91%, transparent) 14.3%,
    color-mix(in srgb, var(--spot-edge-color) 68.7%, transparent) 28.6%,
    color-mix(in srgb, var(--spot-edge-color) 42.7%, transparent) 42.9%,
    color-mix(in srgb, var(--spot-edge-color) 21.5%, transparent) 57.1%,
    color-mix(in srgb, var(--spot-edge-color) 8.3%, transparent) 71.4%,
    color-mix(in srgb, var(--spot-edge-color) 2.1%, transparent) 85.7%,
    transparent 100%
  );
  -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);
}