/* ============================================================================ MARVIX — LIQUID-CHROME INTRO UPGRADE (Reference Video 1) Additive overrides for the intro title treatment only. Nothing else touched. Real HTML/CSS path-based typography — brand text stays perfectly spelled. Look: pure-black bg, thin geometric letters, dark smoked-glass faces, iridescent silver/cyan/blue/violet edge reflections, star flares, no big orb. ============================================================================ */ /* pure deep-black intro backdrop — kill any large glow/orb behind the title */ /* R11: intro sky — brighter atmospheric gradient (sunlit horizon), realistic clouds drift over it. */ #ch-intro #introWhite,#ch-intro #introGlow{background:transparent!important;opacity:0!important;} #ch-intro{background:linear-gradient(180deg,#3a6a9e 0%,#5b8cbf 22%,#8fb4d8 44%,#c3d8ec 60%,#7ea0c4 78%,#2e5074 100%)!important;} /* ===== realistic drifting clouds: soft volumetric banks + detailed fractal texture ===== */ #mxClouds{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;} .mxc{position:absolute;left:-40%;width:100%;height:70%;border-radius:50%;filter:blur(22px);will-change:transform; background: radial-gradient(45% 55% at 32% 46%, rgba(255,255,255,.95), rgba(240,246,255,.6) 42%, transparent 70%), radial-gradient(38% 48% at 56% 40%, rgba(255,255,255,.9), transparent 66%), radial-gradient(32% 42% at 74% 54%, rgba(226,236,250,.75), transparent 70%), radial-gradient(55% 62% at 46% 66%, rgba(150,178,210,.55), transparent 74%); mix-blend-mode:screen;} /* bright sunlit rim on top of each bank (realistic cloud lighting) */ .mxc::before{content:"";position:absolute;left:8%;top:6%;width:70%;height:40%;border-radius:50%;filter:blur(14px); background:radial-gradient(circle,rgba(255,252,240,.7),transparent 68%);mix-blend-mode:screen;} .mxc1{top:2%; transform:scale(1.1); animation:mxCloudA 58s linear infinite; opacity:.75;} .mxc2{top:26%;width:80%; transform:scale(.9); animation:mxCloudB 74s linear infinite; opacity:.62;filter:blur(28px);} .mxc3{top:48%;width:115%;transform:scale(1.25);animation:mxCloudA 94s linear infinite;animation-delay:-24s;opacity:.68;filter:blur(34px);} .mxc4{top:-8%;width:65%; transform:scale(.8); animation:mxCloudB 64s linear infinite;animation-delay:-34s;opacity:.55;filter:blur(18px);} .mxc5{top:66%;width:130%;transform:scale(1.4); animation:mxCloudA 108s linear infinite;animation-delay:-50s;opacity:.6;filter:blur(40px);} @keyframes mxCloudA{ from{transform:translateX(0) scale(1.12)} to{transform:translateX(180%) scale(1.12)} } @keyframes mxCloudB{ from{transform:translateX(0) scale(.92)} to{transform:translateX(210%) scale(.92)} } /* detailed fractal cloud texture — TWO layers (large soft + fine wispy) for realism */ #mxCloudGrain{position:absolute;inset:-10%;opacity:.5;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='5' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1.4' exponent='2.2' offset='-0.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); background-size:cover;animation:mxCloudDrift 90s linear infinite;} #mxCloudVeil::after{content:"";position:absolute;inset:-10%;opacity:.28;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='500'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.03' numOctaves='4' seed='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1.3' exponent='2.6' offset='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E"); background-size:cover;animation:mxCloudDrift2 130s linear infinite;} @keyframes mxCloudDrift{ from{background-position:0 0} to{background-position:1600px -60px} } @keyframes mxCloudDrift2{ from{background-position:0 0} to{background-position:-1200px 40px} } /* readability veil behind titles so bright text still reads over the bright clouds */ #mxCloudVeil{position:absolute;inset:0;z-index:2;background: radial-gradient(90% 46% at 50% 44%, rgba(6,12,22,.72) 0%, rgba(6,12,22,.42) 38%, rgba(6,12,22,.12) 62%, transparent 78%), linear-gradient(180deg, rgba(10,18,32,.5) 0%, transparent 24%, transparent 68%, rgba(8,14,26,.55) 100%);} @media (prefers-reduced-motion: reduce){ .mxc,#mxCloudGrain,#mxCloudVeil::after{animation:none!important;} } /* ============================================================================ MX-T1 · DARK METALLIC CHROME TITLES + MOVING LIGHT-SWEEP (fail-safe build) Layer 1 (base, cannot fail): SOLID dark-steel fill + bevel shadow stack — bright specular top rim, deep graphite underside = real dark chrome depth. Layer 2 (sweep, safe-fail): ::after duplicates the word via content:attr( data-text) with a MOVING specular gradient clipped to the glyphs. If any browser rejects clip-text the layer is simply invisible — base still shows. Edge glints ride on the existing .mx-flare star system. ============================================================================ */ .huge.mx-chrome,.huge.lava.mx-chrome{ position:relative!important; font-weight:500!important;letter-spacing:.05em!important; color:#8f9aab!important;-webkit-text-fill-color:#8f9aab!important;background:none!important; -webkit-text-stroke:0!important; text-shadow: 0 1px 0 rgba(238,246,255,.85), /* bright specular top rim */ 0 2px 0 rgba(190,202,218,.55), 0 -1px 0 rgba(8,12,20,.85), /* dark chrome underside */ 0 4px 10px rgba(4,8,16,.75), 0 0 26px rgba(120,165,235,.30), 0 0 60px rgba(90,130,210,.18)!important; filter:drop-shadow(0 6px 18px rgba(4,10,22,.6))!important; } .huge.xx.mx-chrome{font-style:normal!important;font-weight:500!important;} /* moving specular LIGHT SWEEP — bright band travels across the dark chrome */ .huge.mx-chrome::after,.huge.lava.mx-chrome::after{ content:attr(data-text);position:absolute;inset:0;padding:inherit;z-index:2;pointer-events:none; font:inherit;letter-spacing:inherit;line-height:inherit;white-space:inherit;text-align:inherit; color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:none; background-image:linear-gradient(115deg, transparent 0%, transparent 34%, rgba(200,225,255,.28) 42%, rgba(255,255,255,.96) 50%, /* hot specular core */ rgba(160,205,255,.34) 58%, transparent 66%, transparent 100%); background-size:280% 100%;background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; animation:mxChromeSweep 3.8s cubic-bezier(.4,.05,.2,1) infinite; mix-blend-mode:screen; } @keyframes mxChromeSweep{ 0%{background-position:130% 0;} 58%{background-position:-90% 0;} 100%{background-position:-90% 0;} } @keyframes moltenShimmer{ 0%,100%{filter:drop-shadow(0 6px 18px rgba(4,10,22,.6))} 50%{filter:drop-shadow(0 6px 20px rgba(30,50,100,.6))} } @keyframes chromeSweep{ 0%,100%{opacity:1} } /* per-letter fragments inherit the same dark-chrome solid fill (no clip-text on frags) */ .lava.mx-chrome .frag{ background:none!important;color:#8f9aab!important;-webkit-text-fill-color:#8f9aab!important; -webkit-text-stroke:0!important;filter:none!important; text-shadow:0 1px 0 rgba(238,246,255,.85),0 -1px 0 rgba(8,12,20,.85),0 4px 10px rgba(4,8,16,.7),0 0 26px rgba(120,165,235,.28)!important; } /* MX-J1: flat 2D intro image cards retired — the continuous 3D jungle owns the environment */ #introGs{display:none!important;} /* tiny star-shaped lens flares that ride letter corners (added by JS as .mx-flare) */ .mx-flare{position:absolute;width:26px;height:26px;pointer-events:none;z-index:6;transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:0; background: radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(180,230,255,.5) 18%,transparent 46%), linear-gradient(0deg,transparent 46%,rgba(220,245,255,.9) 49%,transparent 52%), linear-gradient(90deg,transparent 46%,rgba(220,245,255,.9) 49%,transparent 52%);} @keyframes mxFlarePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}40%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(15deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(30deg)}} /* anamorphic streak + fine grain overlay for the intro */ #mxAnamorphic{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:120vw;height:2px;z-index:5;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,rgba(120,200,255,.7),rgba(150,120,255,.5),transparent);filter:blur(1px);mix-blend-mode:screen;} #mxGrain{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* Skip Intro control REMOVED (R7) */ @media (prefers-reduced-motion: reduce){ .huge.mx-chrome,.lava.mx-chrome .frag{animation:none!important;} .mx-flare,#mxAnamorphic{display:none;} } /* ============ AIRCRAFT / SERVICES SECTION ============ */ #ch-aircraft{position:absolute;inset:0;width:100%;height:100%;z-index:11;background:#05080e;overflow:hidden;} #mxAirCv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;} #mxSvcWrap{position:absolute;left:0;right:0;bottom:12%;z-index:2;text-align:center;pointer-events:none;padding:0 6vw;} #mxSvcKicker{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.4em;color:rgba(150,205,245,.7);text-transform:uppercase;margin-bottom:18px;} /* REAL DOM service name — solid dimensional type, never canvas-baked */ #mxSvcName{font-family:"Poppins","SF Pro Display",sans-serif;font-weight:300;letter-spacing:.04em; font-size:clamp(34px,7vw,104px);line-height:1;color:#eaf5ff; text-shadow:0 2px 0 rgba(120,180,240,.3),0 0 26px rgba(90,170,255,.5),0 0 60px rgba(70,130,255,.3),0 10px 40px rgba(6,12,24,.7);} @keyframes mxSvcRise{0%{opacity:0;transform:translateY(40px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}} @media (max-width:760px){ #mxSvcWrap{bottom:16%;} } @media (prefers-reduced-motion: reduce){ #mxSvcName{animation:none!important;} } /* ============ AI / SI INTELLIGENCE REVEAL (#title0) — ROBUST bright, no clip-text (R8) ============ */ #title0 .stack0{color:#eaf3ff!important;} #title0 .stack0 .big-ai{ color:#eef7ff!important;-webkit-text-fill-color:#eef7ff!important;background:none!important;-webkit-text-stroke:0!important;font-weight:300!important; text-shadow:0 0 18px rgba(120,205,255,.7),0 0 44px rgba(110,160,255,.45),0 0 70px rgba(120,90,255,.3)!important; animation:aiEnergyPulse 4s ease-in-out infinite!important;} #title0 .stack0 span:nth-child(2),#title0 .stack0 span:nth-child(3){ color:#eaf3ff!important;-webkit-text-fill-color:#eaf3ff!important;-webkit-text-stroke:0!important; text-shadow:0 0 16px rgba(120,190,255,.6),0 0 40px rgba(110,150,255,.35),0 1px 2px rgba(0,0,0,.5)!important;} @keyframes aiEnergyPulse{ 0%,100%{ text-shadow:0 0 18px rgba(120,205,255,.7),0 0 44px rgba(110,160,255,.45),0 0 70px rgba(120,90,255,.3); } 50%{ text-shadow:0 0 22px rgba(150,180,255,.75),0 0 50px rgba(150,120,255,.5),0 0 80px rgba(150,90,255,.36); } } @media (prefers-reduced-motion: reduce){ #title0 .stack0 .big-ai{animation:none!important;} } /* ============ STAGED HERO REVEALS — one at a time, ROBUST bright (R8) ============ */ #mxHeroReveal{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:6;pointer-events:none;text-align:center;width:92%;opacity:0;} #mxHeroText{display:inline-block;font-family:"Poppins","SF Pro Display",sans-serif;font-weight:400;letter-spacing:.04em;line-height:1; font-size:clamp(40px,8.5vw,150px); color:#f2f8ff;-webkit-text-fill-color:#f2f8ff;-webkit-text-stroke:0; text-shadow:0 0 20px rgba(120,200,255,.65),0 0 46px rgba(110,150,255,.4),0 0 8px rgba(255,225,180,.45); will-change:opacity,transform;} @media (prefers-reduced-motion: reduce){ #mxHeroText{text-shadow:0 0 12px rgba(110,200,255,.5);} } /* R7: taglines BRIGHT & fully readable (were dim/near-invisible on black) */ .ititle .tag{ color:#eaf3ff!important;-webkit-text-fill-color:#eaf3ff!important; opacity:1!important;font-weight:300!important; text-shadow:0 0 18px rgba(140,190,255,.55),0 0 40px rgba(110,160,255,.35),0 1px 2px rgba(0,0,0,.6)!important; } /* R7: stones/rocks permanently hidden (removed from experience) */ #stoneWrap,#stoneImg,.sstone{display:none!important;opacity:0!important;} /* R10: services robot — fixed overlap. Now a contained backdrop (upper area), behind the service name, softer, so it never overlaps/clashes with the readable service label. */ #mxSvcRobot{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%); width:min(48vw,560px);max-height:56vh;object-fit:contain;z-index:2;pointer-events:none; opacity:.7;filter:drop-shadow(0 0 50px rgba(70,140,255,.35)) drop-shadow(0 16px 50px rgba(0,0,0,.55)); mix-blend-mode:screen;} #mxSvcWrap{z-index:3;bottom:14%;} @media (max-width:760px){ #mxSvcRobot{width:80vw;top:34%;} } /* R12: alien finale — two signature videos as continuous background (crossfade A<->B) */ .ofn-stage{position:relative;} .ofn-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none;} .ofn-vid.on{opacity:.92;} .ofn-vidveil{position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(130% 90% at 50% 42%,rgba(6,12,24,.12),rgba(4,8,18,.5));} .ofn-bg,.ofn-title,.ofn-fog{position:relative;z-index:2;} /* ============ R14: beautiful GOLDEN minimal sound toggle (bottom-left dock) ============ */ #dSound{ position:relative; background:linear-gradient(145deg,rgba(30,22,6,.96),rgba(14,10,4,.98))!important; border:1px solid rgba(255,208,120,.55)!important; color:#ffd27a!important; box-shadow:0 4px 18px rgba(0,0,0,.45), 0 0 14px rgba(255,190,90,.28), inset 0 0 8px rgba(255,200,110,.12)!important; } #dSound:hover{ border-color:rgba(255,224,150,.9)!important; color:#ffe6a8!important; box-shadow:0 4px 20px rgba(0,0,0,.5), 0 0 22px rgba(255,200,100,.5)!important; } #dSound svg{ filter:drop-shadow(0 0 4px rgba(255,200,110,.6)); } #dSound.on{ color:#ffd884!important; border-color:rgba(255,214,130,.8)!important; } /* gentle golden attention-ring so it's an inviting "beautiful golden" cue during loading */ #dSound::after{content:"";position:absolute;inset:-4px;border-radius:14px;pointer-events:none; border:1.5px solid rgba(255,200,110,.5);opacity:0;animation:mxSndPulse 2.6s ease-out infinite;} @keyframes mxSndPulse{0%{opacity:.7;transform:scale(.9)}70%{opacity:0;transform:scale(1.35)}100%{opacity:0}} /* keep the dock (and golden toggle) visible during the loader too */ #loader ~ #dock, .loading #dock{opacity:1!important;} @media (prefers-reduced-motion: reduce){ #dSound::after{animation:none!important;} } /* ============================================================================ MX-I1 · ROBOT STANDING IN THE CLOUDS + LIGHT BEHIND THE SKY (intro, frame one) Foreground cloud band over the robot's lower body (z above the rig, below the titles) + soft light bloom rising from behind the cloud line. Pure CSS layers — zero GPU shader cost, works on integrated graphics. ============================================================================ */ #mxCloudFeet{position:fixed;left:-6%;right:-6%;bottom:-4vh;height:34vh;z-index:23;pointer-events:none;opacity:0;will-change:opacity;} #mxCloudFeet .fc{position:absolute;bottom:-18%;height:88%;border-radius:50%;filter:blur(20px);mix-blend-mode:screen; background: radial-gradient(46% 58% at 40% 44%, rgba(255,255,255,.96), rgba(238,245,255,.62) 44%, transparent 72%), radial-gradient(36% 46% at 66% 52%, rgba(250,252,255,.85), transparent 68%), radial-gradient(52% 60% at 50% 70%, rgba(170,196,224,.55), transparent 76%);} #mxCloudFeet .f1{left:-8%;width:52%;animation:fcDrift 46s ease-in-out infinite alternate;} #mxCloudFeet .f2{left:28%;width:58%;height:98%;filter:blur(26px);animation:fcDrift 58s ease-in-out infinite alternate-reverse;} #mxCloudFeet .f3{left:58%;width:50%;animation:fcDrift 52s ease-in-out infinite alternate;animation-delay:-18s;} #mxCloudFeet .f4{left:16%;width:70%;height:70%;bottom:-30%;filter:blur(32px);opacity:.9;animation:fcDrift 66s ease-in-out infinite alternate-reverse;animation-delay:-30s;} @keyframes fcDrift{from{transform:translateX(-3.5%) scale(1)}to{transform:translateX(3.5%) scale(1.06)}} #mxCloudFeet .fcGrain{position:absolute;inset:-6% 0 -10% 0;mix-blend-mode:screen;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='300'%3E%3Cfilter id='fc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.02' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.85 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1.4' exponent='2.4' offset='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fc)'/%3E%3C/svg%3E"); background-size:cover;animation:mxCloudDrift 84s linear infinite;} /* soft warm light blooming from BEHIND the cloud line (light behind the sky) */ #mxCloudFeet::before{content:"";position:absolute;left:10%;right:10%;bottom:24%;height:70%;pointer-events:none; background:radial-gradient(60% 80% at 62% 100%, rgba(255,232,190,.34), rgba(255,214,160,.12) 46%, transparent 72%); mix-blend-mode:screen;filter:blur(10px);} @media (prefers-reduced-motion: reduce){ #mxCloudFeet .fc,#mxCloudFeet .fcGrain{animation:none!important;} }