/* Demo showcase – scoped glass & privacy phone */

.demos {
	background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-elevated) 100%);
}

.demo-card {
	margin-bottom: 3rem;
	padding: 1.75rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.demo-card-head {
	margin-bottom: 1.25rem;
}

.demo-card-head h3 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.demo-card-head p {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.92rem;
	max-width: 720px;
}

/* Particles demo */
.demo-particles {
	position: relative;
	height: min(520px, 70vh);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: radial-gradient(ellipse at 30% 20%, #0c0f2a 0%, #050608 55%),
		radial-gradient(ellipse at 80% 85%, #0a0c1f 0%, transparent 60%);
	border: 1px solid var(--color-border);
}

.demo-particles__canvas {
	position: absolute;
	inset: 0;
}

.demo-particles__canvas canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.demo-particles .demo-glass {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(28px) saturate(180%);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
	border-radius: 20px;
}

#demo-hud {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 14px 18px;
	z-index: 5;
	min-width: 180px;
}

.demo-particles .hud-title {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.52);
	margin-bottom: 10px;
	font-weight: 500;
}

.demo-particles .hud-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-size: 12px;
}

.demo-particles .hud-key { color: rgba(255, 255, 255, 0.52); }
.demo-particles .hud-val {
	font-family: 'DM Mono', monospace;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.92);
}

.demo-particles .status-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #5effa0;
	box-shadow: 0 0 8px #5effa0;
	animation: demo-pulse-dot 2.4s ease-in-out infinite;
	margin-right: 6px;
	vertical-align: middle;
}

@keyframes demo-pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(1.4); }
}

#demo-stats {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 12px 16px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.demo-particles .stat-label {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.52);
}

.demo-particles .stat-bar {
	width: 90px;
	height: 3px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	overflow: hidden;
}

.demo-particles .stat-fill {
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.8));
	border-radius: 2px;
}

.demo-particles .stat-fill.cpu { width: 72%; }
.demo-particles .stat-fill.gpu { width: 88%; }
.demo-particles .stat-fill.mem { width: 58%; }

.demo-control-panel {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 5;
	flex-wrap: wrap;
	justify-content: center;
}

.demo-particles .toggle-group {
	display: flex;
	gap: 6px;
	padding: 6px 10px;
}

.demo-particles .toggle-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 50px;
	cursor: pointer;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.52);
	transition: all 0.25s ease;
	border: 1px solid transparent;
}

.demo-particles .toggle-pill.active {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.demo-particles .pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
}

.demo-particles .toggle-pill.active .pill-dot {
	background: #a5f3c0;
	box-shadow: 0 0 8px rgba(165, 243, 192, 0.7);
}

#demo-execute-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 50px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	font-family: var(--font-sans);
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(28px);
	transition: all 0.2s ease;
}

#demo-execute-btn:hover {
	background: rgba(255, 255, 255, 0.18);
	transform: translateY(-1px);
}

