/* A raven you drop where the wind is high. Namespaced dnr-, no theme bleed. */

.dnr-perch {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background:
		radial-gradient(120% 100% at 20% 0%, rgba(168,213,184,0.10), transparent 60%),
		linear-gradient(160deg, #0c4636, #0a3d2e);
	border: 1px solid rgba(168,213,184,0.22);
	box-shadow: inset 0 0 24px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.28);
	color: #eaf6ee;
	font-family: Georgia, "Iowan Old Style", serif;
	max-width: 520px;
}

.dnr-bird {
	flex: 0 0 auto;
	cursor: pointer;
	border: none;
	background: transparent;
	font-size: 34px;
	line-height: 1;
	padding: 4px;
	/* the blue bird emoji, inked down to a raven silhouette */
	filter: brightness(0) saturate(100%) drop-shadow(0 2px 2px rgba(0,0,0,0.45));
	transition: transform 0.18s ease, filter 0.18s ease;
	animation: dnr-sway 4.5s ease-in-out infinite;
}
.dnr-bird:hover { transform: translateY(-3px) rotate(-4deg); }
.dnr-bird:active { transform: translateY(0) rotate(2deg) scale(0.96); }

.dnr-still { animation: none; opacity: 0.7; }

.dnr-aloft {
	opacity: 0.35;
	cursor: default;
	animation: dnr-drift 6s ease-in-out infinite;
	pointer-events: none;
}

.dnr-caption {
	font-size: 14px;
	color: #dcefe2;
	font-style: italic;
	min-height: 1.4em;
}

.dnr-flash { animation: dnr-flash 0.5s ease; }

@keyframes dnr-sway {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-2px) rotate(-2deg); }
}
@keyframes dnr-drift {
	0%, 100% { transform: translateY(0) translateX(0); }
	50% { transform: translateY(-4px) translateX(3px); }
}
@keyframes dnr-flash {
	0% { color: #a8d8ff; }
	100% { color: #dcefe2; }
}