/**
 * Averna TX Animation – Frontend Styles
 *
 * CSS scroll-triggered animations matching AOS visual behavior,
 * powered by Intersection Observer via the companion frontend script.
 *
 * Classes:
 *   .has-averna-tx-animation              – base (pre-animation) state
 *   .averna-tx-animation-type-fade-up     – fade-up animation definition
 *   .averna-tx-animation-delay-{1–10}     – delay increments (100ms each)
 *   .averna-tx-animation--active          – applied when element enters viewport
 *
 * 1s duration, ease timing, 100px travel.
 *
 * @package Averna_TX
 * @since   1.0.0
 */

/* ────────────────────────────────────────────────
 * Base – pre-animation state (mirrors [data-aos])
 * ──────────────────────────────────────────────── */

.has-averna-tx-animation {
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-timing-function: ease;
}

/* ────────────────────────────────────────────────
 * Fade Up  (mirrors [data-aos=fade-up])
 *
 * AOS source:
 *   [data-aos^=fade]        → opacity: 0; transition-property: opacity, transform
 *   [data-aos=fade-up]      → transform: translate3d(0, 100px, 0)
 *   .aos-animate            → opacity: 1; transform: translateZ(0)
 * ──────────────────────────────────────────────── */

.averna-tx-animation-type-fade-up {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
}

.averna-tx-animation-type-fade-up.averna-tx-animation--active {
	opacity: 1;
	transform: translateZ(0);
}

/* ────────────────────────────────────────────────
 * Delays  (100ms increments, AOS-style)
 *
 * AOS sets transition-delay: 0 on the pre-animation state
 * so the element hides instantly on first paint, then applies
 * the real delay only on the .aos-animate (active) class.
 * We replicate that same two-rule pattern here.
 * ──────────────────────────────────────────────── */

.averna-tx-animation-delay-1 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-1.averna-tx-animation--active {
	transition-delay: 100ms;
}

.averna-tx-animation-delay-2 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-2.averna-tx-animation--active {
	transition-delay: 200ms;
}

.averna-tx-animation-delay-3 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-3.averna-tx-animation--active {
	transition-delay: 300ms;
}

.averna-tx-animation-delay-4 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-4.averna-tx-animation--active {
	transition-delay: 400ms;
}

.averna-tx-animation-delay-5 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-5.averna-tx-animation--active {
	transition-delay: 500ms;
}

.averna-tx-animation-delay-6 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-6.averna-tx-animation--active {
	transition-delay: 600ms;
}

.averna-tx-animation-delay-7 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-7.averna-tx-animation--active {
	transition-delay: 700ms;
}

.averna-tx-animation-delay-8 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-8.averna-tx-animation--active {
	transition-delay: 800ms;
}

.averna-tx-animation-delay-9 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-9.averna-tx-animation--active {
	transition-delay: 900ms;
}

.averna-tx-animation-delay-10 {
	transition-delay: 0s;
}

.averna-tx-animation-delay-10.averna-tx-animation--active {
	transition-delay: 1000ms;
}

/* ────────────────────────────────────────────────
 * Respect reduced-motion preference
 * ──────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {

	.has-averna-tx-animation {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}