/**
 * Animations CSS
 * Fade-in on scroll using IntersectionObserver (class toggled by main.js)
 *
 * @package naql-jeddah
 */

/* ─── Base: elements start invisible ─────────────────────────── */
.fade-in,
.fade-in-up,
.fade-in-right,
.fade-in-left,
.scale-in {
	opacity: 0;
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}

.fade-in       { transform: none; }
.fade-in-up    { transform: translateY(30px); }
.fade-in-right { transform: translateX(-30px); }
.fade-in-left  { transform: translateX(30px); }
.scale-in      { transform: scale(.92); }

/* ─── Visible state (added by JS) ────────────────────────────── */
.fade-in.visible,
.fade-in-up.visible,
.fade-in-right.visible,
.fade-in-left.visible,
.scale-in.visible {
	opacity: 1;
	transform: none;
}

/* ─── Stagger delays ─────────────────────────────────────────── */
.stagger-1 { transition-delay: .1s; }
.stagger-2 { transition-delay: .2s; }
.stagger-3 { transition-delay: .3s; }
.stagger-4 { transition-delay: .4s; }
.stagger-5 { transition-delay: .5s; }
.stagger-6 { transition-delay: .6s; }

/* ─── Pulse animation (floating buttons) ─────────────────────── */
@keyframes pulse-ring {
	0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
	70%  { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.btn-whatsapp-float { animation: pulse-ring 2.5s infinite; }

/* ─── Counter number count-up animation ──────────────────────── */
@keyframes countUp {
	from { opacity: 0; transform: translateY(15px); }
	to   { opacity: 1; transform: translateY(0); }
}

.stat-number.counting { animation: countUp .4s ease forwards; }

/* ─── Sticky header transition ───────────────────────────────── */
.site-header {
	transition: background .3s ease, box-shadow .3s ease;
}

.site-header.scrolled {
	background: rgba(255, 255, 255, .97) !important;
	box-shadow: 0 2px 20px rgba(0, 0, 0, .12) !important;
}

/* ─── Scroll-to-top button ───────────────────────────────────── */
#scroll-top {
	position: fixed;
	bottom: 90px;
	left: 20px;
	width: 46px;
	height: 46px;
	background: var(--color-primary);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s, transform .3s;
	transform: translateY(20px);
	z-index: 998;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

#scroll-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#scroll-top:hover { background: var(--color-secondary); }

@media (max-width: 768px) {
	#scroll-top { left: 15px; bottom: 80px; width: 40px; height: 40px; }
}