/**
 * Rhodes Boat — motion & reveal animations.
 */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.rb-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

@keyframes rb-fade-up {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes rb-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes rb-scale-in {
	from {
		opacity: 0;
		transform: scale(0.97);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes rb-image-reveal {
	from {
		opacity: 0;
		clip-path: inset(8% 8% 8% 8%);
	}

	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

.rb-reveal {
	opacity: 0;
	transform: translateY(1.25rem);
	transition:
		opacity var(--rb-duration-slow) var(--rb-ease),
		transform var(--rb-duration-slow) var(--rb-ease);
	transition-delay: var(--rb-reveal-delay, 0ms);
}

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

.rb-reveal--fade.is-visible {
	animation: rb-fade-in var(--rb-duration-slow) var(--rb-ease) both;
}

.rb-reveal--scale.is-visible {
	animation: rb-scale-in var(--rb-duration-slow) var(--rb-ease) both;
}

.rb-reveal--image.is-visible {
	animation: rb-image-reveal var(--rb-duration-slow) var(--rb-ease) both;
}

.rb-reveal-stagger > .rb-reveal:nth-child(1) {
	--rb-reveal-delay: 0ms;
}

.rb-reveal-stagger > .rb-reveal:nth-child(2) {
	--rb-reveal-delay: 80ms;
}

.rb-reveal-stagger > .rb-reveal:nth-child(3) {
	--rb-reveal-delay: 160ms;
}

.rb-reveal-stagger > .rb-reveal:nth-child(4) {
	--rb-reveal-delay: 240ms;
}

.rb-reveal-stagger > .rb-reveal:nth-child(5) {
	--rb-reveal-delay: 320ms;
}

.rb-reveal-stagger > .rb-reveal:nth-child(6) {
	--rb-reveal-delay: 400ms;
}

/* Hover elevation utility */
.rb-elevate {
	transition:
		box-shadow var(--rb-duration) var(--rb-ease),
		transform var(--rb-duration) var(--rb-ease);
}

.rb-elevate:hover {
	box-shadow: var(--rb-shadow-hover);
	transform: translateY(-3px);
}

html.rb-reduce-motion .rb-reveal,
html.rb-reduce-motion .rb-elevate:hover {
	opacity: 1;
	transform: none;
	animation: none;
	transition: none;
}