/* Virexon Motion (motion.js).
   Rule 1: nothing is hidden unless motion.js is running (html.vx-motion).
   Rule 2: "reduce motion" on the visitor's device turns all of it off. */

/* 1. Reveal on scroll ------------------------------------------------------ */
.vx-motion .vx-rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0ms)}
.vx-motion .vx-rv:not(.is-in){opacity:0;transform:translateY(22px)}

/* 2. Glow that follows the mouse --------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .vx-spot{position:relative}
  .vx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--vx-mag) 22%,transparent),color-mix(in srgb,var(--vx-lime) 6%,transparent) 45%,transparent 70%);mix-blend-mode:screen}
  .vx-spot:hover::after{opacity:1}
}

/* 3. Living hero ------------------------------------------------------------- */
.vx-hero-art .lighten{animation:vxDrift 32s ease-in-out infinite alternate;transform-origin:55% 35%}
@keyframes vxDrift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1%,1%)}}
.vx-embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.vx-flyer{position:absolute;left:0;top:0;width:clamp(48px,6vw,86px);pointer-events:none;opacity:0;color:#0b0b12;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--vx-mag) 55%,transparent))}
.vx-flyer.is-flying{animation:vxFly var(--fly-t,14s) linear forwards}
.vx-flyer svg{display:block;width:100%;height:auto;fill:currentColor}
.vx-flyer .w{transform-origin:50% 60%;animation:vxFlap .9s ease-in-out infinite}
@keyframes vxFlap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@keyframes vxFly{
  0%{opacity:0;transform:translate(-12vw,var(--y0)) scale(var(--s))}
  8%{opacity:.85}
  50%{transform:translate(48vw,var(--y1)) scale(var(--s))}
  92%{opacity:.85}
  100%{opacity:0;transform:translate(112vw,var(--y2)) scale(var(--s))}
}

/* 4. The cluster breathes -------------------------------------------------- */
.vxl-live{position:relative}
.vxl-dot{position:relative}
.vxl-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--vx-lime);opacity:0;animation:vxRipple 2.4s ease-out infinite}
.vxl-live.is-stale .vxl-dot::after{animation:none}
@keyframes vxRipple{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.6);opacity:0}}
.vx-bump{animation:vxBump 1.2s ease-out}
@keyframes vxBump{0%{color:var(--vx-lime);text-shadow:0 0 18px var(--vx-lime)}100%{text-shadow:0 0 0 transparent}}
.vx-map-on.vx-bump{animation:vxPill 1.4s ease-out}
@keyframes vxPill{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--vx-lime) 70%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.vx-map-on:not(.is-off) i{animation:vxBlink 2.4s ease-in-out infinite}
@keyframes vxBlink{50%{opacity:.45}}

/* 5. Shine over the Discord buttons ---------------------------------------- */
.vx-shine{position:relative;overflow:hidden;isolation:isolate}
.vx-shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);animation:vxShine 7s ease-in-out infinite;animation-delay:var(--sh-d,0s)}
@keyframes vxShine{0%,72%{left:-60%}88%,100%{left:130%}}


