/**
 * AIBM animations: scroll reveals + image effects.
 *
 * Usage (in any template):
 *   <div data-aibm-animate="fade-up">...</div>
 *   <div data-aibm-animate="zoom-in" data-aibm-delay="200">...</div>
 *   <div data-aibm-stagger="120"> children with data-aibm-animate reveal one after another </div>
 *   <figure class="aibm-img-reveal aibm-img-zoom"><img ...></figure>
 *
 * Effects: fade, fade-up, fade-down, fade-left, fade-right, zoom-in, zoom-out
 * Hidden start states only apply when html.aibm-js exists (content always
 * visible without JS). Only opacity/transform animate (smooth, no layout shift).
 *
 * @package AIBM
 * @author  Sameer Ali N
 */

:root {
	--aibm-anim-duration: .9s;
	--aibm-anim-distance: 36px;
	--aibm-anim-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Scroll reveal ---------- */
.aibm-js [data-aibm-animate] {
	opacity: 0;
	transition:
		opacity var(--aibm-anim-duration) var(--aibm-anim-ease),
		transform var(--aibm-anim-duration) var(--aibm-anim-ease);
	transition-delay: var(--aibm-delay, 0ms);
	will-change: opacity, transform;
}
.aibm-js [data-aibm-animate="fade-up"]    { transform: translate3d(0, var(--aibm-anim-distance), 0); }
.aibm-js [data-aibm-animate="fade-down"]  { transform: translate3d(0, calc(var(--aibm-anim-distance) * -1), 0); }
.aibm-js [data-aibm-animate="fade-left"]  { transform: translate3d(var(--aibm-anim-distance), 0, 0); }
.aibm-js [data-aibm-animate="fade-right"] { transform: translate3d(calc(var(--aibm-anim-distance) * -1), 0, 0); }
.aibm-js [data-aibm-animate="zoom-in"]    { transform: scale(.92); }
.aibm-js [data-aibm-animate="zoom-out"]   { transform: scale(1.08); }

.aibm-js [data-aibm-animate].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ---------- Image reveal (image settles from a soft zoom) ---------- */
.aibm-img-reveal {
	overflow: hidden;
}
.aibm-img-reveal img {
	display: block;
	width: 100%;
	height: auto;
}
.aibm-js .aibm-img-reveal img {
	opacity: 0;
	transform: scale(1.12);
	transition:
		opacity 1s ease,
		transform 1.6s var(--aibm-anim-ease);
	transition-delay: var(--aibm-delay, 0ms);
}
.aibm-js .aibm-img-reveal.is-visible img {
	opacity: 1;
	transform: scale(1);
}

/* ---------- Image hover zoom ---------- */
.aibm-img-zoom {
	overflow: hidden;
}
.aibm-img-zoom img {
	transition: transform 1s var(--aibm-anim-ease);
}
.aibm-img-zoom:hover img,
.aibm-js .aibm-img-reveal.is-visible.aibm-img-zoom:hover img {
	transform: scale(1.06);
	transition-duration: 1s;
	transition-delay: 0ms;
}

/* ---------- Reduced motion: show everything, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
	.aibm-js [data-aibm-animate],
	.aibm-js .aibm-img-reveal img {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.aibm-img-zoom:hover img,
	.aibm-js .aibm-img-reveal.is-visible.aibm-img-zoom:hover img {
		transform: none !important;
	}
}