/**
 * OMI scroll animations + image effects (same system as AIBM).
 *
 * Opt in with data attributes:
 *   data-omi-animate="fade-up | fade-down | fade-left | fade-right | fade | zoom-in | zoom-out"
 *   data-omi-delay="150"          (ms, optional)
 *   data-omi-stagger="120"        (on a parent: children animate one after another)
 * Image effects:
 *   .omi-img-reveal  image un-zooms and fades in when scrolled into view
 *   .omi-img-zoom    slow zoom on hover (wrapper must clip: overflow hidden)
 *
 * Only transform / opacity are animated (GPU-friendly, no layout shift).
 * Hidden start states apply only while html has class "omi-anim" (added
 * in <head>, removed by a 4s fail-safe if the script never runs), so
 * content is always visible without JavaScript.
 *
 * @author Sameer Ali
 */

html.omi-anim [data-omi-animate] {
	opacity: 0;
	transition:
		opacity .8s var(--omi-ease, cubic-bezier(.22, .61, .36, 1)),
		transform .8s var(--omi-ease, cubic-bezier(.22, .61, .36, 1));
	transition-delay: var(--omi-delay, 0ms);
	will-change: opacity, transform;
}

html.omi-anim [data-omi-animate="fade-up"]    { transform: translate3d(0, 28px, 0); }
html.omi-anim [data-omi-animate="fade-down"]  { transform: translate3d(0, -28px, 0); }
html.omi-anim [data-omi-animate="fade-left"]  { transform: translate3d(36px, 0, 0); }
html.omi-anim [data-omi-animate="fade-right"] { transform: translate3d(-36px, 0, 0); }
html.omi-anim [data-omi-animate="zoom-in"]    { transform: scale(.94); }
html.omi-anim [data-omi-animate="zoom-out"]   { transform: scale(1.06); }

html.omi-anim [data-omi-animate].is-visible {
	opacity: 1;
	transform: none;
}

/* Image reveal: picture starts slightly zoomed and faded. */
.omi-img-reveal {
	overflow: hidden;
}

html.omi-anim .omi-img-reveal img {
	opacity: 0;
	transform: scale(1.12);
	transition:
		opacity 1s var(--omi-ease, ease),
		transform 1.6s var(--omi-ease, ease);
	transition-delay: var(--omi-delay, 0ms);
}

html.omi-anim .omi-img-reveal.is-visible img {
	opacity: 1;
	transform: none;
}

/* Slow zoom on hover (owner preference: scale 1.20 over 1.2s). */
.omi-img-zoom {
	overflow: hidden;
}

.omi-img-zoom img {
	transition: transform 1.2s var(--omi-ease, ease);
}

@media (hover: hover) and (pointer: fine) {
	.omi-img-zoom:hover img {
		transform: scale(1.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.omi-anim [data-omi-animate],
	html.omi-anim .omi-img-reveal img {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.omi-img-zoom img {
		transition: none;
	}

	.omi-img-zoom:hover img {
		transform: none;
	}
}