/* Effects add-on */

.effects-particle {
	position: fixed;
	z-index: 10000;
	pointer-events: none;
	line-height: 1;
	will-change: transform, opacity;
}

.effects-confetti {
	width: 8px;
	height: 12px;
	border-radius: 2px;
}

/* Posting effect: a tiny puff from Share, then the new post fades in with a soft glow. */
.effects-puff {
	width: 5px;
	height: 5px;
	border-radius: 50%;
}

.effects-posted {
	animation: effects-posted 2.4s ease-out;
}

@keyframes effects-posted {
	0%   { opacity: 0; transform: translateY(-6px); box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
	20%  { opacity: 1; transform: none;             box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.7), 0 0 18px rgba(255, 209, 102, 0.45); }
	100% { opacity: 1; transform: none;             box-shadow: 0 0 0 3px rgba(255, 209, 102, 0), 0 0 18px rgba(255, 209, 102, 0); }
}

/* Hashtag decorations: a small corner badge plus a themed left edge. */
.effects-tag {
	position: relative;
}

.effects-tag::after {
	content: attr(data-effects-emoji);
	position: absolute;
	top: 6px;
	right: 10px;
	font-size: 18px;
	opacity: 0.85;
	pointer-events: none;
}

.effects-tag-checker {
	border-left: 6px solid transparent;
	border-image: repeating-linear-gradient(to bottom, #111 0 6px, #fff 6px 12px) 1;
}

.effects-tag-music    { box-shadow: inset 4px 0 0 #9b5de5; }
.effects-tag-stars    { box-shadow: inset 4px 0 0 #3a86ff; background-image: radial-gradient(circle at 92% 20%, rgba(58,134,255,0.10), transparent 40%); }
.effects-tag-paws     { box-shadow: inset 4px 0 0 #f4a261; }
.effects-tag-bees     { box-shadow: inset 4px 0 0 #ffbe0b; }
.effects-tag-garden   { box-shadow: inset 4px 0 0 #2a9d8f; }
.effects-tag-food     { box-shadow: inset 4px 0 0 #e76f51; }
.effects-tag-outdoors { box-shadow: inset 4px 0 0 #588157; }
.effects-tag-party    { box-shadow: inset 4px 0 0 #f15bb5; }

/* December snow */
.effects-snow {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}

/* Festival mode: checkerboard trim under the top bar and an optional banner. */
.effects-festival .navbar,
.effects-festival #topbar-first {
	border-bottom: 6px solid transparent;
	border-image: repeating-linear-gradient(to right, #111 0 12px, #fff 12px 24px) 1;
}

.effects-festival-banner {
	position: relative;
	z-index: 1031;
	padding: 8px 16px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	background: repeating-linear-gradient(45deg, #111 0 14px, #222 14px 28px);
	border-bottom: 3px solid #ffd166;
}

@media (prefers-reduced-motion: reduce) {
	.effects-particle,
	.effects-snow {
		display: none;
	}

	.effects-posted {
		animation: none;
	}
}