/* ==========================================================
   BREFECT MOTION SYSTEM
   ========================================================== */

.bf-scroll-reveal {
	opacity: 0;
	transform: translate3d(0, 42px, 0);
	transition:
		opacity 800ms var(--bf-ease),
		transform 800ms var(--bf-ease);
	transition-delay: 0ms;
}

.bf-scroll-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Stagger cards */

.bf-grid .bf-card.bf-scroll-reveal {
	transition-delay: var(--bf-stagger-delay, 0ms);
}

/* Hero */

.bf-hero__content.bf-scroll-reveal {
	transform: translate3d(-30px, 25px, 0);
}

.bf-hero__visual.bf-scroll-reveal {
	transform: translate3d(30px, 25px, 0);
}

.bf-hero__content.bf-scroll-reveal.is-visible,
.bf-hero__visual.bf-scroll-reveal.is-visible {
	transform: translate3d(0, 0, 0);
}

/* Floating animation */

.bf-floating-card {
	animation: bfFloatingCard 5s ease-in-out infinite;
}

.bf-floating-card--bottom {
	animation-delay: -2.2s;
}

@keyframes bfFloatingCard {
	0%,
	100% {
		margin-top: 0;
	}

	50% {
		margin-top: -10px;
	}
}

/* Orb animation */

.bf-hero__orb--one {
	animation: bfOrbOne 8s ease-in-out infinite;
}

.bf-hero__orb--two {
	animation: bfOrbTwo 6s ease-in-out infinite;
}

@keyframes bfOrbOne {
	0%,
	100% {
		margin-top: 0;
	}

	50% {
		margin-top: -14px;
	}
}

@keyframes bfOrbTwo {
	0%,
	100% {
		margin-top: 0;
	}

	50% {
		margin-top: 12px;
	}
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.bf-scroll-reveal {
		opacity: 1;
		transform: none !important;
		transition: none;
	}

	.bf-floating-card,
	.bf-hero__orb--one,
	.bf-hero__orb--two {
		animation: none !important;
	}
}