/**
 * Site-wide motion. Transform/opacity only. No layout changes.
 */

:root {
	--bne-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--bne-motion-duration: 850ms;
	--bne-motion-distance: 30px;
	--bne-motion-distance-sm: 18px;
	--bne-motion-hero-duration: 1.2s;
	--bne-motion-image-duration: 1.1s;
}

/* --- Section scroll reveal --- */
[data-bne-reveal],
[data-bne-reveal-hero] {
	opacity: 1;
}

.js [data-bne-reveal]:not([data-bne-reveal-hero]) {
	opacity: 0;
	transform: translateY(var(--bne-motion-distance));
	transition:
		opacity var(--bne-motion-duration) var(--bne-motion-ease),
		transform var(--bne-motion-duration) var(--bne-motion-ease);
}

.js [data-bne-reveal].is-visible {
	opacity: 1;
	transform: none;
}

.js .bne-home-about[data-bne-reveal] {
	transform: none;
}

/* --- Hero entrance (page load) --- */
.js [data-bne-reveal-hero] {
	opacity: 1;
	transform: none;
}

.js [data-bne-reveal-hero] .bne-motion-hero-item {
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity var(--bne-motion-hero-duration) var(--bne-motion-ease),
		transform var(--bne-motion-hero-duration) var(--bne-motion-ease);
	transition-delay: calc(var(--bne-stagger-index, 0) * 200ms);
}

.js [data-bne-reveal-hero].is-entered .bne-motion-hero-item {
	opacity: 1;
	transform: none;
}

/* --- Stagger items (lists, grids, cards) --- */
.js .bne-motion-stagger > .bne-motion-item {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 800ms var(--bne-motion-ease),
		transform 800ms var(--bne-motion-ease);
	transition-delay: calc(var(--bne-stagger-index, 0) * var(--bne-stagger-step, 110ms));
}

.js [data-bne-reveal].is-visible .bne-motion-stagger > .bne-motion-item,
.js [data-bne-reveal-hero].is-entered .bne-motion-stagger > .bne-motion-item {
	opacity: 1;
	transform: none;
}

/* --- Copy stagger (kicker → title → body → CTA) --- */
.js .bne-motion-copy-item {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 800ms var(--bne-motion-ease),
		transform 800ms var(--bne-motion-ease);
	transition-delay: calc(var(--bne-stagger-index, 0) * var(--bne-stagger-step, 100ms));
}

.js [data-bne-reveal].is-visible .bne-motion-copy-item,
.js [data-bne-reveal-hero].is-entered .bne-motion-copy-item {
	opacity: 1;
	transform: none;
}

/* --- Cue line signature --- */
.js [data-bne-reveal] .bne-cue-line__rule,
.js [data-bne-reveal-hero] .bne-cue-line__rule {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms var(--bne-motion-ease);
	transition-delay: calc(var(--bne-stagger-index, 0) * 200ms + 150ms);
}

.js [data-bne-reveal].is-visible .bne-cue-line__rule,
.js [data-bne-reveal-hero].is-entered .bne-cue-line__rule {
	transform: scaleX(1);
}

/* --- Image reveal --- */
.js [data-bne-image-reveal] {
	overflow: hidden;
}

.js [data-bne-image-reveal] img {
	opacity: 0;
	transform: scale(1.03);
	transition:
		opacity var(--bne-motion-image-duration) var(--bne-motion-ease),
		transform var(--bne-motion-image-duration) var(--bne-motion-ease);
}

.js [data-bne-reveal].is-visible [data-bne-image-reveal] img,
.js [data-bne-reveal-hero].is-entered [data-bne-image-reveal] img {
	opacity: 1;
	transform: scale(1);
}

.js [data-bne-parallax] {
	will-change: transform;
}

/* --- Card lift (transform only) --- */
@media (hover: hover) and (pointer: fine) {
	.bne-home-project,
	.bne-project-card,
	.bne-svc-project__card,
	.bne-svc-project .bne-project-card {
		transition: transform 300ms var(--bne-motion-ease);
	}

	.bne-home-project:hover,
	.bne-project-card:hover,
	.bne-svc-project__card:hover,
	.bne-svc-project .bne-project-card:hover {
		transform: translateY(-8px);
	}
}

/* --- Button micro-interactions --- */
@media (hover: hover) and (pointer: fine) {
	.bne-button {
		transition:
			background-color var(--bne-duration) var(--bne-easing),
			color var(--bne-duration) var(--bne-easing),
			border-color var(--bne-duration) var(--bne-easing),
			transform 250ms var(--bne-motion-ease);
	}

	.bne-button:hover {
		transform: scale(1.02);
	}

	.bne-button__icon {
		transition: transform 250ms var(--bne-motion-ease);
	}

	.bne-button:hover .bne-button__icon {
		transform: translateX(4px);
	}

	.bne-home-services__link:hover,
	.bne-svc-index__link:hover,
	.bne-svc-related__link:hover {
		transform: translateX(4px);
	}

	.bne-home-services__link,
	.bne-svc-index__link,
	.bne-svc-related__link {
		transition: transform 250ms var(--bne-motion-ease);
	}

	.bne-footer a:hover .bne-icon {
		transform: translateX(4px);
	}

	.bne-footer a .bne-icon {
		transition: transform 250ms var(--bne-motion-ease);
	}
}

/* --- Navbar polish --- */
.bne-header .bne-nav__list a {
	transition:
		color 200ms var(--bne-easing),
		opacity 200ms var(--bne-easing);
}

/* --- Footer fade --- */
.js .bne-footer[data-bne-reveal] {
	opacity: 0;
	transition: opacity 1s var(--bne-motion-ease);
}

.js .bne-footer[data-bne-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 767px) {
	.js [data-bne-reveal]:not([data-bne-reveal-hero]) {
		transform: translateY(var(--bne-motion-distance-sm));
	}

	.js [data-bne-reveal-hero] .bne-motion-hero-item,
	.js .bne-motion-stagger > .bne-motion-item,
	.js .bne-motion-copy-item {
		transform: translateY(var(--bne-motion-distance-sm));
	}
}

@media (prefers-reduced-motion: reduce) {
	.js [data-bne-reveal],
	.js [data-bne-reveal].is-visible,
	.js [data-bne-reveal-hero] .bne-motion-hero-item,
	.js [data-bne-reveal-hero].is-entered .bne-motion-hero-item,
	.js .bne-motion-stagger > .bne-motion-item,
	.js .bne-motion-copy-item,
	.js [data-bne-image-reveal] img,
	.js .bne-footer[data-bne-reveal],
	.js .bne-footer[data-bne-reveal].is-visible {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	.js [data-bne-reveal] .bne-cue-line__rule,
	.js [data-bne-reveal-hero] .bne-cue-line__rule,
	.js [data-bne-reveal].is-visible .bne-cue-line__rule,
	.js [data-bne-reveal-hero].is-entered .bne-cue-line__rule {
		transform: none;
		transition: none;
	}

	.js [data-bne-parallax] {
		transform: none !important;
		will-change: auto;
	}

	.bne-home-project:hover,
	.bne-project-card:hover,
	.bne-svc-project__card:hover,
	.bne-button:hover,
	.bne-button:hover .bne-button__icon {
		transform: none;
	}
}