/* --- Scroll reveals --- */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* --- Kinetic headline: mask sweep on load --- */
.kinetic {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}
.kinetic > span {
	display: inline-block;
	transform: translateY(110%);
	animation: rise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes rise {
	to {
		transform: translateY(0);
	}
}
.parallax {
	transition: transform 0.3s ease-out;
	will-change: transform;
}

/* --- Identity switcher (range/flexibility, near-zero payload) --- */
.seg {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: rgba(127, 140, 141, 0.12);
	border: 1px solid rgba(127, 140, 141, 0.18);
}
.seg button {
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: inherit;
	opacity: 0.65;
	transition: all 0.25s ease;
}
.seg button[aria-selected="true"] {
	background: #4faf53;
	color: #06210a;
	opacity: 1;
}
html.dark .seg button[aria-selected="true"] {
	color: #041206;
}

/* Inline stack strip: Mobile -> API -> DB */
.stack {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.stack .node {
	font-size: 0.72rem;
	padding: 0.3rem 0.6rem;
	border-radius: 0.5rem;
	border: 1px solid rgba(127, 140, 141, 0.25);
	opacity: 0.5;
	transition: all 0.3s ease;
}
.stack .node.on {
	opacity: 1;
	border-color: rgba(var(--glow), 0.7);
	color: #4faf53;
	box-shadow: 0 0 0 1px rgba(var(--glow), 0.3), 0 0 20px -6px rgba(var(--glow), 0.6);
}
.stack .link {
	width: 18px;
	height: 1px;
	background: rgba(127, 140, 141, 0.4);
}