/* ===== WOW layer: preloader, header, 3D export ===== */

/* ---------- PRELOADER ---------- */
#pre{position:fixed;inset:0;z-index:999;display:grid;place-items:center;overflow:hidden;animation:preFail 0s 6s forwards}
@keyframes preFail{to{opacity:0;visibility:hidden}}
#pre .pc{position:absolute;left:0;width:100%;height:50.2%;background:radial-gradient(ellipse at 50% 45%,#0a4a54,#041316 70%);background-size:100% 199.5%;z-index:0;transition:transform 1s cubic-bezier(.77,0,.18,1) .15s}
#pre .pc.t{top:0;background-position:0 0}#pre .pc.b{bottom:0;background-position:0 100%}
#pre .pstage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:30px;transition:opacity .45s,transform .6s}
#pre .pcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.9}
.pbadge{position:relative;width:min(240px,56vw);aspect-ratio:1;display:grid;place-items:center;perspective:800px}
.pbadge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pring1{transform-origin:50% 50%;animation:spin 6s linear infinite}
.pring2{transform-origin:50% 50%;animation:spin 3.4s linear infinite reverse}
.pprog{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .2s linear;filter:drop-shadow(0 0 6px #19D3C5)}
@keyframes spin{to{transform:rotate(360deg)}}
.plogo{position:relative;width:62%;background:#fff;border-radius:22px;padding:14px 18px;box-shadow:0 0 0 1px rgba(25,211,197,.4),0 0 60px rgba(25,211,197,.45),0 20px 50px rgba(0,0,0,.5);transform-style:preserve-3d;opacity:0;animation:plIn 1s cubic-bezier(.2,.9,.2,1.2) .2s forwards,plFloat 4s ease-in-out 1.2s infinite;overflow:hidden}
.plogo img{display:block;width:100%;height:auto}
.plogo::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(25,211,197,.55) 50%,transparent 65%);transform:translateX(-120%);animation:shine 1.8s ease-in-out .9s infinite}
@keyframes plIn{from{opacity:0;transform:scale(.3) rotateY(-120deg)}to{opacity:1;transform:scale(1) rotateY(0)}}
@keyframes plFloat{50%{transform:translateY(-8px) rotateX(6deg) rotateY(-6deg)}}
@keyframes shine{to{transform:translateX(120%)}}
.pmeta{display:flex;flex-direction:column;align-items:center;gap:12px;font:500 12px 'Chakra Petch',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#19D3C5}
.pnum{font:800 clamp(34px,6vw,54px)/1 Manrope;color:#E9FBF8;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.pnum small{font-size:.4em;color:#19D3C5;margin-left:4px}
.pline{width:min(260px,60vw);height:3px;background:rgba(233,251,248,.14);border-radius:9px;overflow:hidden}
.pline i{display:block;height:100%;width:0;background:linear-gradient(90deg,#19D3C5,#E9FBF8);box-shadow:0 0 14px #19D3C5;transition:width .2s linear}
.pstat{height:1.2em;opacity:.85}
#pre.done .pstage{opacity:0;transform:scale(1.15)}
#pre.done .pc.t{transform:translateY(-101%)}#pre.done .pc.b{transform:translateY(101%)}
#pre.gone{display:none}
body.pl{overflow:hidden}

/* ---------- HEADER ---------- */
nav{transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s,top .4s,width .5s,padding .4s;isolation:isolate}
nav.pre-in{transform:translate(-50%,-160%)}
nav.show{animation:navDrop 1.1s cubic-bezier(.2,.9,.25,1.1) backwards}
@keyframes navDrop{0%{transform:translate(-50%,-170%);opacity:0}60%{opacity:1}100%{transform:translate(-50%,0);opacity:1}}
nav.sc{width:min(1040px,calc(100% - 24px));box-shadow:0 18px 60px rgba(0,0,0,.45),0 0 40px rgba(25,211,197,.12)}
nav::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:-1;
 background:conic-gradient(from var(--a,0deg),transparent 0 55%,rgba(25,211,197,.0) 60%,#19D3C5 80%,#E9FBF8 90%,transparent 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:navSpin 4.5s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes navSpin{to{--a:360deg}}
nav>a:first-child{position:relative;overflow:hidden;border-radius:99px;display:block;transition:transform .35s cubic-bezier(.2,.9,.2,1.4)}
nav>a:first-child:hover{transform:scale(1.06) rotate(-2deg)}
nav>a:first-child::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(25,211,197,.5) 50%,transparent 60%);transform:translateX(-130%);animation:logoShine 5s ease-in-out 2s infinite}
@keyframes logoShine{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
nav ul{position:relative;padding:5px;border-radius:99px;background:rgba(233,251,248,.05);gap:2px}
nav ul li{position:relative;z-index:1}
nav ul a{display:block;padding:8px 15px;border-radius:99px;transition:color .3s,opacity .3s,transform .3s}
nav ul a::after{display:none}
nav ul a.act{color:var(--ink);opacity:1;font-weight:700}
nav ul .ind{position:absolute;top:5px;left:0;height:calc(100% - 10px);width:0;border-radius:99px;background:linear-gradient(135deg,#19D3C5,#8ff3ea);box-shadow:0 0 24px rgba(25,211,197,.55);transition:transform .5s cubic-bezier(.3,1.3,.4,1),width .5s cubic-bezier(.3,1.3,.4,1),opacity .3s;opacity:0;z-index:0}
nav ul li{opacity:0;transform:translateY(-14px)}
nav.show ul li{animation:liIn .6s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(.45s + var(--i)*.07s)}
@keyframes liIn{to{opacity:1;transform:none}}
nav .btn{position:relative;overflow:hidden;animation:ctaPulse 2.8s ease-in-out infinite}
nav .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);transform:translateX(-130%);animation:logoShine 3.2s ease-in-out 1s infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(25,211,197,.5)}50%{box-shadow:0 0 0 12px rgba(25,211,197,0)}}
#burger{position:relative;overflow:hidden}
#bar{background:linear-gradient(90deg,#19D3C5,#E9FBF8,#19D3C5);box-shadow:0 0 14px #19D3C5}

@media(prefers-reduced-motion:reduce){#pre{display:none}nav.pre-in{transform:translateX(-50%)}nav ul li{opacity:1;transform:none}}

/* ---------- EXPORT: smoother, richer look (function unchanged) ---------- */
#export .ebw{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
#export .eb{transition:opacity 1.6s cubic-bezier(.4,0,.2,1);filter:saturate(1.15) contrast(1.05)}
#export .eb.on{opacity:.42}
#export .ejt{max-width:560px;padding:26px 30px 24px;border-radius:28px;background:linear-gradient(135deg,rgba(4,19,22,.55),rgba(4,19,22,.15));border:1px solid rgba(233,251,248,.1);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(233,251,248,.12);position:relative;overflow:hidden}
#export .ejt::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:3px;background:linear-gradient(180deg,#19D3C5,transparent);box-shadow:0 0 18px #19D3C5}
#export .ejt::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(25,211,197,.12) 50%,transparent 65%);transform:translateX(-120%);animation:ejSheen 6s ease-in-out infinite}
@keyframes ejSheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
#export .ejt span{background:linear-gradient(180deg,#8ff3ea 0%,rgba(25,211,197,.08) 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1.5px #19D3C5;filter:drop-shadow(0 0 20px rgba(25,211,197,.4))}
#export .ejt b{text-shadow:0 6px 30px rgba(0,0,0,.5)}
#export .ejt small{opacity:.82}
#export .ejt.sw span,#export .ejt.sw b,#export .ejt.sw small{animation:ejIn 1s cubic-bezier(.16,1,.3,1) both}
#export .ejt.sw span{animation-duration:1.1s}
#export .ejt.sw b{animation-delay:.09s}#export .ejt.sw small{animation-delay:.18s}
@keyframes ejIn{from{opacity:0;transform:translateY(36px) scale(.96);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
#export .ejt.sw span{animation-name:ejNum}
@keyframes ejNum{from{opacity:0;transform:translateY(46px) scale(.9);filter:blur(12px) drop-shadow(0 0 20px rgba(25,211,197,.4))}to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 0 20px rgba(25,211,197,.4))}}
.ejbar{display:flex;align-items:center;gap:14px;margin-top:20px;position:relative}
.ejbar i{flex:1;height:3px;border-radius:3px;background:rgba(233,251,248,.14);overflow:hidden;display:block}
.ejbar u{display:block;height:100%;text-decoration:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#19D3C5,#E9FBF8);box-shadow:0 0 12px #19D3C5}
.ejbar em{font:700 12px 'Chakra Petch',sans-serif;font-style:normal;letter-spacing:.18em;color:#19D3C5;white-space:nowrap}
#export .nd{transition:opacity .8s ease}
#export .nd circle{transition:fill .8s ease}
#export .nd.on{animation:ndSoft .9s cubic-bezier(.2,1.2,.3,1)}
@keyframes ndSoft{0%{transform:scale(.8)}100%{transform:scale(1)}}
#export .nd{transform-box:fill-box;transform-origin:center}
#export .cap span{transition:opacity .6s ease,color .6s ease,transform .6s cubic-bezier(.2,1,.3,1)}
#export .cap span.on{transform:translateY(-3px)}
#veh{animation:vp .7s cubic-bezier(.2,1.4,.4,1)}
@media(max-width:700px){#export .ejt{padding:20px 22px}}
/* step card must stay visible: global ".sw{display:none!important}" collides with the .sw class toggled on .ejt */
#export .ejt.sw,#export .ejt{display:block!important}
/* fit everything inside one screen */
#export .pin{padding-top:92px;padding-bottom:18px}
#export .ejt{flex-shrink:0;padding:18px 28px 18px;margin-bottom:6px}
#export .ejt span{font-size:clamp(52px,7vw,84px)}
#export .ejt b{font-size:clamp(26px,3.4vw,38px)}
#export .ejt small{font-size:16px}
#export .ejbar{margin-top:14px}
#export #route{max-height:33vh}
#export .pin>p{margin-top:10px!important;font-size:15px;margin-bottom:0}
#export .cap{margin-top:6px}
@media(max-height:700px){#export #route{max-height:28vh}#export .pin>p{display:none}}
@media(max-width:700px){#export .pin{padding-top:84px}#export .ejt{padding:14px 20px}#export #route{max-height:30vh}#export .pin>p{display:none}}
/* neutralise the hero scan-line ".sw" rule that collides with .ejt.sw */
#export .ejt.sw{position:relative!important;left:auto!important;right:auto;top:auto!important;height:auto!important;animation:none!important;pointer-events:auto;z-index:1}