/* ==========================================================================
   Animations — Scroll-triggered entrance effects & CSS scroll-driven parallax
   ========================================================================== */

/* ==========================================================================
   Base: hidden state for all animated elements
   ========================================================================== */

[data-animate] {
	opacity: 0;
	will-change: opacity, transform;
}

/* ==========================================================================
   Fade Up
   ========================================================================== */

[data-animate="fade-up"] {
	transform: translateY(3rem);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
}

[data-animate="fade-up"].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Fade Down
   ========================================================================== */

[data-animate="fade-down"] {
	transform: translateY(-2rem);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
}

[data-animate="fade-down"].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Fade In (simple opacity)
   ========================================================================== */

[data-animate="fade-in"] {
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
}

[data-animate="fade-in"].is-visible {
	opacity: 1;
}

/* ==========================================================================
   Slide Left (from right)
   ========================================================================== */

[data-animate="slide-left"] {
	transform: translateX(4rem);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
}

[data-animate="slide-left"].is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* ==========================================================================
   Slide Right (from left)
   ========================================================================== */

[data-animate="slide-right"] {
	transform: translateX(-4rem);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
}

[data-animate="slide-right"].is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* ==========================================================================
   Scale Up (zoom in from smaller)
   ========================================================================== */

[data-animate="scale-up"] {
	transform: scale(0.85);
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
}

[data-animate="scale-up"].is-visible {
	opacity: 1;
	transform: scale(1);
}

/* ==========================================================================
   Clip Reveal (bottom to top wipe)
   ========================================================================== */

[data-animate="clip-up"] {
	clip-path: inset(100% 0 0 0);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
	            clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
	opacity: 1;
}

[data-animate="clip-up"].is-visible {
	clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   Line Draw (hr / separator reveal)
   ========================================================================== */

[data-animate="line-draw"] {
	transform: scaleX(0);
	transform-origin: left;
	transition: opacity 0.5s ease,
	            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
}

[data-animate="line-draw"].is-visible {
	opacity: 1;
	transform: scaleX(1);
}

/* ==========================================================================
   Pop (scale bounce)
   ========================================================================== */

[data-animate="pop"] {
	transform: scale(0.6);
	transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition-delay: var(--delay, 0s);
}

[data-animate="pop"].is-visible {
	opacity: 1;
	transform: scale(1);
}

/* ==========================================================================
   Blur In (defocus to focus)
   ========================================================================== */

[data-animate="blur-in"] {
	filter: blur(8px);
	transform: translateY(1rem);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            filter 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
}

[data-animate="blur-in"].is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

/* ==========================================================================
   CSS Scroll-Driven — Parallax & decorative effects
   ========================================================================== */

@supports (animation-timeline: view()) {

	@keyframes blog-parallax {
		from { transform: translateY(4rem); }
		to   { transform: translateY(-4rem); }
	}

	@keyframes offer-parallax {
		from { transform: translateY(2rem); opacity: 0.7; }
		to   { transform: translateY(0); opacity: 1; }
	}

	@keyframes ellipse-drift-right {
		from { transform: translate(1rem, 1.5rem) rotate(-3deg); }
		to   { transform: translate(-1rem, -1.5rem) rotate(3deg); }
	}

	@keyframes ellipse-drift-left {
		from { transform: translate(-1rem, 1rem) rotate(2deg); }
		to   { transform: translate(1rem, -1rem) rotate(-2deg); }
	}

	.blog__bg-text {
		animation: blog-parallax linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}

	.offer__inner {
		animation: offer-parallax linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 60%;
	}

	.about-info::before {
		animation: ellipse-drift-right linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}

	.about-info::after {
		animation: ellipse-drift-left linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}

	.about-stats::before {
		animation: ellipse-drift-right linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
}

/* ==========================================================================
   Hero Slider — On-load card entrance
   ========================================================================== */

@keyframes slider-card-enter {
	from {
		opacity: 0;
		transform: translateY(2rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slider-content-enter {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.slider__slide:first-child .slider__title {
	opacity: 0;
	animation: slider-content-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.slider__slide:first-child .slider__card {
	opacity: 0;
	animation: slider-card-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slider__slide:first-child .slider__card--1 { animation-delay: 0.2s; }
.slider__slide:first-child .slider__card--2 { animation-delay: 0.3s; }
.slider__slide:first-child .slider__card--3 { animation-delay: 0.4s; }
.slider__slide:first-child .slider__card--4 { animation-delay: 0.25s; }
.slider__slide:first-child .slider__card--5 { animation-delay: 0.35s; }

.slider__slide:first-child .slider__cta {
	opacity: 0;
	animation: slider-content-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* ==========================================================================
   Stats pulse on count
   ========================================================================== */

@keyframes stats-pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}

.about-stats__number.is-counting {
	animation: stats-pulse 0.4s ease;
}

/* ==========================================================================
   Prefers Reduced Motion — disable all animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	[data-animate],
	.slider__slide:first-child .slider__title,
	.slider__slide:first-child .slider__card,
	.slider__slide:first-child .slider__cta {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
		animation: none !important;
	}

	.blog__bg-text,
	.offer__inner {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.about-stats__number.is-counting {
		animation: none;
	}
}