/* ==========================================================================
   Emporiapolis — animations.css
   Scroll reveal + stagger, marquee, hero zoom, contact modal, sticky CTA.
   ========================================================================== */

/* ──────────────────────────────────────
   Scroll reveal + stagger
   (add class .emp-reveal in Elementor "CSS Classes" field)
   ────────────────────────────────────── */
.emp-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 800ms var(--emp-ease),
		transform 800ms var(--emp-ease);
}
.emp-reveal.is-visible { opacity: 1; transform: none; }

.emp-stagger > * { transition-delay: 0ms; }
.emp-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.emp-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.emp-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.emp-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.emp-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.emp-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }
.emp-stagger.is-visible > *:nth-child(7) { transition-delay: 600ms; }

/* ── Marquee (trust strips) ── */
@keyframes emp-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.emp-marquee {
	display: flex;
	width: max-content;
	animation: emp-marquee 38s linear infinite;
}

/* ── Hero slow zoom ── */
@keyframes emp-slow-zoom {
	from { transform: scale(1.03); }
	to   { transform: scale(1.10); }
}
.emp-zoom { animation: emp-slow-zoom 14s ease-out forwards; }

/* ──────────────────────────────────────
   Contact modal
   ────────────────────────────────────── */
.emp-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--emp-ease);
}
.emp-modal.is-open { opacity: 1; pointer-events: auto; }

.emp-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(6, 11, 30, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.emp-modal__panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: var(--emp-radius);
	padding: 2rem;
	box-shadow: 0 40px 80px -24px rgba(11, 21, 51, 0.4);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.35s var(--emp-ease);
}
.emp-modal.is-open .emp-modal__panel { transform: translateY(0) scale(1); }

.emp-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--emp-muted);
	background: var(--emp-surface-2);
	border: none;
	border-radius: 999px;
	transition: color 0.25s var(--emp-ease), background-color 0.25s var(--emp-ease);
}
.emp-modal__close:hover { color: var(--emp-navy); background: var(--emp-border-warm); }

.emp-modal__eyebrow {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--emp-blue);
	margin: 0 0 0.5rem;
}
.emp-modal__title {
	font-family: var(--emp-font-display);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--emp-navy);
	margin: 0 0 0.5rem;
}
.emp-modal__text { font-size: 14px; color: var(--emp-body); margin: 0 0 1.25rem; }

.emp-modal__channels { display: flex; flex-direction: column; gap: 0.625rem; }
.emp-modal__channel {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
	background: var(--emp-surface);
	border: 1px solid var(--emp-border-warm);
	border-radius: var(--emp-radius-sm);
	transition: border-color 0.25s var(--emp-ease), transform 0.25s var(--emp-ease), background-color 0.25s var(--emp-ease);
}
.emp-modal__channel:hover { border-color: var(--emp-blue); transform: translateY(-2px); }
.emp-modal__channel-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--emp-border);
	color: var(--emp-navy);
	flex-shrink: 0;
}
.emp-modal__channel--wa .emp-modal__channel-icon { background: var(--emp-green); border-color: var(--emp-green); color: #fff; }
.emp-modal__channel-body { display: flex; flex-direction: column; flex: 1; }
.emp-modal__channel-label { font-size: 14px; font-weight: 600; color: var(--emp-navy); }
.emp-modal__channel-sub { font-size: 12px; color: var(--emp-muted); }
.emp-modal__channel-arrow { color: var(--emp-muted); transition: color 0.25s var(--emp-ease), transform 0.25s var(--emp-ease); }
.emp-modal__channel:hover .emp-modal__channel-arrow { color: var(--emp-blue); transform: translate(2px, -2px); }

.emp-modal__form-link {
	display: inline-block;
	margin-top: 1.25rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--emp-blue);
	transition: color 0.25s var(--emp-ease);
}
.emp-modal__form-link:hover { color: var(--emp-blue-hover); }

/* ──────────────────────────────────────
   Mobile sticky CTA
   ────────────────────────────────────── */
.emp-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: flex;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-top: 1px solid var(--emp-border-warm);
	transform: translateY(120%);
	transition: transform 0.4s var(--emp-ease);
}
.emp-sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 768px) { .emp-sticky-cta { display: none; } }

.emp-sticky-cta__call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0 1.125rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--emp-navy);
	background: var(--emp-surface-2);
	border: 1px solid var(--emp-border-warm);
	border-radius: 999px;
}
.emp-sticky-cta__quote {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--emp-blue);
	border: none;
	border-radius: 999px;
	box-shadow: 0 8px 24px -12px rgba(37, 99, 235, 0.5);
}
.emp-sticky-cta__quote:hover { background: var(--emp-blue-hover); }

@media (prefers-reduced-motion: reduce) {
	.emp-reveal { opacity: 1; transform: none; transition: none; }
	.emp-marquee, .emp-zoom { animation: none; }
}