/* Wrackdell homepage motion layer — scroll reveals, tilt cards, magnetic
   buttons, animated counters, floating orbs, cursor glow. Scoped to
   index.html only (loaded there only). Respects prefers-reduced-motion. */

/* ---------- Scroll reveal ---------- */
[data-wd-reveal] {
	opacity: 0;
	will-change: transform, opacity;
	transition: opacity 0.8s cubic-bezier(.16,.8,.24,1), transform 0.8s cubic-bezier(.16,.8,.24,1);
}
[data-wd-reveal="up"] { transform: translateY(36px); }
[data-wd-reveal="scale"] { transform: translateY(20px) scale(0.92); }
[data-wd-reveal="left"] { transform: translateX(-40px); }
[data-wd-reveal="right"] { transform: translateX(40px); }

[data-wd-reveal].wd-in {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

/* ---------- Decorative floating gradient orbs ---------- */
.wd-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
	opacity: 0.55;
	will-change: transform;
}
.wd-orb-1 { width: 220px; height: 220px; background: radial-gradient(circle at 30% 30%, #7ec3ff, #1E88E5 70%); top: 6%; left: 4%; animation: wd-float-a 9s ease-in-out infinite; }
.wd-orb-2 { width: 160px; height: 160px; background: radial-gradient(circle at 30% 30%, #ffe28a, #F4B400 70%); top: 55%; right: 6%; animation: wd-float-b 11s ease-in-out infinite; }
.wd-orb-3 { width: 130px; height: 130px; background: radial-gradient(circle at 30% 30%, #b7d8ff, #56b5f3 70%); bottom: 4%; left: 30%; animation: wd-float-c 8s ease-in-out infinite; }

@keyframes wd-float-a {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(18px, 24px) rotate(8deg); }
}
@keyframes wd-float-b {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(-20px, 18px) rotate(-10deg); }
}
@keyframes wd-float-c {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(14px, -16px) scale(1.08); }
}

/* Gentle idle float applied to hero imagery */
.wd-idle-float {
	animation: wd-idle-float 5.5s ease-in-out infinite;
	will-change: transform;
}
@keyframes wd-idle-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

/* ---------- Icon-box tilt cards (Our Capabilities) ---------- */
.elementor-element-829fe8b .elementor-widget-icon-box {
	--rx: 0deg;
	--ry: 0deg;
	transform: perspective(900px) rotateX(var(--ry)) rotateY(var(--rx)) translateY(0);
	transition: transform 0.35s cubic-bezier(.16,.8,.24,1), box-shadow 0.35s ease;
	border-radius: 14px;
	will-change: transform;
}
.elementor-element-829fe8b .elementor-widget-icon-box:hover {
	box-shadow: 0 18px 40px rgba(21, 101, 192, 0.16);
}
.elementor-element-829fe8b .elementor-icon-box-icon .elementor-icon {
	transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), background 0.35s ease, color 0.35s ease;
}
.elementor-element-829fe8b .elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon {
	transform: scale(1.14) rotate(-6deg);
}

/* ---------- Magnetic buttons ---------- */
.elementor-button {
	position: relative;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(.16,.8,.24,1), box-shadow 0.25s ease;
	will-change: transform;
}
.elementor-button::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
	transform: skewX(-20deg);
	transition: left 0.65s ease;
	pointer-events: none;
}
.elementor-button:hover::after {
	left: 130%;
}

/* ---------- Stat counters ---------- */
.wd-counting { transition: transform 0.2s ease; }
.wd-counted {
	animation: wd-count-pop 0.5s ease;
}
@keyframes wd-count-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.12); }
	100% { transform: scale(1); }
}

/* ---------- Expertise cards stagger reveal handled via [data-wd-reveal] ---------- */

/* ---------- Cursor glow ---------- */
#wd-cursor-glow {
	position: fixed;
	top: 0;
	left: 0;
	width: 260px;
	height: 260px;
	margin-left: -130px;
	margin-top: -130px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30,136,229,0.16) 0%, rgba(30,136,229,0) 70%);
	pointer-events: none;
	z-index: 9999;
	transform: translate3d(-9999px, -9999px, 0);
	will-change: transform;
	mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
	[data-wd-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.wd-orb, .wd-idle-float, .wd-counted {
		animation: none !important;
	}
	#wd-cursor-glow { display: none !important; }
	.elementor-element-829fe8b .elementor-widget-icon-box {
		transform: none !important;
	}
}

@media (pointer: coarse) {
	#wd-cursor-glow { display: none !important; }
}