/* ==========================================================================
   VuloForm – section and scroll effects. Add a class to any block
   (block sidebar → Advanced → Additional CSS class) and it just works.
   Behaviour: assets/js/vf-effects.js. Turned off for "reduce motion" users.

   1. REVEAL ONCE IN VIEW
      vf-reveal          fade up (the original <Reveal>)
      vf-reveal-down     drop down             vf-reveal-left / -right   slide in from the side
      vf-reveal-zoom     scale up              vf-reveal-pop             small spring pop
      vf-reveal-fade     fade only             vf-reveal-blur            un-blur
      vf-reveal-tilt     tip up in 3D (the hero card)
      vf-stagger         on a parent: its children reveal one after another
      vf-words           a heading rises word by word
      vf-draw            an SVG line draws itself     vf-grow-x   a bar grows to full width
      vf-count           a number counts up           vf-inview   only adds .is-in (for your own CSS)
      Timing:  vf-delay-1 … vf-delay-10, -12, -13, -15 (0.1s steps), vf-delay-005 / -008 / -015 / -016 · vf-fast · vf-slow · vf-repeat (every time)
               or inline: style="--vf-delay:.4s; --vf-t:1s; --vf-step:.12s"

   2. LINKED TO SCROLL (move while you scroll)
      vf-parallax        drifts up slower than the page   (+ vf-parallax-lg / -xl, or --vf-move:200px)
      vf-parallax-reverse  drifts the other way
      vf-drift-left      slides left while you scroll (giant words)   vf-drift-right   slides right
      vf-exit-up / vf-exit-down   moves while the section scrolls away (hero layers)
      vf-exit-fade       fades out while the section scrolls away
      vf-scroll-zoom     grows from 88% to 100% and its corners tighten (the final CTA card)
      vf-enter-up        rises from --vf-from to --vf-to while the section scrolls in
      vf-scroll-rotate   turns slowly with scroll
      vf-fx-root         on a parent: children measure their scroll position from it
      vf-sticky-steps    tall section whose inside sticks; with vf-steps (list), vf-step-bar.
                         Sets data-step="0…n" and --p (0–1) for anything inside.
      vf-page-progress   thin bar at the top of the window showing how far you've read

   3. LOOPING / POINTER
      vf-marquee / vf-marquee-reverse   endless sideways scroll of a list or row (+ vf-fade-edges)
      vf-float · vf-wiggle · vf-pulse   gentle loops
      vf-tilt            tilts toward the pointer       vf-follow   shifts toward the pointer
      vf-lift            lifts on hover                 vf-shine    light sweep on hover
   ========================================================================== */

:root {
	--vf-ease: cubic-bezier(.22, 1, .36, 1);
	--vf-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* 1. Reveal ---------------------------------------------------------------- */
:is(.vf-reveal, .vf-reveal-down, .vf-reveal-left, .vf-reveal-right, .vf-reveal-zoom, .vf-reveal-pop, .vf-reveal-fade, .vf-reveal-blur, .vf-reveal-tilt) {
	transition: opacity var(--vf-t, .8s) var(--vf-ease), transform var(--vf-t, .8s) var(--vf-ease), filter var(--vf-t, .8s) var(--vf-ease);
	transition-delay: calc(var(--vf-delay, 0s) + var(--vf-i, 0) * var(--vf-step, .08s));
}
.vf-reveal-pop { transition-timing-function: var(--vf-spring); }
html.vf-js:not(.vf-noanim) :is(.vf-reveal, .vf-reveal-down, .vf-reveal-left, .vf-reveal-right, .vf-reveal-zoom, .vf-reveal-pop, .vf-reveal-fade, .vf-reveal-blur, .vf-reveal-tilt):not(.is-in) { opacity: 0; }
html.vf-js:not(.vf-noanim) .vf-reveal:not(.is-in)       { transform: translate3d(0, 1.75rem, 0); }
html.vf-js:not(.vf-noanim) .vf-reveal-down:not(.is-in)  { transform: translate3d(0, -1.75rem, 0); }
html.vf-js:not(.vf-noanim) .vf-reveal-left:not(.is-in)  { transform: translate3d(-1.25rem, 0, 0); }
html.vf-js:not(.vf-noanim) .vf-reveal-right:not(.is-in) { transform: translate3d(1.25rem, 0, 0); }
html.vf-js:not(.vf-noanim) .vf-reveal-zoom:not(.is-in)  { transform: scale(.8); }
html.vf-js:not(.vf-noanim) .vf-reveal-pop:not(.is-in)   { transform: scale(0); }
html.vf-js:not(.vf-noanim) .vf-reveal-blur:not(.is-in)  { filter: blur(.5rem); }
html.vf-js:not(.vf-noanim) .vf-reveal-tilt:not(.is-in)  { transform: perspective(1200px) translate3d(0, 3.75rem, 0) rotateX(18deg); }

.vf-delay-1 { --vf-delay: .1s; } .vf-delay-2 { --vf-delay: .2s; } .vf-delay-3 { --vf-delay: .3s; }
.vf-delay-4 { --vf-delay: .4s; } .vf-delay-5 { --vf-delay: .5s; }
.vf-delay-6 { --vf-delay: .6s; } .vf-delay-7 { --vf-delay: .7s; } .vf-delay-8 { --vf-delay: .8s; } .vf-delay-9 { --vf-delay: .9s; }
.vf-delay-10 { --vf-delay: 1s; } .vf-delay-12 { --vf-delay: 1.2s; } .vf-delay-13 { --vf-delay: 1.3s; } .vf-delay-15 { --vf-delay: 1.5s; }
.vf-delay-005 { --vf-delay: .05s; } .vf-delay-008 { --vf-delay: .08s; } .vf-delay-015 { --vf-delay: .15s; } .vf-delay-016 { --vf-delay: .16s; }
.vf-fast { --vf-t: .5s; } .vf-slow { --vf-t: 1.1s; }

/* Words rising (the JS wraps each word in .vf-w > span). */
.vf-words .vf-w { display: inline-block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: bottom; }
.vf-words .vf-w > span { display: inline-block; transition: transform .9s var(--vf-ease); transition-delay: calc(var(--vf-delay, 0s) + var(--vf-i, 0) * .08s); }
html.vf-js:not(.vf-noanim) .vf-words:not(.is-in) .vf-w > span { transform: translateY(110%) rotate(6deg); }
/* A highlighted part (<mark>) rises as one line after the words. */
.vf-words .vf-w-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.vf-words .vf-w-line > span { display: inline-block; transition: transform .9s var(--vf-ease); transition-delay: calc(var(--vf-delay, 0s) + .45s); }
html.vf-js:not(.vf-noanim) .vf-words:not(.is-in) .vf-w-line > span { transform: translateY(110%); }

/* SVG line drawing, bar growing. */
.vf-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--vf-t, 1s) var(--vf-ease) var(--vf-delay, 0s); }
html.vf-js:not(.vf-noanim) .vf-draw:not(.is-in) { stroke-dashoffset: 1; }
.vf-grow-x { transition: width var(--vf-t, 1.2s) var(--vf-ease) var(--vf-delay, 0s); }
html.vf-js:not(.vf-noanim) .vf-grow-x:not(.is-in) { width: 0 !important; }

