/**
 * WebVerix — Shared Design Tokens
 * The premium visual DNA for every WebVerix service widget.
 * These are CSS custom properties only — no layout rules — so widgets
 * stay independent while sharing one consistent design language.
 */

:root {
	/* ---- Core surfaces ---- */
	--wvx-bg:            #070A18;   /* deep navy page base */
	--wvx-bg-2:          #0B1024;   /* raised navy */
	--wvx-surface:       rgba(255, 255, 255, 0.04);
	--wvx-surface-2:     rgba(255, 255, 255, 0.06);
	--wvx-border:        rgba(255, 255, 255, 0.09);
	--wvx-border-strong: rgba(255, 255, 255, 0.16);

	/* ---- Brand gradient system ---- */
	--wvx-purple:   #8B5CF6;
	--wvx-purple-2: #A855F7;
	--wvx-blue:     #4F7CFF;
	--wvx-cyan:     #22D3EE;
	--wvx-grad:        linear-gradient(120deg, #8B5CF6 0%, #4F7CFF 100%);
	--wvx-grad-vivid:  linear-gradient(120deg, #A855F7 0%, #6366F1 50%, #22D3EE 100%);
	--wvx-grad-soft:   linear-gradient(120deg, rgba(139,92,246,0.18), rgba(79,124,255,0.10));

	/* ---- Text ---- */
	--wvx-text:      #EDF0FF;
	--wvx-text-soft: #AAB2D5;
	--wvx-text-mute: #6B7297;

	/* ---- Glass ---- */
	--wvx-glass-bg:     rgba(18, 22, 48, 0.55);
	--wvx-glass-blur:   18px;
	--wvx-glass-border: rgba(255, 255, 255, 0.10);

	/* ---- Glow / shadow ---- */
	--wvx-glow-purple: 0 0 60px rgba(139, 92, 246, 0.35);
	--wvx-glow-blue:   0 0 60px rgba(79, 124, 255, 0.30);
	--wvx-shadow-sm:   0 6px 20px rgba(0, 0, 0, 0.35);
	--wvx-shadow-md:   0 18px 50px rgba(0, 0, 0, 0.45);
	--wvx-shadow-lg:   0 40px 90px rgba(0, 0, 0, 0.55);

	/* ---- Radius ---- */
	--wvx-radius-sm: 12px;
	--wvx-radius:    18px;
	--wvx-radius-lg: 28px;
	--wvx-radius-pill: 999px;

	/* ---- Motion ---- */
	--wvx-ease:  cubic-bezier(0.22, 1, 0.36, 1);
	--wvx-fast:  0.25s;
	--wvx-med:   0.45s;
	--wvx-slow:  0.7s;

	/* ---- Type scale (fallbacks; all overridable per-widget in Elementor) ---- */
	--wvx-font: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Reusable gradient-text helper (used when a widget opts into gradient headings). */
.wvx-gradient-text {
	background: var(--wvx-grad-vivid);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Shared keyframes so widgets don't redefine them. */
@keyframes wvx-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@keyframes wvx-float-soft {
	0%, 100% { transform: translateY(0) translateX(0); }
	50%      { transform: translateY(-9px) translateX(6px); }
}
@keyframes wvx-pulse-glow {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}
@keyframes wvx-scroll-dot {
	0%   { transform: translateY(0); opacity: 1; }
	70%  { transform: translateY(14px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}
@keyframes wvx-reveal-up {
	from { opacity: 0; transform: translateY(var(--wvx-reveal-distance, 26px)); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wvx-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Entrance reveal.
 * IMPORTANT: elements are visible by default. The widget's JS "arms" them
 * (adds .wvx-reveal--armed to set opacity:0) only when the reveal animation is
 * enabled and running, then swaps to .is-visible on scroll. This guarantees
 * content is never blank if JS is missing, blocked, or slow to load. */
.wvx-reveal--armed { opacity: 0; }
.wvx-reveal.is-visible {
	animation: wvx-reveal-up var(--wvx-slow) var(--wvx-ease) forwards;
	animation-delay: calc(var(--wvx-reveal-delay, 0ms) + var(--wvx-reveal-index, 0) * var(--wvx-reveal-stagger, 80ms));
}

@media (prefers-reduced-motion: reduce) {
	.wvx-reveal--armed,
	.wvx-reveal.is-visible { opacity: 1 !important; animation: none !important; }
}