/* ==========================================================================
   BBC Global Animate On Viewport
   ========================================================================== */

/* Base default animation (fade + smooth slide up) */
.bbc-animate {
	opacity: 0 !important;
	transform: translateY(30px) !important;
	transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
	
	/* Performance optimisation */
	will-change: opacity, transform;
}

.bbc-animate.bbc-animate--in-view {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* ── Modifiers ────────────────────────────────────────────────────────── */

/* Modifier: Fade only (no movement) */
.bbc-animate.bbc-animate--fade {
	transform: none !important;
}

/* Modifier: Slide from Left */
.bbc-animate.bbc-animate--slide-left {
	transform: translateX(-40px) !important;
}

/* Modifier: Slide from Right */
.bbc-animate.bbc-animate--slide-right {
	transform: translateX(40px) !important;
}

/* Modifier: Zoom in */
.bbc-animate.bbc-animate--zoom {
	transform: scale(0.92) !important;
}

/* Resolve transforms back to 0 when in view */
.bbc-animate.bbc-animate--in-view.bbc-animate--fade,
.bbc-animate.bbc-animate--in-view.bbc-animate--slide-left,
.bbc-animate.bbc-animate--in-view.bbc-animate--slide-right,
.bbc-animate.bbc-animate--in-view.bbc-animate--zoom {
	transform: translate(0) scale(1) !important;
}

/* ── Accessibility ────────────────────────────────────────────────────── */

/* Disable transforms and speed up opacity for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bbc-animate {
		transition: opacity 0.5s ease !important;
		transform: none !important;
	}
}