/**
 * ellodigital Elementor Utility Classes
 *
 * Apply these via Elementor > Advanced > CSS Classes
 * to add animations and effects to any widget/section.
 *
 * ── Reveal Animations ──
 * .ello-reveal          → Fade up on scroll
 * .ello-reveal-left     → Slide in from left
 * .ello-reveal-right    → Slide in from right
 * .ello-reveal-scale    → Scale up on scroll
 * .ello-delay-1 to -5   → Stagger delays
 *
 * ── Hover Effects ──
 * .ello-hover-lift      → Lift on hover
 * .ello-hover-glow      → Blue glow on hover
 *
 * ── Background Helpers ──
 * .ello-bg-dark         → Dark background section
 * .ello-bg-alt          → Light gray background
 * .ello-bg-accent       → Accent color background
 *
 * ── Text Helpers ──
 * .ello-gradient-text   → Gradient text effect
 * .ello-tag             → Section tag style (uppercase, accent)
 */

/* ── Reveal Base ── */
.ello-reveal,
.ello-reveal-left,
.ello-reveal-right,
.ello-reveal-scale {
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ello-reveal { transform: translateY(40px); }
.ello-reveal-left { transform: translateX(-40px); }
.ello-reveal-right { transform: translateX(40px); }
.ello-reveal-scale { transform: scale(0.95); }

.ello-visible.ello-reveal,
.ello-visible.ello-reveal-left,
.ello-visible.ello-reveal-right,
.ello-visible.ello-reveal-scale {
	opacity: 1;
	transform: none;
}

/* Stagger delays */
.ello-delay-1 { transition-delay: 0.1s; }
.ello-delay-2 { transition-delay: 0.2s; }
.ello-delay-3 { transition-delay: 0.3s; }
.ello-delay-4 { transition-delay: 0.4s; }
.ello-delay-5 { transition-delay: 0.5s; }

/* ── Hover Effects ── */
.ello-hover-lift {
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ello-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px rgba(0, 102, 255, 0.08);
}

.ello-hover-glow {
	transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ello-hover-glow:hover {
	box-shadow: 0 0 40px rgba(0, 102, 255, 0.12);
}

/* ── Backgrounds ── */
.ello-bg-dark {
	background: var(--ello-darker) !important;
	color: var(--ello-white) !important;
}
.ello-bg-dark h1, .ello-bg-dark h2, .ello-bg-dark h3,
.ello-bg-dark h4, .ello-bg-dark h5, .ello-bg-dark h6 {
	color: var(--ello-white);
}
.ello-bg-dark p { color: rgba(255, 255, 255, 0.5); }

.ello-bg-alt { background: var(--ello-off-white) !important; }
.ello-bg-accent { background: var(--ello-accent) !important; color: var(--ello-white) !important; }

/* ── Text Utilities ── */
.ello-gradient-text {
	background: var(--ello-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.ello-tag {
	font-family: var(--ello-font-display);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--ello-accent);
}

/* ── Card Style ── */
.ello-card {
	background: var(--ello-white);
	border: 1px solid var(--ello-light-gray);
	border-radius: var(--ello-radius);
	padding: 40px 32px;
	position: relative;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ello-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--ello-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ello-card:hover {
	transform: translateY(-4px);
	border-color: rgba(0, 102, 255, 0.2);
	box-shadow: 0 20px 50px rgba(0, 102, 255, 0.06);
}
.ello-card:hover::before { transform: scaleX(1); }

/* ── Button Styles ── */
.ello-btn-primary {
	font-family: var(--ello-font-display) !important;
	font-weight: 600 !important;
	padding: 16px 36px !important;
	background: var(--ello-accent) !important;
	color: var(--ello-white) !important;
	border-radius: 100px !important;
	border: none !important;
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.ello-btn-primary:hover {
	background: #0052cc !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px var(--ello-accent-glow) !important;
}

.ello-btn-secondary {
	font-family: var(--ello-font-display) !important;
	font-weight: 600 !important;
	padding: 16px 36px !important;
	background: transparent !important;
	color: var(--ello-dark) !important;
	border: 1.5px solid var(--ello-light-gray) !important;
	border-radius: 100px !important;
	transition: all 0.3s !important;
}
.ello-btn-secondary:hover {
	border-color: var(--ello-dark) !important;
	background: var(--ello-off-white) !important;
}