/* ==========================================================================
   Xolido — Animated circuit background (canvas layer)
   ========================================================================== */
#xolido-circuit-wrap {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--xolido-light);
}
#xolido-circuit-bg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Sections need a transparent (or intentionally solid) background so the
   fixed circuit canvas can show through where designers want it to. */
body { background: transparent; }

@media (prefers-contrast: more) {
	#xolido-circuit-wrap { opacity: .5; }
}

/* ==========================================================================
   Hero logotype — cyclic yellow "energy" frame
   Runs continuously, independent from cursor/click interaction.
   ========================================================================== */
.xolido-hero__frame {
	position: absolute;
	top: 30px; left: 40px; right: 40px; bottom: 30px;
	width: auto; height: auto;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.xolido-frame-base {
	fill: none;
	stroke: rgba(255, 255, 255, .2);
	stroke-width: 1.5;
}

.xolido-frame-glow {
	fill: none;
	stroke: var(--xolido-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 130 870;
	filter: drop-shadow(0 0 3px var(--xolido-accent)) drop-shadow(0 0 7px rgba(245, 158, 11, .7));
	animation: xolido-frame-run 5s linear infinite;
}
.xolido-frame-glow--b {
	animation-delay: -2.5s;
	opacity: .75;
}

@keyframes xolido-frame-run {
	from { stroke-dashoffset: 1000; }
	to   { stroke-dashoffset: 0; }
}

.xolido-frame-ticks path {
	stroke: rgba(245, 158, 11, .55);
	stroke-width: 1.5;
	fill: none;
}
.xolido-frame-ticks circle {
	fill: var(--xolido-accent);
	filter: drop-shadow(0 0 3px var(--xolido-accent));
	animation: xolido-node-pulse 2.4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}
.xolido-frame-ticks circle:nth-child(4n)  { animation-delay: 0s; }
.xolido-frame-ticks circle:nth-child(4n+1){ animation-delay: .4s; }
.xolido-frame-ticks circle:nth-child(4n+2){ animation-delay: .8s; }
.xolido-frame-ticks circle:nth-child(4n+3){ animation-delay: 1.2s; }

@keyframes xolido-node-pulse {
	0%, 100% { opacity: .5; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.35); }
}

/* ==========================================================================
   Reduced motion: keep a calm, static presentation
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.xolido-frame-glow,
	.xolido-frame-glow--b,
	.xolido-frame-ticks circle {
		animation: none;
	}
	.xolido-frame-glow { stroke-dasharray: none; opacity: .9; }
	.xolido-frame-glow--b { display: none; }
}