/* BorderGlow — vanilla port of the React Bits component, retuned to ICKSP
 * liturgical colours (gold, sage, burgundy) instead of the original rainbow.
 * Pointer-tracking JS sets --cursor-x/y/angle and --glow-opacity; CSS does
 * a conic-gradient border ring + a soft radial glow halo behind the card.
 *
 * Scoped under .world-card.border-glow so it doesn't leak.
 */
.world-card.border-glow {
  --cursor-x: 50%;
  --cursor-y: 50%;
  --cursor-angle: 0deg;
  --glow-opacity: 0;
  position: relative;
  isolation: isolate;
}

/* Conic-gradient ring — rotates with the cursor angle */
.world-card.border-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--cursor-angle),
    transparent 0%,
    hsl(45, 80%, 55%) 8%,
    hsl(85, 22%, 60%) 22%,
    hsl(355, 50%, 50%) 38%,
    hsl(45, 80%, 55%) 60%,
    transparent 80%,
    transparent 100%
  );
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
  opacity: var(--glow-opacity);
  transition: opacity 0.45s ease;
  pointer-events: none;
}

/* Soft outer glow that follows the cursor position */
.world-card.border-glow::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(
    circle 140px at var(--cursor-x) var(--cursor-y),
    hsla(45, 80%, 55%, 0.35) 0%,
    transparent 65%
  );
  z-index: -2;
  opacity: var(--glow-opacity);
  pointer-events: none;
  filter: blur(20px);
  transition: opacity 0.45s ease;
}

/* Replace the icon-circle with a flag display */
.world-card.border-glow .world-card-icon {
  background: transparent;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  padding: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-md);
}
.world-card.border-glow {
  text-align: center;
}
.world-card.border-glow h3 {
  text-align: center;
  margin: 0 auto;
}
.world-flag {
  display: block;
  width: 38px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  outline: 1px solid rgba(201,162,39,.25);
}
@media (max-width: 600px) {
  .world-flag { width: 32px; }
}

/* Card body fades to ~50% opacity (background + border + shadow only;
   text + flag stay at 100%). Keeps the cards present-but-quiet so the
   border-glow ring is the focal point on hover. */
.world-card.border-glow {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(45, 34, 24, 0.05);
}