/* ==========================================================================
   Divigi — work-beam.css
   Border-beam ring for the Featured Work images.

   Plain-CSS port of the Motiq BorderBeamPanel. No React, no Tailwind, no
   shadcn tokens — the component's --motiq-* palette is replaced by the brand
   colours below, and its Tailwind utilities are written out as real CSS.

   The ring is a conic gradient rotated by one custom property (--wb-a) that
   work-beam.js updates each frame, then cut down to a border with a two-layer
   ALPHA mask and `mask-composite: exclude`. That masking approach is the
   component's own, and it matters: an SVG luminance mask silently no-ops in
   Chromium, so the ring would fill solid instead of showing only its edge.

   Only --wb-a changes per frame, so the card's contents never repaint.
   ========================================================================== */

/* Wrapper that work-beam.js puts around each .thumb.
   It exists because .work-box .thumb has overflow:hidden — needed to clip the
   4:3 image — which would crop the ring and erase the blurred glow entirely.
   The frame sits outside that clip and carries the beam. */
.wb-frame {
	position: relative;
	isolation: isolate;              /* keeps the glow's z-index:-1 local */
	border-radius: 14px;

	/* Comet 1 — brand yellow, head running to a pale gold. */
	--wb-c0: 235, 242, 18;
	--wb-h0: #fff79a;
	--wb-t0: #fffde8;

	/* Comet 2 — the contrast beam. Dark on light backgrounds so it stays
	   visible; flipped to white in dark mode below. */
	--wb-c1: 17, 16, 19;
	--wb-h1: #111013;
	--wb-t1: #3a3a3a;
}

.dark .wb-frame {
	--wb-c1: 255, 255, 255;
	--wb-h1: #ffffff;
	--wb-t1: #ffffff;
}

/* The image keeps its own clipping, just rounded to match the frame. */
.wb-frame .thumb {
	border-radius: inherit;
}

.wb-ring,
.wb-glow {
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	/* Two comets 198deg apart. Each is a ~45deg tail easing into a short bright
	   head, exactly as the component builds them.

	   The tail starts at 4% of its own colour rather than `transparent`:
	   transparent is rgba(0,0,0,0), so a conic ramp through it dips visibly
	   grey. Ramping through a faint tint of the comet's own colour instead
	   keeps the fade clean. */
	background: conic-gradient(from var(--wb-a, 0deg),
		transparent 0deg,
		rgba(var(--wb-c0), .04)  18deg,
		rgba(var(--wb-c0), .55)  46deg,
		var(--wb-h0)             56deg,
		var(--wb-t0)             60deg,
		transparent              63deg,
		transparent             198deg,
		rgba(var(--wb-c1), .04) 216deg,
		rgba(var(--wb-c1), .50) 244deg,
		var(--wb-h1)            254deg,
		var(--wb-t1)            258deg,
		transparent             261deg,
		transparent             360deg);
}

/* Cut the filled gradient down to just the border. Both -webkit- and standard
   properties are needed; Safari still ships the prefixed pair. */
.wb-ring {
	padding: 2px;
	-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: exclude;
}

/* A blurred copy behind the card, read as light cast onto the page. */
.wb-glow {
	filter: blur(14px);
	opacity: .35;
	z-index: -1;
}

/* Reduced motion: the ring is parked at a fixed angle by the script, so it
   stays a lit border instead of disappearing — the styling still reads. */
@media (prefers-reduced-motion: reduce) {
	.wb-glow { opacity: .22; }
}

/* Windows high-contrast mode paints its own borders; a gradient ring there is
   noise at best and invisible at worst. */
@media (forced-colors: active) {
	.wb-ring, .wb-glow { display: none; }
}