/* Lumex Hosting — motion layer.
   Loaded after style.css. Everything here is additive; delete this file
   and the anim.js include to return the site to its static state. */

/* ============================================================
   1. BOOT SEQUENCE — the opening animation
   Reads like a service coming online: node connects, resources
   allocate, the mark lights up, the curtain lifts.
   ============================================================ */
.boot{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:radial-gradient(1100px 720px at 50% 32%,#1c0d40 0%,#0e0522 46%,#0a0518 78%);
  /* safety net: if JS never runs, the curtain still lifts */
  animation:bootFallback .5s 3.1s forwards!important;cursor:pointer;
}
@keyframes bootFallback{to{opacity:0;visibility:hidden;pointer-events:none}}
.boot.done{
  animation:none!important;opacity:0;visibility:hidden;transform:scale(1.05);
  transition:opacity .62s cubic-bezier(.4,0,.2,1),transform .62s cubic-bezier(.4,0,.2,1),visibility 0s .62s;
}
.boot-skip{display:none!important}
body.booting{overflow:hidden}

.boot-in{text-align:center;padding:24px;width:min(420px,86vw)}

.boot-mark{position:relative;width:96px;height:96px;margin:0 auto 26px;display:grid;place-items:center}
.boot-mark img{
  width:66px;height:66px;border-radius:20px;position:relative;z-index:2;
  animation:markIn .9s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes markIn{
  0%{opacity:0;transform:scale(.7) rotate(-14deg);filter:blur(6px)}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:scale(1) rotate(0);box-shadow:0 0 44px rgba(192,132,252,.42)}
}
.boot-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(192,132,252,.9) 60deg,rgba(139,92,246,.9) 130deg,transparent 210deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:ringSpin 1.5s linear infinite,fadeIn .5s both;
}
@keyframes ringSpin{to{transform:rotate(1turn)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.boot-mark::after{
  content:'';position:absolute;inset:-18px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.32),transparent 68%);
  animation:pulseGlow 2.2s ease-in-out infinite;
}
@keyframes pulseGlow{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

.boot-name{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:27px;
  letter-spacing:-.02em;line-height:1;color:#f6f2ff;
}
.boot-name b{font-weight:800}
.boot-name i{display:inline-block;font-style:normal;opacity:0;transform:translateY(14px);
  animation:letterUp .5s cubic-bezier(.2,.8,.25,1) both}
@keyframes letterUp{to{opacity:1;transform:none}}
.boot-name em{
  display:block;font-style:normal;font-size:10.5px;letter-spacing:.34em;font-weight:600;
  color:#a99ac4;margin-top:9px;opacity:0;animation:letterUp .6s .5s both;
}

.boot-rail{
  height:2px;width:100%;margin:30px 0 16px;border-radius:2px;
  background:rgba(255,255,255,.09);overflow:hidden;
}
.boot-rail i{
  display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,#c084fc,#8b5cf6 52%,#d946ef);
  transform-origin:left;transform:scaleX(0);
  animation:railFill 1.5s cubic-bezier(.55,.1,.2,1) .25s forwards;
}
@keyframes railFill{
  0%{transform:scaleX(0)}
  38%{transform:scaleX(.46)}
  68%{transform:scaleX(.72)}
  100%{transform:scaleX(1)}
}
.boot-log{
  font-family:'Inter',sans-serif;font-size:12.5px;letter-spacing:.06em;color:#a99ac4;
  min-height:19px;display:flex;align-items:center;justify-content:center;gap:9px;
}
.boot-log i{
  width:6px;height:6px;border-radius:50%;background:#34d399;flex:none;
  box-shadow:0 0 0 4px rgba(52,211,153,.15);animation:bl 1.4s infinite;
}
.boot-log span{display:inline-block}

/* hold scroll reveals until the curtain lifts, then cascade them in */
html.boot-hold .rv.in{opacity:0;transform:translateY(24px);animation:unhold .5s 3s forwards}
@keyframes unhold{to{opacity:1;transform:none}}

/* page enters with a soft lift once boot is done */
body.booted header{animation:pageIn .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* orchestrated hero cascade — the payoff after the curtain lifts */
body.hero-go .hero>div:first-child>*{animation:heroUp .75s cubic-bezier(.2,.7,.3,1) both}
body.hero-go .hero>div:first-child>*:nth-child(1){animation-delay:.06s}
body.hero-go .hero>div:first-child>*:nth-child(2){animation-delay:.14s}
body.hero-go .hero>div:first-child>*:nth-child(3){animation-delay:.22s}
body.hero-go .hero>div:first-child>*:nth-child(4){animation-delay:.3s}
body.hero-go .hero>div:first-child>*:nth-child(5){animation-delay:.38s}
@keyframes heroUp{from{opacity:0;transform:translateY(22px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
/* nothing in the hero is hidden by default — the cascade only ever animates in */
body.hero-go .ticks li{animation:tickIn .5s cubic-bezier(.2,.8,.25,1) both}
body.hero-go .ticks li:nth-child(1){animation-delay:.34s}
body.hero-go .ticks li:nth-child(2){animation-delay:.41s}
body.hero-go .ticks li:nth-child(3){animation-delay:.48s}
body.hero-go .ticks li:nth-child(4){animation-delay:.55s}
@keyframes tickIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* leaving for another page */
body.leaving{opacity:0;transform:scale(.992);transition:opacity .24s ease,transform .24s ease}

/* ============================================================
   2. SCROLL PROGRESS + BACK TO TOP
   ============================================================ */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none}
.prog i{
  display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#c084fc,#8b5cf6 52%,#d946ef);
  box-shadow:0 0 12px rgba(139,92,246,.7);
}
.totop{
  position:fixed;right:22px;bottom:22px;z-index:80;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;cursor:pointer;color:#f6f2ff;
  background:rgba(28,14,54,.8);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .3s,transform .3s,border-color .25s,background .25s;
}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:rgba(139,92,246,.28);border-color:rgba(255,255,255,.28);transform:translateY(-3px)}
.totop:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.totop svg{width:19px;height:19px}

/* ============================================================
   3. HEADER
   ============================================================ */
header{transition:height .3s,background .3s,box-shadow .3s,border-color .3s}
header.scrolled{
  background:rgba(10,5,24,.9);
  box-shadow:0 12px 40px -22px rgba(0,0,0,.95);
  border-bottom-color:rgba(255,255,255,.1);
}
header.scrolled .nav{height:64px}
.nav{transition:height .3s cubic-bezier(.2,.7,.3,1)}
.logo img{transition:transform .4s cubic-bezier(.2,.8,.25,1),box-shadow .4s}
.logo:hover img{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 30px rgba(192,132,252,.6)}
.menu a{position:relative}
.menu a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:right;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1);transform-origin:left}
.burger{transition:transform .25s,background .25s}
.burger:active{transform:scale(.92)}
.menu.open a{animation:navItem .34s cubic-bezier(.2,.8,.25,1) both}
.menu.open a:nth-child(1){animation-delay:.02s}
.menu.open a:nth-child(2){animation-delay:.06s}
.menu.open a:nth-child(3){animation-delay:.1s}
.menu.open a:nth-child(4){animation-delay:.14s}
.menu.open a:nth-child(5){animation-delay:.18s}
@keyframes navItem{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* ============================================================
   4. AMBIENT — living sky, drifting motes, moving gradients
   ============================================================ */
.motes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.motes i{
  position:absolute;bottom:-8px;width:3px;height:3px;border-radius:50%;
  background:rgba(226,200,255,.85);box-shadow:0 0 8px rgba(190,130,255,.8);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{opacity:0;transform:translateY(0) translateX(0)}
  12%{opacity:.75}
  80%{opacity:.35}
  100%{opacity:0;transform:translateY(-620px) translateX(38px)}
}
.gr{background-size:220% auto;animation:grShift 9s linear infinite}
@keyframes grShift{to{background-position:220% center}}
.sky-img,.ridge{will-change:transform}

/* ============================================================
   5. REVEALS — staggered, with directional variants
   ============================================================ */
.rv{will-change:opacity,transform}
.rv-l{transform:translateX(-30px)}
.rv-r{transform:translateX(30px)}
.rv-s{transform:scale(.955) translateY(18px)}
.rv-l.in,.rv-r.in,.rv-s.in{transform:none}

/* ============================================================
   6. CARDS — spotlight follow, tilt, lift
   ============================================================ */
.grid,.plans,.stats,.split{perspective:1100px}
.spot{position:relative;transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .25s,box-shadow .3s}
.spot::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:0;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(168,120,255,.18),transparent 62%);
  transition:opacity .3s;pointer-events:none;
}
.spot:hover::before{opacity:1}
.spot>*{position:relative;z-index:1}
.spot>.tagbest{position:absolute;z-index:2}
.spot:hover{box-shadow:0 34px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.svc .thumb img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.svc:hover .thumb img{transform:scale(1.07)}
.svc .from{transition:transform .3s,letter-spacing .3s}
.svc:hover .from{transform:translateX(4px)}
.feat:hover .ico,.step:hover .ico{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
.ico{transition:color .25s,border-color .25s,transform .4s cubic-bezier(.2,.8,.25,1),box-shadow .3s}
.feat:hover .ico,.step:hover .ico{box-shadow:0 12px 26px -12px rgba(139,92,246,.8)}
.steps .sn{transition:transform .4s cubic-bezier(.2,.8,.25,1),-webkit-text-stroke-color .3s}
.steps .step:hover .sn{transform:scale(1.1) translateY(-3px);-webkit-text-stroke-color:rgba(200,168,255,.42)}
.mini div{transition:transform .28s,border-color .28s,background .28s}
.mini div:hover{transform:translateY(-3px);border-color:var(--stroke-2);background:rgba(255,255,255,.055)}
.stat b{transition:transform .3s}
.stat:hover b{transform:scale(1.06)}
.shot img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.045)}

