/* Scroll reveals and motion */

.rf-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.rf-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.rf-reveal--delay-1 { transition-delay: 0.1s; }
.rf-reveal--delay-2 { transition-delay: 0.2s; }
.rf-reveal--delay-3 { transition-delay: 0.3s; }
.rf-reveal--delay-4 { transition-delay: 0.4s; }

.rf-float {
	animation: rf-float 5s ease-in-out infinite;
}

@keyframes rf-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.rf-demo-card.in-view .rf-typing,
.rf-demo-card.in-view .rf-bubble {
	animation-play-state: running;
}

.rf-demo-card:not(.in-view) .rf-typing span {
	animation-play-state: paused;
}

.rf-dashboard__frame {
	transition: transform 0.5s ease;
}

.rf-dashboard.in-view .rf-dashboard__frame {
	transform: perspective(800px) rotateX(2deg) translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.rf-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rf-float,
	.rf-hero__badge-dot,
	.rf-bubble,
	.rf-typing span,
	.rf-flow__step.is-active .rf-flow__dot,
	.rf-multilingual__greet-track,
	.rf-bento__sync,
	.rf-bento-cal__slot--booked,
	.rf-bento__badge,
	.rf-bento-gallery__tile,
	.rf-bento__alert {
		animation: none !important;
	}

	.rf-bento-cal__slot--booked,
	.rf-bento__badge,
	.rf-bento-gallery__tile,
	.rf-bento__alert {
		opacity: 1;
		transform: none;
	}

	.rf-phone__thread {
		transition: none;
	}

	.rf-pain__badge.is-bump,
	.rf-pain__wa-3d,
	.rf-pain__wa-glow {
		animation: none !important;
	}

	.rf-cylinder {
		animation: none !important;
		transform: rotateY(-18deg) rotateZ(-3deg) rotateX(0deg);
	}

	.rf-wa-msg {
		animation: none !important;
		opacity: 0;
		filter: none;
	}

	.rf-wa-msg:first-child {
		opacity: 1;
	}

	.rf-pain__chip.is-born {
		opacity: 1;
		transform: translate(0, -50%) scale(1);
	}

	.rf-pain-card__hl {
		transition: none;
	}

	.rf-pain-card.is-highlighted .rf-pain-card__hl,
	.rf-pain-card .rf-pain-card__hl {
		color: var(--rf-gold);
		font-weight: 600;
	}

	.rf-pain-card:hover {
		transform: none;
	}

	.rf-compare.is-without {
		background: none;
	}
}