/* 2. Scroll-linked (the JS sets --p, --pi, --pe from 0 to 1) ---------------
   --p  : section enters at the bottom (0) … leaves at the top (1)
   --pi : section enters at the bottom (0) … its end reaches the bottom (1)
   --pe : section top reaches the top (0) … its end leaves at the top (1)            */
.vf-parallax          { --vf-move: 3.75rem; transform: translate3d(0, calc((.5 - var(--p, .5)) * 2 * var(--vf-move)), 0); }
.vf-parallax-lg       { --vf-move: 8.75rem; }
.vf-parallax-xl       { --vf-move: 15rem; }
.vf-parallax-reverse  { transform: translate3d(0, calc((var(--p, .5) - .5) * 2 * var(--vf-move, 3.75rem)), 0); }
.vf-drift-left        { transform: translate3d(calc(5% - var(--p, 0) * 30%), 0, 0); }
.vf-drift-right       { transform: translate3d(calc(-30% + var(--p, 0) * 30%), 0, 0); }
.vf-exit-up           { transform: translate3d(0, calc(var(--pe, 0) * -1 * var(--vf-move, 3.75rem)), 0); }
.vf-exit-down         { transform: translate3d(0, calc(var(--pe, 0) * var(--vf-move, 3.75rem)), 0); }
.vf-exit-fade         { opacity: clamp(0, 1 - var(--pe, 0) / .7, 1); }
.vf-exit-down.vf-exit-fade, .vf-exit-up.vf-exit-fade { will-change: transform, opacity; }
.vf-scroll-zoom       { transform: scale(calc(.88 + var(--pi, 1) * .12)); border-radius: calc(5rem - var(--pi, 1) * 2.75rem); }
.vf-enter-up          { transform: translate3d(0, calc(var(--vf-from, 7.5rem) + (var(--vf-to, -1.25rem) - var(--vf-from, 7.5rem)) * var(--pi, 1)), 0); }
.vf-scroll-rotate     { transform: rotate(calc(var(--p, .5) * var(--vf-turn, 90deg))); }
:is(.vf-parallax, .vf-parallax-reverse, .vf-drift-left, .vf-drift-right, .vf-exit-up, .vf-exit-down, .vf-scroll-zoom, .vf-enter-up, .vf-scroll-rotate) { will-change: transform; }

