/* ── Turkof entrance animations ──────────────────
   Pure CSS keyframes for hero (above fold),
   IntersectionObserver-driven transitions for below-fold.
   Zero layout shifts – only opacity + transform.
   ─────────────────────────────────────────────── */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.turkof-hero__rating,
	.turkof-hero__title,
	.turkof-hero__category-label,
	.turkof-hero__subtitle,
	.turkof-hero__buttons,
	.turkof-hero__divider,
	.turkof-hero__stats,
	.turkof-hero__image,
	.turkof-hero__quote,
	.turkof-anim,
	.turkof-stagger-child {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ── Keyframes ──────────────────────────────────── */

@keyframes turkofFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes turkofFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes turkofScaleIn {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes turkofSlideLeft {
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ── Hero (above fold – play on page load) ────── */

.turkof-hero__rating      { animation: turkofFadeUp 0.7s ease both 0s; }
.turkof-hero__title        { animation: turkofFadeUp 0.7s ease both 0.1s; }
.turkof-hero__category-label { animation: turkofFadeUp 0.7s ease both 0.15s; }
.turkof-hero__subtitle     { animation: turkofFadeUp 0.7s ease both 0.15s; }
.turkof-hero__buttons      { animation: turkofFadeUp 0.7s ease both 0.25s; }
.turkof-hero__divider      { animation: turkofFadeIn 0.7s ease both 0.35s; }
.turkof-hero__stats        { animation: turkofFadeUp 0.7s ease both 0.4s; }
.turkof-hero__image        { animation: turkofScaleIn 0.8s ease both 0.2s; }
.turkof-hero__video        { animation: turkofScaleIn 0.8s ease both 0.2s; }
.turkof-hero__quote        { animation: turkofSlideLeft 0.7s ease both 0.6s; }

/* ── Blob ambient motion ────────────────────────── */

@keyframes turkofBlobMorph1 {
	0%   { transform: scale(1, 1) rotate(0deg); }
	15%  { transform: scale(1.02, 0.98) rotate(0.8deg); }
	30%  { transform: scale(0.98, 1.02) rotate(-0.5deg); }
	50%  { transform: scale(1.02, 0.99) rotate(1deg); }
	65%  { transform: scale(0.98, 1.02) rotate(-0.8deg); }
	80%  { transform: scale(1.02, 0.98) rotate(0.5deg); }
	100% { transform: scale(1, 1) rotate(0deg); }
}

@keyframes turkofBlobMorph2 {
	0%   { transform: scale(1, 1) rotate(0deg); }
	20%  { transform: scale(0.98, 1.02) rotate(-1deg); }
	40%  { transform: scale(1.02, 0.98) rotate(0.8deg); }
	60%  { transform: scale(0.99, 1.02) rotate(-0.5deg); }
	80%  { transform: scale(1.02, 0.98) rotate(1deg); }
	100% { transform: scale(1, 1) rotate(0deg); }
}

.turkof-hero__blob--big {
	animation: turkofBlobMorph1 20s ease-in-out infinite;
	transform-origin: 40% 60%;
}

.turkof-hero__blob--circle {
	animation: turkofBlobMorph2 16s ease-in-out infinite;
	transform-origin: 60% 40%;
}

/* ── Below-fold section reveal ──────────────────── */

.turkof-anim {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.turkof-anim.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── Staggered children (cards, items, steps) ──── */
/* Use !important to override block-level transition shorthand
   (e.g. a.turkof-service-card has its own transition for hover effects)
   that would otherwise clobber the entrance animation properties. */

.turkof-stagger-child {
	opacity: 0 !important;
	transform: translateY(16px) !important;
	transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
	will-change: opacity, transform;
}

.turkof-stagger-child.is-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}