/**
 * Viewport “opening box” reveal (Elementor → Advanced → CSS Classes).
 *
 * .openanimation                    — center hits viewport middle
 * .openanimation.openanimation-long — top hits viewport middle (long content; JS uses crossing detection)
 *
 * Closed styles use .openanimation--ready (set by JS).
 */
.openanimation {
	/* JS: center in 40%–60% of viewport */
	--openanimation-duration: 2s;
	--openanimation-ease: cubic-bezier(0.33, 1, 0.68, 1);
	overflow: hidden;
	transition:
		clip-path var(--openanimation-duration) var(--openanimation-ease),
		opacity calc(var(--openanimation-duration) * 0.65) ease-out;
	will-change: clip-path, opacity;
}

/* Long content: slower, gentler open */
.openanimation.openanimation-long {
	--openanimation-duration: 5s;
	--openanimation-ease: cubic-bezier(0.25, 0.8, 0.35, 1);
	overflow: hidden;
	transition:
		clip-path var(--openanimation-duration) var(--openanimation-ease),
		opacity calc(var(--openanimation-duration) * 0.75) ease-out;
	will-change: clip-path, opacity;
}

.openanimation.openanimation--ready:not(.openanimation--inview) {
	clip-path: inset(0 0 100% 0);
	opacity: 0;
}

.openanimation.openanimation--inview {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

/* Numbered boxes: open-right1 … open-right6 — horizontal left → right, staggered in JS */
.open-right1,
.open-right2,
.open-right3,
.open-right4,
.open-right5,
.open-right6 {
	--open-right-duration: 1s;
	--open-right-ease: cubic-bezier(0.33, 1, 0.68, 1);
	overflow: hidden;
	transition:
		clip-path var(--open-right-duration) var(--open-right-ease),
		opacity calc(var(--open-right-duration) * 1) ease-out;
	will-change: clip-path, opacity;
}

.open-right1.open-right--ready:not(.open-right--inview),
.open-right2.open-right--ready:not(.open-right--inview),
.open-right3.open-right--ready:not(.open-right--inview),
.open-right4.open-right--ready:not(.open-right--inview),
.open-right5.open-right--ready:not(.open-right--inview),
.open-right6.open-right--ready:not(.open-right--inview) {
	clip-path: inset(0 100% 0 0);
	opacity: 0;
}

.open-right1.open-right--inview,
.open-right2.open-right--inview,
.open-right3.open-right--inview,
.open-right4.open-right--inview,
.open-right5.open-right--inview,
.open-right6.open-right--inview {
	clip-path: inset(-50px);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.openanimation.openanimation--ready:not(.openanimation--inview) {
		clip-path: inset(-50px);
		opacity: 1;
	}

	.openanimation,
	.openanimation.openanimation-long {
		transition: none;
		will-change: auto;
	}

	.open-right1.open-right--ready:not(.open-right--inview),
	.open-right2.open-right--ready:not(.open-right--inview),
	.open-right3.open-right--ready:not(.open-right--inview),
	.open-right4.open-right--ready:not(.open-right--inview),
	.open-right5.open-right--ready:not(.open-right--inview),
	.open-right6.open-right--ready:not(.open-right--inview) {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}

	.open-right1,
	.open-right2,
	.open-right3,
	.open-right4,
	.open-right5,
	.open-right6 {
		transition: none;
		will-change: auto;
	}
}