/* ==========================================================================
   Qupio Solutions – Animaatiot
   IntersectionObserver-pohjaisesti aktivoituvat scroll-animaatiot
   ========================================================================== */

[data-animate] {
	opacity: 0;
	transition: opacity 800ms cubic-bezier(.2,.8,.2,1), transform 800ms cubic-bezier(.2,.8,.2,1);
	will-change: opacity, transform;
}

[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="fade-left"]  { transform: translateX(40px); }
[data-animate="fade-right"] { transform: translateX(-40px); }
[data-animate="zoom-in"]    { transform: scale(0.92); }
[data-animate="zoom-out"]   { transform: scale(1.08); }

[data-animate].is-visible {
	opacity: 1;
	transform: none;
}

/* Hover-tilt -efekti palvelukortissa */
.qupio-service-card {
	transform-style: preserve-3d;
}

/* Latausanimaatio */
.qupio-fade-in {
	animation: fadeInUp 800ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

/* Hover-shimmer painikkeissa */
.qupio-btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 600ms;
}
.qupio-btn-primary:hover::before { transform: translateX(100%); }

/* Tekstilla maagisempi värimuutos */
.qupio-text-gradient {
	display: inline-block;
}

/* Vähennä animaatioita, jos käyttäjä on niin pyytänyt */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	[data-animate] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Cursor blob -efekti poistettu turhana värikorostuksena */
.qupio-cursor-blob { display: none !important; }

/* "Magnet" -efekti CTA-painikkeissa */
.qupio-btn-primary {
	transform-origin: center;
}

/* Pieni "shake" virheellisessä lomakekentässä */
.qupio-contact-form input.is-error,
.qupio-contact-form textarea.is-error,
.qupio-contact-form select.is-error {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 4px rgba(239,68,68,0.1) !important;
	animation: qupioShake 360ms ease-in-out;
}
@keyframes qupioShake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-6px); }
	75%      { transform: translateX(6px); }
}

/* Numeroiden count-up -animaatio (käytetään JS:n kanssa) */
.qupio-stat-number { transition: none; }