/* ========================================================================== 
   TuServerMu Thanks Shop - premium animated avatar frames
   Loaded globally with a filemtime cache seed from Sources/UserCard.php.
   The purchased class is applied only to large post/profile/hover-card avatars.
   ========================================================================== */

@property --tsmu-avatar-frame-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.tsmu-shop-avatar-frame {
	--tsmu-af-speed: 4.8s;
	--tsmu-af-border: rgba(56, 189, 248, 0.72);
	--tsmu-af-shadow: rgba(37, 99, 235, 0.3);
	--tsmu-af-stops: #22d3ee, #2563eb, #8b5cf6, #22d3ee;
	position: relative !important;
	isolation: isolate;
	overflow: visible;
	border-color: var(--tsmu-af-border) !important;
	box-shadow: 0 12px 28px var(--tsmu-af-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.tsmu-shop-avatar-frame::before {
	content: "" !important;
	position: absolute !important;
	inset: -6px !important;
	z-index: 0 !important;
	box-sizing: border-box !important;
	padding: 3px !important;
	border: 0 !important;
	border-radius: 18px !important;
	/* Build the gradient on the pseudo-element itself.  The registered angle is
	   animated here; keeping a completed gradient in an inherited custom
	   property can freeze its computed angle at the parent's initial value. */
	background: conic-gradient(from var(--tsmu-avatar-frame-angle), var(--tsmu-af-stops)) !important;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
	-webkit-mask-composite: xor !important;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
	mask-composite: exclude !important;
	filter: drop-shadow(0 0 7px var(--tsmu-af-shadow)) !important;
	opacity: 0.98 !important;
	transform: none !important;
	transform-origin: center !important;
	transition: none !important;
	animation: tsmu-avatar-border-flow var(--tsmu-af-speed) linear infinite !important;
	pointer-events: none !important;
}

.tsmu-shop-avatar-frame::after,
.tsmu-post-author .user_info .avatar.tsmu-shop-avatar-frame::after,
#basicinfo .profile-avatar-effect.tsmu-shop-avatar-frame::after,
.tsmu-uc-avatar.tsmu-shop-avatar-frame::after,
.tsmu-avatar-preview-frame.tsmu-shop-avatar-frame::after {
	content: "" !important;
	position: absolute !important;
	inset: -9px !important;
	z-index: 2 !important;
	box-sizing: border-box !important;
	border: 0 !important;
	border-radius: 21px !important;
	background-color: transparent !important;
	filter: none !important;
	opacity: 0.7;
	transform: none;
	transform-origin: center !important;
	transition: none !important;
	mix-blend-mode: normal;
	pointer-events: none !important;
}

.tsmu-shop-avatar-frame img {
	outline-color: var(--tsmu-af-border) !important;
}

.tsmu-shop-avatar-frame > a:focus-visible {
	outline: 3px solid var(--tsmu-af-border);
	outline-offset: 5px;
	border-radius: 9px;
}

/* The hover card frame must remain above the animated ring. */
.tsmu-uc-avatar.tsmu-shop-avatar-frame .tsmu-uc-avatar-frame {
	z-index: 1;
}

.tsmu-uc-avatar.tsmu-shop-avatar-frame .tsmu-uc-dot {
	z-index: 3;
}

/* Guardian Matrix: moving cyan/blue corner segments, closest to the reference. */
.tsmu-shop-avatar-frame--guardian {
	--tsmu-af-speed: 3.8s;
	--tsmu-af-border: rgba(34, 211, 238, 0.88);
	--tsmu-af-shadow: rgba(37, 99, 235, 0.38);
	--tsmu-af-stops:
		transparent 0 7%, #67e8f9 8% 15%, #2563eb 16% 24%, transparent 25% 35%,
		#22d3ee 36% 46%, transparent 47% 58%, #60a5fa 59% 70%, #a5f3fc 71% 78%,
		transparent 79% 89%, #2563eb 90% 96%, transparent 97% 100%;
}

.tsmu-shop-avatar-frame--guardian::after {
	background: radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.98) 0 2px, rgba(34, 211, 238, 0.75) 3px, transparent 8px),
		radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.9) 0 2px, rgba(37, 99, 235, 0.7) 3px, transparent 8px),
		radial-gradient(circle at 92% 92%, rgba(255, 255, 255, 0.95) 0 2px, rgba(34, 211, 238, 0.7) 3px, transparent 8px),
		radial-gradient(circle at 8% 92%, rgba(255, 255, 255, 0.88) 0 2px, rgba(37, 99, 235, 0.65) 3px, transparent 8px) !important;
	animation: tsmu-avatar-matrix-pulse 2.2s ease-in-out infinite !important;
}

