/* Surf Itacaré — Projector galleries: reveal + crossfade (Itacaré & Natura page) */

/* Crossfade layer stacked over the main image (same box, no layout change) */
.sp-enhanced .surf-projector-img-wrap .surf-projector-img {
	display: block;
}
.sp-enhanced .surf-projector-img-wrap .sp-layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.04);
	transition: none;
	pointer-events: none;
}
.sp-enhanced .surf-projector-img-wrap.sp-fading .sp-layer {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.9s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Title / description gently fade while the image changes */
.sp-enhanced .surf-projector-title,
.sp-enhanced .surf-projector-desc {
	transition: opacity 0.35s ease, transform 0.45s ease;
}
.sp-enhanced .surf-projector-card.sp-text-out .surf-projector-title,
.sp-enhanced .surf-projector-card.sp-text-out .surf-projector-desc {
	opacity: 0;
	transform: translateY(6px);
}

/* Progress bar on the active thumbnail while autoplay is running */
.sp-enhanced .surf-thumb-btn::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--surf-accent, #848867);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}
.sp-enhanced.sp-progress-run .surf-thumb-btn.active::after {
	animation: sp-progress 4.8s linear forwards;
}
@keyframes sp-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Staggered reveal (class added by JS only, so no-JS users see everything) */
.sp-reveal .surf-projector-viewport,
.sp-reveal .surf-thumb-btn {
	opacity: 0;
	transform: translateY(28px);
}
.sp-reveal.sp-revealed .surf-projector-viewport {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-reveal.sp-revealed .surf-thumb-btn {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
	transition-delay: calc(0.35s + var(--sp-i, 0) * 0.14s);
}
.sp-reveal.sp-revealed .surf-projector-card .surf-projector-badge,
.sp-reveal.sp-revealed .surf-projector-card .surf-projector-title,
.sp-reveal.sp-revealed .surf-projector-card .surf-projector-desc {
	animation: sp-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sp-reveal.sp-revealed .surf-projector-card .surf-projector-title { animation-delay: 0.12s; }
.sp-reveal.sp-revealed .surf-projector-card .surf-projector-desc  { animation-delay: 0.24s; }
@keyframes sp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sp-reveal .surf-projector-viewport,
	.sp-reveal .surf-thumb-btn {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.sp-enhanced .surf-projector-img-wrap .sp-layer,
	.sp-enhanced .surf-thumb-btn::after {
		display: none !important;
	}
	.sp-enhanced .surf-projector-card * {
		animation: none !important;
		transition: none !important;
	}
}