/**
 * SHILOTECH Enterprise — Animations.
 * Fade-up reveal, Ken Burns, pulse, marquee, ripple, micro-interactions.
 */

/* ---------- Scroll reveal (JS adds .is-visible) ---------- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity .7s cubic-bezier(.22, .61, .36, 1),
		transform .7s cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--d, 0s);
	will-change: opacity, transform;
}

.reveal.reveal-left  { transform: translateX(-36px); }
.reveal.reveal-right { transform: translateX(36px); }
.reveal.reveal-zoom  { transform: scale(.92); }

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* No-JS fallback: never hide content when JS is unavailable. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Ken Burns (hero background) ---------- */
@keyframes shilo-kenburns {
	0%   { transform: scale(1)    translate(0, 0); }
	50%  { transform: scale(1.08) translate(-1.5%, -1%); }
	100% { transform: scale(1)    translate(0, 0); }
}

.kenburns {
	animation: shilo-kenburns 24s ease-in-out infinite;
	will-change: transform;
}

/* ---------- Contact hub pulse (every 3 s) ---------- */
@keyframes shilo-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(41, 182, 246, .55); }
	60%  { box-shadow: 0 0 0 18px rgba(41, 182, 246, 0); }
	100% { box-shadow: 0 0 0 0 rgba(41, 182, 246, 0); }
}

.hub-toggle {
	animation: shilo-pulse 3s ease-out infinite;
}

/* ---------- Partner logo marquee ---------- */
@keyframes shilo-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.logo-track {
	animation: shilo-marquee 32s linear infinite;
	will-change: transform;
}

.logo-slider:hover .logo-track,
.logo-slider:focus-within .logo-track {
	animation-play-state: paused;
}

/* ---------- Button ripple ---------- */
@keyframes shilo-ripple {
	to { transform: scale(4); opacity: 0; }
}

.btn { position: relative; overflow: hidden; }

.btn .ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	transform: scale(0);
	animation: shilo-ripple .6s ease-out forwards;
	pointer-events: none;
}

/* ---------- Logo subtle rotate on first load ---------- */
@keyframes shilo-logo-in {
	0%   { transform: rotate(-6deg) scale(.9); opacity: 0; }
	100% { transform: rotate(0)     scale(1);  opacity: 1; }
}

.site-branding { animation: shilo-logo-in .8s cubic-bezier(.22, .61, .36, 1) both; }

/* ---------- Hub bubble pop ---------- */
@keyframes shilo-bubble-in {
	0%   { opacity: 0; transform: translateY(10px) scale(.9); }
	100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.hub-bubble.is-showing { animation: shilo-bubble-in .35s ease-out both; }

/* ---------- Counter glow while counting ---------- */
.stat-value.is-counting,
.counter-value.is-counting {
	text-shadow: 0 0 18px rgba(41, 182, 246, .45);
}


/* ---------- Dropdown float in ---------- */
.sub-menu {
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* ---------- Icon micro-interactions ---------- */
.service-icon,
.why-icon,
.industry-icon {
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), background .35s ease, color .35s ease;
}

.service-card:hover .service-icon { transform: scale(1.12); }
.industry-card:hover .industry-icon { transform: scale(1.15); }

/* ---------- Card lift (spec: 8px) ---------- */
.service-card,
.project-card,
.why-card,
.industry-card,
.about-point,
.stat-card {
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

.service-card:hover,
.project-card:hover,
.why-card:hover,
.industry-card:hover,
.stat-card:hover {
	transform: translateY(-8px);
}

/* ---------- Project image zoom ---------- */
.project-thumb img {
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.project-card:hover .project-thumb img { transform: scale(1.08); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.reveal { opacity: 1; transform: none; }
	.kenburns, .logo-track, .hub-toggle, .site-branding { animation: none; }
}