/* Spyral — Premium ring & Staff badges (header + news comments, desktop + mobile) */



/* ===== WoW canvas aura (premium avatars) ===== */

.spyral-wow-aura-host {
	position: relative;
	overflow: visible !important;
	display: inline-block;
	width: fit-content;
	height: fit-content;
	line-height: 0;
	vertical-align: middle;
}

.spyral-wow-aura-frame {
	position: relative;
	display: block;
	line-height: 0;
	box-sizing: border-box;
	overflow: visible;
}

.spyral-wow-aura-frame--circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
}

.spyral-wow-aura-frame--square {
	overflow: visible;
}

.spyral-wow-aura-frame--circle > img:not(.avatar-staff-badge):not(.spyral-comment-staff-badge):not(.spyral-header-avatar-badge) {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: none;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 2;
}

.spyral-comment-avatar--premium .spyral-wow-aura-frame--circle {
	border: 2px solid rgba(244, 191, 74, 0.8);
	box-shadow: 0 0 6px rgba(72, 220, 90, 0.35);
}

.spyral-comment-avatar--staff.spyral-comment-avatar--premium .spyral-wow-aura-frame--circle {
	border-color: #5aafff;
}

.spyral-wow-aura-frame--square > img:not(.avatar-staff-badge):not(.spyral-comment-staff-badge):not(.spyral-header-avatar-badge) {
	display: block;
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mobile-drawer-avatar {
	width: 44px;
	height: 44px;
	border-radius: 6px;
}

.mobile-topbar-avatar.spyral-wow-aura-host .spyral-wow-aura-frame--square {
	width: 32px;
	height: 32px;
	border-radius: 4px;
}

.avatar_top.spyral-wow-aura-host .spyral-wow-aura-frame--square {
	width: 39px;
	height: 39px;
	border-radius: 3px;
}

.spyral-wow-aura-frame > .spyral-wow-aura-canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 3;
}

.spyral-comment-avatar.spyral-wow-aura-host {
	flex-shrink: 0;
}

.spyral-wow-aura-host.spyral-header-avatar--premium::before,
.spyral-wow-aura-host.spyral-header-avatar--premium::after,
.spyral-wow-aura-host .spyral-fel-flame,
.spyral-wow-aura-host .spyral-fel-arc,
.spyral-wow-aura-host .spyral-fel-smoke {
	display: none !important;
}

.spyral-wow-aura-host.spyral-header-avatar--premium > img:first-child:not(.avatar-staff-badge),
.spyral-wow-aura-host.spyral-comment-avatar--premium > img:not(.spyral-comment-staff-badge),
.spyral-wow-aura-host.avatar-frame--premium .profile-pic {
	animation: none !important;
	box-shadow: none !important;
}

.avatar-frame--premium.spyral-wow-aura-host {
	animation: none;
	border-color: rgba(244, 191, 74, 0.85);
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.45);
}



/* ===== Premium sparkling lightning ring ===== */

.spyral-premium-ring {

	position: absolute;

	inset: -4px;

	z-index: 2;

	pointer-events: none;

	border-radius: 50%;

}

.spyral-premium-ring::before {

	content: "";

	position: absolute;

	inset: 0;

	border-radius: inherit;

	border: 2px solid rgba(255, 210, 80, 0.5);

	box-shadow:

		0 0 4px rgba(255, 196, 55, 0.6),

		0 0 12px rgba(255, 170, 30, 0.35),

		inset 0 0 8px rgba(255, 220, 100, 0.15);

	animation: spyral-ring-flicker 1.15s ease-in-out infinite;

}

