/**
 * Rohrreinigung 24 Theme — Scroll Animations & Keyframes
 * All animation definitions, scroll-triggered classes, hover states, and counters.
 *
 * @package rohrreinigung24
 * @version 1.0.0
 */

/* ============================================================================
   SCROLL ANIMATION BASE STATES (initial — invisible/offset)
   ============================================================================ */

.fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in {
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ============================================================================
   VISIBLE STATE — added by IntersectionObserver via JS
   ============================================================================ */

.fade-in-up.is-visible,
.fade-in-left.is-visible,
.fade-in-right.is-visible,
.scale-in.is-visible {
	opacity: 1;
	transform: none;
}

/* [data-animate] — alias for fade-in-up */
[data-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

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

/* ============================================================================
   STAGGERED DELAYS
   Applies to children of any animated container (nth-child 1–6).
   ============================================================================ */

/* Trust stats stagger */
.trust-stats .trust-stat:nth-child(1) { transition-delay: 0ms; }
.trust-stats .trust-stat:nth-child(2) { transition-delay: 100ms; }
.trust-stats .trust-stat:nth-child(3) { transition-delay: 200ms; }
.trust-stats .trust-stat:nth-child(4) { transition-delay: 300ms; }

/* Service cards stagger */
.services-grid .service-card:nth-child(1) { transition-delay: 0ms; }
.services-grid .service-card:nth-child(2) { transition-delay: 80ms; }
.services-grid .service-card:nth-child(3) { transition-delay: 160ms; }
.services-grid .service-card:nth-child(4) { transition-delay: 240ms; }
.services-grid .service-card:nth-child(5) { transition-delay: 320ms; }
.services-grid .service-card:nth-child(6) { transition-delay: 400ms; }

/* Generic nth-child stagger (1–6) for any animated list */
.fade-in-up:nth-child(1) { transition-delay: 0ms; }
.fade-in-up:nth-child(2) { transition-delay: 100ms; }
.fade-in-up:nth-child(3) { transition-delay: 200ms; }
.fade-in-up:nth-child(4) { transition-delay: 300ms; }
.fade-in-up:nth-child(5) { transition-delay: 400ms; }
.fade-in-up:nth-child(6) { transition-delay: 500ms; }

/* Testimonial cards stagger */
.testimonials-grid .testimonial-card:nth-child(1) { transition-delay: 0ms; }
.testimonials-grid .testimonial-card:nth-child(2) { transition-delay: 120ms; }
.testimonials-grid .testimonial-card:nth-child(3) { transition-delay: 240ms; }

/* Process steps stagger */
.process-steps .process-step:nth-child(1) { transition-delay: 0ms; }
.process-steps .process-step:nth-child(3) { transition-delay: 150ms; }
.process-steps .process-step:nth-child(5) { transition-delay: 300ms; }

/* ============================================================================
   SERVICE CARD HOVER
   ============================================================================ */

.service-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(40, 171, 225, 0.15);
}

/* ============================================================================
   BUTTON PULSE — for emergency CTA button
   ============================================================================ */

@keyframes pulse-blue {
	0% {
		box-shadow: 0 0 0 0 rgba(40, 171, 225, 0.5);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(40, 171, 225, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(40, 171, 225, 0);
	}
}

/* Red pulse for emergency button */
@keyframes pulse-red {
	0% {
		box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.5);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(192, 57, 43, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(192, 57, 43, 0);
	}
}

.emergency-float-btn a {
	animation: pulse-red 2s ease-in-out infinite;
}

/* ============================================================================
   GIF PLACEHOLDER ANIMATION
   Rotating ring around placeholder until GIF is loaded.
   ============================================================================ */

@keyframes service-rotate {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.service-gif-placeholder::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 6px;
	border: 2px solid transparent;
	border-top-color: #28ABE1;
	border-right-color: rgba(40, 171, 225, 0.3);
	animation: service-rotate 2.5s linear infinite;
	pointer-events: none;
}

/* When a real GIF image is inside, hide the rotation ring */
.service-gif-placeholder img ~ ::after,
.service-gif-placeholder:has(img)::after {
	display: none;
}

/* ============================================================================
   PULSING DOT (for hero badge and expert sidebar)
   ============================================================================ */

@keyframes pulse-dot {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.4);
		opacity: 0.6;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.pulse-dot {
	animation: pulse-dot 1.6s ease-in-out infinite;
}

.pulse-dot-green {
	animation: pulse-dot 1.6s ease-in-out infinite;
}

/* ============================================================================
   COUNTER NUMBER ANIMATION
   ============================================================================ */

@keyframes count-up {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.stat-number {
	animation: count-up 0.4s ease forwards;
}

/* ============================================================================
   TESTIMONIAL CARD HOVER
   ============================================================================ */

.testimonial-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================================================
   TRUST STAT ICON HOVER
   ============================================================================ */

.trust-stat:hover .trust-stat-icon {
	background-color: #28ABE1;
	transition: background-color 0.25s ease;
}

.trust-stat:hover .trust-stat-icon svg {
	fill: #ffffff;
	transition: fill 0.25s ease;
}

/* ============================================================================
   FAQ ICON ROTATION
   ============================================================================ */

.faq-icon {
	transition: transform 0.3s ease, background-color 0.25s ease, color 0.25s ease;
}

.faq-item.active .faq-icon {
	transform: rotate(45deg);
}

/* ============================================================================
   PROCESS STEP HOVER
   ============================================================================ */

.process-step {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.process-step:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

/* ============================================================================
   HEADER TRANSITION
   ============================================================================ */

.site-header {
	transition: height 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================================
   MOBILE NAV LINK TRANSITION
   ============================================================================ */

.mobile-menu nav ul li a {
	transition: background-color 0.2s ease, padding-left 0.2s ease, color 0.2s ease;
}

/* ============================================================================
   BUTTON HOVER LIFT
   ============================================================================ */

.btn {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
	            transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
	outline: 2px solid transparent;
}

.btn:focus-visible {
	outline: 2px solid #28ABE1;
	outline-offset: 3px;
}

/* ============================================================================
   ACCESSIBILITY: Reduce motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
	.fade-in-up,
	.fade-in-left,
	.fade-in-right,
	.scale-in,
	[data-animate] {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	.fade-in-up.is-visible,
	.fade-in-left.is-visible,
	.fade-in-right.is-visible,
	.scale-in.is-visible,
	[data-animate].is-visible {
		opacity: 1;
		transform: none;
	}

	.service-gif-placeholder::after {
		animation: none;
	}

	.pulse-dot,
	.pulse-dot-green {
		animation: none;
	}

	.emergency-float-btn a {
		animation: none;
	}

	.btn,
	.service-card,
	.testimonial-card,
	.process-step,
	.site-header,
	.faq-icon {
		transition: none;
	}
}