/* ============================================================
   Vespertine — animações e backgrounds dinâmicos (OPT-IN)
   Nada aqui se aplica sozinho: adicione a classe no elemento
   em Elementor → Avançado → Classes CSS.
   ============================================================ */

/* ---------- 1. Entrada ao rolar (navegadores novos; nos demais, aparece normal) ---------- */
@supports (animation-timeline: view()) {
	.vsp-reveal{
		animation: vsp-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 40%;
	}
	.vsp-reveal-left{ animation-name: vsp-reveal-left; }
	.vsp-reveal-right{ animation-name: vsp-reveal-right; }
	.vsp-reveal-left, .vsp-reveal-right{
		animation-timing-function: linear; animation-fill-mode: both;
		animation-timeline: view(); animation-range: entry 0% entry 40%;
	}
}
@keyframes vsp-reveal{ from{ opacity:0; transform:translateY(36px); } to{ opacity:1; transform:none; } }
@keyframes vsp-reveal-left{ from{ opacity:0; transform:translateX(-40px); } to{ opacity:1; transform:none; } }
@keyframes vsp-reveal-right{ from{ opacity:0; transform:translateX(40px); } to{ opacity:1; transform:none; } }

/* ---------- 2. Background: gradiente vivo (para containers navy) ---------- */
.vsp-bg-aurora{ position:relative; overflow:hidden; }
.vsp-bg-aurora::before{
	content:''; position:absolute; inset:-20%;
	background:
		radial-gradient(ellipse 45% 38% at 25% 28%, rgba(34,56,255,.38), transparent 60%),
		radial-gradient(ellipse 40% 34% at 78% 72%, rgba(74,91,255,.28), transparent 65%),
		radial-gradient(ellipse 30% 26% at 60% 20%, rgba(255,75,62,.12), transparent 60%);
	animation: vsp-aurora 18s ease-in-out infinite alternate;
	pointer-events:none; z-index:0;
}
.vsp-bg-aurora > *{ position:relative; z-index:1; }
@keyframes vsp-aurora{
	0%{ transform:translate3d(-4%,-3%,0) scale(1); }
	50%{ transform:translate3d(3%,4%,0) scale(1.08); }
	100%{ transform:translate3d(-2%,2%,0) scale(1.03); }
}

/* ---------- 3. Background: grade técnica sutil ---------- */
.vsp-bg-grid{ position:relative; }
.vsp-bg-grid::before{
	content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
	background-image:
		linear-gradient(rgba(244,241,234,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(244,241,234,.045) 1px, transparent 1px);
	background-size:56px 56px;
	mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
	-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
}
.vsp-bg-grid > *{ position:relative; z-index:1; }

/* ---------- 4. Background: órbitas decorativas ---------- */
.vsp-bg-orbit{ position:relative; overflow:hidden; }
.vsp-bg-orbit::after{
	content:''; position:absolute; right:-12%; top:-24%;
	width:52%; aspect-ratio:1; border-radius:50%;
	border:1px solid rgba(244,241,234,.14);
	box-shadow:
		inset 0 0 0 1px transparent,
		inset -60px -60px 0 -30px rgba(244,241,234,.0);
	animation: vsp-spin 60s linear infinite;
	pointer-events:none; z-index:0;
	background:
		radial-gradient(circle at 50% 0%, rgba(34,56,255,.5) 0 6px, transparent 7px),
		radial-gradient(circle, transparent 58%, rgba(244,241,234,.1) 59% 60%, transparent 61%);
}
.vsp-bg-orbit > *{ position:relative; z-index:1; }
@keyframes vsp-spin{ to{ transform:rotate(360deg); } }

/* ---------- 5. Pulso no ponto/CTA (destaque discreto) ---------- */
.vsp-pulse{ position:relative; }
.vsp-pulse::before{
	content:''; position:absolute; inset:-4px; border-radius:inherit;
	box-shadow:0 0 0 0 rgba(34,56,255,.55);
	animation: vsp-pulse 2.4s infinite; pointer-events:none;
}
@keyframes vsp-pulse{
	0%{ box-shadow:0 0 0 0 rgba(34,56,255,.55); }
	70%{ box-shadow:0 0 0 14px rgba(34,56,255,0); }
	100%{ box-shadow:0 0 0 0 rgba(34,56,255,0); }
}

/* ---------- 6. Hover: elevação de card ---------- */
.vsp-lift{ transition:transform .35s ease, box-shadow .35s ease; }
.vsp-lift:hover{
	transform:translateY(-6px);
	box-shadow:0 24px 60px rgba(4,7,48,.45);
}

/* ---------- 7. Hover: sublinhado progressivo em títulos/links ---------- */
.vsp-underline .elementor-heading-title, a.vsp-underline{
	background-image:linear-gradient(currentColor, currentColor);
	background-size:0% 2px; background-repeat:no-repeat; background-position:0 96%;
	transition:background-size .4s ease;
}
.vsp-underline:hover .elementor-heading-title, a.vsp-underline:hover{ background-size:100% 2px; }

/* ---------- 8. Shimmer no texto display (uma passada de luz) ---------- */
.vsp-shimmer .elementor-heading-title{
	background:linear-gradient(100deg, currentColor 40%, #4A5BFF 50%, currentColor 60%);
	background-size:220% 100%;
	-webkit-background-clip:text; background-clip:text;
	-webkit-text-fill-color:transparent;
	animation: vsp-shimmer 6s ease-in-out infinite;
}
@keyframes vsp-shimmer{ 0%,55%{ background-position:120% 0; } 85%,100%{ background-position:-60% 0; } }

/* ---------- Acessibilidade: tudo desliga com reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
	.vsp-reveal, .vsp-reveal-left, .vsp-reveal-right,
	.vsp-bg-aurora::before, .vsp-bg-orbit::after,
	.vsp-pulse::before, .vsp-shimmer .elementor-heading-title{
		animation:none !important;
	}
	.vsp-reveal, .vsp-reveal-left, .vsp-reveal-right{ opacity:1; transform:none; }
	.vsp-lift, .vsp-lift:hover{ transform:none; }
}