/* A 3D car render on a CSS perspective road. Transform/opacity only in motion;
   no WebGL, video or fake progress percentage. Visual exit timing never blocks rendering. */
.flux-drive{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:320px;padding:28px 16px;overflow:hidden;border-radius:24px;background:radial-gradient(ellipse at 50% 45%,#123845 0%,#0b202f 45%,#071420 85%);color:#e6f9ff;text-align:center;direction:ltr;font-family:Vazirmatn,system-ui,sans-serif}
.flux-drive--boot{min-height:100svh;border-radius:0;margin:0}
.flux-loading-overlay{position:fixed;z-index:11000;inset:0;display:grid;place-items:center;padding:20px;box-sizing:border-box;background:#06152470;backdrop-filter:blur(12px) saturate(.7);-webkit-backdrop-filter:blur(12px) saturate(.7);opacity:1;transition:opacity .38s ease,backdrop-filter .38s ease;pointer-events:none}
.flux-loading-overlay .flux-drive{width:min(100%,460px);min-height:0;padding:30px 18px 28px;border-radius:30px;background:linear-gradient(145deg,#102d3be8,#071822df);border:1px solid #b7f5ef33;box-shadow:0 32px 90px #00101870,inset 0 1px #e1fffb20}
.flux-loading-overlay .flux-drive__wordmark{font-size:21px;margin-top:12px}
.flux-loading-overlay .flux-drive__track{width:150px;margin:19px 0 14px}
.flux-loading-overlay .flux-drive__label{font-size:13px;color:#c1d6df}
.flux-loading-overlay.is-leaving{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
.flux-drive__scene{position:relative;width:min(100%,430px);aspect-ratio:2/1.2;flex:none;perspective:600px}
.flux-drive__halo{position:absolute;inset:9% 14% 4%;border:1px solid #30dafc33;border-radius:50%;background:radial-gradient(ellipse,#29d8ef13,transparent 70%);box-shadow:0 0 44px #14b8c418,inset 0 0 40px #52dd9412;transform:rotate(-15deg)}
.flux-drive__halo::before{content:"";position:absolute;inset:10%;border:1px solid transparent;border-top-color:#40e8eb80;border-right-color:#64ed8955;border-radius:50%;animation:flux-orbit 4s linear infinite}
.flux-drive__road{position:absolute;left:-25%;right:-25%;height:34%;bottom:2%;border-top:1px solid #70e8da44;border-bottom:1px solid #70e8da22;background:repeating-linear-gradient(90deg,transparent 0 50px,#6fffea66 50px 112px,transparent 112px 190px);background-size:auto 2px;background-position:center;background-repeat:repeat-x;transform:rotateX(67deg) rotateZ(-6deg);overflow:hidden}
.flux-drive__road::after{content:"";position:absolute;inset:0 -100%;background:repeating-linear-gradient(90deg,transparent 0 85px,#67dfff 85px 135px,transparent 135px 220px);background-size:auto 1px;background-position:center 80%;background-repeat:repeat-x;animation:flux-road .7s linear infinite}
.flux-drive__trail{position:absolute;left:65%;right:-13%;top:68%;height:2px;transform:rotate(-8deg);background:linear-gradient(90deg,#62f5afbb,#2cd7ff99,transparent);box-shadow:0 9px #1dd4f944,0 -7px #86f3ba22;animation:flux-trail 1s ease-in-out infinite alternate}
.flux-drive__car{position:absolute;z-index:2;width:94%;height:auto;left:-3%;top:23%;object-fit:contain;filter:drop-shadow(0 17px 9px #0008) drop-shadow(0 1px 1px #41e8f955);animation:flux-drive 2.5s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
.flux-drive__wordmark{margin-top:4px;font:600 17px/1.4 system-ui,sans-serif;letter-spacing:.28em;color:#e0f8ff}
.flux-drive__wordmark span{font-size:10px;letter-spacing:.22em;color:#78edac}
.flux-drive__track{height:2px;width:108px;margin:17px 0 12px;border-radius:2px;background:#8db8c427;overflow:hidden}
.flux-drive__track::after{content:"";display:block;height:100%;width:50%;border-radius:2px;background:linear-gradient(90deg,transparent,#6bf5af,#5bdfff);animation:flux-charge 1.5s ease-in-out infinite}
.flux-drive__label{font-size:12px;line-height:1.8;color:#acc7d5;direction:inherit;unicode-bidi:plaintext;max-width:100%}
.flux-drive__charger{position:absolute;z-index:1;right:0;bottom:13%;width:36%;height:90%;object-fit:contain;filter:drop-shadow(0 0 9px #53f7ab22);pointer-events:none}
.flux-drive__energy{position:absolute;z-index:1;right:11%;bottom:20%;width:37%;height:25%;border-bottom:2px solid #59f5ae88;border-radius:0 0 45% 50%;transform:rotate(-8deg);box-shadow:0 5px 15px -7px #61f6ac}
.flux-drive__energy::after{content:"";position:absolute;left:0;bottom:-3px;width:9px;height:3px;border-radius:50%;background:#b5ffd2;box-shadow:0 0 9px 3px #4beab2;animation:flux-energy 1.8s ease-in-out infinite}
.flux-drive-inline{display:inline-block;flex:none;width:40px;height:22px;background:url('/brand/flux-loader-car-v1.webp') center/contain no-repeat;animation:flux-inline 1s ease-in-out infinite alternate;vertical-align:middle}
@keyframes flux-drive{0%,100%{transform:translate3d(5px,1px,0) rotate(.15deg)}35%{transform:translate3d(-8px,-2px,0) rotate(-.4deg)}60%{transform:translate3d(-3px,0,0) rotate(-.15deg)}75%{transform:translate3d(0,-1px,0)}}
@keyframes flux-road{to{transform:translateX(220px)}}
@keyframes flux-orbit{to{transform:rotate(360deg)}}
@keyframes flux-trail{to{opacity:.35;transform:rotate(-8deg) scaleX(.72)}}
@keyframes flux-charge{0%{transform:translateX(-110%)}100%{transform:translateX(210%)}}
@keyframes flux-inline{to{transform:translateX(-4px)}}
@keyframes flux-energy{0%{transform:translateX(130px);opacity:0}30%{opacity:1}100%{transform:translateX(0);opacity:0}}
@media(max-width:480px){.flux-drive{min-height:280px;padding:22px 12px}.flux-drive--boot{min-height:100svh}.flux-drive__scene{max-width:350px}}
@media(prefers-reduced-motion:reduce){.flux-drive *,.flux-drive *::before,.flux-drive *::after,.flux-drive-inline{animation:none!important}.flux-drive__track::after{width:100%}.flux-drive__trail{opacity:.5}}
@media(prefers-reduced-motion:reduce){.flux-loading-overlay,.flux-loading-overlay .flux-drive{animation:none;transition:none}}

.flux-loading-overlay[hidden]{display:none}