/* Ventiv home page scroll motion. Every rule sits under html.vm-motion, so if the flag is
   absent (reduced motion, script failure) the page renders exactly as built in Elementor. */

:root {
	--vm-ease: cubic-bezier(.16, 1, .3, 1);
	--vm-ease-wipe: cubic-bezier(.77, 0, .18, 1);
	--vm-yellow: #E5E538;
	--vm-d: 56px;
}
@media (max-width: 767px) {
	:root { --vm-d: 30px; }
}

/* ---------- Hero: CSS-only entrance on load. The headline itself is never hidden, to protect load speed. ---------- */
html.vm-motion [data-id="4f0614f4"] { animation: vm-rise 1s var(--vm-ease) .15s both; }
html.vm-motion [data-id="5e8b68c7"] { animation: vm-rise 1s var(--vm-ease) .35s both; }
html.vm-motion [data-id="ba51c62"] { animation: vm-pop .9s var(--vm-ease) .55s both; }
html.vm-motion [data-id="577c5a67"] > span {
	display: inline-block;
	transform-origin: 50% 85%;
	animation: vm-stamp 1s cubic-bezier(.3, .7, .4, 1) 1s both;
}
html.vm-motion [data-id="496b6d65"] { position: relative; z-index: 1; }

@keyframes vm-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes vm-pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes vm-stamp {
	0%   { opacity: 0; translate: 0 -1.2em; scale: 1 1; }
	40%  { opacity: 1; translate: 0 0; scale: 1.4 .65; }
	62%  { scale: .82 1.2; }
	80%  { scale: 1.08 .94; }
	100% { opacity: 1; translate: 0 0; scale: 1 1; }
}

/* Growth line drawn behind the hero */
.vm-chart { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vm-chart::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(520px circle at var(--vm-mx, 78%) var(--vm-my, 32%), rgba(229, 229, 56, .07), transparent 62%);
	transition: opacity .6s ease;
}
.vm-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.vm-chart .vm-grid line { stroke: rgba(255, 255, 255, .07); stroke-width: 1; stroke-dasharray: 2 7; }
.vm-chart .vm-grid { opacity: 0; transition: opacity 1.2s ease .2s; }
.vm-chart .vm-line {
	fill: none; stroke: var(--vm-yellow); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 1 1.2; stroke-dashoffset: 1.05; opacity: 0;
	transition: stroke-dashoffset 2.6s cubic-bezier(.65, 0, .35, 1) .4s, opacity .2s linear .4s;
}
.vm-chart .vm-area { opacity: 0; transition: opacity 1.6s ease 1.8s; }
.vm-chart .vm-dot,
.vm-chart .vm-ring { transform-box: fill-box; transform-origin: center; }
.vm-chart .vm-dot { fill: var(--vm-yellow); opacity: 0; transform: scale(0); transition: opacity .2s ease 2.9s, transform .7s cubic-bezier(.34, 1.56, .64, 1) 2.9s; }
.vm-chart .vm-ring { fill: none; stroke: var(--vm-yellow); stroke-width: 2; opacity: 0; }
.vm-chart.is-drawn .vm-grid { opacity: 1; }
.vm-chart.is-drawn .vm-line { stroke-dashoffset: 0; opacity: .9; }
.vm-chart.is-drawn .vm-area { opacity: 1; }
.vm-chart.is-drawn .vm-dot { opacity: 1; transform: scale(1); }
.vm-chart.is-drawn .vm-ring { animation: vm-ring 2.6s ease-out 3.4s infinite; }
@keyframes vm-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }

@media (max-width: 1024px) {
	.vm-chart { top: auto; height: 46%; opacity: .55; }
	.vm-chart::before { display: none; }
}
@media (max-width: 767px) {
	.vm-chart { height: 36%; opacity: .45; }
}

/* ---------- Ticker leans with scroll speed ---------- */
html.vm-motion [data-id="518956e7"] p { transform: skewX(var(--vm-skew, 0deg)); }

/* ---------- Section reveals (classes added by motion.js) ---------- */
html.vm-motion .vm-persp { perspective: 1400px; }

