/**
 * MindLens glassmorphism theme and animations.
 */

:root {
	--glass-bg: rgba(255, 255, 255, 0.72);
	--glass-bg-strong: rgba(255, 255, 255, 0.88);
	--glass-border: rgba(255, 255, 255, 0.48);
	--glass-shadow: 0 36px 120px rgba(0, 0, 0, 0.34);
	--neon-accent: #22d3ee;
	--neon-secondary: #a7f3d0;
	--ink: #0f172a;
	--muted: #64748b;
}

.mindlens-shortcode-shell {
	position: relative;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(167, 243, 208, 0.1)),
		var(--glass-bg);
	backdrop-filter: blur(20px) saturate(1.22);
	box-shadow: 0 18px 60px rgba(15, 23, 42, 0.16);
}

.mindlens-input-frame {
	padding: 0.45rem;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.mindlens-url-input {
	border-color: rgba(255, 255, 255, 0.52);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mindlens-submit {
	background: linear-gradient(135deg, #083344, #155e75 55%, #0f766e);
	box-shadow: 0 12px 30px rgba(6, 182, 212, 0.24);
}

.mindlens-submit:hover,
.mindlens-submit:focus-visible {
	background: linear-gradient(135deg, #0f172a, #155e75 58%, #0f766e);
	box-shadow: 0 14px 38px rgba(34, 211, 238, 0.28);
}

.mindlens-canvas-body {
	background:
		radial-gradient(circle at 18% 12%, rgba(34, 211, 238, 0.24), transparent 34%),
		radial-gradient(circle at 88% 10%, rgba(167, 243, 208, 0.18), transparent 32%),
		linear-gradient(140deg, #08111f 0%, #111827 48%, #042f2e 100%);
}

.mindlens-canvas-body::before {
	position: fixed;
	inset: 0;
	content: "";
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.18));
	pointer-events: none;
}

.mindlens-watermark {
	position: fixed;
	inset: auto 4vw 5vh auto;
	z-index: 0;
	inline-size: min(34vw, 360px);
	aspect-ratio: 1;
	background-image: url("../../assets/images/watermark-logo.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.07;
	filter: grayscale(1);
	pointer-events: none;
}

.mindlens-toolbar {
	padding: 0.72rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: rgba(8, 17, 31, 0.5);
	backdrop-filter: blur(18px) saturate(1.3);
	box-shadow: 0 18px 70px rgba(0, 0, 0, 0.2);
}

.mindlens-brand__mark {
	box-shadow: 0 0 26px rgba(34, 211, 238, 0.38);
}

.mindlens-tool:hover,
.mindlens-tool:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(34, 211, 238, 0.55);
	background: rgba(34, 211, 238, 0.18);
}

.mindlens-paper {
	border: 1px solid var(--glass-border);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)),
		var(--glass-bg-strong);
	backdrop-filter: blur(26px) saturate(1.22);
	box-shadow: var(--glass-shadow);
	animation: mindlens-float-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both, mindlens-paper-drift 7s ease-in-out 650ms infinite alternate;
}

.mindlens-paper::before {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	content: "";
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), transparent 34%, rgba(34, 211, 238, 0.12));
	pointer-events: none;
}

.mindlens-paper::after {
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	content: "";
	background: linear-gradient(135deg, rgba(34, 211, 238, 0.56), rgba(167, 243, 208, 0.2), rgba(255, 255, 255, 0.24));
	filter: blur(22px);
	opacity: 0.42;
	pointer-events: none;
}

.mindlens-article {
	position: relative;
	z-index: 1;
}

.mindlens-source a {
	color: #0e7490;
	text-decoration-color: rgba(14, 116, 144, 0.38);
	text-underline-offset: 0.2em;
	transition: color 180ms ease, text-decoration-color 180ms ease;
}

.mindlens-source a:hover,
.mindlens-source a:focus-visible {
	color: #155e75;
	text-decoration-color: currentColor;
}

.mindlens-content a {
	color: #0e7490;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.mindlens-content a:hover,
.mindlens-content a:focus-visible {
	color: #0f766e;
}

.mindlens-content img {
	box-shadow: 0 16px 44px rgba(15, 23, 42, 0.16);
}

.mindlens-error {
	position: relative;
	z-index: 1;
	color: #be123c;
	font-weight: 700;
}

.mindlens-map-panel {
	backdrop-filter: blur(16px) saturate(1.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 14px 42px rgba(15, 23, 42, 0.12);
}

.mindlens-loader {
	position: relative;
	z-index: 1;
	color: var(--muted);
	font-weight: 700;
}

.mindlens-magnifier {
	border-color: rgba(255, 255, 255, 0.68);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58)),
		rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(10px) saturate(1.24);
	box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.26), 0 24px 90px rgba(0, 0, 0, 0.38);
}

.mindlens-pen-active .mindlens-content {
	cursor: text;
}

.mindlens-sonic-active .mindlens-paper {
	box-shadow: 0 36px 120px rgba(0, 0, 0, 0.34), 0 0 44px rgba(34, 211, 238, 0.18);
}

@keyframes mindlens-float-in {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes mindlens-paper-drift {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mindlens-paper,
	.mindlens-loader__orb {
		animation: none;
	}

	.mindlens-submit,
	.mindlens-open-canvas,
	.mindlens-tool,
	.mindlens-url-input {
		transition: none;
	}
}

@media (max-width: 680px) {
	.mindlens-toolbar {
		backdrop-filter: blur(14px) saturate(1.15);
	}

	.mindlens-watermark {
		inline-size: 220px;
		inset: auto -32px 20px auto;
	}
}