.spyral-premium-ring::after {

	content: "";

	position: absolute;

	inset: -1px;

	border-radius: inherit;

	padding: 2px;

	background: conic-gradient(

		from 0deg,

		transparent 0deg,

		rgba(255, 253, 224, 0.95) 10deg,

		transparent 22deg,

		rgba(255, 204, 34, 0.9) 34deg,

		transparent 48deg,

		rgba(255, 248, 200, 0.85) 62deg,

		transparent 76deg,

		rgba(255, 220, 80, 0.8) 88deg,

		transparent 102deg,

		rgba(255, 253, 224, 0.9) 116deg,

		transparent 130deg,

		rgba(255, 196, 55, 0.95) 144deg,

		transparent 158deg,

		rgba(255, 240, 160, 0.85) 172deg,

		transparent 186deg,

		rgba(255, 204, 34, 0.9) 200deg,

		transparent 214deg,

		rgba(255, 253, 224, 0.8) 228deg,

		transparent 242deg,

		rgba(255, 220, 80, 0.85) 256deg,

		transparent 270deg,

		rgba(255, 248, 200, 0.9) 284deg,

		transparent 298deg,

		rgba(255, 196, 55, 0.85) 312deg,

		transparent 326deg,

		rgba(255, 253, 224, 0.75) 340deg,

		transparent 360deg

	);

	-webkit-mask:

		linear-gradient(#000 0 0) content-box,

		linear-gradient(#000 0 0);

	-webkit-mask-composite: xor;

	mask:

		linear-gradient(#000 0 0) content-box,

		linear-gradient(#000 0 0);

	mask-composite: exclude;

	animation:

		spyral-premium-ring-spin 2.2s linear infinite,

		spyral-ring-flicker 0.9s ease-in-out infinite alternate;

}



@keyframes spyral-premium-ring-spin {

	to { transform: rotate(360deg); }

}



@keyframes spyral-ring-flicker {

	0%, 100% { opacity: 0.5; filter: brightness(0.88); }

	15% { opacity: 1; filter: brightness(1.4); }

	35% { opacity: 0.62; filter: brightness(1); }

	55% { opacity: 1; filter: brightness(1.3); }

	75% { opacity: 0.7; filter: brightness(1.05); }

}



/* ===== Fel electric arc (circular avatars — news comments) ===== */

.spyral-fel-arc {
	position: absolute;
	inset: -5px;
	z-index: 3;
	pointer-events: none;
	border-radius: 50%;
}

.spyral-fel-arc::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid rgba(72, 220, 90, 0.45);
	box-shadow:
		0 0 5px rgba(72, 220, 90, 0.75),
		0 0 14px rgba(50, 190, 65, 0.45),
		inset 0 0 8px rgba(72, 220, 90, 0.12);
	animation: spyral-fel-arc-flicker 0.85s ease-in-out infinite;
}

.spyral-fel-arc::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		rgba(190, 255, 190, 0.98) 8deg,
		transparent 18deg,
		rgba(95, 235, 105, 0.95) 28deg,
		transparent 42deg,
		rgba(160, 255, 160, 0.92) 54deg,
		transparent 68deg,
		rgba(80, 220, 90, 0.96) 80deg,
		transparent 94deg,
		rgba(200, 255, 200, 0.94) 108deg,
		transparent 122deg,
		rgba(110, 240, 115, 0.97) 136deg,
		transparent 150deg,
		rgba(170, 255, 170, 0.9) 164deg,
		transparent 178deg,
		rgba(88, 228, 98, 0.95) 192deg,
		transparent 206deg,
		rgba(185, 255, 180, 0.93) 220deg,
		transparent 234deg,
		rgba(100, 235, 105, 0.96) 248deg,
		transparent 262deg,
		rgba(155, 255, 150, 0.91) 276deg,
		transparent 290deg,
		rgba(75, 215, 85, 0.94) 304deg,
		transparent 318deg,
		rgba(175, 255, 175, 0.88) 332deg,
		transparent 346deg,
		transparent 360deg
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation:
		spyral-fel-arc-spin 1.8s linear infinite,
		spyral-fel-arc-flicker 0.75s ease-in-out infinite alternate;
}

@keyframes spyral-fel-arc-spin {
	to { transform: rotate(360deg); }
}

@keyframes spyral-fel-arc-flicker {
	0%, 100% {
		opacity: 0.55;
		filter: brightness(0.9);
	}
	20% {
		opacity: 1;
		filter: brightness(1.45);
	}
	45% {
		opacity: 0.65;
		filter: brightness(1.05);
	}
	70% {
		opacity: 0.95;
		filter: brightness(1.35);
	}
}



/* ===== Shared staff badge ===== */

.spyral-staff-badge,

.spyral-header-avatar-badge,

.avatar-staff-badge,

.spyral-comment-staff-badge {

	position: absolute;

	right: 0;

	bottom: 0;

	transform: translate(45%, 45%);

	z-index: 4;

	display: block;

	object-fit: contain;

	border: none !important;

	box-shadow: 0 0 4px rgba(0, 0, 0, 0.95);

	border-radius: 2px;

	background: rgba(10, 16, 20, 0.95);

	padding: 0;

	top: auto;

	left: auto;

}



/* ===== Header avatars (mobile drawer + topbar) ===== */

.spyral-header-avatar {

	position: relative;

	flex-shrink: 0;

	overflow: visible;

}

/* Header premium: frame on image + smoke below (single aligned layer) */
.spyral-header-avatar--premium::before {
	display: none;
}

.spyral-header-avatar--premium > img:first-child:not(.avatar-staff-badge),
.spyral-header-avatar--premium .mobile-drawer-avatar,
.mobile-topbar-avatar.spyral-header-avatar--premium > img:first-child {
	position: relative;
	z-index: 2;
	display: block;
	border-radius: 4px;
	box-shadow:
		0 0 0 2px rgba(244, 191, 74, 0.92),
		0 0 7px rgba(72, 220, 90, 0.72),
		0 0 12px rgba(50, 190, 65, 0.42) !important;
	animation: spyral-header-fel-border-pulse-img 2.2s ease-in-out infinite;
}

.spyral-header-avatar--premium:not(.avatar_top) {
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
}

.spyral-header-avatar--premium .mobile-drawer-avatar {
	width: 44px;
	height: 44px;
	border-radius: 6px;
}

.spyral-header-avatar--staff.spyral-header-avatar--premium .mobile-drawer-avatar,
.spyral-header-avatar--staff.spyral-header-avatar--premium > img:first-child:not(.avatar-staff-badge),
.mobile-topbar-avatar.spyral-header-avatar--staff.spyral-header-avatar--premium > img:first-child {
	animation: none;
	box-shadow:
		0 0 0 2px #5aafff,
		0 0 8px rgba(72, 220, 90, 0.45) !important;
}

@keyframes spyral-header-fel-border-pulse-img {
	0%, 100% {
		box-shadow:
			0 0 0 2px rgba(244, 191, 74, 0.82),
			0 0 5px rgba(72, 220, 90, 0.55),
			0 0 9px rgba(50, 190, 65, 0.32);
	}
	50% {
		box-shadow:
			0 0 0 2px rgba(255, 210, 90, 1),
			0 0 10px rgba(72, 220, 90, 0.85),
			0 0 16px rgba(50, 190, 65, 0.52);
	}
}

.spyral-header-avatar--premium::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 10px;
	z-index: 1;
	pointer-events: none;
	opacity: 0.45;
	background:
		radial-gradient(ellipse 60% 100% at 50% 0%, rgba(90, 240, 100, 0.65), transparent 70%);
	filter: blur(3px);
	animation: spyral-header-fel-smoke 2.8s ease-in-out infinite;
}

@keyframes spyral-header-fel-smoke {
	0%, 100% {
		opacity: 0.5;
		transform: translateY(2px) scaleX(0.92);
	}
	50% {
		opacity: 1;
		transform: translateY(-4px) scaleX(1.06);
	}
}



.spyral-header-avatar--staff .mobile-drawer-avatar,

.mobile-topbar-avatar.spyral-header-avatar--staff > img:first-child {

	box-shadow:

		0 0 0 2px #5aafff,

		0 0 10px rgba(90, 175, 255, 0.35),

		inset 0 0 0 1px rgba(255, 255, 255, 0.1);

}

.spyral-header-avatar-badge {

	width: 14px;

	height: 14px;

}



/* Desktop header avatar_top */
.avatar_top.spyral-header-avatar--premium {
	overflow: visible;
	margin: 5px 10px 2px 5px;
	box-shadow: none;
	filter: none;
	width: 39px;
	height: 39px;
}

.avatar_top.spyral-header-avatar--premium::after {
	bottom: -6px;
	height: 9px;
}

/* Fel flame above premium frame */
.spyral-fel-flame {
	position: absolute;
	top: -13px;
	left: 0;
	right: 0;
	height: 16px;
	z-index: 3;
	pointer-events: none;
	overflow: visible;
}

.spyral-fel-flame__tongue {
	position: absolute;
	bottom: 0;
	height: 100%;
	border-radius: 50% 50% 12% 12%;
	filter: blur(1.5px);
	transform-origin: bottom center;
}

.spyral-fel-flame__tongue--1 {
	left: 4%;
	width: 26%;
	background: radial-gradient(ellipse at 50% 100%, rgba(170, 255, 160, 0.98) 0%, rgba(95, 235, 105, 0.65) 42%, transparent 72%);
	animation: spyral-fel-flame-flicker 0.7s ease-in-out infinite alternate;
	animation-delay: 0s;
}

.spyral-fel-flame__tongue--2 {
	left: 26%;
	width: 22%;
	background: radial-gradient(ellipse at 50% 100%, rgba(140, 255, 140, 0.95) 0%, rgba(80, 220, 90, 0.6) 40%, transparent 70%);
	animation: spyral-fel-flame-flicker 0.85s ease-in-out infinite alternate-reverse;
	animation-delay: 0.15s;
}

.spyral-fel-flame__tongue--3 {
	left: 50%;
	width: 24%;
	background: radial-gradient(ellipse at 50% 100%, rgba(185, 255, 175, 1) 0%, rgba(100, 240, 110, 0.7) 44%, transparent 74%);
	animation: spyral-fel-flame-flicker 0.65s ease-in-out infinite alternate;
	animation-delay: 0.08s;
}

.spyral-fel-flame__tongue--4 {
	right: 4%;
	width: 26%;
	background: radial-gradient(ellipse at 50% 100%, rgba(155, 255, 145, 0.96) 0%, rgba(88, 228, 98, 0.62) 41%, transparent 71%);
	animation: spyral-fel-flame-flicker 0.78s ease-in-out infinite alternate-reverse;
	animation-delay: 0.22s;
}

@keyframes spyral-fel-flame-flicker {
	0% {
		transform: scaleY(0.82) scaleX(0.94);
		opacity: 0.7;
	}
	100% {
		transform: scaleY(1.15) scaleX(1.06);
		opacity: 1;
	}
}

.spyral-header-avatar--premium .spyral-fel-flame {
	top: -11px;
	height: 13px;
}

.avatar_top.spyral-header-avatar--premium .spyral-fel-flame {
	top: -10px;
	height: 12px;
}

.mobile-topbar-avatar.spyral-header-avatar--premium .spyral-fel-flame {
	top: -9px;
	height: 10px;
}

.mobile-topbar-avatar.spyral-header-avatar--premium .spyral-fel-flame__tongue {
	filter: blur(1px);
}

.avatar_top.spyral-header-avatar--staff > img:first-child:not(.avatar-staff-badge) {
	box-shadow: 0 0 0 2px #5aafff;
}

.avatar_top.spyral-header-avatar--premium > img:first-child:not(.avatar-staff-badge) {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 39px;
	height: 39px;
	border-radius: 3px;
	box-shadow:
		0 0 0 2px rgba(244, 191, 74, 0.92),
		0 0 7px rgba(72, 220, 90, 0.72),
		0 0 12px rgba(50, 190, 65, 0.42) !important;
	animation: spyral-header-fel-border-pulse-img 2.2s ease-in-out infinite;
}

.avatar_top.spyral-header-avatar--staff.spyral-header-avatar--premium > img:first-child:not(.avatar-staff-badge) {
	animation: none;
	box-shadow:
		0 0 0 2px #5aafff,
		0 0 8px rgba(72, 220, 90, 0.45);
}

.avatar_top.spyral-header-avatar--premium .avatar_top-frame {
	display: none;
}

.avatar_top.spyral-header-avatar--staff .avatar_top-frame {

	box-shadow: none;

}



.mobile-topbar-avatar.spyral-header-avatar--premium::after {
	bottom: -8px;
	height: 12px;
}

.mobile-topbar-avatar.spyral-header-avatar {

	width: 32px;

	height: 32px;

	border-radius: 4px;

	margin-right: 4px;

}

.mobile-topbar-avatar .spyral-header-avatar-badge {

	width: 12px;

	height: 12px;

	transform: translate(40%, 40%);

}

.mobile-topbar-avatar > img:first-child {

	display: block;

	width: 32px;

	height: 32px;

	border-radius: 4px;

}



/* Mobile drawer (44px) */

.spyral-header-avatar .mobile-drawer-avatar {

	width: 44px;

	height: 44px;

	border-radius: 6px;

	box-shadow: 0 0 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);

}



