/* ===== RUNNING LIGHT BUNDLE: A LIGHT CIRCLING INSIDE A BOX'S BORDER ===== */
/* DOCS: AI Resources/Core Resources/Code Documentation/page_templates/css/running_light/main.md */

/* ----- THE RING: A 5PX BAND MASKED INSIDE THE BORDER OF A position: relative HOST, STILL BY DEFAULT ----- */
@property --Running_Light_Angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.Running_Light::after { content: ""; position: absolute; inset: 0; z-index: 3; padding: 5px; border-radius: 2px; background: hsl(from var(--Running_Light_Color, var(--Color_Accent_Strong)) h s l / 0.55); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@keyframes Running_Light_Turn { to { --Running_Light_Angle: 360deg; } }

/* ----- MOTION ON: THE LIGHT RUNS CLOCKWISE (AN AMBER HEAD ON LIGHT THEMES, A WHITE HEAD ON DARK ONES) ----- */
@media (prefers-reduced-motion: no-preference)
	{
		.Running_Light::after { background: conic-gradient(from var(--Running_Light_Angle), transparent 0deg var(--Running_Light_Tail_Start, 180deg), hsl(from var(--Running_Light_Color, var(--Color_Accent_Strong)) h s l / var(--Running_Light_Tail_Alpha, 0.4)) var(--Running_Light_Tail_At, 250deg), var(--Running_Light_Color, var(--Color_Accent_Strong)) var(--Running_Light_Body_At, 305deg), var(--Running_Light_Head, #ff9f00) var(--Running_Light_Head_At, 335deg), var(--Running_Light_Tip, #fff4cc) var(--Running_Light_Tip_At, 352deg), transparent 360deg); filter: var(--Running_Light_Glow, drop-shadow(0 0 4px #ff9f00)); animation: Running_Light_Turn 2.4s linear infinite; }
		.Theme_Dark .Running_Light::after { background: conic-gradient(from var(--Running_Light_Angle), transparent 0deg var(--Running_Light_Tail_Start, 180deg), hsl(from var(--Running_Light_Color, var(--Color_Accent_Strong)) h s l / var(--Running_Light_Tail_Alpha, 0.35)) var(--Running_Light_Tail_At, 250deg), var(--Running_Light_Color, var(--Color_Accent_Strong)) var(--Running_Light_Body_At, 315deg), var(--Running_Light_Head, #fff3b0) var(--Running_Light_Head_At, 340deg), var(--Running_Light_Tip, #ffffff) var(--Running_Light_Tip_At, 354deg), transparent 360deg); filter: var(--Running_Light_Glow, drop-shadow(0 0 5px #fff1a8) drop-shadow(0 0 2px #ffffff)); }
	}