/* ==========================================================
   Hyperion – Glow Bar widget
   ========================================================== */

.hglow-wrap {
	display: flex;
	width: 100%;
}

.hglow {
	--hglow-c1: var( --e-global-color-primary, #6796ec );
	--hglow-c2: var( --e-global-color-accent, #abc1de );
	--hglow-spark: #ffffff;
	--hglow-length: 100%;
	--hglow-thickness: 3px;
	--hglow-blur: 14px;
	--hglow-speed: 2.4s;

	position: relative;
	border-radius: 999px;
	background: linear-gradient( var( --hglow-angle, 90deg ), var( --hglow-c1 ), var( --hglow-c2 ) );
	box-shadow:
		0 0 var( --hglow-blur ) var( --hglow-c1 ),
		0 0 calc( var( --hglow-blur ) * 2 ) var( --hglow-c2 ),
		0 0 calc( var( --hglow-blur ) * 3.5 ) rgba( 255, 255, 255, 0.15 );
	overflow: hidden;
	isolation: isolate;
}

.hglow--horizontal {
	--hglow-angle: 90deg;
	width: var( --hglow-length );
	height: var( --hglow-thickness );
}

.hglow--vertical {
	--hglow-angle: 180deg;
	width: var( --hglow-thickness );
	height: var( --hglow-length );
}

/* ---------- Άλως: θολό φως πίσω από τη μπάρα ---------- */

.hglow--halo::before {
	content: '';
	position: absolute;
	z-index: -1;
	border-radius: inherit;
	background: inherit;
	filter: blur( calc( var( --hglow-blur ) * 0.8 ) );
	opacity: 0.75;
}

.hglow--halo.hglow--horizontal::before {
	inset: -140% -2% ;
}

.hglow--halo.hglow--vertical::before {
	inset: -2% -140%;
}

/* ==========================================================
   FX: SCAN — φωτεινή σπίθα τρέχει πάνω στη μπάρα
   ========================================================== */

.hglow--fx-scan::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		var( --hglow-angle ),
		transparent 0%,
		rgba( 255, 255, 255, 0 ) 35%,
		var( --hglow-spark ) 50%,
		rgba( 255, 255, 255, 0 ) 65%,
		transparent 100%
	);
	animation: hglow-scan var( --hglow-speed ) cubic-bezier( 0.65, 0, 0.35, 1 ) infinite;
}

.hglow--fx-scan.hglow--horizontal::after {
	animation-name: hglow-scan-x;
}

.hglow--fx-scan.hglow--vertical::after {
	animation-name: hglow-scan-y;
}

@keyframes hglow-scan-x {
	0%   { transform: translateX( -100% ); }
	60%  { transform: translateX( 100% ); }
	100% { transform: translateX( 100% ); }
}

@keyframes hglow-scan-y {
	0%   { transform: translateY( -100% ); }
	60%  { transform: translateY( 100% ); }
	100% { transform: translateY( 100% ); }
}

/* ==========================================================
   FX: FLOW — το gradient κυλάει συνεχώς
   ========================================================== */

.hglow--fx-flow {
	background: linear-gradient(
		var( --hglow-angle ),
		var( --hglow-c1 ),
		var( --hglow-c2 ),
		var( --hglow-spark ),
		var( --hglow-c2 ),
		var( --hglow-c1 )
	);
	background-size: 300% 300%;
	animation: hglow-flow var( --hglow-speed ) linear infinite;
}

@keyframes hglow-flow {
	0%   { background-position: 0% 50%; }
	100% { background-position: 300% 50%; }
}

/* ==========================================================
   FX: PULSE — αναπνοή λάμψης + ελαφρύ scale
   ========================================================== */

.hglow--fx-pulse {
	animation: hglow-pulse var( --hglow-speed ) ease-in-out infinite;
}

@keyframes hglow-pulse {
	0%, 100% {
		opacity: 1;
		box-shadow:
			0 0 var( --hglow-blur ) var( --hglow-c1 ),
			0 0 calc( var( --hglow-blur ) * 2 ) var( --hglow-c2 );
	}
	50% {
		opacity: 0.55;
		box-shadow:
			0 0 calc( var( --hglow-blur ) * 2.2 ) var( --hglow-c1 ),
			0 0 calc( var( --hglow-blur ) * 4 ) var( --hglow-c2 );
	}
}

/* ==========================================================
   FX: FLICKER — ακανόνιστο τρεμόπαιγμα νέον
   ========================================================== */

.hglow--fx-flicker {
	animation: hglow-flicker var( --hglow-speed ) steps( 1, end ) infinite;
}

@keyframes hglow-flicker {
	0%, 100%          { opacity: 1; filter: brightness( 1 ); }
	3%                { opacity: 0.35; filter: brightness( 0.6 ); }
	6%                { opacity: 1; filter: brightness( 1.5 ); }
	9%                { opacity: 0.5; }
	12%               { opacity: 1; }
	42%               { opacity: 1; }
	45%               { opacity: 0.25; filter: brightness( 0.4 ); }
	47%               { opacity: 1; filter: brightness( 1.7 ); }
	50%               { opacity: 0.7; }
	52%, 99%          { opacity: 1; filter: brightness( 1 ); }
}

/* ==========================================================
   FX: CHARGE — γεμίζει σαν μπάρα φόρτισης
   ========================================================== */

.hglow--fx-charge {
	background: rgba( 255, 255, 255, 0.08 );
	box-shadow: none;
}

.hglow--fx-charge::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient( var( --hglow-angle ), var( --hglow-c1 ), var( --hglow-c2 ), var( --hglow-spark ) );
	box-shadow:
		0 0 var( --hglow-blur ) var( --hglow-c1 ),
		0 0 calc( var( --hglow-blur ) * 2 ) var( --hglow-c2 );
	transform-origin: left center;
	animation: hglow-charge var( --hglow-speed ) cubic-bezier( 0.65, 0, 0.35, 1 ) infinite;
}

.hglow--fx-charge.hglow--vertical::after {
	transform-origin: center top;
	animation-name: hglow-charge-y;
}

@keyframes hglow-charge {
	0%        { transform: scaleX( 0 ); opacity: 1; }
	70%       { transform: scaleX( 1 ); opacity: 1; }
	90%, 100% { transform: scaleX( 1 ); opacity: 0; }
}

@keyframes hglow-charge-y {
	0%        { transform: scaleY( 0 ); opacity: 1; }
	70%       { transform: scaleY( 1 ); opacity: 1; }
	90%, 100% { transform: scaleY( 1 ); opacity: 0; }
}

/* ==========================================================
   Προσβασιμότητα
   ========================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.hglow,
	.hglow::after {
		animation: none !important;
	}
}