/* ==========================================================================
   Heystek Construction — premium motion layer
   Scroll reveals, 3D tilt cards, magnetic buttons, hero canvas, marquee.
   Only active when .js-anim is present (JS enqueued). Respects reduced motion.
   ========================================================================== */

/* ---------- Scroll reveal base states (hidden until .in-view) ---------- */
.js-anim [data-reveal] {
	opacity: 0;
	transform: translateY(36px) scale(0.985);
	transition: opacity .85s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0s),
		transform .85s cubic-bezier(.22,.61,.36,1) var(--rv-d, 0s);
}
.js-anim [data-reveal="left"] { transform: translateX(-52px); }
.js-anim [data-reveal="right"] { transform: translateX(52px); }
.js-anim [data-reveal="zoom"] { transform: scale(0.86); }
.js-anim [data-reveal="down"] { transform: translateY(-40px); }
.js-anim [data-reveal="flip"] {
	transform: perspective(1200px) rotateX(-38deg) translateY(46px) scale(0.94);
	transform-origin: 50% 120%;
}
.js-anim [data-reveal="right"].in-view,
.js-anim [data-reveal="left"].in-view,
.js-anim [data-reveal="zoom"].in-view,
.js-anim [data-reveal="down"].in-view,
.js-anim [data-reveal="fade"].in-view,
.js-anim [data-reveal="flip"].in-view,
.js-anim [data-reveal].in-view { opacity: 1; transform: none; }

/* ---------- 3D tilt cards ---------- */
.bk-tilt {
	position: relative;
	transform-style: preserve-3d;
	transition: box-shadow .35s ease, border-color .35s ease, transform .12s linear;
}
.bk-tilt .bk-project-body,
.bk-tilt .bk-service-body,
.bk-tilt .bk-cert-body {
	transform: translateZ(28px);
}
.bk-tilt .bk-project-media img,
.bk-tilt .bk-service-media img,
.bk-tilt .bk-cert-media img {
	transform: translateZ(6px) scale(1.001);
	transition: transform .5s ease;
}
.bk-tilt:hover .bk-project-media img,
.bk-tilt:hover .bk-service-media img,
.bk-tilt:hover .bk-cert-media img { transform: translateZ(6px) scale(1.08); }
.bk-tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(560px circle at var(--gx, 50%) var(--gy, 30%),
			rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 46%);
	opacity: 0;
	transition: opacity .3s ease;
}
.bk-tilt:hover::after { opacity: 1; }

/* ---------- Magnetic buttons ---------- */
.bk-magnetic {
	transition: transform .25s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Button sheen ---------- */
.js-anim .wp-block-button__link.wp-element-button {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.js-anim .wp-block-button__link.wp-element-button::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: -120%;
	width: 60%;
	z-index: 0;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
}
.js-anim .wp-block-button__link.wp-element-button:hover::after { animation: bk-sheen .9s ease; }
.js-anim .wp-block-button__link.wp-element-button > * { position: relative; z-index: 1; }
@keyframes bk-sheen { to { left: 130%; } }

/* ---------- Animated section heading underline ---------- */
.js-anim .bk-section h1.in-view::after,
.js-anim .bk-section h2.in-view::after {
	content: "";
	display: block;
	width: 0;
	height: 3px;
	margin: 12px auto 0;
	border-radius: 3px;
	background: linear-gradient(90deg, #0A294E, #1759AA 60%, #1D5391);
	transition: width .9s cubic-bezier(.22,.61,.36,1) .1s;
}
.js-anim .bk-section h1.in-view::after,
.js-anim .bk-section h2.in-view::after { width: 110px; }

/* ---------- Hero entrance ---------- */
.js-anim .bk-hero [data-reveal] { transition-delay: calc(var(--rv-d, 0s) + .4s); }
.js-anim .bk-hero .in-view { transition-delay: var(--rv-d, 0s); }

/* ---------- Hero 3D canvas layers ---------- */
.bk-hero { position: relative; }
.bk-hero-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	pointer-events: none;
}
.bk-hero .wp-block-cover__background { z-index: 0; }
.bk-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
}

/* ---------- Counters ---------- */
.bk-count { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- Partner logo marquee ---------- */
.bk-marquee { overflow: hidden; }
.bk-marquee-track {
	display: flex;
	align-items: center;
	gap: 48px;
	width: max-content;
	will-change: transform;
}
.bk-marquee-track[data-marquee="auto"] { animation: bk-marquee 30s linear infinite; }
.bk-marquee:hover .bk-marquee-track[data-marquee="auto"] { animation-play-state: paused; }
@keyframes bk-marquee { to { transform: translateX(-50%); } }

/* ---------- Process steps connector ---------- */
.bk-process .wp-block-columns { position: relative; }
.bk-process .wp-block-columns::before {
	content: "";
	position: absolute;
	top: 34px; left: 8%; right: 8%;
	height: 2px;
	background: linear-gradient(90deg, #D7E4F5, #1759AA, #D7E4F5);
	opacity: .5;
	z-index: 0;
}
.bk-process .bk-step { position: relative; z-index: 1; }

/* ---------- Scroll progress bar ---------- */
.bk-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, #1759AA, #1D5391);
	z-index: 99999;
	box-shadow: 0 0 10px rgba(23, 89, 170, .6);
	will-change: transform;
}

/* ---------- Floating background shapes ---------- */
.bk-bg-shape {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	opacity: .5;
}

/* ---------- Mobile: cheaper, snappier motion ---------- */
@media ( max-width: 640px ), ( prefers-reduced-motion: reduce ) {
	.js-anim [data-reveal] {
		transition-duration: .4s;
		transition-delay: 0s !important;
	}
	.bk-tilt { transition: none; }
}

/* ---------- Reduced motion ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.js-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
	.bk-tilt { transform: none !important; }
	.bk-marquee-track[data-marquee="auto"] { animation: none; }
	.js-anim .wp-block-button__link.wp-element-button::after { display: none; }
	.bk-slider-track { transition: none; }
}