/**
 * Divider Viewport Animation
 *
 * Single source of truth for the reveal animation shared by:
 *   - Accent dividers  (::after on Heading widgets)
 *   - Hero dividers    (.zededa-hero-divider)
 *   - Image-text dividers (.zededa-image-text__divider)
 *
 * Pairs with divider-animate.js which adds the visible-state classes
 * via IntersectionObserver.
 *
 * @package Zededa
 */

/* === Animation tokens === */
:root {
	--divider-duration: .9s;
	--divider-easing: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   1. Initial state — collapsed
   ========================================================================== */

/* Accent dividers (pseudo-element on heading widgets) — left-aligned by default */
.has-accent-divider--orange .elementor-heading-title::after, .has-accent-divider--sunrise .elementor-heading-title::after, .has-accent-divider--aqua .elementor-heading-title::after, .has-accent-divider--blush .elementor-heading-title::after, .has-accent-divider--spring .elementor-heading-title::after {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--divider-duration) var(--divider-easing);
}

/* Center: expand from center — class added by PHP hook (frontend) or JS sync (editor) */
.has-accent-divider--center .elementor-heading-title::after {
	transform-origin: center;
}

/* Right: expand from right — class added by PHP hook (frontend) or JS sync (editor) */
.has-accent-divider--end .elementor-heading-title::after {
	transform-origin: right;
}

/* Hero divider (DOM element, left-aligned by default) */
.zededa-hero-divider {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--divider-duration) var(--divider-easing);
}

.zededa-hero--align-right .zededa-hero-divider {
	transform-origin: right;
}

/* Image-text divider (DOM element, origin set by JS based on parent text-align) */
.zededa-image-text__divider {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--divider-duration) var(--divider-easing);
}

/* ==========================================================================
   2. Visible state — toggled by IntersectionObserver
   ========================================================================== */
.has-accent-divider--visible .elementor-heading-title::after {
	transform: scaleX(1);
}

.zededa-hero-divider.divider-visible, .zededa-image-text__divider.divider-visible {
	transform: scaleX(1);
}

/* ==========================================================================
   3. Elementor editor — show immediately, no animation
   ========================================================================== */
.elementor-editor-active .has-accent-divider--orange .elementor-heading-title::after, .elementor-editor-active .has-accent-divider--sunrise .elementor-heading-title::after, .elementor-editor-active .has-accent-divider--aqua .elementor-heading-title::after, .elementor-editor-active .has-accent-divider--blush .elementor-heading-title::after, .elementor-editor-active .has-accent-divider--spring .elementor-heading-title::after, .elementor-editor-active .zededa-hero-divider, .elementor-editor-active .zededa-image-text__divider {
	transform: scaleX(1);
	transition: none;
}

/* ==========================================================================
   4. Reduced motion — show immediately, no animation
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.has-accent-divider--orange .elementor-heading-title::after, .has-accent-divider--sunrise .elementor-heading-title::after, .has-accent-divider--aqua .elementor-heading-title::after, .has-accent-divider--blush .elementor-heading-title::after, .has-accent-divider--spring .elementor-heading-title::after, .zededa-hero-divider, .zededa-image-text__divider {
		transform: scaleX(1);
		transition: none;
	}
}