/**
 * AS Glow — decorative orbs on Salient rows (::before / ::after + CSS keyframes)
 *
 * CHEAT SHEET (Row → Extra class name):
 *
 * | Classes | Use |
 * |---------|-----|
 * | as-glow | Required base (or any as-glow-preset--* alone — legacy) |
 * | as-glow-preset--hero | Hero: 2 orbs, positions below |
 * | as-glow--dual | 2 orbs (orb A + B) |
 * | as-glow--single | 1 orb (orb A only) |
 * | as-glow--sm / as-glow--lg | Smaller / larger orb size |
 * | as-glow--reveal-load | Reveal on page load (hero) |
 * | as-glow--reveal-scroll | Default scroll sections (JS adds as-glow--inview) |
 * | as-glow--ambient-off | Reveal only, no float loop |
 *
 * Hero:
 *   hero_bg as-glow as-glow-preset--hero as-glow--dual as-glow--reveal-load
 *
 * Tune orb A: --as-glow-a-top, --as-glow-a-right / --as-glow-a-left, --as-glow-a-rotate
 * Tune orb B: --as-glow-b-* (when --dual)
 * Size: --as-glow-w, --as-glow-h
 */

@property --as-glow-a-rotate {
	syntax: '<angle>';
	inherits: true;
	initial-value: 0deg;
}

@property --as-glow-b-rotate {
	syntax: '<angle>';
	inherits: true;
	initial-value: 0deg;
}

@keyframes as-glow-reveal-scroll-a {
	from {
		opacity: 0;
		transform: translateY(100px) scale(0.88) rotate(var(--as-glow-a-rotate));
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(var(--as-glow-a-rotate));
	}
}

@keyframes as-glow-reveal-scroll-b {
	from {
		opacity: 0;
		transform: translateY(100px) scale(0.88) rotate(var(--as-glow-b-rotate));
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(var(--as-glow-b-rotate));
	}
}

@keyframes as-glow-reveal-load-a {
	from {
		opacity: 0;
		transform: translateY(48px) rotate(var(--as-glow-a-rotate));
	}

	to {
		opacity: 1;
		transform: translateY(0) rotate(var(--as-glow-a-rotate));
	}
}

@keyframes as-glow-reveal-load-b {
	from {
		opacity: 0;
		transform: translateY(48px) rotate(var(--as-glow-b-rotate));
	}

	to {
		opacity: 1;
		transform: translateY(0) rotate(var(--as-glow-b-rotate));
	}
}

@keyframes as-glow-ambient-a {
	0%,
	100% {
		transform: translateY(0) rotate(var(--as-glow-a-rotate));
	}

	50% {
		transform: translateY(-14px) rotate(calc(var(--as-glow-a-rotate) + 3deg));
	}
}

@keyframes as-glow-ambient-b {
	0%,
	100% {
		transform: translateY(0) rotate(var(--as-glow-b-rotate));
	}

	50% {
		transform: translateY(12px) rotate(calc(var(--as-glow-b-rotate) - 2.5deg));
	}
}

.vc_row.as-glow:not(.inner_row),
.vc_row[class*='as-glow-preset--']:not(.inner_row) {
	--as-glow-w: 600px;
	--as-glow-h: 500px;
	--as-glow-a-top: 0;
	--as-glow-a-right: auto;
	--as-glow-a-left: auto;
	--as-glow-a-bottom: auto;
	--as-glow-a-rotate: 0deg;
	--as-glow-b-top: 0;
	--as-glow-b-right: auto;
	--as-glow-b-left: auto;
	--as-glow-b-bottom: auto;
	--as-glow-b-rotate: 0deg;

	position: relative;
}

.vc_row.as-glow:not(.inner_row) > .row-bg-wrap,
.vc_row[class*='as-glow-preset--']:not(.inner_row) > .row-bg-wrap {
	position: absolute;
	z-index: 0;
}

