/**
 * BnB Theme — Scroll-reveal & parallax animation styles.
 *
 * All rules are inside @media (prefers-reduced-motion: no-preference)
 * so users who prefer reduced motion see no layout shift or animation.
 */

@media (prefers-reduced-motion: no-preference) {

	/* ------------------------------------------------------------------ */
	/*  @keyframes                                                         */
	/* ------------------------------------------------------------------ */

	@keyframes bnb-fade-up {
		from { opacity: 0; transform: translateY(40px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	@keyframes bnb-fade-down {
		from { opacity: 0; transform: translateY(-30px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	@keyframes bnb-slide-left {
		from { opacity: 0; transform: translateX(-60px); }
		to   { opacity: 1; transform: translateX(0); }
	}

	@keyframes bnb-slide-right {
		from { opacity: 0; transform: translateX(60px); }
		to   { opacity: 1; transform: translateX(0); }
	}

	@keyframes bnb-scale-up {
		from { opacity: 0; transform: scale(0.88); }
		to   { opacity: 1; transform: scale(1); }
	}

	@keyframes bnb-grow-x {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}

	@keyframes bnb-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* ------------------------------------------------------------------ */
	/*  Pre-reveal state                                                   */
	/* ------------------------------------------------------------------ */

	.bnb-reveal {
		opacity: 0;
	}

	/* grow-x needs a different pre-state */
	.bnb-reveal--grow-x {
		transform: scaleX(0);
		transform-origin: center center;
	}

	/* ------------------------------------------------------------------ */
	/*  Revealed state — animation fires once                              */
	/* ------------------------------------------------------------------ */

	.bnb-reveal--visible {
		opacity: 1;
	}

	.bnb-reveal--visible.bnb-reveal--fade-up {
		animation: bnb-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--bnb-delay, 0s) both;
	}

	.bnb-reveal--visible.bnb-reveal--fade-down {
		animation: bnb-fade-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--bnb-delay, 0s) both;
	}

	.bnb-reveal--visible.bnb-reveal--slide-left {
		animation: bnb-slide-left 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--bnb-delay, 0s) both;
	}

	.bnb-reveal--visible.bnb-reveal--slide-right {
		animation: bnb-slide-right 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--bnb-delay, 0s) both;
	}

	.bnb-reveal--visible.bnb-reveal--scale-up {
		animation: bnb-scale-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--bnb-delay, 0s) both;
	}

	.bnb-reveal--visible.bnb-reveal--grow-x {
		animation: bnb-grow-x 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--bnb-delay, 0s) both;
	}

	.bnb-reveal--visible.bnb-reveal--fade {
		animation: bnb-fade 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--bnb-delay, 0s) both;
	}

	/* ------------------------------------------------------------------ */
	/*  Parallax image helper                                              */
	/* ------------------------------------------------------------------ */

	.bnb-parallax-img {
		transform: scale(1.22) translateY(0);
	}
}