/**
 * ZZ Scroll Animations v2 - Frontend CSS
 * Covers both the extension-panel animations (GSAP) and the Text Reveal widget (IntersectionObserver).
 */

/* ─────────────────────────────────────────────────────────────────
   EXTENSION PANEL ANIMATIONS
   No pre-hiding in CSS. GSAP sets initial opacity/transform via
   gsap.set() only after confirming desktop viewport. This ensures
   elements are always visible on mobile regardless of JS timing.
───────────────────────────────────────────────────────────────── */

.zz-snap-section {
	min-height: 100vh;
}

/* ─────────────────────────────────────────────────────────────────
   SCROLL TEXT REVEAL WIDGET
   Hidden states only applied after JS adds .zz-str-ready to the
   wrapper, confirming desktop viewport before hiding anything.
───────────────────────────────────────────────────────────────── */

.zz-str-wrapper {
	overflow: visible;
}

.zz-str-text-line {
	display: block;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.zz-str-clip-mode .zz-str-text-line {
	overflow: hidden;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
}

.zz-str-unit.zz-str-word,
.zz-str-unit.zz-str-letter {
	display: inline-block;
}

.zz-str-space {
	display: inline;
}

/* Base transition — duration / easing / delay set by JS */
.zz-str-unit {
	transition-property: opacity, transform, filter;
	will-change: opacity, transform, filter;
}

/* ── Hidden states — only when wrapper has .zz-str-ready (set by JS on desktop) */

.zz-str-ready .zz-str-hidden[data-anim-style="fade"] {
	opacity: 0;
}

.zz-str-ready .zz-str-hidden[data-anim-style="fade-up"] {
	opacity: 0;
	transform: translateY( 40px );
}

.zz-str-ready .zz-str-hidden[data-anim-style="fade-down"] {
	opacity: 0;
	transform: translateY( -40px );
}

.zz-str-ready .zz-str-hidden[data-anim-style="clip-up"] {
	transform: translateY( 110% );
	opacity: 0;
}

.zz-str-ready .zz-str-hidden[data-anim-style="clip-down"] {
	transform: translateY( -110% );
	opacity: 0;
}

.zz-str-ready .zz-str-hidden[data-anim-style="slide-left"] {
	opacity: 0;
	transform: translateX( -50px );
}

.zz-str-ready .zz-str-hidden[data-anim-style="slide-right"] {
	opacity: 0;
	transform: translateX( 50px );
}

.zz-str-ready .zz-str-hidden[data-anim-style="blur"] {
	opacity: 0;
	filter: blur( 12px );
}

/* ── Visible state ──────────────────────────────────────────────── */

.zz-str-visible {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

/* ── Editor: always show text readable while editing ────────────── */

.elementor-editor-active .zz-str-unit {
	opacity: 1;
	transform: none;
	filter: none;
}