@import url("tokens.css");

/* ---------- Glow-border overlay ----------
   Pointer-proximity conic-gradient border revealed via mask-composite.
   JS injects two .glow-border divs per card: one sharp, one blurred.
   Variant (light / dark) is driven by --glow-color on the container.       */

/* ----- Variant tokens ----- */

.project-card,
.feed-item,
.writing-link {
  /* Subtle grey halo (lightened ~10% from previous) */
  --glow-color: rgba(197, 197, 196, 0.7);
  --glow-spread: 90;
  --glow-blur: 8;
  --glow-size: 0.5px;
}

.content-block#solution .content-block__image,
[data-glow="dark"] .project-card,
[data-glow="dark"] .feed-item,
[data-glow="dark"] .writing-link {
  --glow-color: rgba(255, 255, 255, 0.6);
}

/* ----- Glow layer (injected by JS) ----- */

.glow-border {
  position: absolute;
  inset: 0;
  /* Match the card’s visible border: outer radius minus the card’s 1px border so the glow aligns with the inner edge of the idle border */
  border-radius: calc(var(--radius-md) - 1px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);

  /* Solid glow color; only the mask reveals where it shows */
  background: var(--glow-color);

  /* Layer 1: hide content area (padding-box) so only the border zone can show */
  /* Layer 2: conic gradient arc — glow visible only in this arc */
  -webkit-mask-image:
    linear-gradient(#0000, #0000),
    conic-gradient(
      from calc((var(--glow-angle, 0) - (var(--glow-spread) * 0.5)) * 1deg),
      #0000 0deg,
      #fff,
      #0000 calc(var(--glow-spread) * 1deg)
    );
  mask-image:
    linear-gradient(#0000, #0000),
    conic-gradient(
      from calc((var(--glow-angle, 0) - (var(--glow-spread) * 0.5)) * 1deg),
      #0000 0deg,
      #fff,
      #0000 calc(var(--glow-spread) * 1deg)
    );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  border: var(--glow-size) solid transparent;
  box-sizing: border-box;
}

.glow-border--blur {
  filter: blur(calc(var(--glow-blur) * 1px));
}

.glow-border.is-visible {
  opacity: 1;
}

/* Disable for reduced-motion or coarse pointers (touch) */
@media (prefers-reduced-motion: reduce) {
  .glow-border { display: none; }
}
@media (pointer: coarse) {
  .glow-border { display: none; }
}