/* Chaos Flame: an ember route with a slow, irregular heat pulse. */
.tsmu-shop-avatar-frame--flame {
	--tsmu-af-speed: 3.1s;
	--tsmu-af-border: rgba(249, 115, 22, 0.92);
	--tsmu-af-shadow: rgba(220, 38, 38, 0.38);
	--tsmu-af-stops:
		#7f1d1d 0 8%, #ef4444 10% 21%, #f97316 23% 38%, #fde047 40% 46%,
		#f97316 48% 63%, #991b1b 66% 74%, #fb923c 77% 91%, #fff7ae 94% 97%, #7f1d1d 100%;
}

.tsmu-shop-avatar-frame--flame::after {
	background: radial-gradient(ellipse at 50% 105%, rgba(253, 224, 71, 0.72) 0, rgba(249, 115, 22, 0.35) 24%, transparent 61%),
		radial-gradient(circle at 14% 30%, rgba(255, 247, 174, 0.85) 0 2px, transparent 5px),
		radial-gradient(circle at 87% 68%, rgba(251, 146, 60, 0.8) 0 2px, transparent 6px) !important;
	animation: tsmu-avatar-flame-pulse 1.8s ease-in-out infinite !important;
}

/* Divine Halo: elegant gold/white movement and a slow ceremonial breath. */
.tsmu-shop-avatar-frame--divine {
	--tsmu-af-speed: 6.8s;
	--tsmu-af-border: rgba(250, 204, 21, 0.92);
	--tsmu-af-shadow: rgba(202, 138, 4, 0.34);
	--tsmu-af-stops:
		#92400e 0 7%, #f59e0b 10% 23%, #fff7c2 26% 34%, #facc15 37% 55%,
		#ffffff 58% 62%, #d97706 66% 79%, #fde68a 83% 94%, #92400e 100%;
}

