/*
 * Small progressive-enhancement layer on top of the compiled site.css.
 * These rules cover behaviour that was JavaScript-driven in the original
 * React build: the fixed home header gaining a backdrop on scroll, and the
 * mobile navigation panel. Visuals are matched to the source design tokens.
 */

/* Home header: transparent at the top, frosted background once scrolled. */
#rc-header.rc-scrolled {
	background-color: color-mix(in srgb, var(--background) 85%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom-color: var(--border);
}

/* Mobile navigation panel toggled by the hamburger button. */
#rc-mobile-menu[hidden] {
	display: none;
}

/* Inline confirmation shown after the contact form is "sent". */
.rc-form-note {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sky);
}

/* -------------------------------------------------------------------------
 * Client logo strip — uniform blue duotone treatment.
 * A duotone filter (grayscale -> blue) keeps each logo's detail while tinting
 * them to the brand blue so a wall of mismatched logos reads as one set.
 * ---------------------------------------------------------------------- */
.rc-logos {
	column-gap: 2.5rem;
	row-gap: 2rem;
}
@media (min-width: 1024px) {
	.rc-logos {
		column-gap: 3.5rem;
	}
}
.rc-logo-img {
	height: 2.5rem;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	filter: grayscale(1) brightness(0.55) sepia(1) hue-rotate(176deg) saturate(6);
	opacity: 0.7;
	transition: opacity 0.3s ease, filter 0.3s ease;
}
@media (min-width: 1024px) {
	.rc-logo-img {
		height: 3rem;
	}
}
.rc-logo:hover .rc-logo-img {
	opacity: 1;
	filter: grayscale(1) brightness(0.6) sepia(1) hue-rotate(176deg) saturate(7);
}

/* -------------------------------------------------------------------------
 * Scroll-reveal: subtle fade + rise as sections enter the viewport.
 * Staggered via the inline --rc-delay custom property. Disabled entirely
 * for users who prefer reduced motion (and as a no-JS fallback below).
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.rc-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: var(--rc-delay, 0ms);
		will-change: opacity, transform;
	}
	.rc-reveal.rc-in {
		opacity: 1;
		transform: none;
	}
}

/* If JS never runs, make sure nothing stays hidden. */
.no-js .rc-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* Count-up figures hold their own width so the layout doesn't jump. */
.rc-count {
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * Intro video: the injected iframe / <video> fills the 16:9 holder.
 * ---------------------------------------------------------------------- */
.rc-video-holder iframe,
.rc-video-holder video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}
.rc-video-holder video {
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * "The plan" grid — 3 equal cards per row, with the final short row
 * centered (3 on top, 2 centered below) at the same card width.
 * ---------------------------------------------------------------------- */
.rc-plan-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}
.rc-plan-grid > article {
	flex: 0 0 100%;
}
@media (min-width: 768px) {
	.rc-plan-grid > article {
		flex: 0 0 calc((100% - 1.5rem) / 2);
	}
}
@media (min-width: 1024px) {
	.rc-plan-grid > article {
		flex: 0 0 calc((100% - 3rem) / 3);
	}
}

/* -------------------------------------------------------------------------
 * Full strategy proposal — the standout full-width card below the plan.
 * Floating bubbles, a pulsing icon ring, and a lift on hover.
 * ---------------------------------------------------------------------- */
.rc-proposal {
	position: relative;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--sky) 22%, transparent);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.rc-proposal:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--accent) 60%, transparent),
		0 0 0 1px color-mix(in srgb, var(--sky) 55%, transparent);
}
.rc-bubble {
	position: absolute;
	border-radius: 9999px;
	pointer-events: none;
	transition: transform 0.45s ease;
}
.rc-proposal:hover .rc-bubble {
	transform: scale(1.12);
}
.rc-proposal-icon {
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.rc-proposal-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}
.rc-proposal:hover .rc-proposal-icon {
	transform: scale(1.08) rotate(-3deg);
}
.rc-proposal-arrow {
	transition: transform 0.35s ease;
}
.rc-proposal:hover .rc-proposal-arrow {
	transform: translate(4px, -4px);
}
@media (prefers-reduced-motion: no-preference) {
	.rc-bubble {
		animation: rc-float 7s ease-in-out infinite;
		will-change: transform;
	}
	.rc-proposal-icon::after {
		animation: rc-ring 2.6s ease-out infinite;
	}
}
@keyframes rc-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}
@keyframes rc-ring {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--sky) 55%, transparent);
	}
	70%,
	100% {
		box-shadow: 0 0 0 18px transparent;
	}
}