/* The animated Varelyno opening on the landing page (21 Oct).
   Ported from the Innovara Sol company site (varelyno.html + brand.css +
   varelyno.js), made self-contained and SCOPED under .vxb so none of it leaks
   into, or is overridden by, the existing landing styles.

   Varelyno's real light palette (the landing has no dark mode, so this stays
   light to match the page). Fonts stay self-hosted (Outfit) plus a system
   serif, because the site's CSP blocks Google Fonts. Every entrance is a CSS
   animation gated on .vxb.vxon, which the script adds at once: if the script
   never runs, everything is simply visible. Reduced motion shows it all still. */

.vxb{
  --bg:#E5F0F8; --surface:#FFFFFF; --surface2:#EFF7FC; --line:#D0E2EE;
  --ink:#143545; --muted:#55707F; --heading:#0F3043; --accent:#0E67B3; --accent2:#E51A73;
  --lg-sun:#E51A73; --lg-core:#EFB332; --lg-h1:#0E67B3; --lg-h2:#00A9A8;
  --shadow:0 1px 2px rgba(20,30,40,.05),0 10px 30px rgba(20,30,40,.07);
  --out:cubic-bezier(.16,.84,.3,1);
  --vsans:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --vserif:ui-serif,Georgia,'Times New Roman',serif;
  color:var(--ink); font-family:var(--vsans);
}
.vxb.vxb-dark{
  --bg:#0F1B22; --surface:#16252E; --surface2:#1B2E39; --line:#27404D;
  --ink:#E3EEF3; --muted:#9CB4C0; --heading:#F1F7FA; --accent:#6FB3EA; --accent2:#F0619F;
  --lg-sun:#F0619F; --lg-core:#F6C35A; --lg-h1:#6FB3EA; --lg-h2:#33C9C4;
}

/* ---- scoped base (the brand page's styles.css bits it needs) */
.vxb *{box-sizing:border-box}
.vxb .wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.vxb h1,.vxb h2,.vxb h3{font-family:var(--vserif);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0;color:var(--heading)}
.vxb h1{font-size:clamp(36px,5.6vw,62px)}
.vxb h2{font-size:clamp(30px,4vw,44px)}
.vxb h3{font-size:20px}
.vxb p{margin:0}
.vxb a{color:var(--accent);text-decoration:none}
.vxb .eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 14px}
.vxb .lead{font-size:clamp(17px,2vw,19px);color:var(--muted);max-width:60ch;margin:18px 0 28px;line-height:1.6}
.vxb .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.vxb .center{text-align:center}
.vxb .center .lead{margin-inline:auto}
.vxb .btn{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--vsans);border:1px solid transparent;border-radius:999px;
  padding:13px 24px;cursor:pointer;text-decoration:none;transition:transform .5s var(--out),box-shadow .5s var(--out),filter .4s var(--out)}
.vxb .btn:hover{transform:translateY(-2px)}
.vxb .btn-primary{background:var(--accent);color:#fff}
.vxb .btn-ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}
.vxb .vw{font-family:var(--vsans);font-weight:650;letter-spacing:-.03em;color:var(--heading)}

