/* Seoul Venus loading curtain. Generated by build_site_loader.py - do not hand-edit. */
/* The overlay is the scroll container, not the document. If the page scrolls too, the
site slides up behind the curtain and the whole thing reads as ordinary scrolling
instead of a reveal. Body stays pinned at 0 the entire time. */
/* The document stays pinned and the overlay does not scroll: ONE gesture triggers a
timed open. The rope leads, the panel follows - see the JS. */
#venus-loader {
--vp:0; --lift:0; --pull:0; --crop:1;
position:fixed; inset:0; z-index:2147483000; background:transparent;
overflow:hidden; overscroll-behavior:contain;
/* FAIL OPEN. If venus-loader.js 404s or throws, this div would otherwise sit over the
whole site swallowing every click and scroll. Transparent and inert by default; the
panel it wraps is what actually catches input, and that only exists once the JS has
successfully injected the markup. */
pointer-events:none;
}
/* THE FIRST FRAME. #vl-stage below - the thing that actually paints the curtain - does
not exist until the deferred script mounts it, and until then this overlay is
deliberately transparent, so the site showed through: the hero, the headline, the two
women, and then the wine ground dropping on top of them. That flash is what this pair
of rules removes. The arming script in sets .vl-arm before the first paint and
the ground is up from frame one; #vl-stage then lands on the identical colour, so the
handover has no seam. The script drops the class the moment it mounts, which also
means a failed script cannot leave an opaque pane over the site. */
html.vl-arm #venus-loader { background:#6B1028; pointer-events:auto; }
html.vl-arm, html.vl-arm body { overflow:hidden !important; height:100%; }
#vl-stage { position:absolute; inset:0; overflow:hidden; background:#6B1028;
pointer-events:auto;
transform:translateY(calc(var(--lift) * -101%)); will-change:transform; }
#vl-scroll { display:none; }
#venus-loader[hidden] { display:none; }
html.vl-lock, html.vl-lock body { overflow:hidden !important; height:100%; }
@media (max-width:1023px) { #venus-loader { --crop:1.45; } }
@media (max-width:767px) { #venus-loader { --crop:2.0; } }
/* The frame is 16:9 and a browser window usually is not, so one axis always gives. When
the window is TALLER than 16:9 the frame is centred and wine shows above and below -
fine. When it is SHORTER - most laptops in a maximised window - the frame overflows and
the crop used to be an even 50/50, which took the treetops off the top of the picture.
The interest in this composition is all in the upper two thirds; the bottom is a band of
repeating sea that costs nothing to lose. So the crop is biased 25% off the top and 75%
off the bottom. max() picks the right one of the two without a media query: with the
window taller the difference is positive and .5 wins (centred), with it shorter the
difference is negative and .25 is the larger, i.e. the smaller cut off the top. */
#vl-frame { position:absolute; left:50%;
--fh:calc(100vw * var(--crop) * 9 / 16);
top:max(calc((100vh - var(--fh)) * .5), calc((100vh - var(--fh)) * .25));
transform:translateX(-50%);
width:calc(100vw * var(--crop)); aspect-ratio:16/9; }
/* The shadow sits on the ![]()
, NOT on .vl, and that placement is load-bearing now that
the img moves. A static filter on the parent of an animating child has to be re-applied
to the child's new position every frame - the repaint the whole build was arranged to
avoid. On the animating element itself the filtered content is what is constant and the
transform is what changes, so it rasterises once and the compositor moves the result. */
/* A plain ease-out, NOT the overshooting cubic-bezier(.22,1.2,.36,1) this had. That
curve carries every layer past its mark and back, which on ninety of them is ninety
little bounces - the single loudest thing about the reveal. */
#venus-loader .vl { position:absolute;
animation:vl-enter 1s cubic-bezier(.22,.61,.36,1) paused both; }
/* ---- the picture keeps breathing once it is placed ------------------------
A collage that stops dead the moment it is assembled reads as a screenshot. The whole
subject is wind - Zephyr is blowing the thing across the frame - so the grove, the
flora, the petals and the figures drift on a slow four-beat loop.
It lives on the ![]()
, not on the .vl wrapper: the wrapper's transform is the entrance,
scrubbed by --vp, and one element cannot run two transforms. Parent and child compose,
so a layer can still be arriving while it is already swaying.
Transform ONLY - no filter, no opacity - so every one of these stays on the compositor
and never asks the main thread for a repaint while the video is coming down. Amplitudes
are percentages of each layer's own box, so they are identical at every breakpoint.
Ground, shore, sea and the wordmark emit no --ad and so run nothing: they are the
biggest textures on the screen and the ones you would notice moving. */
/* The wordmark is the one layer that is not an ![]()
- it is inline SVG, and it does not
breathe - so it takes the same shadow on the element itself. */
#venus-loader .vl img, #venus-loader #vl-wordmark svg {
filter:drop-shadow(.32vh .48vh .66vh rgba(34,5,14,.42)); }
#venus-loader .vl img { display:block; width:100%; height:auto;
transform-origin:var(--ao, 50% 50%);
animation: vl-air var(--ad, 0s) ease-in-out var(--adl, 0s) infinite; }
@keyframes vl-air {
0% { transform:translate3d(0,0,0) rotate(0deg); }
25% { transform:translate3d(calc(var(--aw) * .58), calc(var(--ah) * -.34), 0)
rotate(calc(var(--ar) * .64)); }
50% { transform:translate3d(var(--aw), calc(var(--ah) * .2), 0) rotate(var(--ar)); }
75% { transform:translate3d(calc(var(--aw) * .26), calc(var(--ah) * .46), 0)
rotate(calc(var(--ar) * -.3)); }
100% { transform:translate3d(0,0,0) rotate(0deg); }
}
/* a phone is already spending everything it has on ~90 layers and a video download */
@media (max-width:767px) { #venus-loader .vl img { animation:none; } }
/* opacity used to be done at 18%, so a layer spent the rest of its entrance fully opaque
and visibly travelling. Held to 55% it arrives mostly by fading, and the movement is
what you notice second rather than first. */
@keyframes vl-enter {
from { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(var(--sc)); }
55% { opacity:1; }
to { opacity:1; transform:none; }
}
#venus-loader #vl-ground { left:-0.3915%; top:0.0000%; width:100.7829%;
--s:0.0000; --d:0.1200;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:0.00vh; --rot:0.00deg; --sc:1.02; }
#venus-loader #vl-grove-trunks { left:67.1000%; top:11.4991%; width:20.4000%;
--s:0.2500; --d:0.1800;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:-2.481%; --ah:-1.267%; --ar:-0.320deg; --ad:10.51s; --adl:-7.36s; --ao:50% 99%; }
#venus-loader #vl-grove-trunks-2 { left:77.0000%; top:13.1842%; width:24.2000%;
--s:0.2576; --d:0.1773;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:-2.257%; --ah:-1.196%; --ar:-0.320deg; --ad:12.98s; --adl:-9.05s; --ao:50% 99%; }
#venus-loader #vl-grove-foliage-b { left:68.6000%; top:8.3971%; width:12.6000%;
--s:0.2652; --d:0.1747;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:-5.686%; --ah:-8.964%; --ar:-1.100deg; --ad:8.43s; --adl:-5.88s; --ao:50% 97%; }
#venus-loader #vl-grove-foliage-a { left:77.3520%; top:5.5000%; width:16.7961%;
--s:0.2728; --d:0.1720;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:3.644%; --ah:4.731%; --ar:1.100deg; --ad:7.28s; --adl:-3.48s; --ao:50% 97%; }
#venus-loader #vl-grove-foliage-b-2 { left:89.3000%; top:12.3917%; width:11.9000%;
--s:0.2805; --d:0.1693;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:-5.686%; --ah:-8.981%; --ar:-1.100deg; --ad:9.57s; --adl:-1.92s; --ao:50% 97%; }
#venus-loader #vl-grove-foliage-a-2 { left:92.8000%; top:26.2487%; width:8.4000%;
--s:0.2881; --d:0.1667;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:-6.136%; --ah:-7.954%; --ar:-1.100deg; --ad:7.51s; --adl:-0.98s; --ao:50% 97%; }
#venus-loader #vl-grove-foliage-b-3 { left:80.0000%; top:39.3628%; width:10.0000%;
--s:0.2957; --d:0.1640;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:4.039%; --ah:6.378%; --ar:1.100deg; --ad:9.35s; --adl:-5.09s; --ao:50% 97%; }
#venus-loader #vl-grove-fruit { left:84.7218%; top:15.5000%; width:7.5564%;
--s:0.3033; --d:0.1613;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:5.533%; --ah:6.748%; --ar:1.100deg; --ad:10.38s; --adl:-4.42s; --ao:50% 97%; }
#venus-loader #vl-grove-fruit-2 { left:95.0000%; top:22.7467%; width:5.5000%;
--s:0.3109; --d:0.1587;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:4.676%; --ah:5.715%; --ar:1.100deg; --ad:8.67s; --adl:-7.29s; --ao:50% 97%; }
#venus-loader #vl-grove-fruit-3 { left:79.8805%; top:29.0000%; width:5.8390%;
--s:0.3185; --d:0.1560;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:-6.279%; --ah:-7.666%; --ar:-1.100deg; --ad:8.44s; --adl:-3.67s; --ao:50% 97%; }
#venus-loader #vl-grove-fruit-4 { left:95.2000%; top:41.5240%; width:5.6000%;
--s:0.3262; --d:0.1533;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:-4.555%; --ah:-5.577%; --ar:-1.100deg; --ad:10.09s; --adl:-6.17s; --ao:50% 97%; }
#venus-loader #vl-grove-fruit-5 { left:86.8000%; top:54.0695%; width:5.4000%;
--s:0.3338; --d:0.1507;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:5.719%; --ah:6.978%; --ar:1.100deg; --ad:10.77s; --adl:-1.53s; --ao:50% 97%; }
#venus-loader #vl-grove-foliage-c { left:63.2000%; top:12.2000%; width:11.0000%;
--s:0.3414; --d:0.1480;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-7.00vh; --rot:-0.90deg; --sc:1.0; --aw:4.039%; --ah:6.367%; --ar:1.100deg; --ad:8.65s; --adl:-0.35s; --ao:50% 97%; }
#venus-loader #vl-shore-wedge { left:40.0000%; top:67.1062%; width:63.0000%;
--s:0.1600; --d:0.1300;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:6.00vh; --rot:0.00deg; --sc:1.0; }
#venus-loader #vl-shore-reeds { left:67.2007%; top:67.5900%; width:5.7985%;
--s:0.1958; --d:0.1175;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:6.00vh; --rot:0.00deg; --sc:1.0; }
#venus-loader #vl-mantle-blue-a { left:1.0000%; top:26.9014%; width:14.0000%;
--s:0.3800; --d:0.2000;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:-11.00vw; --dy:2.50vh; --rot:-1.80deg; --sc:0.985; --aw:5.349%; --ah:6.284%; --ar:2.000deg; --ad:7.42s; --adl:-5.10s; --ao:50% 18%; }
#venus-loader #vl-zephyrus-wings { left:4.5000%; top:1.7951%; width:20.5000%;
--s:0.4020; --d:0.1923;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:-11.00vw; --dy:2.50vh; --rot:-1.80deg; --sc:0.985; --aw:1.734%; --ah:3.255%; --ar:0.300deg; --ad:9.73s; --adl:-4.35s; --ao:50% 86%; }
#venus-loader #vl-mantle-blue-b { left:13.0000%; top:44.3722%; width:16.0000%;
--s:0.4240; --d:0.1846;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:-11.00vw; --dy:2.50vh; --rot:-1.80deg; --sc:0.985; --aw:-6.388%; --ah:-7.494%; --ar:-2.000deg; --ad:8.31s; --adl:-3.38s; --ao:50% 18%; }
#venus-loader #vl-zephyrus-aura { left:3.0533%; top:1.0000%; width:33.3934%;
--s:0.4460; --d:0.1769;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:-11.00vw; --dy:2.50vh; --rot:-1.80deg; --sc:0.985; --aw:1.097%; --ah:1.025%; --ar:0.300deg; --ad:11.72s; --adl:-5.08s; --ao:50% 86%; }
#venus-loader #vl-hora { left:63.0000%; top:9.4969%; width:29.5000%;
--s:0.4680; --d:0.1692;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:11.00vw; --dy:2.00vh; --rot:1.60deg; --sc:0.985; --aw:-1.275%; --ah:-0.923%; --ar:-0.300deg; --ad:12.22s; --adl:-10.64s; --ao:50% 86%; }
#venus-loader #vl-rose-three-quarter-a { left:15.5056%; top:47.0000%; width:5.3888%;
--s:0.4800; --d:0.1500;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:12.066%; --ah:12.861%; --ar:3.500deg; --ad:6.28s; --adl:-6.24s; --ao:50% 94%; }
#venus-loader #vl-rose-profile-a { left:5.0962%; top:45.5000%; width:3.4076%;
--s:0.4869; --d:0.1476;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:-10.432%; --ah:-8.442%; --ar:-3.500deg; --ad:5.79s; --adl:-4.18s; --ao:50% 94%; }
#venus-loader #vl-rose-bud-a { left:2.2019%; top:64.8000%; width:3.5963%;
--s:0.4937; --d:0.1452;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:-9.510%; --ah:-7.010%; --ar:-3.500deg; --ad:6.63s; --adl:-5.15s; --ao:50% 94%; }
#venus-loader #vl-rose-three-quarter-b { left:29.0599%; top:68.4000%; width:4.4801%;
--s:0.5006; --d:0.1428;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:-10.116%; --ah:-9.931%; --ar:-3.500deg; --ad:5.80s; --adl:-1.23s; --ao:50% 94%; }
#venus-loader #vl-rose-profile-c { left:19.6000%; top:47.0005%; width:4.8000%;
--s:0.5075; --d:0.1404;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:-11.381%; --ah:-8.909%; --ar:-3.500deg; --ad:6.13s; --adl:-4.81s; --ao:50% 94%; }
#venus-loader #vl-rose-bud-c { left:19.6000%; top:70.0000%; width:3.6000%;
--s:0.5144; --d:0.1380;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:-8.983%; --ah:-6.910%; --ar:-3.500deg; --ad:7.62s; --adl:-5.43s; --ao:50% 94%; }
#venus-loader #vl-rose-three-quarter-c { left:23.8883%; top:65.2000%; width:5.0235%;
--s:0.5212; --d:0.1356;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:13.225%; --ah:12.403%; --ar:3.500deg; --ad:5.31s; --adl:-2.95s; --ao:50% 94%; }
#venus-loader #vl-cornflower-sprig { left:60.8000%; top:66.0707%; width:6.2000%;
--s:0.5281; --d:0.1332;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:9.984%; --ah:6.133%; --ar:3.500deg; --ad:7.01s; --adl:-0.22s; --ao:50% 94%; }
#venus-loader #vl-daisy-three-quarter { left:89.8000%; top:65.4710%; width:6.6000%;
--s:0.5350; --d:0.1308;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:-12.408%; --ah:-8.816%; --ar:-3.500deg; --ad:6.71s; --adl:-3.09s; --ao:50% 94%; }
#venus-loader #vl-daisy-front { left:94.4000%; top:60.6405%; width:7.2000%;
--s:0.5419; --d:0.1283;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:-11.565%; --ah:-6.333%; --ar:-3.500deg; --ad:6.63s; --adl:-6.15s; --ao:50% 94%; }
#venus-loader #vl-shell-back { left:36.2000%; top:24.9533%; width:27.6000%;
--s:0.7000; --d:0.2000;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:3.50vh; --rot:-1.30deg; --sc:0.955; --aw:-1.179%; --ah:-1.324%; --ar:-0.220deg; --ad:13.35s; --adl:-3.23s; --ao:50% 92%; }
#venus-loader #vl-shell-fan { left:38.2010%; top:28.7944%; width:23.5980%;
--s:0.7220; --d:0.1923;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:3.50vh; --rot:-1.15deg; --sc:0.955; --aw:-1.002%; --ah:-1.183%; --ar:-0.220deg; --ad:12.91s; --adl:-12.41s; --ao:50% 92%; }
#venus-loader #vl-shell-tooth { left:45.8600%; top:40.0794%; width:8.2800%;
--s:0.7440; --d:0.1846;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:3.50vh; --rot:-1.00deg; --sc:0.955; --aw:-0.877%; --ah:-0.575%; --ar:-0.220deg; --ad:14.27s; --adl:-5.47s; --ao:50% 92%; }
#venus-loader #vl-shell-bowl { left:41.3336%; top:64.3250%; width:17.3328%;
--s:0.7660; --d:0.1769;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:3.50vh; --rot:-0.85deg; --sc:0.955; --aw:-1.014%; --ah:-2.903%; --ar:-0.220deg; --ad:12.76s; --adl:-11.93s; --ao:50% 92%; }
#venus-loader #vl-shell-pearl { left:48.5096%; top:63.9850%; width:2.9808%;
--s:0.7880; --d:0.1692;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:3.50vh; --rot:-0.70deg; --sc:0.955; --aw:-0.835%; --ah:-0.805%; --ar:-0.220deg; --ad:14.12s; --adl:-6.10s; --ao:50% 92%; }
#venus-loader #vl-sea-00 { left:-26.5000%; top:77.5000%; width:318.0000%;
--s:0.0500; --d:0.2000;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:7.00vh; --rot:0.00deg; --sc:1.0; }
#venus-loader #vl-sea-01 { left:-26.5000%; top:79.9457%; width:318.0000%;
--s:0.0657; --d:0.1945;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:7.00vh; --rot:0.00deg; --sc:1.0; }
#venus-loader #vl-sea-02 { left:-26.5000%; top:82.3913%; width:318.0000%;
--s:0.0814; --d:0.1890;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:7.00vh; --rot:0.00deg; --sc:1.0; }
#venus-loader #vl-sea-03 { left:-26.5000%; top:84.8370%; width:318.0000%;
--s:0.0971; --d:0.1835;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:7.00vh; --rot:0.00deg; --sc:1.0; }
#venus-loader #vl-sea-04 { left:-26.5000%; top:87.2826%; width:318.0000%;
--s:0.1129; --d:0.1780;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:7.00vh; --rot:0.00deg; --sc:1.0; }
#venus-loader #vl-sea-05 { left:-26.5000%; top:89.7283%; width:318.0000%;
--s:0.1286; --d:0.1725;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:7.00vh; --rot:0.00deg; --sc:1.0; }
#venus-loader #vl-sea-06 { left:-26.5000%; top:92.1739%; width:318.0000%;
--s:0.1443; --d:0.1670;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:7.00vh; --rot:0.00deg; --sc:1.0; }
#venus-loader #vl-daisy-front-2 { left:2.8007%; top:74.0500%; width:7.9986%;
--s:0.5487; --d:0.1259;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:-10.959%; --ah:-6.000%; --ar:-3.500deg; --ad:5.81s; --adl:-2.78s; --ao:50% 94%; }
#venus-loader #vl-daisy-three-quarter-2 { left:10.0000%; top:83.4710%; width:6.6000%;
--s:0.5556; --d:0.1235;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:5.00vh; --rot:-1.30deg; --sc:0.975; --aw:-12.224%; --ah:-8.685%; --ar:-3.500deg; --ad:5.89s; --adl:-0.43s; --ao:50% 94%; }
#venus-loader #vl-loose-petals-00 { left:4.5000%; top:11.8000%; width:1.3000%;
--s:0.5800; --d:0.1600;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:7.30deg; --sc:0.88; --aw:-31.733%; --ah:-33.144%; --ar:-14.000deg; --ad:4.45s; --adl:-2.82s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-01 { left:11.8000%; top:5.2000%; width:1.1000%;
--s:0.5820; --d:0.1593;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:0.30deg; --sc:0.88; --aw:40.188%; --ah:39.208%; --ar:14.000deg; --ad:4.07s; --adl:-0.42s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-02 { left:4.6000%; top:55.6000%; width:1.3000%;
--s:0.5840; --d:0.1586;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:2.30deg; --sc:0.88; --aw:-34.500%; --ah:-36.034%; --ar:-14.000deg; --ad:4.69s; --adl:-3.86s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-03 { left:10.4000%; top:61.2000%; width:1.0000%;
--s:0.5860; --d:0.1579;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:8.00deg; --sc:0.88; --aw:43.570%; --ah:44.815%; --ar:14.000deg; --ad:4.82s; --adl:-2.00s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-04 { left:8.6000%; top:70.0000%; width:1.1000%;
--s:0.5880; --d:0.1572;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:-1.30deg; --sc:0.88; --aw:31.042%; --ah:31.838%; --ar:14.000deg; --ad:5.98s; --adl:-3.59s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-05 { left:29.6000%; top:43.0000%; width:0.9000%;
--s:0.5900; --d:0.1565;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:5.90deg; --sc:0.88; --aw:-41.956%; --ah:-40.685%; --ar:-14.000deg; --ad:5.61s; --adl:-0.73s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-06 { left:2.6000%; top:23.6000%; width:1.2000%;
--s:0.5920; --d:0.1558;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:3.00deg; --sc:0.88; --aw:32.579%; --ah:36.866%; --ar:14.000deg; --ad:5.22s; --adl:-4.76s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-07 { left:15.2000%; top:16.8000%; width:1.0000%;
--s:0.5940; --d:0.1551;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:9.70deg; --sc:0.88; --aw:-44.108%; --ah:-46.703%; --ar:-14.000deg; --ad:5.35s; --adl:-1.70s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-08 { left:7.5000%; top:33.0000%; width:2.2000%;
--s:0.5960; --d:0.1544;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:3.30deg; --sc:0.88; --aw:33.117%; --ah:34.424%; --ar:14.000deg; --ad:5.39s; --adl:-4.48s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-09 { left:16.0000%; top:39.0000%; width:1.7000%;
--s:0.5980; --d:0.1537;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:7.50deg; --sc:0.88; --aw:-43.724%; --ah:-45.986%; --ar:-14.000deg; --ad:5.01s; --adl:-2.13s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-10 { left:24.5000%; top:30.0000%; width:1.4000%;
--s:0.6000; --d:0.1530;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:-1.00deg; --sc:0.88; --aw:26.737%; --ah:27.851%; --ar:14.000deg; --ad:4.06s; --adl:-1.69s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-11 { left:11.5000%; top:47.0000%; width:1.9000%;
--s:0.6020; --d:0.1523;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:5.30deg; --sc:0.88; --aw:-35.192%; --ah:-36.816%; --ar:-14.000deg; --ad:4.44s; --adl:-3.66s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-12 { left:30.0000%; top:41.0000%; width:1.3000%;
--s:0.6040; --d:0.1516;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:2.30deg; --sc:0.88; --aw:29.504%; --ah:30.146%; --ar:14.000deg; --ad:4.82s; --adl:-0.50s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-13 { left:5.2000%; top:38.0000%; width:1.5000%;
--s:0.6060; --d:0.1509;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:8.90deg; --sc:0.88; --aw:-38.574%; --ah:-37.873%; --ar:-14.000deg; --ad:4.70s; --adl:-2.98s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-14 { left:31.8000%; top:61.8000%; width:1.6000%;
--s:0.6080; --d:0.1502;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:-2.50deg; --sc:0.88; --aw:-26.199%; --ah:-26.659%; --ar:-14.000deg; --ad:5.60s; --adl:-1.79s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-15 { left:33.0000%; top:34.0000%; width:1.2000%;
--s:0.6100; --d:0.1495;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:6.00deg; --sc:0.88; --aw:37.114%; --ah:41.997%; --ar:14.000deg; --ad:5.98s; --adl:-5.45s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-16 { left:27.5000%; top:61.5000%; width:1.4000%;
--s:0.6120; --d:0.1488;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:0.70deg; --sc:0.88; --aw:-27.736%; --ah:-27.193%; --ar:-14.000deg; --ad:5.36s; --adl:-0.71s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-17 { left:70.0000%; top:33.0000%; width:2.0000%;
--s:0.6140; --d:0.1481;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:6.50deg; --sc:0.88; --aw:39.266%; --ah:40.973%; --ar:14.000deg; --ad:5.23s; --adl:-3.15s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-18 { left:79.0000%; top:42.0000%; width:1.6000%;
--s:0.6160; --d:0.1474;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:-0.30deg; --sc:0.88; --aw:-28.121%; --ah:-29.655%; --ar:-14.000deg; --ad:5.00s; --adl:-0.55s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-19 { left:86.0000%; top:36.0000%; width:1.3000%;
--s:0.6180; --d:0.1467;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:10.70deg; --sc:0.88; --aw:38.728%; --ah:40.449%; --ar:14.000deg; --ad:5.38s; --adl:-3.45s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-20 { left:67.2000%; top:42.0000%; width:1.8000%;
--s:0.6200; --d:0.1460;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:1.50deg; --sc:0.88; --aw:-41.725%; --ah:-43.744%; --ar:-14.000deg; --ad:4.71s; --adl:-0.95s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-21 { left:94.5000%; top:40.0000%; width:1.2000%;
--s:0.6220; --d:0.1453;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:5.50deg; --sc:0.88; --aw:30.196%; --ah:30.915%; --ar:14.000deg; --ad:4.84s; --adl:-2.64s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-22 { left:66.0000%; top:52.0000%; width:1.5000%;
--s:0.6240; --d:0.1446;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:-2.10deg; --sc:0.88; --aw:-44.493%; --ah:-43.684%; --ar:-14.000deg; --ad:4.45s; --adl:-1.18s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-23 { left:81.5000%; top:56.0000%; width:1.4000%;
--s:0.6260; --d:0.1439;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:8.00deg; --sc:0.88; --aw:33.578%; --ah:34.263%; --ar:14.000deg; --ad:4.08s; --adl:-4.01s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-24 { left:31.2000%; top:30.0000%; width:1.2000%;
--s:0.6280; --d:0.1432;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:2.70deg; --sc:0.88; --aw:41.034%; --ah:46.433%; --ar:14.000deg; --ad:5.25s; --adl:-0.18s; --ao:50% 50%; }
#venus-loader #vl-loose-petals-25 { left:90.0000%; top:29.0000%; width:1.3000%;
--s:0.6300; --d:0.1425;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:-0.70deg; --sc:0.88; --aw:-31.964%; --ah:-31.298%; --ar:-14.000deg; --ad:5.37s; --adl:-3.71s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-00 { left:12.0000%; top:21.5000%; width:1.7000%;
--s:0.6320; --d:0.1418;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:3.70deg; --sc:0.88; --aw:-39.420%; --ah:-39.420%; --ar:-14.000deg; --ad:4.51s; --adl:-2.04s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-01 { left:23.0000%; top:26.5000%; width:1.1000%;
--s:0.6340; --d:0.1411;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:6.70deg; --sc:0.88; --aw:28.813%; --ah:28.110%; --ar:14.000deg; --ad:4.89s; --adl:-3.89s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-02 { left:6.2000%; top:29.0000%; width:0.8000%;
--s:0.6360; --d:0.1404;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:4.50deg; --sc:0.88; --aw:-36.653%; --ah:-35.431%; --ar:-14.000deg; --ad:4.25s; --adl:-0.06s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-03 { left:18.5000%; top:18.0000%; width:1.3000%;
--s:0.6380; --d:0.1397;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:1.00deg; --sc:0.88; --aw:25.431%; --ah:24.393%; --ar:14.000deg; --ad:4.13s; --adl:-3.03s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-04 { left:29.5000%; top:23.5000%; width:0.9000%;
--s:0.6400; --d:0.1390;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:5.70deg; --sc:0.88; --aw:37.498%; --ah:39.998%; --ar:14.000deg; --ad:5.04s; --adl:-1.43s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-05 { left:14.5000%; top:34.5000%; width:0.7000%;
--s:0.6420; --d:0.1383;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:4.50deg; --sc:0.88; --aw:-29.351%; --ah:-29.351%; --ar:-14.000deg; --ad:5.42s; --adl:-5.10s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-06 { left:34.0000%; top:47.0000%; width:1.0000%;
--s:0.6440; --d:0.1376;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:-1.50deg; --sc:0.88; --aw:35.961%; --ah:36.988%; --ar:14.000deg; --ad:5.79s; --adl:-1.28s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-07 { left:8.8000%; top:20.5000%; width:0.9000%;
--s:0.6460; --d:0.1369;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:8.50deg; --sc:0.88; --aw:-27.198%; --ah:-27.198%; --ar:-14.000deg; --ad:5.66s; --adl:-2.84s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-08 { left:26.5000%; top:39.5000%; width:0.8000%;
--s:0.6480; --d:0.1362;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:4.50deg; --sc:0.88; --aw:35.884%; --ah:35.884%; --ar:14.000deg; --ad:5.58s; --adl:-0.12s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-09 { left:66.4000%; top:30.0000%; width:1.5000%;
--s:0.6500; --d:0.1355;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:5.90deg; --sc:0.88; --aw:-27.429%; --ah:-27.429%; --ar:-14.000deg; --ad:5.95s; --adl:-4.40s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-10 { left:84.5000%; top:25.0000%; width:1.1000%;
--s:0.6520; --d:0.1348;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:1.70deg; --sc:0.88; --aw:44.262%; --ah:43.182%; --ar:14.000deg; --ad:4.88s; --adl:-3.57s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-11 { left:93.0000%; top:21.5000%; width:0.8000%;
--s:0.6540; --d:0.1341;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:4.50deg; --sc:0.88; --aw:-33.655%; --ah:-32.533%; --ar:-14.000deg; --ad:4.50s; --adl:-0.06s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-12 { left:66.0000%; top:25.0000%; width:1.2000%;
--s:0.6560; --d:0.1334;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:9.30deg; --sc:0.88; --aw:41.495%; --ah:39.651%; --ar:14.000deg; --ad:4.13s; --adl:-3.28s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-13 { left:89.5000%; top:33.0000%; width:0.9000%;
--s:0.6580; --d:0.1327;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:2.90deg; --sc:0.88; --aw:-30.273%; --ah:-32.291%; --ar:-14.000deg; --ad:4.26s; --adl:-1.92s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-14 { left:78.0000%; top:36.5000%; width:0.7000%;
--s:0.6600; --d:0.1320;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:4.50deg; --sc:0.88; --aw:-42.494%; --ah:-42.494%; --ar:-14.000deg; --ad:5.41s; --adl:-2.71s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-15 { left:69.4000%; top:48.0000%; width:1.0000%;
--s:0.6620; --d:0.1313;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:7.00deg; --sc:0.88; --aw:34.347%; --ah:35.328%; --ar:14.000deg; --ad:5.04s; --adl:-1.11s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-16 { left:96.0000%; top:47.0000%; width:0.9000%;
--s:0.6640; --d:0.1306;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:0.10deg; --sc:0.88; --aw:-40.957%; --ah:-40.957%; --ar:-14.000deg; --ad:5.67s; --adl:-5.33s; --ao:50% 50%; }
#venus-loader #vl-sparkle-sheet-17 { left:70.0000%; top:18.0000%; width:0.8000%;
--s:0.6660; --d:0.1299;
animation-delay: calc(clamp(0, (var(--vp) - var(--s)) / var(--d), 1) * -1s);
--dx:0.00vw; --dy:-4.50vh; --rot:4.50deg; --sc:0.88; --aw:32.195%; --ah:32.195%; --ar:14.000deg; --ad:5.80s; --adl:-1.64s; --ao:50% 50%; }
#venus-loader #vl-sea-00 img { animation: vsd0 300s linear infinite; --per:-33.3333%; }
@keyframes vsd0 { from {transform:translateX(0)} to {transform:translateX(var(--per))} }
#venus-loader #vl-sea-01 img { animation: vsd1 300s linear infinite; --per:-33.3333%; }
@keyframes vsd1 { from {transform:translateX(0)} to {transform:translateX(var(--per))} }
#venus-loader #vl-sea-02 img { animation: vsd2 150s linear infinite; --per:-33.3333%; }
@keyframes vsd2 { from {transform:translateX(0)} to {transform:translateX(var(--per))} }
#venus-loader #vl-sea-03 img { animation: vsd3 150s linear infinite; --per:-33.3333%; }
@keyframes vsd3 { from {transform:translateX(0)} to {transform:translateX(var(--per))} }
#venus-loader #vl-sea-04 img { animation: vsd4 100s linear infinite; --per:-33.3333%; }
@keyframes vsd4 { from {transform:translateX(0)} to {transform:translateX(var(--per))} }
#venus-loader #vl-sea-05 img { animation: vsd5 100s linear infinite; --per:-33.3333%; }
@keyframes vsd5 { from {transform:translateX(0)} to {transform:translateX(var(--per))} }
#venus-loader #vl-sea-06 img { animation: vsd6 75s linear infinite; --per:-33.3333%; }
@keyframes vsd6 { from {transform:translateX(0)} to {transform:translateX(var(--per))} }
/* the rope: drops in on ready, sways from its top anchor, straightens as you pull */
/* One image, 13.8:1, so at 66px wide it is ~104vh long. It hangs from a point far above
the viewport: at rest its BOTTOM sits on the top edge, dropped it lands at 34vh, and the
pull carries it to 68vh - the top never comes into frame at any point. */
/* The drop and the sway are on TWO elements, and both animate `transform` itself.
They used to animate registered custom properties that a single transform read through
calc(), which is a main-thread style recalculation every frame - on top of ninety
breathing layers and a video download, which is the stutter. One transform per element
composites; two on one element is impossible, hence the wrapper. */
#vl-rope { position:absolute; top:0; right:clamp(24px, 7vw, 140px);
width:clamp(38px, 4.8vw, 68px);
pointer-events:none; z-index:5;
transform: translateY(-100%);
/* parked exactly on the top edge, but its drop-shadow is offset DOWN and so bleeds a
couple of pixels into the red while it waits. Nothing of the rope exists until it
is called for. */
visibility:hidden; }
#venus-loader.vl-ready #vl-rope, #venus-loader.vl-pulling #vl-rope { visibility:visible; }
/* the shadow rides with the element that rotates, so the filtered content is what stays
constant and the compositor moves the result - the same rule as the collage layers */
#vl-rope-in { transform-origin:50% 0%;
filter:drop-shadow(.4vh .6vh .9vh rgba(34,5,14,.45)); }
#vl-rope-img { display:block; width:100%; height:auto; }
/* the pulse sits at the tassel and is the only thing in the curtain you can click */
/* the rope waits off the top edge, but the pulse ring hangs BELOW its bottom edge and
was peeking into the top-right corner for the whole build. It exists only once the
rope has arrived. */
#vl-pull { position:absolute; left:50%; bottom:-2%; width:clamp(62px,6vw,86px);
aspect-ratio:1; transform:translate(-50%,50%); border:0; border-radius:50%;
opacity:0; pointer-events:none; transition:opacity .5s .5s;
background:radial-gradient(circle, rgba(243,226,187,.20) 0%, rgba(243,226,187,0) 68%);
pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#vl-pull::before, #vl-pull::after { content:""; position:absolute; inset:22%;
border:2px solid rgba(243,226,187,.62); border-radius:50%;
animation: vl-pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
#vl-pull::after { animation-delay:1.3s; }
@keyframes vl-pulse {
0% { transform:scale(.5); opacity:0; }
18% { opacity:.8; }
100% { transform:scale(2.1); opacity:0; }
}
#vl-pull:hover::before, #vl-pull:hover::after { border-color:rgba(246,231,194,.95); }
/* once the pull starts, the invitation is no longer needed */
#venus-loader.vl-pulling #vl-pull { opacity:calc(1 - var(--pull) * 3); pointer-events:none; }
#venus-loader.vl-ready #vl-rope {
animation: vl-drop 1.15s cubic-bezier(.3,1.25,.4,1) forwards; }
#venus-loader.vl-ready #vl-rope-in {
animation: vl-sway 4.6s 1.15s ease-in-out infinite; }
@keyframes vl-drop { from { transform:translateY(-100%) }
to { transform:translateY(calc(-100% + 34vh)) } }
@keyframes vl-sway { 0%,100% { transform:rotate(-1.05deg) }
50% { transform:rotate(1.05deg) } }
/* pulling: the sway stops, the rope straightens and travels ahead of the panel. This one
IS scrubbed - --pull is written by rAF - so it costs a recalculation per frame by
design, for the 1.5s the pull lasts. */
#venus-loader.vl-pulling #vl-rope-in { animation:none; transform:rotate(0deg); }
#venus-loader.vl-pulling #vl-rope { animation:none;
transform: translateY(calc(-100% + 34vh + var(--pull) * 34vh))
scaleY(calc(1 + var(--pull) * .04)); }
/* It lives INSIDE the rope, so it is on the cord by construction rather than by
agreeing with the rope's clamp() arithmetic from the other side of the tree - which is
what it was doing, badly: translateX(46%) off the right edge left it ~30px to the right
of the thing it labels. As a child it also holds the line through the sway and leaves
with the rope on the pull.
text-indent gives back the trailing letter-space: with .34em tracking the final L is
followed by a gap, and a shrink-to-fit box centred on the cord counts that gap as part
of the word and so sits half of it - .17em - to the left. Half, not the whole .34em:
Chrome leaves the indent out of the shrink-to-fit width, so the indent moves the ink
without moving the box it is being centred against. */
#vl-hint { position:absolute; left:50%; top:calc(100% + 34px);
transform:translateX(-50%); text-indent:.34em;
font:400 clamp(15px,1.15vw,21px)/1 Georgia,'Times New Roman',serif;
letter-spacing:.34em; color:#F3E2BB;
opacity:0; transition:opacity .8s; white-space:nowrap; }
#venus-loader.vl-ready #vl-pull { opacity:1; pointer-events:auto; }
/* fade the label with the PULL, not the lift - the lift starts a quarter-second later
and the label would still be sitting there after the rope had left it behind */
#venus-loader.vl-ready #vl-hint { opacity:calc(.75 - var(--pull) * 2); }
@media (prefers-reduced-motion:reduce) {
#venus-loader .vl img, #venus-loader.vl-ready #vl-rope { animation:none !important; }
}