/* Cape Fear Development Group — motion layer (front end only).
   Loaded after theme.css. Everything that moves sits inside prefers-reduced-motion: no-preference,
   and the reveal/entrance states are gated on html.cfdg-js so nothing is ever hidden without JavaScript.
   To remove all animation: delete this file, assets/js/motion.js and the enqueue in functions.php. */

/* ---------- Static polish (no motion) ---------- */
::selection {
	background: var(--cfdg-gold);
	color: #062115;
}

/* Scroll-progress bar */
.cfdg-progress {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 120;
	height: 3px;
	background: linear-gradient(90deg, var(--cfdg-gold), #e3c35a);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}
.admin-bar .cfdg-progress {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Header gains depth once the page scrolls */
.cfdg-header.is-scrolled {
	box-shadow: 0 8px 30px rgba(6, 33, 21, 0.12);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
		scroll-padding-top: 6rem;
	}

	/* Smooth cross-fade between pages (Chromium; ignored elsewhere). The header stays put. */
	@view-transition {
		navigation: auto;
	}
	.cfdg-header {
		view-transition-name: cfdg-header;
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.35s;
	}

	/* ----- Hero entrance ----- */
	@keyframes cfdg-rise {
		from {
			opacity: 0;
			transform: translateY(28px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
	@keyframes cfdg-settle {
		from {
			transform: scale(1.12);
		}
		to {
			transform: scale(1);
		}
	}
	.cfdg-hero {
		overflow: hidden;
	}
	.cfdg-hero__inner > *,
	.cfdg-hero .cfdg-states {
		animation: cfdg-rise 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	.cfdg-hero__inner > :nth-child(1) { animation-delay: 0.1s; }
	.cfdg-hero__inner > :nth-child(2) { animation-delay: 0.25s; }
	.cfdg-hero__inner > :nth-child(3) { animation-delay: 0.4s; }
	.cfdg-hero__inner > :nth-child(4) { animation-delay: 0.55s; }
	.cfdg-hero .cfdg-states { animation-delay: 0.85s; }
	.cfdg-hero__photo img {
		animation: cfdg-settle 2.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
	}
	/* Photo is taller than the hero so the scroll parallax never shows an edge */
	.cfdg-hero > .cfdg-hero__photo {
		inset: -3.5rem 0 -3.5rem 36%;
		transform: translate3d(0, var(--cfdg-par, 0px), 0);
		will-change: transform;
	}
	@media (max-width: 781px) {
		.cfdg-hero > .cfdg-hero__photo {
			inset: 0;
			transform: none;
		}
	}

	/* ----- Scroll reveal (elements are tagged by motion.js) ----- */
	.cfdg-js .cfdg-reveal {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: calc(var(--cfdg-i, 0) * 90ms);
	}
	.cfdg-js .cfdg-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
	/* Accent rule above each eyebrow draws itself in */
	.cfdg-js .cfdg-reveal .cfdg-eyebrow::before,
	.cfdg-js .cfdg-reveal.cfdg-eyebrow::before {
		width: 0;
		transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
	}
	.cfdg-js .cfdg-reveal.is-visible .cfdg-eyebrow::before,
	.cfdg-js .cfdg-reveal.is-visible.cfdg-eyebrow::before {
		width: 2.25rem;
	}

	/* ----- Header ----- */
	.cfdg-header {
		transition: box-shadow 0.3s ease, padding 0.3s ease;
	}
	.cfdg-header.is-scrolled {
		padding-block: 0.35rem;
	}
	.cfdg-brand .wp-block-site-logo img {
		transition: width 0.3s ease;
	}
	.cfdg-header.is-scrolled .cfdg-brand .wp-block-site-logo img {
		width: clamp(104px, 14vw, 148px);
	}
	/* Nav links: gold underline grows from the left */
	.cfdg-header .wp-block-navigation-item__content {
		background: linear-gradient(var(--cfdg-gold), var(--cfdg-gold)) left bottom / 0 2px no-repeat;
		padding-block: 0.35rem;
		transition: background-size 0.35s ease;
	}
	.cfdg-header .wp-block-navigation-item__content:hover,
	.cfdg-header .current-menu-item > .wp-block-navigation-item__content {
		background-size: 100% 2px;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		background: none;
	}

	/* ----- Buttons: lift + a soft shine sweep on gold ----- */
	.wp-block-button__link,
	.cfdg-form button[type="submit"] {
		transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
	}
	.wp-block-button__link:hover,
	.cfdg-form button[type="submit"]:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 24px rgba(6, 33, 21, 0.25);
	}
	.wp-block-button.is-style-gold .wp-block-button__link {
		position: relative;
		overflow: hidden;
	}
	.wp-block-button.is-style-gold .wp-block-button__link::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
		transform: translateX(-120%);
		transition: transform 0.7s ease;
		pointer-events: none;
	}
	.wp-block-button.is-style-gold .wp-block-button__link:hover::before {
		transform: translateX(120%);
	}

	/* ----- Cards: photos drift in slowly on hover ----- */
	.cfdg-card__media,
	.cfdg-project-card .wp-block-post-featured-image,
	.cfdg-post-card .wp-block-post-featured-image,
	.cfdg-member__photo {
		overflow: hidden;
	}
	.cfdg-card__media img,
	.cfdg-project-card .wp-block-post-featured-image img,
	.cfdg-post-card .wp-block-post-featured-image img,
	.cfdg-member__photo img {
		transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
	}
	.cfdg-service:hover .cfdg-card__media img,
	.cfdg-project-card:hover .wp-block-post-featured-image img,
	.cfdg-post-card:hover .wp-block-post-featured-image img,
	.cfdg-member:hover .cfdg-member__photo img {
		transform: scale(1.07);
	}
	.cfdg-card__link a {
		display: inline-block;
		transition: transform 0.25s ease;
	}
	.cfdg-service:hover .cfdg-card__link a {
		transform: translateX(4px);
	}

	/* ----- Headquarters tile on the coverage map gives off a soft ping ----- */
	@keyframes cfdg-ping {
		0% {
			outline: 0 solid rgba(201, 162, 39, 0.55);
		}
		100% {
			outline: 14px solid rgba(201, 162, 39, 0);
		}
	}
	.cfdg-statemap__tile.is-hq {
		animation: cfdg-ping 2.6s ease-out infinite;
	}

	/* ----- Mobile call/quote bar slides up after the visitor starts scrolling ----- */
	.cfdg-js .cfdg-mobile-bar {
		transform: translateY(110%);
		transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	body.cfdg-scrolled .cfdg-mobile-bar {
		transform: none;
	}
}