/* ---- entrances (CSS-driven; gated on .vxon so no-JS stays visible) */
@keyframes vxb-rise{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.vxb.vxon .rise{opacity:0;animation:vxb-rise 1.1s var(--out) both;animation-delay:calc(var(--d,0)*1ms)}
.vxb.vxon [data-letters] .ch{display:inline-block;opacity:0;animation:vxb-rise 1s var(--out) both;animation-delay:calc(var(--i) * 55ms + var(--d0,300ms))}
.vxb .reveal{opacity:1}
.vxb.vxon .reveal{opacity:0;transform:translateY(18px);transition:opacity 1s var(--out),transform 1s var(--out)}
.vxb.vxon .reveal.in{opacity:1;transform:none}
.vxb [data-stagger] > *{opacity:1}
.vxb.vxon [data-stagger] > *{opacity:0;transform:translateY(30px) scale(.97);transition:opacity 1s var(--out),transform 1s var(--out);transition-delay:calc(var(--si,0) * 90ms)}
.vxb.vxon [data-stagger].in > *{opacity:1;transform:none}

/* ---- curtain (created by the script; nothing in the HTML, so it can never stick) */
/* The opening cover: one soft panel (no left-to-right wipe). The logo sits in
   the centre, then rises up toward the hero as the whole panel fades out, so
   the hero (its mark building, the constellation fading in behind) is revealed
   all at once rather than swept in. */
.vxb-curtain{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;background:var(--bg,#E5F0F8);pointer-events:none;
  transition:opacity 1s var(--out),visibility 1s}
.vxb-curtain .cm{display:grid;place-items:center;transition:transform 1.2s var(--out),opacity 1s var(--out)}
.vxb-curtain .cm img{width:88px;height:88px}
.vxb-curtain.go{opacity:0;visibility:hidden}
.vxb-curtain.go .cm{transform:translateY(-10vh) scale(.58);opacity:0}
/* the constellation fades in softly behind, never swept */
.vxb.vxon .bhero-canvas{opacity:0;animation:vxb-reveal 1.6s var(--out) .4s both}
@keyframes vxb-reveal{to{opacity:1}}

/* ---- hero */
.vxb .bhero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;overflow:hidden;color:var(--ink);padding:40px 0 72px;
  background:
    radial-gradient(900px 600px at 12% 18%,color-mix(in srgb,#e51a73 13%,transparent),transparent 60%),
    radial-gradient(800px 600px at 88% 22%,color-mix(in srgb,#00a9a8 15%,transparent),transparent 60%),
    radial-gradient(900px 700px at 50% 100%,color-mix(in srgb,#1e86c8 16%,transparent),transparent 65%),
    radial-gradient(600px 400px at 80% 85%,color-mix(in srgb,#efb332 14%,transparent),transparent 60%),var(--bg)}
.vxb .bhero-canvas{position:absolute;inset:0;width:100%;height:100%}
.vxb .spot{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,40%),color-mix(in srgb,var(--accent2) 20%,transparent),transparent 60%)}
.vxb .bhero-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.vxb .big{font-size:clamp(56px,11vw,128px)!important;line-height:1;margin:6px 0 4px}
.vxb .bhero-tag{font-family:var(--vserif);font-size:clamp(22px,3vw,32px);color:var(--accent);margin:10px 0 0}
.vxb .bhero .lead{margin:14px auto 28px;text-align:center}
.vxb .bhero .cta-row{justify-content:center}
.vxb .scroll-cue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border:2px solid var(--line);border-radius:14px}
.vxb .scroll-cue span{position:absolute;left:50%;top:8px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--accent2);animation:vxb-cue 1.8s var(--out) infinite}
@keyframes vxb-cue{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(18px);opacity:0}}

/* the assembling mark */
.vxb .vx-mark{width:clamp(104px,15vw,160px);height:auto;overflow:visible;margin-top:6px}
.vxb.vxon .vx-mark .vl{stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;animation:vxb-line 1s var(--out) both;animation-delay:calc(var(--d) * 1ms)}
.vxb.vxon .vx-mark .vring{stroke-dasharray:1;stroke-dashoffset:1;opacity:.45;animation:vxb-line 1.6s var(--out) .8s both}
/* 5 Nov: only opacity on the hub and dots. A transform here gave each its own low-resolution layer in Chrome: blocky dots and hub on a sharp ring. */
.vxb.vxon .vx-mark .vhub{animation:vxb-fade 1s var(--out) .15s backwards}
.vxb.vxon .vx-mark .vn{animation:vxb-fade 1.2s var(--out) backwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes vxb-line{to{stroke-dashoffset:0}}
@keyframes vxb-fade{from{opacity:0}}

/* ---- section basics */
.vxb .bsec{position:relative;overflow:hidden;padding:72px 0}
.vxb .bsec:nth-of-type(even){background:linear-gradient(180deg,var(--bg),color-mix(in srgb,#1e86c8 7%,var(--bg)))}
.vxb .bsec h2{color:var(--heading)}

/* ---- scroll scene (the network that builds) */
.vxb .scene{height:300vh;position:relative}
.vxb .sticky{position:sticky;top:0;height:100vh;display:grid;align-items:center;overflow:hidden}
.vxb .scene-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.vxb .steps-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.vxb .steps-list li{padding:14px 18px;border-radius:14px;border:1px solid transparent;color:var(--muted);transition:all .8s var(--out)}
.vxb .steps-list li b{display:block;color:var(--muted);font-size:18px;transition:color .8s var(--out)}
.vxb .steps-list li.on{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow);transform:translateX(8px)}
.vxb .steps-list li.on b{color:var(--accent)}
.vxb .vx-net{width:100%;max-width:520px;justify-self:center;overflow:visible}
.vxb .vx-net text{font:700 15px var(--vsans);fill:var(--heading);text-anchor:middle;opacity:0;transition:opacity .8s var(--out)}
.vxb .vx-net .vx-line{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k,0));opacity:.55}
.vxb .vx-net .vx-node{fill:var(--c);transform-box:fill-box;transform-origin:center;transform:scale(var(--k,0))}
.vxb .vx-net .vx-halo{fill:var(--c);opacity:.12;transform-box:fill-box;transform-origin:center;transform:scale(var(--k,0));animation:vxb-halo 3s var(--out) infinite}
.vxb .vx-net .vx-sat{fill:var(--c);opacity:calc(var(--k,0) * .55);transform-box:fill-box;transform-origin:center;transform:scale(var(--k,0))}
.vxb .vx-net .vx-g.on text{opacity:1}
.vxb .vx-net .vx-hubring{fill:none;stroke:#0e67b3;stroke-width:2;opacity:.25;transform-box:fill-box;transform-origin:center;animation:vxb-hubring 3s var(--out) infinite}
@keyframes vxb-halo{0%{opacity:.2}100%{opacity:.06}}
@keyframes vxb-hubring{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.6);opacity:0}}

/* ---- circles that mean something */
.vxb .vx-circles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;text-align:center}
.vxb .vx-circles h3{font-family:var(--vsans);font-size:17px;font-weight:700;letter-spacing:0;margin:22px 0 6px}
.vxb .vx-circles p{color:var(--muted);margin:0;font-size:15px}
@property --vxf{syntax:"<number>";inherits:false;initial-value:0}
.vxb .vc{--s:120px;--vxf:0;width:var(--s);height:var(--s);margin:0 auto;border-radius:50%;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--c) calc(var(--vxf) * 1turn),color-mix(in srgb,var(--c) 18%,transparent) 0);transition:--vxf 2s var(--out)}
.vxb .in .vc{--vxf:var(--fill)}
.vxb .vc span{width:74%;height:74%;border-radius:50%;background:var(--c);box-shadow:inset 0 -8px 16px rgba(0,0,0,.12)}
.vxb .vc-big{--s:150px;animation:vxb-grow 4s var(--out) infinite}
@keyframes vxb-grow{0%,100%{transform:scale(.92)}50%{transform:scale(1.04)}}
.vxb .vc-warm::before{content:"";position:absolute;left:8%;right:8%;bottom:-16px;height:34px;border-radius:50%;background:#ff8a3c;filter:blur(14px);opacity:.55;animation:vxb-warm 2.4s ease-in-out infinite}
@keyframes vxb-warm{50%{opacity:.9;transform:scale(1.1)}}
.vxb .vc-quiet{animation:vxb-quiet 5s ease-in-out infinite}
@keyframes vxb-quiet{0%,100%{opacity:.95;filter:saturate(1)}50%{opacity:.38;filter:saturate(.25)}}

/* ---- Work and Personal */
.vxb .vx-lives{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.vxb .vx-switch{position:relative;display:inline-flex;padding:5px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.vxb .vx-switch button{position:relative;z-index:1;border:0;background:none;font:600 15px var(--vsans);padding:10px 26px;border-radius:999px;cursor:pointer;color:var(--muted);transition:color .6s var(--out)}
.vxb .vx-switch button[aria-selected="true"]{color:#fff}
.vxb .vx-switch i{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:#0e67b3;transition:transform .8s var(--out),background .8s var(--out)}
.vxb .vx-switch.personal i{transform:translateX(100%);background:#e51a73}
.vxb .vx-worlds{color:var(--muted);font-size:15px;margin-top:18px}
.vxb .vx-life{position:relative;height:300px;perspective:1200px}
.vxb .vx-life-card{position:absolute;inset:0;border-radius:26px;padding:34px;color:#fff;overflow:hidden;transition:transform 1s var(--out),opacity 1s var(--out)}
.vxb .vx-life-card h3{color:#fff;font-size:34px;font-family:var(--vserif)}
.vxb .vx-life-card p{color:rgba(255,255,255,.9);max-width:30ch}
.vxb .vx-life-card.work{background:linear-gradient(135deg,#0e67b3,#00a9a8)}
.vxb .vx-life-card.personal{background:linear-gradient(135deg,#e51a73,#efb332)}
.vxb .vx-life[data-life="work"] .personal,.vxb .vx-life[data-life="personal"] .work{opacity:0;transform:rotateY(-25deg) translateX(40px) scale(.92);pointer-events:none}
.vxb .vx-orbs b{position:absolute;border-radius:50%;background:rgba(255,255,255,.22);animation:vxb-orb 7s ease-in-out infinite}
.vxb .vx-orbs b:nth-child(1){width:90px;height:90px;right:30px;bottom:30px}
.vxb .vx-orbs b:nth-child(2){width:44px;height:44px;right:150px;bottom:70px;animation-delay:-2s}
.vxb .vx-orbs b:nth-child(3){width:26px;height:26px;right:90px;bottom:150px;animation-delay:-4s}
.vxb .vx-orbs b:nth-child(4){width:60px;height:60px;right:210px;bottom:20px;animation-delay:-1s}
.vxb .vx-orbs b:nth-child(5){width:18px;height:18px;right:40px;bottom:150px;animation-delay:-3s}
@keyframes vxb-orb{50%{transform:translate(-10px,-14px)}}

/* ---- tilt cards */
.vxb .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;perspective:1000px}
.vxb .tcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--out),box-shadow .8s var(--out);transform-style:preserve-3d;overflow:hidden}
.vxb .tcard:hover{box-shadow:0 24px 50px -24px color-mix(in srgb,var(--accent) 45%,transparent)}
.vxb .tcard::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(300px circle at var(--gx,50%) var(--gy,0%),color-mix(in srgb,var(--accent2) 12%,transparent),transparent 60%);opacity:0;transition:opacity .6s var(--out)}
.vxb .tcard:hover::after{opacity:1}
.vxb .tcard h3{font-family:var(--vsans);font-size:17px;font-weight:700;letter-spacing:0;margin:14px 0 6px}
.vxb .tcard p{margin:0;color:var(--muted);font-size:15px}
.vxb .blob{width:46px;height:46px;border-radius:14px;position:relative;display:grid;place-items:center}
.vxb .blob::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c,var(--accent2));opacity:.2}
.vxb .blob i{width:14px;height:14px;border-radius:50%;background:var(--c,var(--accent2));animation:vxb-pulse 2.6s var(--out) infinite;animation-delay:var(--pd,0s)}
@keyframes vxb-pulse{0%{transform:scale(.7);box-shadow:0 0 0 0 color-mix(in srgb,var(--c,#888) 50%,transparent)}70%{transform:scale(1);box-shadow:0 0 0 14px transparent}100%{transform:scale(.7)}}

/* ---- run chart */
.vxb .vx-qi{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.vxb .vx-chart{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.vxb .vx-chart svg{width:100%;height:auto;overflow:visible}
.vxb .vx-chart figcaption{color:var(--muted);font-size:13px;text-align:right}
.vxb .vx-chart .axis{stroke:var(--line);stroke-width:2}
.vxb .vx-chart .median{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:6 6;opacity:.7}
.vxb .vx-chart .mlabel{font:600 11px var(--vsans);fill:var(--muted);text-anchor:end}
.vxb .vx-chart .run{fill:none;stroke:#0e67b3;stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--out)}
.vxb .vx-chart .pts circle{fill:#0e67b3;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s var(--out)}
.vxb .vx-chart .pts circle.shift{fill:#e51a73}
.vxb .vx-chart.in .run{stroke-dashoffset:0}
.vxb .vx-chart.in .pts circle{transform:scale(1)}
.vxb .vx-signal{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600}
.vxb .vx-signal span{flex:none;width:12px;height:12px;border-radius:50%;background:#e51a73;animation:vxb-sig 1.8s var(--out) infinite}
@keyframes vxb-sig{0%{box-shadow:0 0 0 0 rgba(229,26,115,.5)}70%{box-shadow:0 0 0 12px transparent}}

/* ---- maker's note + glowing price */
.vxb .vx-quote{max-width:820px;margin:0 auto;text-align:center}
.vxb .vx-quote p{font-family:var(--vserif);font-size:clamp(22px,2.8vw,32px);line-height:1.35;color:var(--heading);margin:0}
.vxb .vx-quote p::before{content:"\201C";display:block;font-size:80px;line-height:.6;color:#e51a73;margin-bottom:18px}
.vxb .vx-quote footer{margin-top:20px;color:var(--muted);font-weight:600}
.vxb .glow{position:relative;border-radius:26px;padding:2px;overflow:hidden;max-width:560px;margin:0 auto}
.vxb .glow::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,var(--accent2),var(--accent),var(--lg-h2),var(--lg-core),var(--accent2));animation:vxb-spin 6s linear infinite}
.vxb .glow > div{position:relative;background:var(--surface);border-radius:24px;padding:36px;text-align:center}
@keyframes vxb-spin{to{transform:rotate(1turn)}}
.vxb .price-big{font-family:var(--vserif);font-size:clamp(40px,6vw,64px);color:var(--heading);line-height:1.05;margin:8px 0}
.vxb .price-sub{color:var(--muted);margin:0 0 22px}

/* ---- sparks (created by the script, appended to body) */
.vxb-spark{position:fixed;z-index:1300;width:8px;height:8px;margin:-4px;border-radius:50%;pointer-events:none;transition:transform .9s var(--out),opacity .9s var(--out)}

@media (max-width:900px){
  .vxb .tgrid{grid-template-columns:1fr 1fr}
  .vxb .scene-grid,.vxb .vx-circles,.vxb .vx-lives,.vxb .vx-qi{grid-template-columns:1fr;gap:18px}
  .vxb .scene{height:260vh}
  .vxb .steps-list{margin-top:12px;gap:6px}
  .vxb .steps-list li{padding:8px 12px;font-size:14px}
  .vxb .steps-list li:not(.on) span{display:none}
  .vxb .vx-life{height:260px}
}
@media (max-width:620px){.vxb .tgrid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .vxb-curtain{display:none}
  .vxb.vxon .bhero-canvas{animation:none;opacity:1}
  .vxb.vxon .rise,.vxb.vxon [data-letters] .ch,.vxb.vxon [data-stagger] > *{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .vxb.vxon .reveal{opacity:1!important;transform:none!important}
  .vxb .glow::before,.vxb .scroll-cue span,.vxb .blob i,.vxb .vc-big,.vxb .vc-quiet,.vxb .vc-warm::before,.vxb .vx-orbs b,.vxb .vx-signal span,.vxb .vx-net .vx-halo,.vxb .vx-net .vx-hubring,.vxb .vx-mark .vf{animation:none}
  .vxb.vxon .vx-mark .vl,.vxb.vxon .vx-mark .vring{animation:none;stroke-dashoffset:0}
  .vxb.vxon .vx-mark .vhub,.vxb.vxon .vx-mark .vn{animation:none;opacity:1;transform:none}
  .vxb .vx-chart .run{stroke-dashoffset:0}.vxb .vx-chart .pts circle{transform:none}
  .vxb .vc{--vxf:var(--fill)}
  /* the network builds on scroll; with motion off, show it fully built */
  .vxb .vx-net .vx-g{--k:1}
  .vxb .vx-net text{opacity:1}
}