.tsmu-shop-avatar-frame--divine::after {
	background: radial-gradient(ellipse at center, transparent 54%, rgba(255, 247, 194, 0.28) 68%, rgba(250, 204, 21, 0.18) 77%, transparent 81%),
		radial-gradient(circle at 50% 0, #fff 0 2px, rgba(253, 230, 138, 0.8) 3px, transparent 8px),
		radial-gradient(circle at 100% 50%, #fff 0 2px, rgba(253, 230, 138, 0.75) 3px, transparent 8px) !important;
	animation: tsmu-avatar-divine-breathe 4.4s ease-in-out infinite !important;
}

/* Void Rift: violet/cyan arcs with an occasional diagonal rift strike. */
.tsmu-shop-avatar-frame--void {
	--tsmu-af-speed: 4.5s;
	--tsmu-af-border: rgba(168, 85, 247, 0.9);
	--tsmu-af-shadow: rgba(109, 40, 217, 0.4);
	--tsmu-af-stops:
		#312e81 0 8%, #7c3aed 10% 22%, transparent 23% 31%, #22d3ee 33% 43%,
		#c084fc 46% 58%, transparent 60% 68%, #4f46e5 70% 83%, #67e8f9 85% 92%, #312e81 100%;
}

.tsmu-shop-avatar-frame--void::before {
	animation-direction: reverse !important;
}

.tsmu-shop-avatar-frame--void::after {
	inset: 5px !important;
	border-radius: 9px !important;
	background-image: linear-gradient(118deg, transparent 0 39%, rgba(103, 232, 249, 0.08) 44%, rgba(255, 255, 255, 0.9) 49%, rgba(192, 132, 252, 0.36) 53%, transparent 59% 100%) !important;
	background-size: 280% 100% !important;
	mix-blend-mode: screen;
	animation: tsmu-avatar-rift-strike 5.2s ease-in-out infinite !important;
}

/* Prismatic Soul: the showpiece rainbow route plus a slow glass reflection. */
.tsmu-shop-avatar-frame--prismatic {
	--tsmu-af-speed: 5.4s;
	--tsmu-af-border: rgba(236, 72, 153, 0.88);
	--tsmu-af-shadow: rgba(124, 58, 237, 0.38);
	--tsmu-af-stops: #22d3ee, #2563eb, #8b5cf6, #ec4899, #f97316, #facc15, #22c55e, #22d3ee;
}

.tsmu-shop-avatar-frame--prismatic::after {
	inset: 5px !important;
	border-radius: 9px !important;
	background-image: linear-gradient(112deg, transparent 0 34%, rgba(255, 255, 255, 0.06) 41%, rgba(255, 255, 255, 0.78) 49%, rgba(255, 255, 255, 0.12) 56%, transparent 64% 100%) !important;
	background-size: 300% 100% !important;
	mix-blend-mode: screen;
	animation: tsmu-avatar-prismatic-sheen 4.8s ease-in-out infinite !important;
}

@keyframes tsmu-avatar-border-flow {
	to { --tsmu-avatar-frame-angle: 360deg; }
}

@keyframes tsmu-avatar-matrix-pulse {
	0%, 100% { opacity: 0.42; }
	50% { opacity: 0.96; }
}

@keyframes tsmu-avatar-flame-pulse {
	0%, 100% { opacity: 0.44; transform: scale(0.985); }
	38% { opacity: 0.82; transform: scale(1.015); }
	67% { opacity: 0.58; transform: scale(1); }
}

@keyframes tsmu-avatar-divine-breathe {
	0%, 100% { opacity: 0.38; transform: scale(0.98); }
	50% { opacity: 0.82; transform: scale(1.025); }
}

@keyframes tsmu-avatar-rift-strike {
	0%, 60% { opacity: 0; background-position: 145% 0; }
	69% { opacity: 0.92; }
	84%, 100% { opacity: 0; background-position: -145% 0; }
}

@keyframes tsmu-avatar-prismatic-sheen {
	0%, 48% { opacity: 0; background-position: 145% 0; }
	60% { opacity: 0.78; }
	78%, 100% { opacity: 0; background-position: -145% 0; }
}

@media (max-width: 720px) {
	/* SMF normally hides post avatars on narrow screens. A purchased frame is a
	   visible profile perk, so keep only premium avatars present on mobile. */
	.tsmu-post-author .user_info li.avatar.tsmu-shop-avatar-frame {
		display: block !important;
	}

	.tsmu-shop-avatar-frame::before {
		animation-duration: 7s !important;
	}

	.tsmu-shop-avatar-frame--prismatic::before,
	.tsmu-shop-avatar-frame--divine::before {
		animation-duration: 9s !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsmu-shop-avatar-frame,
	.tsmu-shop-avatar-frame::before,
	.tsmu-shop-avatar-frame::after,
	.tsmu-shop-avatar-frame img {
		animation: none !important;
		transform: none !important;
		transition: none !important;
	}

	.tsmu-shop-avatar-frame::before {
		opacity: 0.88 !important;
	}

	.tsmu-shop-avatar-frame::after {
		opacity: 0.32 !important;
	}
}