/* ===== PREMIUM LAYER =====
   Everything is scoped to html.prem. Remove the premium.css/premium.js tags
   (or open the site with ?classic) to go back to the previous look. */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* film grain */
.prem body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* aurora drifting light */
.prem .aurora-host{position:relative;overflow:hidden}
.prem .aurora-host>.wrap{position:relative;z-index:1}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora i{position:absolute;width:46vw;height:46vw;min-width:320px;min-height:320px;border-radius:50%;opacity:.2;background:radial-gradient(circle,rgba(200,239,60,.9),rgba(200,239,60,0) 68%);left:-12vw;top:-14vw;will-change:transform;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){left:auto;top:auto;right:-12vw;bottom:-14vw;opacity:.15;background:radial-gradient(circle,rgba(127,209,59,.9),rgba(127,209,59,0) 68%);animation-duration:26s;animation-delay:-7s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,5vw) scale(1.25)}100%{transform:translate(2vw,11vw) scale(.9)}}

/* dust canvas */
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:.6}

/* custom cursor */
.prem.has-cursor,.prem.has-cursor a,.prem.has-cursor button,.prem.has-cursor label,.prem.has-cursor summary,.prem.has-cursor .ba,.prem.has-cursor [data-tilt]{cursor:none}
.prem.has-cursor input,.prem.has-cursor select,.prem.has-cursor textarea{cursor:auto}
#cur-dot,#cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;opacity:0;transition:opacity .3s}
.has-cursor.cur-on #cur-dot,.has-cursor.cur-on #cur-ring{opacity:1}
#cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--lime)}
#cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(200,239,60,.7);transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s,border-color .25s}
#cur-ring.hot{width:68px;height:68px;margin:-34px 0 0 -34px;background:rgba(200,239,60,.12);border-color:var(--lime)}
#cur-ring.drag{width:80px;height:80px;margin:-40px 0 0 -40px;background:rgba(200,239,60,.18)}
#cur-ring.press{width:26px;height:26px;margin:-13px 0 0 -13px}

/* page transition */
#pt{position:fixed;inset:0;z-index:300;background:var(--lime);transform:translateY(100%);pointer-events:none;display:grid;place-items:center}
#pt img{width:96px;height:96px;border-radius:50%;border:3px solid var(--ink);animation:spin3d 1.4s cubic-bezier(.6,.05,.2,1) infinite}
.pt-out #pt{transform:translateY(0);transition:transform .55s cubic-bezier(.8,0,.2,1)}
.pt-in #pt{transform:translateY(0);animation:ptOut .8s .08s cubic-bezier(.8,0,.2,1) forwards}
@keyframes ptOut{to{transform:translateY(-100%)}}
.pt-in #pre{display:none!important}
.pt-in .ln>span{animation-delay:.55s!important}
.pt-in .ln:nth-child(2)>span{animation-delay:.68s!important}
.pt-in .hin{animation-delay:.85s!important}
.pt-in .facts.hin{animation-delay:1s!important}

/* mouse parallax */
.prem .hero h1,.prem .shero h1{transform:translate3d(calc(var(--mx,0)*-10px),calc(var(--my,0)*-6px),0);transition:transform .35s ease-out}
.prem .shero .dico.big{transform:translate3d(calc(var(--mx,0)*14px),calc(var(--my,0)*10px),0);transition:transform .35s ease-out}
.prem .hero .facts,.prem .shero .facts{transform:translate3d(calc(var(--mx,0)*-5px),calc(var(--my,0)*-3px),0);transition:transform .4s ease-out}

