/**
 * Valco Theme — scroll-reveal motion.
 *
 * Elements carrying data-valco-anim start hidden and animate in when they enter
 * the viewport (driven by assets/js/animations.js). Everything degrades to
 * fully visible when JavaScript is off or the visitor prefers reduced motion.
 */

:root {
	--valco-anim-duration: 800ms;
	--valco-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--valco-anim-distance: 2.5rem;
}

/* Only hide elements once the script has confirmed it is running. */
.valco-motion [data-valco-anim] {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity var(--valco-anim-duration) var(--valco-anim-ease),
		transform var(--valco-anim-duration) var(--valco-anim-ease);
	transition-delay: var(--valco-anim-delay, 0ms);
}

.valco-motion [data-valco-anim="fade-up"]    { transform: translateY(var(--valco-anim-distance)); }
.valco-motion [data-valco-anim="fade-down"]  { transform: translateY(calc(var(--valco-anim-distance) * -1)); }
.valco-motion [data-valco-anim="fade-left"]  { transform: translateX(var(--valco-anim-distance)); }
.valco-motion [data-valco-anim="fade-right"] { transform: translateX(calc(var(--valco-anim-distance) * -1)); }
.valco-motion [data-valco-anim="fade-in"]    { transform: none; }
.valco-motion [data-valco-anim="zoom"]       { transform: scale(0.92); }

/* Revealed state.
   No clip-path here: it clips to the border-box and would cut off any child
   deliberately positioned outside its parent — the overlapping square and the
   decorative block in the "Why Choose Us" image group both sit outside their
   wrapper. clip-path belongs to the reveal animation alone, below. */
.valco-motion [data-valco-anim].is-visible {
	opacity: 1;
	transform: none;
}

/* Reveal wipes upward, so it owns its clip-path and is the only animation that
   clips. Use it only on elements whose content stays inside their own box. */
.valco-motion [data-valco-anim="reveal"] {
	transform: translateY(1.5rem);
	clip-path: inset(0 0 100% 0);
}

.valco-motion [data-valco-anim="reveal"].is-visible {
	clip-path: inset(0 0 0 0);
}

/* -------------------------------------------------------------------------
 * Hero slide content — staggered entrance on the active slide
 * ---------------------------------------------------------------------- */

.valco-motion .valco-hero-slide [data-valco-hero] {
	opacity: 0;
	transform: translateY(2rem);
	transition:
		opacity 900ms var(--valco-anim-ease),
		transform 900ms var(--valco-anim-ease);
}

.valco-motion .valco-hero-slide.is-active [data-valco-hero],
.valco-motion .slick-active [data-valco-hero] {
	opacity: 1;
	transform: none;
}

.valco-motion .valco-hero-slide [data-valco-hero="1"] { transition-delay: 150ms; }
.valco-motion .valco-hero-slide [data-valco-hero="2"] { transition-delay: 300ms; }
.valco-motion .valco-hero-slide [data-valco-hero="3"] { transition-delay: 450ms; }
.valco-motion .valco-hero-slide [data-valco-hero="4"] { transition-delay: 600ms; }

/* -------------------------------------------------------------------------
 * Ambient motion
 * ---------------------------------------------------------------------- */

/* Subtle parallax drift applied to decorative squares. */
.valco-motion [data-valco-parallax] {
	will-change: transform;
}

/* Counter numbers pop slightly as they land. */
.valco-motion .valco-counter.is-visible {
	animation: valco-pop 600ms var(--valco-anim-ease);
}

@keyframes valco-pop {
	0%   { transform: scale(0.9); }
	60%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}

/* Card hover lift, matching the design's shadow transitions. */
.valco-industry-tile,
.valco-gallery-item {
	transform: translateZ(0);
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.valco-motion [data-valco-anim],
	.valco-motion .valco-hero-slide [data-valco-hero] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
		animation: none !important;
	}

	.valco-hero-image,
	.valco-banner-image {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}

	.valco-hero-scroll-line {
		animation: none !important;
	}
}