/* ============================================================
   7. BUTTONS — sweep + press + ripple
   ============================================================ */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);transition:left .62s cubic-bezier(.3,.7,.3,1);
}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(0) scale(.975)}
.rip{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:rgba(255,255,255,.34);pointer-events:none;z-index:-1;
  animation:rip .58s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ============================================================
   8. PRICING — card entrance, hover, term switch
   ============================================================ */
.billing button{transition:background .25s,color .2s,transform .2s}
.billing button:active{transform:scale(.94)}
.billing button.on{animation:termPop .34s cubic-bezier(.2,.8,.25,1)}
@keyframes termPop{0%{transform:scale(.9)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
.plan{animation:planIn .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes planIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.plan .price{transition:color .25s}
.plan.best{position:relative}
.plan.best::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(140deg,rgba(217,70,239,.5),transparent 42%,rgba(192,132,252,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
  opacity:.75;animation:bestGlow 3.4s ease-in-out infinite;
}
@keyframes bestGlow{0%,100%{opacity:.45}50%{opacity:.95}}
.tagbest{animation:tagFloat 3s ease-in-out infinite}
@keyframes tagFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
.plan li{transition:color .2s,transform .2s}
.plan:hover li{color:#cbb4e4}
.plan ul{counter-reset:none}

/* ============================================================
   9. FAQ + TABLE
   ============================================================ */
.faq details .ans{overflow:hidden}
summary{transition:background .22s,color .2s}
summary:hover{background:rgba(255,255,255,.035)}
summary::after{transition:transform .32s cubic-bezier(.2,.8,.25,1),color .25s}
summary:hover::after{color:#fff}
details[open] summary::after{transform:rotate(135deg)}
.cmp tbody tr{transition:background .22s}
.cmp tbody tr td.yes::before{transition:transform .3s}
.cmp tbody tr:hover td.yes::before{transform:scale(1.5)}

/* ============================================================
   10. HERO + CTA
   ============================================================ */
.hero .art{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.hero .art.tilted{animation:none}
.ticks li{transition:transform .25s,color .25s}
.ticks li:hover{transform:translateX(5px);color:#f0e8ff}
.ticks li:hover .ck{color:#fff;border-color:rgba(255,255,255,.4)}
.ck{transition:color .25s,border-color .25s,transform .3s}
.cta{position:relative;overflow:hidden}
.cta::before{
  content:'';position:absolute;top:-60%;left:-30%;width:70%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-16deg);animation:ctaSweep 7s ease-in-out infinite;
}
@keyframes ctaSweep{0%{left:-40%}55%,100%{left:130%}}
.cta>*{position:relative;z-index:1}
.fgrid a{transition:color .22s,transform .22s}
.fgrid a:hover{transform:translateX(4px)}

/* ============================================================
   11. REDUCED MOTION — everything above collapses to nothing
   ============================================================ */
/* ============================================================
   11. REDUCED MOTION
   Driven by html.rm (set by the inline script in each page) rather
   than a media query, so ?motion=on can override it for testing.
   Movement is removed; simple opacity fades are kept, because a
   cross-fade is not what "reduce motion" is asking you to drop.
   ============================================================ */
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
html.rm .motes,html.rm .prog,html.rm .boot-ring,html.rm .rip{display:none!important}
html.rm .boot-mark::after,html.rm .cta::before,html.rm .btn::after{display:none!important}
html.rm .boot-mark img,html.rm .boot-name i,html.rm .boot-name em{opacity:1!important;transform:none!important;animation:none!important}
html.rm .boot-rail i{transform:none!important;animation:none!important}
html.rm .rv,html.rm .rv-l,html.rm .rv-r,html.rm .rv-s{transform:none!important}
html.rm.boot-hold .rv.in{transform:none!important}
html.rm .art,html.rm .gr,html.rm .tagbest,html.rm .plan.best::after{animation:none!important}
html.rm .spot:hover,html.rm .svc:hover,html.rm .plan:hover,html.rm .shot:hover,
html.rm .steps .step:hover,html.rm .mini div:hover,html.rm .ticks li:hover,
html.rm .totop:hover,html.rm .btn:hover,html.rm .logo:hover img{transform:none!important}
html.rm .svc:hover .thumb img,html.rm .shot:hover img,html.rm .feat:hover .ico,
html.rm .step:hover .ico,html.rm .steps .step:hover .sn,html.rm .stat:hover b,
html.rm .svc:hover .from,html.rm .fgrid a:hover{transform:none!important}
html.rm body.hero-go .hero>div:first-child>*,html.rm body.hero-go .ticks li,
html.rm body.booted header,html.rm .plan{animation-name:fadeOnly!important;filter:none!important}
html.rm body.leaving{transform:none!important}



/* mobile menu: solid panel + slide-in (the translucent original let the hero bleed through) */
@media (max-width:1024px){
  .menu{background:#0f071c;backdrop-filter:blur(22px);box-shadow:0 26px 50px -22px rgba(0,0,0,.95)}
  .menu.open{animation:menuDrop .3s cubic-bezier(.2,.7,.3,1) both}
  @keyframes menuDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
}

@media (max-width:760px){
  .boot-name{font-size:23px}
  .boot-mark{width:82px;height:82px}
  .boot-mark img{width:56px;height:56px}
  .totop{right:14px;bottom:14px;width:42px;height:42px}
}

/* hero character idle float */
.player{animation:playerBob 6s ease-in-out infinite}
@keyframes playerBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
html.rm .player{animation:none!important}