/* =========================================================================
   Liquid Glass theme - translucent, blurred surfaces with a bright rim
   highlight (the Apple "Liquid Glass" tell). One reusable recipe, moderate
   blur. NOT applied to .app-frame (it holds the fixed tab bar) or to the
   demo phone. Primary green CTAs stay opaque so they still pop.
   ========================================================================= */

/* Nav bar / command palette - translucent like an iOS nav bar, but FLAT:
   a plain blur with a hairline separator, no glossy rim. */
.app-header,
.cmdk-panel {
	background: rgba(255, 255, 255, 0.78);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: none;
}
html.dark .app-header,
html.dark .cmdk-panel {
	background: rgba(22, 22, 24, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.cmdk-panel {
	box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
}
.app-header {
	border-top: none;
	border-left: none;
	border-right: none;
}

/* ===== Flat, natural-iOS content surfaces =====
   iOS reserves glass for floating chrome (tab bar / nav) and keeps CONTENT
   flat: solid grouped cells, hairline borders, minimal shadow, roomy corners.
   So cards + form are flat solids; only the tab bar stays glass. */
#project-list article,
#about article,
#contact .group,
#contactForm {
	background: #ffffff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 22px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
html.dark #project-list article,
html.dark #about article,
html.dark #contact .group,
html.dark #contactForm {
	background: #1c1c1e;
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: none;
}

/* iOS segmented control - flat gray track, tinted selected segment. */
.seg {
	background: rgba(120, 120, 128, 0.14);
	border: none;
	border-radius: 12px;
	padding: 2px;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
html.dark .seg {
	background: rgba(118, 118, 128, 0.24);
}
.seg button {
	border-radius: 10px;
}
.seg button[aria-selected="true"] {
	background: #4faf53;
	color: #06210a;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
html.dark .seg button[aria-selected="true"] {
	color: #041206;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Flat secondary buttons (iOS filled-gray), flat primary CTAs. */
#cmdkOpen,
#cmdkOpen2,
.app-toggle {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: rgba(120, 120, 128, 0.12);
	border-color: transparent !important;
}
html.dark #cmdkOpen,
html.dark #cmdkOpen2,
html.dark .app-toggle {
	background: rgba(118, 118, 128, 0.22);
}
.app-btn {
	box-shadow: none;
}

/* Flat iOS inset form fields. */
#contactForm input,
#contactForm textarea {
	background: rgba(120, 120, 128, 0.08);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: transparent;
}
html.dark #contactForm input,
html.dark #contactForm textarea {
	background: rgba(118, 118, 128, 0.16);
}

/* ===== More generous, iOS-style padding / whitespace. ===== */
.app-frame section {
	padding-top: clamp(4rem, 9vh, 7rem);
	padding-bottom: clamp(4rem, 9vh, 7rem);
}
#about article {
	padding: 2.5rem;
}
#contactForm {
	padding: 2rem;
}
#contact .group {
	padding: 1.25rem 1.35rem;
}
@media (min-width: 768px) {
	.app-frame main {
		padding-left: 2.25rem;
		padding-right: 2.25rem;
	}
}
@media (min-width: 1024px) {
	.app-frame main {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

/* --- Reduced motion: strip movement, keep it clean + fully usable --- */
@media (prefers-reduced-motion: reduce) {
	.kinetic > span,
	.pill--syncing .dot,
	.job[data-state="syncing"] .jdot,
	.job {
		animation: none !important;
		transform: none !important;
	}
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.parallax,
	#project-list article {
		transition: none !important;
	}