/* ===== News comments ===== */

.spyral-comment-avatar {

	overflow: visible;

}

.spyral-comment-avatar--staff > img:not(.spyral-comment-staff-badge) {

	border-color: #5aafff;

	box-shadow: 0 0 8px rgba(90, 175, 255, 0.35);

}

.spyral-comment-staff-badge {

	width: 13px !important;

	height: 13px !important;

}



/* Desktop: don't clip premium ring in header or comments */

@media screen and (min-width: 769px) {

	.login_box_top,

	.actions_cont .account_info {

		overflow: visible;

	}

	.spyral-comment,

	.spyral-comment-avatar {

		overflow: visible;

	}

	#wrapper #right article.news_row .comments,

	#wrapper #right article.news_row .comments .spyral-comment {

		overflow: visible !important;

	}

}



@media (prefers-reduced-motion: reduce) {

	.spyral-premium-ring::before,

	.spyral-premium-ring::after,

	.spyral-fel-arc::before,

	.spyral-fel-arc::after {

		animation: none;

	}

	.spyral-premium-ring::before {

		opacity: 0.85;

	}

	.spyral-premium-ring::after {

		opacity: 0.75;

		transform: rotate(45deg);

	}

	.spyral-fel-arc::before {

		opacity: 0.85;

	}

	.spyral-fel-arc::after {

		opacity: 0.75;

		transform: rotate(45deg);

	}

}