.vc_row.as-glow:not(.inner_row) > .row_col_wrap_12,
.vc_row[class*='as-glow-preset--']:not(.inner_row) > .row_col_wrap_12 {
	position: relative;
	z-index: 2;
}

.vc_row.as-glow:not(.inner_row)::before,
.vc_row.as-glow:not(.inner_row)::after,
.vc_row[class*='as-glow-preset--']:not(.inner_row)::before,
.vc_row[class*='as-glow-preset--']:not(.inner_row)::after {
	background: url('../img/as-glow.svg') no-repeat center / contain;
	content: '';
	height: var(--as-glow-h);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: var(--as-glow-w);
	z-index: 1;
	will-change: transform, opacity;
}

.vc_row.as-glow:not(.inner_row)::before,
.vc_row[class*='as-glow-preset--']:not(.inner_row)::before {
	bottom: var(--as-glow-a-bottom);
	left: var(--as-glow-a-left);
	right: var(--as-glow-a-right);
	top: var(--as-glow-a-top);
	transform: rotate(var(--as-glow-a-rotate));
}

.vc_row.as-glow:not(.inner_row)::after,
.vc_row[class*='as-glow-preset--']:not(.inner_row)::after {
	bottom: var(--as-glow-b-bottom);
	left: var(--as-glow-b-left);
	right: var(--as-glow-b-right);
	top: var(--as-glow-b-top);
	transform: rotate(var(--as-glow-b-rotate));
}

/* Scroll reveal + ambient (class added by as-glow.js) */
.vc_row.as-glow.as-glow--inview:not(.as-glow--ambient-off):not(.inner_row)::before,
.vc_row[class*='as-glow-preset--'].as-glow--inview:not(.as-glow--ambient-off):not(.inner_row)::before {
	animation:
		as-glow-reveal-scroll-a 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
		as-glow-ambient-a 7s 1.5s ease-in-out infinite;
}

.vc_row.as-glow.as-glow--inview:not(.as-glow--ambient-off):not(.inner_row)::after,
.vc_row[class*='as-glow-preset--'].as-glow--inview:not(.as-glow--ambient-off):not(.inner_row)::after {
	animation:
		as-glow-reveal-scroll-b 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards,
		as-glow-ambient-b 8s 1.85s ease-in-out infinite;
}

