/* Forex Trade — page transition curtains. * * This is the very same loading screen the landing page plays on arrival. It was measured on * the landing's own Webflow interaction (action list a-2, "whipe-ani-intro", inside * /63bf3e1c32ea7ba16d1bdf88/js/flow-party-on-demand.40f93b00b.js) and confirmed by sampling * getComputedStyle on the three curtains frame by frame in a headless browser: * * layer colour z-index retreat: delay duration easing * .bg-whipe.bg-blue.intro #5546ff 55 0 ms 1000 ms inOutQuart * .bg-whipe.bg-pink (cyan) #00d4ff 5 100 ms 1000 ms inOutQuart * .bg-whipe.bg-green #bfff0a 5 200 ms 1000 ms inOutQuart * * Direction: the three are `position:absolute; top:0` and animate `height` from 100% to 0%, * so they rise and reveal the page from the bottom up. Here the same motion is done with * `scaleY` and `transform-origin: top`, which looks identical and never touches layout. * * Webflow's `inOutQuart` is the JS easeInOutQuart function; its CSS equivalent is * cubic-bezier(0.77, 0, 0.175, 1). * * ENTER (destination): blue 0 ms, cyan 100 ms, green 200 ms, scaleY 1 -> 0, exactly like the * landing intro. * LEAVE (origin): the mirror image, green 0 ms, cyan 100 ms, blue 200 ms, scaleY 0 -> 1, * so the layer left on screen when the browser navigates is the blue one * and the destination picks the animation up right where it stopped. */ :root { --fx-wipe-1: #5546ff; /* --slate-blue, from the site template */ --fx-wipe-2: #bfff0a; /* --green-yellow, from the site template */ /* Third curtain. Default is #14F1D9. The hero stamps lane repaints the third wipe of the landing intro in site/fx/stamps.css (.bg-whipe.bg-pink.fx-cyan), so that exact value is copied here and both screens stay the same cyan. */ --fx-wipe-3: #00d4ff; --fx-wipe-dur: 1000ms; --fx-wipe-step: 100ms; --fx-wipe-ease: cubic-bezier(0.77, 0, 0.175, 1); } /* First frame shield. It is painted by the inline