/* Mobile menu overlay and panel */
#mobile-menu {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 260ms ease, visibility 260ms ease;
	z-index: 40;
}

#mobile-menu.open {
	opacity: 1;
	visibility: visible;
}

#mobile-menu-panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 280px;
	max-width: 90vw;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	transform: translateX(100%);
	transition: transform 300ms cubic-bezier(.2,.9,.2,1);
	z-index: 50;
	will-change: transform;
	overflow-y: auto;
}

#mobile-menu-panel.open {
	transform: translateX(0);
}

/* When panel opens, make children animate in slightly */
#mobile-menu-panel .mobile-link {
	opacity: 0;
	transform: translateX(12px);
	transition: opacity 260ms ease, transform 260ms ease;
}

#mobile-menu-panel.open .mobile-link {
	opacity: 1;
	transform: translateX(0);
}

/* Icon helpers */
.menu-icon { display: inline-block; }
.close-icon { display: none; }
.menu-open .menu-icon { display: none !important; }
.menu-open .close-icon { display: inline-block !important; }

/* Quick pop / scale animation for images */
@keyframes popIn {
	0% { transform: scale(0.92); opacity: 0; }
	60% { transform: scale(1.04); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* Fast text fade + slight upward motion with a snappy overshoot */
@keyframes textPop {
	0% { opacity: 0; transform: translateY(14px); }
	65% { opacity: 1; transform: translateY(-4px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* Apply to hero elements with short durations and staggered delays */
.handshake {
	animation: popIn 420ms cubic-bezier(.2,.8,.2,1) both;
	will-change: transform, opacity;
}

.hero-heading {
	animation: textPop 420ms cubic-bezier(.2,.9,.25,1) both;
	animation-delay: 0ms;
	will-change: transform, opacity;
}

.hero-text {
	animation: textPop 420ms cubic-bezier(.2,.9,.25,1) both;
	animation-delay: 80ms;
}

.hero-button {
	animation: popIn 420ms cubic-bezier(.2,.9,.25,1) both;
	animation-delay: 140ms;
}

/* Small utility: reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.handshake, .hero-heading, .hero-text, .hero-button {
		animation: none !important;
	}
}

/* Scroll-triggered animations (used with IntersectionObserver) */
.fade-in-scroll {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 420ms cubic-bezier(.2,.9,.25,1), transform 420ms cubic-bezier(.2,.9,.25,1);
}

.fade-in-scroll.visible {
	opacity: 1;
	transform: translateY(0);
}

.slide-up-scroll {
	opacity: 0;
	transform: translateY(28px) scale(0.98);
	transition: opacity 420ms cubic-bezier(.2,.9,.25,1), transform 420ms cubic-bezier(.2,.9,.25,1);
}

.slide-up-scroll.visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}