/* Sticky steps: the section is tall, its first child (or .vf-sticky) sticks for the whole scroll. */
.vf-sticky-steps { position: relative; height: var(--vf-steps-h, 340vh); }
.vf-sticky-steps > .vf-sticky,
.vf-sticky-steps > .wp-block-group__inner-container > .vf-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
.vf-step-bar { position: relative; display: block; height: .25rem; width: 100%; margin: 2rem 0 0; border: 0; border-radius: 99px; background: var(--line, var(--line)); overflow: hidden; opacity: 1; }
.vf-step-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--mint, var(--mint)); }
/* Step list (<li><strong>Title</strong><br>Text</li>; the JS adds the number and the folding body). */
.vf-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.vf-steps > li { margin: 0; padding: 1rem; border-radius: 1rem; opacity: .45; transition: all .5s var(--vf-ease); }
.vf-steps > li.is-active { opacity: 1; background: var(--color-white); box-shadow: 0 16px 40px -24px color-mix(in srgb, var(--ink) 40%, transparent); }
.vf-step-title { display: flex; align-items: center; gap: .75rem; margin: 0; font-weight: 700; color: var(--ink, var(--ink)); }
.vf-step-title strong { font-weight: 700; }
.vf-step-num { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 99px; font-size: .875rem; background: var(--line, var(--line)); color: var(--ink-soft, var(--ink-soft)); transition: background-color .3s, color .3s; }
.vf-steps > li.is-done .vf-step-num { background: var(--navy, var(--navy)); color: var(--color-white); }
.vf-step-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--vf-ease), opacity .45s var(--vf-ease); }
.vf-step-body > * { overflow: hidden; margin: 0; padding-left: 2.5rem; font-size: .875rem; line-height: 1.625; color: var(--ink-soft, var(--ink-soft)); }
.vf-step-body > * > span { display: block; padding-top: .5rem; }
.vf-steps > li.is-active .vf-step-body { grid-template-rows: 1fr; opacity: 1; }

/* Page progress bar. */
.vf-page-progress { position: fixed; inset: 0 0 auto 0; z-index: 9999; height: 3px; transform-origin: 0 50%; transform: scaleX(var(--vf-page, 0)); background: var(--navy, var(--navy)); }

/* 3. Looping and pointer --------------------------------------------------- */
.vf-marquee, .vf-marquee-reverse { display: flex; flex-wrap: nowrap; flex-shrink: 0; width: max-content; gap: 1rem; margin: 0; padding: 0 1rem 0 0; list-style: none; animation: vfMarquee var(--vf-marquee-t, 38s) linear infinite; }
.vf-marquee-reverse { animation-direction: reverse; animation-duration: var(--vf-marquee-t, 44s); }
.vf-marquee > *, .vf-marquee-reverse > * { flex: none; margin: 0; }
.vf-marquee-wrap { display: flex; overflow: hidden; }
.vf-fade-edges { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.vf-pause-hover:hover :is(.vf-marquee, .vf-marquee-reverse), :is(.vf-marquee, .vf-marquee-reverse).vf-pause-hover:hover { animation-play-state: paused; }
/* Kadence column (before and after the JS moves the class to its inner box). */
:is(.vf-marquee, .vf-marquee-reverse, .vf-marquee-wrap) > .kt-inside-inner-col { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 1rem; }
.vf-marquee-wrap > .kt-inside-inner-col:is(.vf-marquee, .vf-marquee-reverse) { width: max-content; padding-right: 1rem; }
@keyframes vfMarquee { to { transform: translateX(-50%); } }

.vf-float  { animation: vfFloat var(--vf-float-t, 5s) ease-in-out infinite; }
.vf-wiggle { animation: vfWiggle var(--vf-wiggle-t, 7s) ease-in-out infinite; }
.vf-pulse  { animation: vfPulse 2s ease-in-out infinite; }
@keyframes vfFloat  { 50% { transform: translateY(var(--vf-float, -.5rem)); } }
@keyframes vfWiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg); } }
@keyframes vfPulse  { 50% { transform: scale(1.05); } }

.vf-tilt   { transform: rotateX(calc(var(--my, 0) * -12deg)) rotateY(calc(var(--mx, 0) * 16deg)); transform-style: preserve-3d; }
.vf-follow { transform: translate3d(calc(var(--mx, 0) * 2 * var(--vf-fx, 1rem)), calc(var(--my, 0) * 2 * var(--vf-fy, 1rem)), 0); }
.vf-lift   { transition: transform .45s var(--vf-spring); }
.vf-lift:hover, .vf-reveal:hover > .vf-lift { transform: translateY(-.25rem); }
.vf-shine { position: relative; overflow: hidden; isolation: isolate; }
.vf-shine::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-white) 25%, transparent), transparent); transition: transform .7s; }
.vf-shine:hover::before { transform: translateX(100%); }

/* Script failed, editor, or reduced motion: show everything, stop moving. */
.vf-noanim :is([class*="vf-reveal"], .vf-words .vf-w > span, .vf-words .vf-w-line > span) { opacity: 1 !important; transform: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) {
	[class*="vf-reveal"], .vf-words .vf-w > span, .vf-words .vf-w-line > span, .vf-draw, .vf-grow-x { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; stroke-dashoffset: 0 !important; }
	:is(.vf-parallax, .vf-parallax-reverse, .vf-drift-left, .vf-drift-right, .vf-exit-up, .vf-exit-down, .vf-scroll-zoom, .vf-enter-up, .vf-scroll-rotate, .vf-tilt, .vf-follow) { transform: none !important; }
	.vf-exit-fade { opacity: 1 !important; }
	.vf-marquee, .vf-marquee-reverse, .vf-float, .vf-wiggle, .vf-pulse { animation: none !important; }
}