/**
 * wideum-animations.css
 *
 * Companion styles for wideum-animations.js (scroll-reveal) plus the small set
 * of hover / colour transitions that native Elementor widgets need in order to
 * match wideum.com production. Kept deliberately narrow: buttons, cards and the
 * global anchor colour transition are already handled by wideum-theme.css and
 * wideum-legacy.css, so this file only fills genuine gaps and adds safety nets.
 *
 * Scope note: everything here is scoped to page content
 * ([data-elementor-type="wp-page"]) so it never affects the header, topbar or
 * footer templates (owned by the header/footer mappers).
 */

/* ------------------------------------------------------------------ *
 * 1. Scroll-reveal safety nets (AOS)
 * ------------------------------------------------------------------ */

/*
 * AOS hides [data-aos] elements (opacity:0) until it applies .aos-animate on
 * scroll. wideum-animations.js only decorates sections when window.AOS exists,
 * so a failed AOS load already leaves content visible. This is a second belt:
 * if a decorated section is still not animated a moment after load (e.g. an
 * observer hiccup on a very tall section already in view), it must never stay
 * invisible. AOS's own class wins while it is working; this only matters when
 * it is not.
 */
@media (prefers-reduced-motion: reduce) {
	[data-elementor-type="wp-page"] > .e-con[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/*
 * Reveal fade is vertical only (fade-up) so it can never introduce a horizontal
 * scrollbar. Constrain any transform to the block axis defensively.
 */
[data-elementor-type="wp-page"] > .e-con[data-aos="fade-up"] {
	will-change: opacity, transform;
}

/*
 * Ecommerce safety: content and conversion blocks must never depend on an
 * external animation library becoming ready. AOS may still decorate elements,
 * but top-level Elementor sections remain visible at all times.
 */
[data-elementor-type="wp-page"] > .e-con[data-aos] {
	opacity: 1 !important;
	transform: none !important;
}

/* ------------------------------------------------------------------ *
 * 2. Colour / hover transitions for native widgets
 * ------------------------------------------------------------------ *
 *
 * The original theme sets `a { color: var(--turquoise); transition: all .2s
 * linear }` globally and lightens links on hover. wideum-theme.css already
 * ships that rule, but some Elementor widgets set their own `transition:none`
 * or override the anchor colour. Re-affirm the original behaviour ONLY inside
 * page content links that are not buttons, so links inside text, icon-box and
 * heading widgets animate their colour exactly like production.
 */
[data-elementor-type="wp-page"] .elementor-widget-text-editor a:not(.elementor-button),
[data-elementor-type="wp-page"] .elementor-widget-icon-box a:not(.elementor-button),
[data-elementor-type="wp-page"] .elementor-widget-icon-list a:not(.elementor-button),
[data-elementor-type="wp-page"] .elementor-widget-heading a:not(.elementor-button) {
	transition: color 0.2s linear, border-color 0.2s linear;
}

[data-elementor-type="wp-page"] .elementor-widget-text-editor a:not(.elementor-button):hover,
[data-elementor-type="wp-page"] .elementor-widget-icon-box a:not(.elementor-button):hover,
[data-elementor-type="wp-page"] .elementor-widget-icon-list a:not(.elementor-button):hover,
[data-elementor-type="wp-page"] .elementor-widget-heading a:not(.elementor-button):hover {
	color: #6EE2D0; /* original .button-family hover turquoise */
}

/*
 * Native icon-box / image-box wrappers on production are static (the legacy
 * theme used no card-lift on hover), so we intentionally add NO transform or
 * shadow hover here. They keep the flat --box-shadow from wideum-legacy.css.
 */