/* serif accents: static gradient (cheap); only the hero headline shimmers */
.prem .serif,.prem .serif .w>span{background:linear-gradient(100deg,#c8ef3c 20%,#f2ffb3 50%,#c8ef3c 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.prem .light .serif,.prem .light .serif .w>span{background-image:linear-gradient(100deg,#5d7a06 20%,#8fb312 50%,#5d7a06 80%)}
.prem .shero .ln>span.serif,.prem .hero .ln>span.serif{background-size:220% 100%;animation:lnUp 1.1s cubic-bezier(.2,.75,.2,1) 1.25s forwards,shimmer 7s linear 2.4s infinite}
@keyframes shimmer{to{background-position:-220% 0}}

/* rotating gradient borders */
.prem .binstage,.prem .snowbox,.prem .frame,.prem .est,.prem .form,.prem form{position:relative}
.prem .binstage::before,.prem .snowbox::before,.prem .frame::before,.prem form::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:4;background:conic-gradient(from var(--a),transparent 0 72%,rgba(200,239,60,.95) 86%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:spinA 6s linear infinite;animation-play-state:paused}
.prem .binstage:hover::before,.prem .snowbox:hover::before,.prem .frame:hover::before,.prem form:hover::before,.prem form:focus-within::before{animation-play-state:running}
@keyframes spinA{to{--a:360deg}}
.prem .plan.best{box-shadow:0 20px 70px rgba(200,239,60,.3)}

/* floating icons */
.prem .portal .ico,.prem .dico:not(.big){animation:flt 4.6s ease-in-out infinite}
.prem .portal:nth-child(2n) .ico{animation-delay:-1.4s}
@keyframes flt{50%{transform:translateY(-5px) rotate(-3deg)}}
.prem .step .n{animation:flt 5s ease-in-out infinite}
.prem .step:nth-child(2) .n{animation-delay:-1.6s}.prem .step:nth-child(3) .n{animation-delay:-3.2s}

/* breathing CTAs, shimmering tags */

/* animated underline on links */
.prem footer.site a,.prem .crumbs a{background:linear-gradient(var(--lime),var(--lime)) 0 100%/0 1px no-repeat;transition:background-size .35s,color .2s}
.prem footer.site a:hover,.prem .crumbs a:hover{background-size:100% 1px}

/* card hover depth */
.prem .tile,.prem .portal,.prem .plan,.prem .size,.prem .glance>div,.prem .addon,.prem .quote,.prem .factors li{transition:transform .25s ease-out,border-color .3s,box-shadow .35s}
.prem .tile:hover,.prem .portal:hover,.prem .size:hover,.prem .glance>div:hover,.prem .addon:hover,.prem .quote:hover,.prem .factors li:hover{box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(200,239,60,.28)}
.prem .glance>div:hover b{animation:pop .5s}
@keyframes pop{50%{transform:scale(1.12)}}

/* eyebrow line draws */
.prem .eyebrow::before{transform-origin:left;animation:lineIn 1s .3s backwards cubic-bezier(.2,.7,.2,1)}
@keyframes lineIn{from{transform:scaleX(0)}}

/* spinning badge */
.spinbadge{position:absolute;width:118px;height:118px;z-index:6;pointer-events:none}
.spinbadge svg{width:100%;height:100%;animation:rot 16s linear infinite}
.spinbadge text{font:700 10.4px "DM Sans",sans-serif;letter-spacing:.16em;fill:#e8eadf;text-transform:uppercase}
.spinbadge b{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:1.3rem;animation:flt 3s ease-in-out infinite}
.spinbadge::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(10,11,9,.85);border:1px solid var(--line2)}
.spinbadge svg,.spinbadge b{position:absolute;z-index:1}
.spinbadge svg{inset:0}
.hero-art .spinbadge{left:2%;bottom:6%}
.hv{position:relative}
.hv .spinbadge{right:-14px;top:-30px}
@keyframes rot{to{transform:rotate(360deg)}}
@media(max-width:940px){.hero-art .spinbadge{left:auto;right:4%;bottom:0;width:92px;height:92px}.spinbadge b{width:36px;height:36px}.hv .spinbadge{display:none}}

@media(prefers-reduced-motion:reduce){.prem body::after,.aurora i,.prem .serif,.prem .serif .w>span,.prem .tile .ico,.prem .portal .ico,.prem .factors .fi,.prem .addon .ico,.prem .step .n,.prem .nav .btn-lime,.prem .tag,.prem .badge,.spinbadge svg,.spinbadge b,.prem .plan.best,.prem .binstage::before,.prem .snowbox::before,.prem .frame::before,.prem form::before{animation:none!important}#dust{display:none}}
.prem .bigtext span{display:inline-block;transform:skewX(var(--vk,0deg));transition:transform .1s linear}
/* mobile: skip the heavy decoration */
@media(max-width:760px),(hover:none){#dust,.aurora,.prem body::after,#cur-dot,#cur-ring{display:none!important}.hv .spinbadge{display:none}}

/* back-to-top progress ring */
#totop{position:fixed;right:22px;bottom:24px;z-index:95;width:56px;height:56px;border-radius:50%;border:0;background:#050605;color:var(--lime);cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 14px 40px rgba(0,0,0,.55)}
#totop.show{opacity:1;transform:none;pointer-events:auto}
#totop svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#totop circle{fill:none;stroke-width:3}
#totop .bg{stroke:rgba(255,255,255,.12)}
#totop .fg{stroke:var(--lime);stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157}
#totop .arr{position:relative;width:22px;height:22px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){#totop{right:14px;bottom:88px;width:48px;height:48px}}
/* sliding nav highlight */
.prem .nav ul{position:relative}
.nav-ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:rgba(200,239,60,.16);pointer-events:none;opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),opacity .25s;z-index:0}
.prem .nav ul a{position:relative;z-index:1}
/* form focus polish */
.prem form input:focus,.prem form select:focus,.prem form textarea:focus{box-shadow:0 0 0 3px rgba(200,239,60,.18),0 10px 30px rgba(200,239,60,.08);transition:box-shadow .3s,border-color .3s}
.prem form .chips label{transition:transform .2s,background .2s,color .2s,border-color .2s}
.prem form .chips label:active{transform:scale(.96)}