/* 6. Living hero picture (scene.js). 1em = 1 pixel of the original artwork. ---- */
.vx-stage{position:absolute;inset:0;animation:vxDrift 32s ease-in-out infinite alternate;transform-origin:55% 35%}
.vx-staged .vx-stage .lighten{animation:none}
.vx-stage-over{pointer-events:none}
.vxs{position:absolute;width:1672em;height:941em;pointer-events:none}
.vxs>*{position:absolute}
.vxs-gl{left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s}
.vxs-gl.is-on{opacity:1}
/* The dino's eye: a glint every few seconds */
.vxs-eye{left:405em;top:199em;width:0;height:0}
.vxs-eye::before,.vxs-eye::after{content:"";position:absolute;left:0;top:0;opacity:0;mix-blend-mode:screen;animation:vxEye 9s ease-in-out infinite;animation-delay:3s}
.vxs-eye::before{width:22em;height:22em;margin:-11em 0 0 -11em;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffb4f5 18%,rgba(255,60,220,.55) 40%,transparent 70%)}
.vxs-eye::after{width:34em;height:34em;margin:-17em 0 0 -17em;background:linear-gradient(90deg,transparent 46%,rgba(255,255,255,.95) 50%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(255,255,255,.95) 50%,transparent 54%);-webkit-mask:radial-gradient(circle,#000 0,transparent 70%);mask:radial-gradient(circle,#000 0,transparent 70%)}
@keyframes vxEye{0%,84%,100%{opacity:0;transform:scale(.4) rotate(0)}89%{opacity:1;transform:scale(1) rotate(25deg)}94%{opacity:0;transform:scale(.6) rotate(45deg)}}
/* The tower rune and the logo core breathe in the same rhythm */
.vxs-rune,.vxs-core{border-radius:50%;mix-blend-mode:screen;animation:vxBreathe 6s ease-in-out infinite}
.vxs-rune{left:1422em;top:150em;width:60em;height:110em;background:radial-gradient(closest-side,rgba(215,255,90,.85),rgba(170,255,40,.35) 45%,transparent)}
.vxs-core{left:1013em;top:377em;width:70em;height:70em;background:radial-gradient(closest-side,rgba(230,255,120,.8),rgba(170,255,40,.3) 50%,transparent);animation-delay:-.4s}
/* the spark in the O of the logo: a bright flash every 7 seconds */
.vxs-flash{left:1048em;top:412em;width:0;height:0}
.vxs-flash::before,.vxs-flash::after{content:"";position:absolute;left:0;top:0;opacity:0;mix-blend-mode:screen;animation:vxFlash 7s ease-out infinite;animation-delay:2s}
.vxs-flash::before{width:200em;height:200em;margin:-100em 0 0 -100em;border-radius:50%;background:radial-gradient(circle,#fff 0,#fbffe0 8%,rgba(225,255,110,.85) 20%,rgba(170,255,40,.35) 45%,transparent 70%)}
.vxs-flash::after{width:380em;height:380em;margin:-190em 0 0 -190em;
  background:linear-gradient(90deg,transparent 47%,rgba(255,255,235,.95) 50%,transparent 53%),linear-gradient(0deg,transparent 47%,rgba(255,255,235,.95) 50%,transparent 53%),
  linear-gradient(45deg,transparent 48.6%,rgba(235,255,150,.6) 50%,transparent 51.4%),linear-gradient(-45deg,transparent 48.6%,rgba(235,255,150,.6) 50%,transparent 51.4%);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 25%,transparent 68%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 25%,transparent 68%)}
@keyframes vxFlash{0%,76%,100%{opacity:0;transform:scale(.3) rotate(0)}79%{opacity:1;transform:scale(1.1) rotate(8deg)}85%{opacity:.8;transform:scale(.95) rotate(16deg)}95%{opacity:0;transform:scale(.7) rotate(30deg)}}
/* the tagline: "Your Ark" lights up, then "Your Way", a sheen slides through each word */
.vxs-say{width:270em;height:105em;opacity:0;mix-blend-mode:screen;--c:#ff6ef2;
  filter:drop-shadow(0 0 .8em var(--c));animation:vxSay 12s ease-in-out infinite}
.vxs-say i{position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.35) 45%,transparent 58%) no-repeat,var(--c);background-size:300% 100%,100% 100%;
  -webkit-mask:url(text-ark.png) 0 0/100% 100% no-repeat;mask:url(text-ark.png) 0 0/100% 100% no-repeat;animation:vxSheen 12s ease-in-out infinite}
.vxs-ark{left:555em;top:540em}
.vxs-way{left:825em;top:540em;width:310em;--c:#e6ff52;animation-delay:6s}
.vxs-way i{-webkit-mask-image:url(text-way.png);mask-image:url(text-way.png);animation-delay:6s}
@keyframes vxSay{0%{opacity:0}18%,34%{opacity:.32}50%,100%{opacity:0}}
@keyframes vxSheen{0%,6%{background-position:100% 0,0 0}40%,100%{background-position:0% 0,0 0}}
@keyframes vxBreathe{0%,100%{opacity:.15;transform:scale(.9)}50%{opacity:.6;transform:scale(1.05)}}
/* Now and then the rune flares and throws a beam upward */
.vxs-beam{left:1446em;top:0;width:12em;height:208em;background:linear-gradient(0deg,rgba(220,255,110,.9),rgba(200,255,80,.35) 40%,transparent);filter:blur(1.5em);mix-blend-mode:screen;opacity:0;transform-origin:50% 100%;animation:vxBeam 17s ease-in-out infinite;animation-delay:5s}
@keyframes vxBeam{0%,80%,100%{opacity:0;transform:scaleY(.2)}86%{opacity:.85;transform:scaleY(1)}93%{opacity:0;transform:scaleY(1.05)}}
/* Lava cracks on the planet */
.vxs-planet{left:0;top:0;width:100%;height:100%;overflow:visible;mix-blend-mode:screen}
.vxs-crack{opacity:0;animation:vxLava 12s ease-in-out infinite}
.vxs-crack path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.vxs-crack .g{stroke:#ff3d6e;stroke-width:4;opacity:.8}
.vxs-crack .c{stroke:#ffb070;stroke-width:1}
@keyframes vxLava{0%,100%{opacity:0}45%,55%{opacity:.42}}
/* A small herd walks the far ridge (three animals, a few steps apart) */
.vxs-walker{left:1374em;top:368em;width:20em;opacity:0;color:#0c1c09;filter:blur(.3em);-webkit-mask:linear-gradient(#000 50%,transparent 88%);mask:linear-gradient(#000 50%,transparent 88%);animation:vxWalk 52s linear infinite;animation-delay:-4s}
.vxs-walker svg,.vxs-giant svg{display:block;width:100%;height:auto;fill:currentColor}
.vxs-walker svg{transform:scaleX(-1)}
.vxs-walker .b,.vxs-giant .b{animation:vxStep 1.3s ease-in-out infinite}
.vxs-w1{width:17em;top:369.5em;animation-delay:-9s}
.vxs-w2{width:15em;top:370.5em;animation-delay:-13s}
.vxs-w3{width:13em;top:371.5em;animation-delay:-16s}
@keyframes vxWalk{0%{opacity:0;transform:translate(0,0)}6%{opacity:.55}78%{opacity:.55}88%,100%{opacity:0;transform:translate(62em,0)}}
@keyframes vxStep{50%{transform:translateY(-.9em)}}
.vxs-giant{left:1328em;top:362em;width:46em;opacity:0;color:#0a1a08;filter:blur(.35em);-webkit-mask:linear-gradient(#000 52%,transparent 86%);mask:linear-gradient(#000 52%,transparent 86%);animation:vxGiant 80s linear infinite;animation-delay:-16s}
.vxs-giant .b{animation-duration:2.6s}
@keyframes vxGiant{0%{opacity:0;transform:translate(0,0)}10%{opacity:.6}80%{opacity:.6}92%,100%{opacity:0;transform:translate(84em,2em)}}
.vxs-fx{mix-blend-mode:screen}
/* Mist at the foot of the waterfalls */
.vxs-mist{border-radius:50%;mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(235,255,200,.55),rgba(210,255,140,.18) 55%,transparent);filter:blur(4em);animation:vxMist 7s ease-in-out infinite alternate}
.vxs-mist1{left:1385em;top:520em;width:160em;height:70em}
.vxs-mist2{left:1462em;top:665em;width:100em;height:45em;animation-delay:-3s}
@keyframes vxMist{0%{opacity:.45;transform:translateX(-6em) scale(1)}100%{opacity:.85;transform:translateX(6em) scale(1.12)}}
/* Lightning */
.vxs-sky{left:0;top:0;width:100%;height:100%;overflow:visible;mix-blend-mode:screen}
.vxs-bolt{opacity:0;animation:vxBolt 1.3s ease-out forwards}
.vxs-bolt path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.vxs-bolt .g{stroke:#d7a6ff;stroke-width:10}
.vxs-bolt .c{stroke:#fff;stroke-width:2.6}
@keyframes vxBolt{0%{opacity:0}4%{opacity:1}10%{opacity:.15}16%{opacity:.95}24%{opacity:.6}100%{opacity:0}}

/* Breathing dinos in the empty parts of the page */
.vx-breath{position:absolute;z-index:1;pointer-events:none;opacity:0;--p:.42;animation:vxBreath 11s ease-in-out forwards}
.vx-breath img{display:block;width:100%;height:auto}
.vx-breath.is-right img{transform:scaleX(-1)}
.vx-breath.is-peek{position:fixed;z-index:40}
@keyframes vxBreath{0%{opacity:0;transform:scale(.94);filter:blur(6px)}40%{opacity:var(--p);transform:scale(1);filter:blur(0)}60%{opacity:var(--p);transform:scale(1.02)}100%{opacity:0;transform:scale(1.06);filter:blur(6px)}}

/* Off for visitors who ask for less motion ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  .vx-motion .vx-rv,.vx-motion .vx-rv:not(.is-in){opacity:1;transform:none;transition:none}
  .vx-hero-art .lighten,.vx-stage,.vxl-dot::after,.vx-bump,.vx-map-on i,.vx-shine::after{animation:none}
  .vx-shine::after,.vx-embers,.vx-flyer,.vxs,.vx-breath{display:none}
}