@media screen and (max-width: 768px) {

	.spyral-comment {

		overflow: visible;

	}

	.spyral-comment-avatar {

		overflow: visible;

		margin: 4px 6px 4px 0;

	}

	#wrapper #right article.news_row .comments,

	#wrapper #right article.news_row .comments .spyral-comment {

		overflow: visible !important;

	}

	.mobile-drawer-header,

	.mobile-drawer-user,

	.mobile-topbar {

		overflow: visible;

	}

}



/* ===== Fel smoke (TBC premium aura) ===== */

.spyral-fel-smoke {
	position: absolute;
	inset: -14px;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

.spyral-fel-smoke__glow {
	position: absolute;
	inset: -4px;
	border-radius: inherit;
	background: radial-gradient(
		ellipse at 50% 100%,
		rgba(72, 220, 90, 0.35) 0%,
		rgba(40, 140, 55, 0.15) 45%,
		transparent 72%
	);
	animation: spyral-fel-glow-pulse 2.8s ease-in-out infinite;
}

.spyral-fel-smoke__wisp {
	position: absolute;
	border-radius: 50%;
	filter: blur(6px);
	opacity: 0;
	animation: spyral-fel-wisp-rise 3.2s ease-in-out infinite;
}

.spyral-fel-smoke__wisp--1 {
	width: 22px;
	height: 16px;
	bottom: -6px;
	left: 12%;
	background: radial-gradient(ellipse, rgba(110, 235, 110, 0.75) 0%, rgba(50, 160, 65, 0.35) 55%, transparent 75%);
	animation-delay: 0s;
}

.spyral-fel-smoke__wisp--2 {
	width: 18px;
	height: 14px;
	bottom: -4px;
	left: 48%;
	background: radial-gradient(ellipse, rgba(142, 255, 142, 0.65) 0%, rgba(45, 130, 55, 0.3) 50%, transparent 72%);
	animation-delay: 1.1s;
}

.spyral-fel-smoke__wisp--3 {
	width: 20px;
	height: 15px;
	bottom: -5px;
	right: 10%;
	background: radial-gradient(ellipse, rgba(92, 219, 92, 0.7) 0%, rgba(35, 110, 45, 0.32) 52%, transparent 74%);
	animation-delay: 2s;
}

@keyframes spyral-fel-wisp-rise {
	0% {
		opacity: 0;
		transform: translateY(6px) scale(0.75);
	}
	18% {
		opacity: 0.7;
	}
	75% {
		opacity: 0.25;
	}
	100% {
		opacity: 0;
		transform: translateY(-22px) scale(1.15);
	}
}

@keyframes spyral-fel-glow-pulse {
	0%, 100% {
		opacity: 0.55;
	}
	50% {
		opacity: 0.9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spyral-fel-smoke__wisp {
		animation: none;
		opacity: 0.35;
	}

	.spyral-fel-smoke__glow {
		animation: none;
		opacity: 0.65;
	}

	.spyral-header-avatar--premium::before {
		animation: none;
	}

	.spyral-header-avatar--premium::after {
		animation: none;
		opacity: 0.35;
	}

	.spyral-fel-flame__tongue {
		animation: none;
		opacity: 0.8;
		transform: scaleY(1);
	}

	.spyral-comment-avatar--premium > img:not(.spyral-comment-staff-badge) {
		animation: none;
	}

	.spyral-fel-arc::before,
	.spyral-fel-arc::after {
		animation: none;
	}

	.spyral-fel-arc::before {
		opacity: 0.85;
	}

	.spyral-fel-arc::after {
		opacity: 0.8;
		transform: rotate(45deg);
	}
}