/* Privacy demo */
.demo-privacy {
	padding: 2rem;
	background: linear-gradient(145deg, #ebe8e3 0%, #f5f3f0 50%, #e8e4de 100%);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.demo-privacy__scene {
	perspective: 800px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	flex-wrap: wrap;
}

.demo-privacy .phone {
	width: 220px;
	height: 460px;
	position: relative;
	transform-style: preserve-3d;
	border-radius: 28px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

.demo-privacy .back {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, #c0d0de, #a8bcd0, #b4c4d4);
	border-radius: 28px;
	transform: translateZ(-14px);
}

.demo-privacy .edge {
	position: absolute;
	background: linear-gradient(180deg, #c8d8e5, #a8b8ca, #b8c8d6);
}

.demo-privacy .edge-r { top: 26px; bottom: 26px; right: 0; width: 14px; transform-origin: right center; transform: rotateY(-90deg); }
.demo-privacy .edge-l { top: 26px; bottom: 26px; left: 0; width: 14px; transform-origin: left center; transform: rotateY(90deg); }
.demo-privacy .edge-t { left: 26px; right: 26px; top: 0; height: 14px; transform-origin: center top; transform: rotateX(-90deg); }
.demo-privacy .edge-b { left: 26px; right: 26px; bottom: 0; height: 14px; transform-origin: center bottom; transform: rotateX(90deg); }

.demo-privacy .bezel {
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, #d0dde8, #b8cad8, #c4d4e2);
	border-radius: 28px;
	padding: 3px;
	transform: translateZ(1px);
}

.demo-privacy .inner {
	width: 100%;
	height: 100%;
	background: #080808;
	border-radius: 25px;
	padding: 3px;
}

.demo-privacy .screen {
	width: 100%;
	height: 100%;
	border-radius: 22px;
	overflow: hidden;
	position: relative;
	background: #080808;
}

.demo-privacy .screen::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--priv-opacity, 0);
	z-index: 20;
	pointer-events: none;
	border-radius: inherit;
}

.demo-privacy .screen::after {
	content: '';
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #060606;
	z-index: 30;
}

.demo-privacy .wallpaper {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 55% 45% at 60% 35%, rgba(100, 210, 200, 0.9), transparent 70%),
		linear-gradient(155deg, #1a6b6a 0%, #48c4b8 45%, #155858 100%);
}

.demo-privacy .status-bar {
	display: flex;
	justify-content: space-between;
	padding: 4px 14px 0;
	position: relative;
	z-index: 10;
	height: 26px;
}

.demo-privacy .time { font-size: 0.58rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }

.demo-privacy .notification {
	margin: 32px 8px 0;
	background: rgba(18, 16, 26, 0.72);
	backdrop-filter: blur(20px);
	border-radius: 16px;
	padding: 10px 12px;
	position: relative;
	z-index: 10;
}

.demo-privacy .notification::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--notif-priv, 0);
	z-index: 15;
	border-radius: 16px;
	pointer-events: none;
}

.demo-privacy .notif-header { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.demo-privacy .notif-icon {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: #3b82f6;
	display: grid;
	place-items: center;
}

.demo-privacy .notif-app { font-size: 0.48rem; color: rgba(255, 255, 255, 0.4); }
.demo-privacy .notif-when { font-size: 0.44rem; color: rgba(255, 255, 255, 0.25); margin-left: auto; }
.demo-privacy .notif-title { display: block; font-size: 0.58rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 2px; }
.demo-privacy .notif-body { font-size: 0.5rem; color: rgba(255, 255, 255, 0.48); line-height: 1.4; }

.demo-privacy .dock {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
	background: rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(14px);
	border-radius: 18px;
	padding: 6px 12px;
}

.demo-privacy .dock-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
}

.demo-privacy .di-phone { background: linear-gradient(145deg, #34d058, #22a847); }
.demo-privacy .di-msg { background: linear-gradient(145deg, #5b7cf7, #3b5ce4); }
.demo-privacy .di-chrome { background: linear-gradient(145deg, #ea4335, #dd3327); }
.demo-privacy .di-cam { background: linear-gradient(145deg, #f5a623, #e8931a); }

.demo-privacy .home-bar {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 76px;
	height: 3px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 2px;
	z-index: 10;
}

.demo-privacy .panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 220px;
	color: #1a1816;
}

.demo-privacy .panel-title {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.demo-privacy .panel-sub {
	font-size: 0.62rem;
	color: #8a8880;
	font-family: 'JetBrains Mono', 'DM Mono', monospace;
	margin-top: 0.2rem;
}

.demo-privacy .mode-toggle {
	display: flex;
	background: #e4e1dc;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #d8d5d0;
}

.demo-privacy .mode-btn {
	flex: 1;
	padding: 0.45rem 0.4rem;
	font-family: 'JetBrains Mono', 'DM Mono', monospace;
	font-size: 0.52rem;
	background: transparent;
	color: #8a8880;
	border: none;
	cursor: pointer;
	transition: background 0.25s, color 0.25s;
}

.demo-privacy .mode-btn.active {
	background: #fff;
	color: #1a1816;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.demo-privacy .angle-readout {
	font-family: 'JetBrains Mono', 'DM Mono', monospace;
	font-size: 0.68rem;
	color: #a8a49c;
}

.demo-privacy .angle-val { color: #1a1816; font-weight: 500; }

.demo-privacy .hint {
	font-size: 0.54rem;
	color: #b0aca4;
	font-family: 'JetBrains Mono', 'DM Mono', monospace;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.demo-privacy__scene { flex-direction: column; }
	.demo-privacy .phone { width: 200px; height: 420px; }
	#demo-hud, #demo-stats { display: none; }
}