/* ==========================================================================
   Subtle site animations
   - Scroll reveals are driven by assets/js/animations.js (IntersectionObserver)
   - Everything degrades gracefully: without JS, .reveal never gets .is-visible,
     so a `no-js` guard below keeps content visible.
   - Fully disabled under prefers-reduced-motion.
   ========================================================================== */

/* --- Scroll reveal ------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
	            transform .7s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}

.reveal-left  { transform: translate3d(-32px, 0, 0); }
.reveal-right { transform: translate3d(32px, 0, 0); }
.reveal-zoom  { transform: scale(.96); }

.reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.reveal-zoom.is-visible { transform: scale(1); }

/* Stagger: set by JS as an inline --reveal-delay, with a CSS fallback */
.reveal { transition-delay: var(--reveal-delay, 0s); }

/* Once revealed, drop the compositing hint and clear the transform entirely.
   A lingering translate3d(0,0,0) still creates a stacking context and a
   containing block for position: fixed/absolute descendants, which shifts the
   decorative shapes and any fixed-position children. */
.reveal.is-done {
	will-change: auto;
	transform: none;
	transition: none;
}

/* --- Hover micro-interactions -------------------------------------------- */
.services-tiem,
.choose-item,
.contact-item,
.solution-right,
.testimonial-tiem {
	transition: transform .35s ease, box-shadow .35s ease;
}

.services-tiem:hover,
.choose-item:hover,
.contact-item:hover,
.solution-right:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .28);
}

/* Icons give a gentle nudge with their card */
.services-img,
.choose-icon,
.solution-icon {
	transition: transform .35s ease;
}

.services-tiem:hover .services-img,
.choose-item:hover .choose-icon,
.solution-right:hover .solution-icon {
	transform: scale(1.08);
}

/* Buttons */
.attoyer-btn a,
.banner-btn a,
.attoyer-btn button,
.attoyer-btn input[type="submit"] {
	transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease, color .28s ease;
}

.attoyer-btn a:hover,
.banner-btn a:hover,
.attoyer-btn button:hover,
.attoyer-btn input[type="submit"]:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .45);
}

/* Image containers: soft zoom on hover.
   No `overflow: hidden` here — these wrappers are positioned ancestors for the
   decorative .shape* elements, and clipping them hides those. The zoom is small
   enough that it reads fine unclipped. */
.about-img img,
.why-choose-img img {
	transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.about-img:hover img,
.why-choose-img:hover img {
	transform: scale(1.04);
}

/* Links in menus + footer */
.main-menu ul li a,
.footer-menu ul li a,
.basic-info ul li a {
	transition: color .25s ease, opacity .25s ease;
}

.footer-menu ul li a:hover,
.basic-info ul li a:hover {
	opacity: .85;
}

/* --- Sticky header --------------------------------------------------------
   Deliberately left alone. style.css already animates .header-menu.sticky-menu
   with its own `header_sticky` keyframes, and that element is position: fixed —
   adding a transform here both overrode that animation and gave the fixed
   header a transformed ancestor, which breaks its positioning.
   -------------------------------------------------------------------------- */

/* --- Scroll-to-top + WhatsApp floating buttons --------------------------- */
.scroll-top,
#scroll-top,
.whatsapp-float,
.whatsapp-btn {
	transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease;
}

.scroll-top:hover,
#scroll-top:hover,
.whatsapp-float:hover,
.whatsapp-btn:hover {
	transform: translateY(-4px) scale(1.06);
}

/* --- FAQ accordion icon --------------------------------------------------- */
.collapse-header i {
	transition: transform .3s ease;
}

.collapse-header:hover i {
	transform: rotate(90deg);
}

/* --- Form fields ---------------------------------------------------------- */
.form-control {
	transition: border-color .25s ease, box-shadow .25s ease;
}

.form-control:focus {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

/* --- Accessibility --------------------------------------------------------
   No-JS needs no guard: the .reveal class is applied by JS, so without it the
   content simply renders as normal.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal-left,
	.reveal-right,
	.reveal-zoom {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}