/* 4D FUN cinematic Matrix / spatial UI layer */
:root{--mx-green:#39ff88;--mx-cyan:#45dfff;--mx-dark:#020707;--mx-panel:rgba(4,12,10,.78)}
#matrixRain{position:fixed;inset:0;width:100%;height:100%;z-index:-5;pointer-events:none;opacity:.42;background:#020606}
.matrix-depth-grid{position:fixed;left:-25vw;right:-25vw;bottom:-24vh;height:68vh;z-index:-4;pointer-events:none;opacity:.48;transform:perspective(560px) rotateX(67deg);transform-origin:center bottom;background-image:linear-gradient(rgba(57,255,136,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(69,223,255,.18) 1px,transparent 1px);background-size:54px 54px;animation:mxGridDrive 7s linear infinite;mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.82) 45%,transparent 100%)}
.matrix-vignette{position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(circle at 50% 30%,transparent 0 34%,rgba(0,7,6,.22) 60%,rgba(0,0,0,.78) 100%)}
@keyframes mxGridDrive{to{background-position:0 54px,54px 0}}
body.matrix-mode{background:#020707}
body.matrix-mode .background-grid{opacity:.08}
body.matrix-mode .orb{opacity:.10}
body.matrix-mode .site-header{background:rgba(2,8,7,.76);border-bottom-color:rgba(57,255,136,.16)}
body.matrix-mode .brand-mark{border-radius:4px;background:#07130f;color:#f6fff9;border:1px solid rgba(57,255,136,.65);box-shadow:0 0 0 1px rgba(69,223,255,.08),0 0 28px rgba(57,255,136,.18)}
body.matrix-mode .hero-card,body.matrix-mode .service-card,body.matrix-mode .contact-card,body.matrix-mode .feature-list div,body.matrix-mode .hero-metrics div{background:linear-gradient(145deg,rgba(3,14,11,.86),rgba(5,10,15,.73));border-color:rgba(57,255,136,.14);box-shadow:0 18px 70px rgba(0,0,0,.38),inset 0 0 0 1px rgba(69,223,255,.025)}
body.matrix-mode h1{background:linear-gradient(100deg,#fff 10%,#baffd4 52%,#80e8ff 92%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 34px rgba(57,255,136,.08)}
body.matrix-mode .eyebrow{color:#61ff9c;text-shadow:0 0 16px rgba(57,255,136,.35)}
body.matrix-mode .primary-button{border-radius:4px;background:linear-gradient(90deg,#39ff88,#47e7ff);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 30px rgba(57,255,136,.20);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
body.matrix-mode .secondary-button{border-radius:4px;background:rgba(2,9,8,.68);border-color:rgba(69,223,255,.24);transition:transform .22s ease,border-color .22s ease,background .22s ease}
body.matrix-mode .primary-button:hover,body.matrix-mode .secondary-button:hover{transform:translateY(-3px);box-shadow:0 10px 34px rgba(0,0,0,.30),0 0 24px rgba(57,255,136,.15)}
body.matrix-mode .nav-links a{position:relative}
body.matrix-mode .nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:linear-gradient(90deg,#39ff88,#45dfff);transition:right .25s ease}
body.matrix-mode .nav-links a:hover:after{right:0}

/* scroll / card motion */
.mx-reveal{opacity:0;transform:translateY(38px) scale(.985);filter:blur(5px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.mx-reveal.mx-visible{opacity:1;transform:none;filter:none}
.service-card,.hero-card,.contact-card,.track-row,.primary-button,.secondary-button{will-change:transform}
.service-card:hover,.hero-card:hover{transform:translateY(-5px) perspective(900px) rotateX(1deg) rotateY(-1deg);border-color:rgba(57,255,136,.34)}
.mx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:mxRipple .55s ease-out;pointer-events:none}
@keyframes mxRipple{to{transform:scale(4);opacity:0}}

/* page transition */
#mxPageTransition{position:fixed;inset:0;z-index:9998;pointer-events:none;transform:translateX(-105%);background:linear-gradient(100deg,#010303 0%,#03150d 45%,#051019 100%);border-right:1px solid #39ff88;box-shadow:20px 0 60px rgba(57,255,136,.18)}
#mxPageTransition.active{animation:mxPageSweep .62s cubic-bezier(.77,0,.18,1) forwards}
@keyframes mxPageSweep{0%{transform:translateX(-105%)}55%,100%{transform:translateX(0)}}
body.mx-page-enter main,body.mx-page-enter .site-header{animation:mxEnter .62s cubic-bezier(.2,.75,.2,1) both}
@keyframes mxEnter{from{opacity:0;transform:translateY(14px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* 8-bit boot loader */
#rocketBoot{position:fixed;inset:0;z-index:10000;background:#000;display:grid;place-items:center;overflow:hidden;color:#d8ffe6;font-family:"Courier New",monospace;transition:opacity .38s ease,visibility .38s ease}
#rocketBoot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot-inner{width:min(720px,86vw);text-align:center;position:relative}
.boot-kicker{font-size:12px;letter-spacing:.28em;color:#5eff98;margin-bottom:34px;text-transform:uppercase}
.pixel-rocket-wrap{height:360px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:0 24px;overflow:visible}
.pixel-rocket{position:absolute;left:50%;bottom:10px;width:72px;height:104px;image-rendering:pixelated;filter:drop-shadow(0 0 10px rgba(57,255,136,.34));transform:translate(-50%,0);transition:transform .08s linear,opacity .12s linear,filter .18s ease;z-index:4}.pixel-rocket.docking{transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .14s linear;transform:translate(-50%,-274px) scale(.62)!important;filter:drop-shadow(0 0 18px rgba(69,223,255,.85))}.pixel-rocket.docked{opacity:0}
.pixel-rocket svg{width:100%;height:100%;shape-rendering:crispEdges}
.pixel-mothership{position:absolute;left:50%;top:0;width:210px;height:84px;transform:translateX(-50%);image-rendering:pixelated;filter:drop-shadow(0 0 14px rgba(69,223,255,.22));z-index:3}
.pixel-mothership svg{width:100%;height:100%;shape-rendering:crispEdges}
.pixel-mothership.receiving{animation:mothershipPulse .18s steps(2,end) 4}
.mothership-beam{position:absolute;left:50%;top:58px;width:46px;height:0;transform:translateX(-50%);background:linear-gradient(to bottom,rgba(69,223,255,.52),rgba(57,255,136,.12),transparent);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);opacity:0;transition:height .18s ease,opacity .18s ease}.pixel-mothership.receiving .mothership-beam{height:76px;opacity:1}
.rocket-flight-path{position:absolute;left:50%;top:78px;bottom:92px;width:2px;transform:translateX(-50%);background:linear-gradient(to bottom,rgba(69,223,255,.05),rgba(57,255,136,.34),rgba(57,255,136,.08));z-index:1}.rocket-flight-path span{position:absolute;left:50%;width:7px;height:7px;border:1px solid rgba(57,255,136,.4);background:#03120b;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 8px rgba(57,255,136,.18)}.rocket-flight-path span:nth-child(1){top:12%}.rocket-flight-path span:nth-child(2){top:32%}.rocket-flight-path span:nth-child(3){top:52%}.rocket-flight-path span:nth-child(4){top:72%}.rocket-flight-path span:nth-child(5){top:92%}
@keyframes mothershipPulse{50%{filter:drop-shadow(0 0 24px rgba(69,223,255,.9)) brightness(1.35)}}

.pixel-flame{animation:mxFlame .16s steps(2,end) infinite;transform-origin:center top}
@keyframes mxFlame{50%{transform:scaleY(.72)}}
.boot-track{height:18px;border:2px solid #2b5e43;background:#020a06;box-shadow:0 0 0 2px #06170e,0 0 30px rgba(57,255,136,.10);padding:3px;position:relative}
.boot-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,#39ff88 0 10px,#1bd56b 10px 14px);box-shadow:0 0 18px rgba(57,255,136,.38);transition:width .08s linear}
.boot-copy{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:12px;letter-spacing:.12em;color:#75b991}.boot-percent{color:#fff;font-weight:700}.boot-status{margin-top:24px;color:#45dfff;font-size:12px;letter-spacing:.18em;min-height:16px}.boot-skip{margin-top:32px;border:1px solid #244b37;background:#020706;color:#79ad8b;padding:10px 15px;font:inherit;font-size:11px;letter-spacing:.12em;cursor:pointer}.boot-skip:hover{color:#fff;border-color:#39ff88}
.pixel-wipe{position:fixed;inset:0;z-index:9999;pointer-events:none;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr)}
.pixel-wipe i{background:#000;opacity:0;transform:scale(1.04)}
.pixel-wipe.play i{animation:pixelOut .5s steps(5,end) both}
@keyframes pixelOut{0%{opacity:1}65%{opacity:1}100%{opacity:0}}

@media(max-width:760px){.matrix-depth-grid{height:48vh;background-size:36px 36px}.boot-inner{width:88vw}.pixel-rocket-wrap{height:300px;padding:0 6px}.pixel-mothership{width:170px;height:68px}.rocket-flight-path{top:66px;bottom:78px}.pixel-rocket{width:58px;height:84px}.pixel-rocket.docking{transform:translate(-50%,-226px) scale(.58)!important}.boot-copy{font-size:9px}.boot-kicker{font-size:10px}.mx-reveal{transform:translateY(22px)}}
@media(prefers-reduced-motion:reduce){.matrix-depth-grid,.pixel-flame{animation:none!important}.mx-reveal{opacity:1;transform:none;filter:none;transition:none}#rocketBoot{display:none!important}body.mx-page-enter main,body.mx-page-enter .site-header{animation:none}}