/*
 * Motion — calm, editorial movement that matches the brand.
 * Reveal styles only apply under html.ea-motion (set in <head> when the
 * visitor allows motion and we're not inside the Elementor editor).
 */

/* ---------- Hover & micro-interactions (always on, cheap) ---------- */

/* Outline button fills from the right (RTL start) — the fill itself is defined in components.css. */
.ea-btn--outline {
	transition: background-size 0.45s var(--ea-ease), color 0.3s var(--ea-ease), border-color 0.3s var(--ea-ease);
}

.ea-btn--primary,
.ea-btn--light {
	transition: background-color 0.3s var(--ea-ease), color 0.3s var(--ea-ease), transform 0.3s var(--ea-ease), box-shadow 0.3s var(--ea-ease);
}

.ea-btn--primary:hover,
.ea-btn--light:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(22, 22, 22, 0.45);
}

/* Nav underline grows from the center instead of blinking in. */
.ea-nav a::after {
	opacity: 1;
	transform: scaleX(0);
	transition: transform 0.35s var(--ea-ease);
}

.ea-nav .current-menu-item > a::after,
.ea-nav .current-menu-ancestor > a::after,
.ea-nav .current_page_parent > a::after,
.ea-nav a:hover::after {
	transform: scaleX(1);
}

/* Cards lift. */
.ea-card-service,
.ea-card-blog,
.ea-feature--boxed,
.ea-testimonial {
	transition: transform 0.45s var(--ea-ease), box-shadow 0.45s var(--ea-ease), border-color 0.3s var(--ea-ease);
}

.ea-card-service:hover,
.ea-card-blog:hover,
.ea-feature--boxed:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px -28px rgba(22, 22, 22, 0.35);
}

.ea-testimonial:hover {
	border-color: var(--ea-border-strong);
}

/* Icon boxes warm up on hover. */
.ea-icon-box,
.ea-step__icon {
	transition: border-color 0.3s var(--ea-ease), background-color 0.3s var(--ea-ease), color 0.3s var(--ea-ease);
}

.ea-feature:hover .ea-icon-box,
.ea-step:hover .ea-step__icon {
	border-color: var(--ea-border-strong);
}

.ea-feature:hover .ea-icon-box .ea-icon,
.ea-step:hover .ea-step__icon .ea-icon {
	animation: ea-wiggle 0.6s var(--ea-ease);
}

@keyframes ea-wiggle {
	30% { transform: rotate(-8deg) scale(1.06); }
	60% { transform: rotate(5deg); }
}

/* Project card: text rises a little, gradient deepens. */
.ea-card-project::after {
	transition: opacity 0.5s var(--ea-ease);
}

.ea-card-project__info {
	transition: transform 0.5s var(--ea-ease);
}

.ea-card-project:hover .ea-card-project__info {
	transform: translateY(-8px);
}

.ea-card-project__info::after {
	content: "";
	display: block;
	width: 0;
	height: 1px;
	margin-top: 12px;
	background: var(--ea-text-on-dark);
	transition: width 0.5s var(--ea-ease);
}

.ea-card-project:hover .ea-card-project__info::after {
	width: 48px;
}

/* Floating buttons: gentle pulse ring on WhatsApp. */
.ea-fab--whatsapp {
	position: relative;
}

.ea-fab--whatsapp::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--ea-whatsapp-500);
	animation: ea-pulse 2.6s ease-out infinite;
	z-index: -1;
}

@keyframes ea-pulse {
	0% { transform: scale(1); opacity: 0.5; }
	70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* CTA band watermark drifts slowly. */
.ea-cta-band__pattern {
	animation: ea-drift 14s ease-in-out infinite alternate;
}

@keyframes ea-drift {
	from { transform: translateY(0) rotate(0deg); }
	to { transform: translateY(24px) rotate(4deg); }
}

/* Mobile menu items cascade in. */
.ea-mobile-menu nav > ul > li,
.ea-mobile-menu__bottom {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s var(--ea-ease), transform 0.5s var(--ea-ease);
}

.ea-mobile-menu.is-open nav > ul > li,
.ea-mobile-menu.is-open .ea-mobile-menu__bottom {
	opacity: 1;
	transform: none;
}

.ea-mobile-menu.is-open nav > ul > li:nth-child(1) { transition-delay: 0.08s; }
.ea-mobile-menu.is-open nav > ul > li:nth-child(2) { transition-delay: 0.13s; }
.ea-mobile-menu.is-open nav > ul > li:nth-child(3) { transition-delay: 0.18s; }
.ea-mobile-menu.is-open nav > ul > li:nth-child(4) { transition-delay: 0.23s; }
.ea-mobile-menu.is-open nav > ul > li:nth-child(5) { transition-delay: 0.28s; }
.ea-mobile-menu.is-open nav > ul > li:nth-child(6) { transition-delay: 0.33s; }
.ea-mobile-menu.is-open nav > ul > li:nth-child(n+7) { transition-delay: 0.38s; }
.ea-mobile-menu.is-open .ea-mobile-menu__bottom { transition-delay: 0.42s; }

/* ---------- Scroll reveals (only with html.ea-motion) ---------- */

.ea-motion [data-ea-reveal] {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity 0.6s var(--ea-ease), transform 0.7s var(--ea-ease);
	transition-delay: var(--ea-delay, 0ms);
}

.ea-motion [data-ea-reveal="fade"] {
	transform: none;
}

.ea-motion [data-ea-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Images uncover from the right (reading start), with a short settle. */
.ea-motion [data-ea-reveal="image"] {
	opacity: 1;
	transform: scale(1.06);
	clip-path: inset(0 0 0 100%);
	transition: clip-path 0.75s cubic-bezier(0.65, 0, 0.25, 1), transform 0.9s var(--ea-ease);
	transition-delay: var(--ea-delay, 0ms);
}

.ea-motion [data-ea-reveal="image"].is-in {
	transform: none;
	clip-path: inset(0 0 0 0);
}

/* Project cards: the image settles while the card fades up. */
.ea-motion .ea-card-project[data-ea-reveal] .ea-card-project__img img {
	transform: scale(1.08);
	transition: transform 0.9s var(--ea-ease);
}

.ea-motion .ea-card-project[data-ea-reveal].is-in .ea-card-project__img img {
	transform: none;
}

.ea-motion .ea-card-project[data-ea-reveal].is-in:hover .ea-card-project__img img {
	transform: scale(1.04);
}

/* Eyebrow line draws in after its heading appears. */
.ea-motion .ea-eyebrow::after {
	transition: width 0.5s var(--ea-ease) 0.2s;
}

.ea-motion [data-ea-reveal]:not(.is-in) .ea-eyebrow::after,
.ea-motion .ea-eyebrow[data-ea-reveal]:not(.is-in)::after {
	width: 0;
}

/* Stat dividers grow downwards (desktop row layout only; the mobile grid keeps static lines). */
@media (min-width: 768px) {
	.ea-motion .ea-stats .ea-stat + .ea-stat {
		border-inline-start-color: transparent;
		background: linear-gradient(var(--ea-border-strong), var(--ea-border-strong)) no-repeat right top / 1px 0%;
		transition: background-size 0.6s var(--ea-ease) 0.2s;
	}

	.ea-motion .ea-stats.is-counted .ea-stat + .ea-stat {
		background-size: 1px 100%;
	}
}

/* Hero / banner image: slow zoom-out on load. Parallax is added by JS via `translate`. */
.ea-motion .ea-hero__bg {
	animation: ea-kenburns 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes ea-kenburns {
	from { scale: 1.08; }
	to { scale: 1; }
}

/* Never animate inside the Elementor editor or for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}