.vc_row.as-glow.as-glow--inview.as-glow--ambient-off:not(.inner_row)::before,
.vc_row[class*='as-glow-preset--'].as-glow--inview.as-glow--ambient-off:not(.inner_row)::before {
	animation: as-glow-reveal-scroll-a 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vc_row.as-glow.as-glow--inview.as-glow--ambient-off:not(.inner_row)::after,
.vc_row[class*='as-glow-preset--'].as-glow--inview.as-glow--ambient-off:not(.inner_row)::after {
	animation: as-glow-reveal-scroll-b 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

/* Load reveal + ambient (hero) */
.vc_row.as-glow.as-glow--reveal-load:not(.as-glow--ambient-off):not(.inner_row)::before,
.vc_row.as-glow-preset--hero:not(.as-glow--ambient-off):not(.inner_row)::before {
	animation:
		as-glow-reveal-load-a 1.35s cubic-bezier(0.33, 1, 0.68, 1) 0.1s forwards,
		as-glow-ambient-a 7s 1.45s ease-in-out infinite;
}

.vc_row.as-glow.as-glow--reveal-load:not(.as-glow--ambient-off):not(.inner_row)::after,
.vc_row.as-glow-preset--hero:not(.as-glow--ambient-off):not(.inner_row)::after {
	animation:
		as-glow-reveal-load-b 1.35s cubic-bezier(0.33, 1, 0.68, 1) 0.28s forwards,
		as-glow-ambient-b 8s 1.63s ease-in-out infinite;
}

.vc_row.as-glow.as-glow--reveal-load.as-glow--ambient-off:not(.inner_row)::before,
.vc_row.as-glow-preset--hero.as-glow--ambient-off:not(.inner_row)::before {
	animation: as-glow-reveal-load-a 1.35s cubic-bezier(0.33, 1, 0.68, 1) 0.1s forwards;
}

.vc_row.as-glow.as-glow--reveal-load.as-glow--ambient-off:not(.inner_row)::after,
.vc_row.as-glow-preset--hero.as-glow--ambient-off:not(.inner_row)::after {
	animation: as-glow-reveal-load-b 1.35s cubic-bezier(0.33, 1, 0.68, 1) 0.28s forwards;
}

/* Single orb — hide B unless --dual or hero preset */
.vc_row.as-glow.as-glow--single:not(.inner_row)::after,
.vc_row.as-glow:not(.as-glow--dual):not(.as-glow-preset--hero):not(
		[class*='as-glow-preset--hero']
	):not(.inner_row)::after {
	content: none;
	display: none;
}

/* Size modifiers */
.vc_row.as-glow.as-glow--sm:not(.inner_row),
.vc_row.as-glow-preset--hero.as-glow--sm:not(.inner_row),
.vc_row.as-glow-preset--testimonial.as-glow--sm:not(.inner_row) {
	--as-glow-w: 420px;
	--as-glow-h: 350px;
}

.vc_row.as-glow.as-glow--lg:not(.inner_row),
.vc_row.as-glow-preset--hero.as-glow--lg:not(.inner_row),
.vc_row.as-glow-preset--testimonial.as-glow--lg:not(.inner_row) {
	--as-glow-w: 720px;
	--as-glow-h: 600px;
}

/* Preset: hero (dual orbs) */
.vc_row.as-glow-preset--hero:not(.inner_row) {
	--as-glow-a-top: 130px;
	--as-glow-a-right: -300px;
	--as-glow-a-rotate: 135deg;
	--as-glow-b-top: -228px;
	--as-glow-b-left: -200px;
	--as-glow-b-rotate: -30deg;
}

.vc_row.as-glow-preset--testimonial:not(.inner_row) {
	--as-glow-a-top: auto;
	--as-glow-a-bottom: -250px;
	--as-glow-a-right: -300px;
	--as-glow-b-top: 0px;
	--as-glow-b-left: -300px;
}

.vc_row.as-glow-preset--section:not(.inner_row) {
	--as-glow-a-top: 100px;
	--as-glow-a-bottom: auto;
	--as-glow-a-right: auto;
	--as-glow-a-left: 128px;
}

.vc_row.as-glow-preset--tim:not(.inner_row) {
	--as-glow-a-top: -50px;
	--as-glow-a-bottom: auto;
	--as-glow-a-right: -300px;
	--as-glow-a-left: auto;
}

.vc_row.as-glow-preset--faq:not(.inner_row) {
	--as-glow-a-top: 100px;
	--as-glow-a-bottom: auto;
	--as-glow-a-right: auto;
	--as-glow-a-left: 128px;
}

@media (max-width: 480px) {
	.vc_row.as-glow:not(.inner_row),
	.vc_row[class*='as-glow-preset--']:not(.inner_row) {
		--as-glow-w: 380px;
		--as-glow-h: 320px;
	}

	.vc_row.as-glow-preset--hero:not(.inner_row) {
		--as-glow-a-top: 300px;
		--as-glow-a-right: -200px;
		--as-glow-b-top: -140px;
		--as-glow-b-left: -160px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vc_row.as-glow:not(.inner_row)::before,
	.vc_row.as-glow:not(.inner_row)::after,
	.vc_row[class*='as-glow-preset--']:not(.inner_row)::before,
	.vc_row[class*='as-glow-preset--']:not(.inner_row)::after {
		animation: none !important;
		opacity: 1;
		transform: rotate(var(--as-glow-a-rotate));
	}

	.vc_row.as-glow:not(.inner_row)::after,
	.vc_row[class*='as-glow-preset--']:not(.inner_row)::after {
		transform: rotate(var(--as-glow-b-rotate));
	}
}