html.vm-motion .vm-r:not(.vm-in)[data-vm="up"]       { opacity: 0; translate: 0 var(--vm-d); }
html.vm-motion .vm-r:not(.vm-in)[data-vm="up-sm"]    { opacity: 0; translate: 0 18px; }
html.vm-motion .vm-r:not(.vm-in)[data-vm="up-lg"]    { opacity: 0; translate: 0 calc(var(--vm-d) * 1.8); }
html.vm-motion .vm-r:not(.vm-in)[data-vm="right-sm"] { opacity: 0; translate: 36px 0; }
html.vm-motion .vm-r:not(.vm-in)[data-vm="rise"]     { opacity: 0; translate: 0 calc(var(--vm-d) * 1.4); scale: .96; }
html.vm-motion .vm-r:not(.vm-in)[data-vm="tilt"]     { opacity: 0; translate: 0 calc(var(--vm-d) * 1.3); rotate: x 18deg; scale: .94; transform-origin: 50% 100%; }
html.vm-motion .vm-r:not(.vm-in)[data-vm="swing"]    { opacity: 0; translate: calc(var(--vm-d) * -1.2) 0; rotate: y 18deg; transform-origin: 0% 50%; }
html.vm-motion .vm-r:not(.vm-in)[data-vm="card"]     { opacity: 0; translate: 0 calc(var(--vm-d) * 1.6); rotate: x -12deg; transform-origin: 50% 0%; }
html.vm-motion .vm-r:not(.vm-in)[data-vm="wipe"]     { clip-path: inset(0 100% 0 0); }
html.vm-motion .vm-r:not(.vm-in)[data-vm="wipe-card"] { clip-path: inset(0 100% 0 0 round 12px); translate: calc(var(--vm-d) * .6) 0; }
html.vm-motion .vm-r:not(.vm-in)[data-vm="curtain"]  { clip-path: inset(100% 0 0 0); }

html.vm-motion .vm-r.vm-in:not(.vm-done) {
	opacity: 1;
	translate: 0 0;
	scale: 1;
	transition:
		opacity .9s var(--vm-ease),
		translate 1.1s var(--vm-ease),
		rotate 1.2s var(--vm-ease),
		scale 1.1s var(--vm-ease),
		clip-path 1.1s var(--vm-ease-wipe);
	transition-delay: var(--vm-delay, 0ms);
}
html.vm-motion .vm-r.vm-in:not(.vm-done)[data-vm="tilt"],
html.vm-motion .vm-r.vm-in:not(.vm-done)[data-vm="card"] { rotate: x 0deg; }
html.vm-motion .vm-r.vm-in:not(.vm-done)[data-vm="swing"] { rotate: y 0deg; }
html.vm-motion .vm-r.vm-in:not(.vm-done)[data-vm="wipe"],
html.vm-motion .vm-r.vm-in:not(.vm-done)[data-vm="curtain"] { clip-path: inset(0 0 0 0); }
html.vm-motion .vm-r.vm-in:not(.vm-done)[data-vm="wipe-card"] { clip-path: inset(0 0 0 0 round 12px); }

@media (max-width: 767px) {
	html.vm-motion .vm-r:not(.vm-in)[data-vm="tilt"],
	html.vm-motion .vm-r:not(.vm-in)[data-vm="swing"],
	html.vm-motion .vm-r:not(.vm-in)[data-vm="card"] { rotate: none; translate: 0 var(--vm-d); }
	html.vm-motion .vm-r.vm-in:not(.vm-done)[data-vm="tilt"],
	html.vm-motion .vm-r.vm-in:not(.vm-done)[data-vm="swing"],
	html.vm-motion .vm-r.vm-in:not(.vm-done)[data-vm="card"] { rotate: none; }
}

/* Headings: words rise out of a mask */
html.vm-motion .vm-split .vm-w {
	display: inline-block; overflow: hidden; vertical-align: top;
	padding-bottom: .14em; margin-bottom: -.14em;
}
html.vm-motion .vm-split .vm-wi { display: inline-block; }
html.vm-motion .vm-split:not(.vm-in) .vm-wi { translate: 0 110%; }
html.vm-motion .vm-split.vm-in .vm-wi {
	translate: 0 0;
	transition: translate 1.05s var(--vm-ease);
	transition-delay: calc(var(--vm-delay, 0ms) + var(--wi, 0) * 75ms);
}

/* "Why Ventiv?" lead: words light up as you read down */
html.vm-motion .vm-hl .vm-hw { opacity: clamp(.16, calc((var(--p, 0) - var(--i, 0)) / 3), 1); }