/* ============================================================================
   MARVIX LABS — mx-enhance-v9.css
   ----------------------------------------------------------------------------
   RULE FOR THIS FILE: every selector begins with #mx- or .mx-.
   Nothing here can reach the host page's html, body, p, h1, video, .reveal or
   anything else it owns. Previous versions broke the frame by doing exactly
   that. If the layout is still wrong after this file, the cause is NOT here.
   ========================================================================== */

/* ============================ CONTACT DOCK (left) ======================== */
#mx-dock{
  position:fixed; left:18px; right:auto; bottom:18px; z-index:99999;
  display:flex; flex-direction:column; gap:11px; align-items:flex-start;
  font-family:Inter,system-ui,-apple-system,Arial,sans-serif;
  max-width:calc(100vw - 36px);
}
#mx-dock a{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  border-radius:40px; padding:12px 18px; font-size:14px; font-weight:800;
  letter-spacing:.2px; line-height:1; white-space:nowrap;
  transition:transform .18s ease, filter .18s ease;
}
#mx-dock a:hover{ transform:translateY(-2px); filter:brightness(1.08); }
#mx-dock a svg{ width:17px; height:17px; flex:0 0 17px; }

#mx-dock a.mx-wa{
  background:#00D200; color:#fff;
  border:1px solid rgba(255,255,255,.42);
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  animation:mxBlinkWa 1.6s ease-in-out infinite;
}
#mx-dock a.mx-call{
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  animation:mxBlinkCall 1.6s ease-in-out infinite; animation-delay:.8s;
}
@keyframes mxBlinkWa{
  0%,100%{ box-shadow:0 6px 20px rgba(0,0,0,.30), 0 0 0 0 rgba(0,210,0,.85); filter:brightness(1); }
  48%    { box-shadow:0 8px 34px rgba(0,210,0,.70), 0 0 0 17px rgba(0,210,0,0); filter:brightness(1.22); }
}
@keyframes mxBlinkCall{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); border-color:rgba(255,255,255,.55); }
  48%    { box-shadow:0 0 0 15px rgba(255,255,255,0); border-color:rgba(255,255,255,.95); }
}

#mx-audio-btn{
  order:-1; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(14,14,16,.55); color:#fff;
  border:1px solid rgba(255,255,255,.35);
  transition:transform .18s ease, background .18s ease;
}
#mx-audio-btn:hover{ transform:translateY(-2px); background:rgba(254,60,0,.85); }
#mx-audio-btn svg{ width:18px; height:18px; }

@media(max-width:640px){
  #mx-dock{ left:12px; bottom:12px; gap:9px; }
  #mx-dock a{ padding:12px; border-radius:50%; }
  #mx-dock .mx-lbl{ display:none; }
}

/* ================================ ALIEN BOT ============================== */
#mx-bot{ position:fixed; right:20px; bottom:20px; z-index:99999;
         font-family:Inter,system-ui,-apple-system,Arial,sans-serif; }
#mx-bot-orb{
  position:relative; width:158px; height:212px; border:0; padding:0;
  background:transparent; cursor:pointer; display:block;
  filter:drop-shadow(0 0 18px rgba(150,225,255,.34)) drop-shadow(0 0 52px rgba(90,180,255,.20));
  animation:mxOrbFloat 5.4s ease-in-out infinite;
}
#mx-bot-orb svg{ width:100%; height:100%; display:block; overflow:visible; }
@keyframes mxOrbFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

#mx-bot-badge{
  position:absolute; top:6px; right:0; background:#FE3C00; color:#fff;
  font-size:9px; font-weight:900; letter-spacing:.16em; padding:4px 9px;
  border-radius:20px; text-transform:uppercase; pointer-events:none;
  box-shadow:0 4px 14px rgba(254,60,0,.5);
}

.mx-head{ animation:mxHeadTilt 7s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 88%; }
@keyframes mxHeadTilt{ 0%,100%{transform:rotate(-1.6deg)} 50%{transform:rotate(1.6deg)} }

.mx-lid{ animation:mxLid 5.4s infinite; transform-box:fill-box; transform-origin:50% 0; }
.mx-lid.l2{ animation-delay:.06s; }
@keyframes mxLid{ 0%,90%,100%{transform:scaleY(0)} 93%,95%{transform:scaleY(1)} }

.mx-aura{ animation:mxAura 4.2s ease-in-out infinite; }
@keyframes mxAura{ 0%,100%{opacity:.20} 50%{opacity:.55} }

.mx-halo{ animation:mxHalo 3.6s ease-in-out infinite; }
@keyframes mxHalo{ 0%,100%{opacity:.30} 50%{opacity:.72} }

.mx-sig{ animation:mxSignal 3.2s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.mx-sig.s2{ animation-delay:1.6s; }
@keyframes mxSignal{ 0%{opacity:.85;transform:scale(.62)} 70%,100%{opacity:0;transform:scale(1.5)} }

.mx-bolt{ opacity:0; animation:mxBolt 4.2s linear infinite; }
.mx-bolt.b2{ animation-delay:1.5s; }
.mx-bolt.b3{ animation-delay:2.9s; }
@keyframes mxBolt{ 0%,86%{opacity:0} 88%{opacity:1} 90%{opacity:.15} 92%{opacity:.95} 96%,100%{opacity:0} }

.mx-spark{ animation:mxSpark 2.8s ease-in-out infinite; }
.mx-spark.s2{ animation-delay:.7s } .mx-spark.s3{ animation-delay:1.4s } .mx-spark.s4{ animation-delay:2.1s }
@keyframes mxSpark{ 0%,100%{opacity:.15;transform:translateY(0)} 50%{opacity:1;transform:translateY(-7px)} }

.mx-eye-glow{ animation:mxEyeGlow 3.4s ease-in-out infinite; }
@keyframes mxEyeGlow{ 0%,100%{opacity:.35} 50%{opacity:.9} }

.mx-scanline{ animation:mxScanBot 3.6s linear infinite; }
@keyframes mxScanBot{ 0%{transform:translateY(-14px);opacity:0} 12%,88%{opacity:.85} 100%{transform:translateY(150px);opacity:0} }

.mx-fing{ animation:mxFing 5s ease-in-out infinite; transform-box:fill-box; transform-origin:top center; }
.mx-fing.f2{ animation-delay:.6s } .mx-fing.f3{ animation-delay:1.2s }
@keyframes mxFing{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(4deg)} }

.mx-arm { animation:mxArm 4.4s ease-in-out infinite; transform-box:fill-box; transform-origin:75px 116px; }
.mx-arm2{ animation:mxArm 4.4s ease-in-out infinite reverse; transform-box:fill-box; transform-origin:75px 116px; }
@keyframes mxArm{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(5deg)} }

@media(max-width:640px){
  #mx-bot{ right:12px; bottom:12px; }
  #mx-bot-orb{ width:112px; height:150px; }
}

/* ================================ CHAT PANEL ============================= */
#mx-chat{
  position:fixed; right:20px; bottom:238px; z-index:99999;
  width:min(360px, calc(100vw - 40px)); max-height:min(60vh, 520px);
  display:none; flex-direction:column; overflow:hidden;
  background:rgba(9,12,18,.94); color:#EAF2FF;
  border:1px solid rgba(120,200,255,.22); border-radius:18px;
  box-shadow:0 26px 70px rgba(0,0,0,.62);
  font-size:14px; font-family:Inter,system-ui,-apple-system,Arial,sans-serif;
}
#mx-chat.mx-open{ display:flex; animation:mxChatIn .32s cubic-bezier(.16,1,.3,1); }
@keyframes mxChatIn{ from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:none} }
#mx-chat header{ display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid rgba(120,200,255,.16);
  background:linear-gradient(90deg,rgba(254,60,0,.16),transparent); }
#mx-chat header b{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
#mx-chat header small{ font-size:10px; color:#7FE0A0; letter-spacing:.14em; text-transform:uppercase; }
#mx-chat .mx-x{ margin-left:auto; background:none; border:0; color:#8FA3BC; font-size:20px; cursor:pointer; line-height:1; }
#mx-chat .mx-log{ padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
#mx-chat .mx-msg{ padding:10px 13px; border-radius:13px; line-height:1.55; max-width:88%; }
#mx-chat .mx-msg.bot{ background:rgba(120,200,255,.10); border:1px solid rgba(120,200,255,.16); align-self:flex-start; }
#mx-chat .mx-msg.me{ background:#FE3C00; color:#fff; align-self:flex-end; font-weight:600; }
#mx-chat .mx-msg a{ color:#FFB489; }
#mx-chat .mx-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
#mx-chat .mx-chips button{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#CFE0F5; border-radius:20px; padding:7px 12px; font-size:12px; cursor:pointer; }
#mx-chat .mx-chips button:hover{ background:rgba(254,60,0,.22); border-color:rgba(254,60,0,.5); }
#mx-chat form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid rgba(120,200,255,.16); }
#mx-chat input{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:22px; padding:11px 15px; color:#fff; font-size:14px; outline:none; }
#mx-chat input:focus{ border-color:rgba(254,60,0,.65); }
#mx-chat form button{ background:#FE3C00; border:0; color:#fff; border-radius:22px;
  padding:0 18px; font-weight:800; cursor:pointer; font-size:13px; }
@media(max-width:640px){ #mx-chat{ right:12px; left:12px; bottom:176px; width:auto; } }

/* ================================== INTRO ================================ */
#mx-intro{
  position:fixed; inset:0; z-index:2147483000; background:#000; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-family:Inter,system-ui,-apple-system,Arial,sans-serif;
  opacity:1; transition:opacity 1s cubic-bezier(.4,0,.2,1); overflow:hidden;
}
#mx-intro.mx-gone{ opacity:0; pointer-events:none; }
#mx-intro canvas.mx-stars{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#mx-intro .mx-vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 30%,rgba(0,0,0,.86) 100%); }
#mx-intro .mx-scan{ position:absolute; left:0; right:0; height:170px; pointer-events:none; z-index:3;
  background:linear-gradient(180deg,transparent,rgba(120,190,255,.055),transparent);
  animation:mxScan 5.2s linear infinite; }
@keyframes mxScan{ 0%{top:-180px} 100%{top:100%} }

#mx-intro .mx-core{ position:relative; text-align:center; padding:0 22px; z-index:2; }
#mx-intro .mx-core::before{
  content:""; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:min(760px,92vw); height:min(420px,52vh); pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, rgba(255,255,255,.26), transparent 70%),
             radial-gradient(closest-side, rgba(255,255,255,.14), transparent 76%);
  filter:blur(26px); animation:mxPool 2.6s ease-in-out infinite;
}
@keyframes mxPool{ 0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
                   50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)} }

#mx-intro .mx-alien{
  width:120px; height:150px; margin:0 auto 26px; display:block;
  filter:drop-shadow(0 0 16px rgba(150,225,255,.5)) drop-shadow(0 0 44px rgba(90,180,255,.28));
  animation:mxAlienIn 1.5s cubic-bezier(.16,1,.3,1) both, mxAlienFloat 4.6s 1.5s ease-in-out infinite;
}
@keyframes mxAlienIn{ from{opacity:0;transform:translateY(26px) scale(.82)} to{opacity:1;transform:none} }
@keyframes mxAlienFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

#mx-intro .mx-eyebrow{
  font-size:11px; letter-spacing:.62em; text-transform:uppercase; color:#7f8b99;
  margin-bottom:26px; opacity:0; animation:mxFade .9s 1.25s forwards;
}
#mx-intro .mx-word{
  font-family:Anton,Inter,system-ui,sans-serif; text-transform:uppercase;
  font-size:clamp(46px,12.5vw,150px); line-height:.92; letter-spacing:-.03em;
  display:block; color:#fff;
  animation:mxNeon 2.2s ease-in-out infinite;
}
#mx-intro .mx-word span{
  display:inline-block; opacity:0; transform:translateY(46px) rotateX(-58deg);
  transform-origin:50% 100%;
  animation:mxLetter .95s cubic-bezier(.16,1,.3,1) forwards,
            mxFlicker 6s 2.6s steps(1,end) infinite;
  animation-delay:calc(1.45s + var(--i,0) * .055s), calc(2.6s + var(--i,0) * .11s);
}
#mx-intro .mx-word.mx-accent{ color:#fff; animation-delay:.4s; }
#mx-intro .mx-word.mx-accent span{ color:#fff; }

/* pure white neon — the glow is white on white, no colour cast at all */
@keyframes mxNeon{
  0%,100%{
    text-shadow:
      0 0 6px  rgba(255,255,255,1),
      0 0 14px rgba(255,255,255,.92),
      0 0 30px rgba(255,255,255,.55),
      0 0 62px rgba(255,255,255,.28),
      0 0 120px rgba(255,255,255,.12);
    filter:brightness(1);
  }
  50%{
    text-shadow:
      0 0 10px rgba(255,255,255,1),
      0 0 26px rgba(255,255,255,1),
      0 0 58px rgba(255,255,255,.85),
      0 0 118px rgba(255,255,255,.5),
      0 0 210px rgba(255,255,255,.24);
    filter:brightness(1.28);
  }
}
/* a real neon tube stutter — brief, irregular, never a steady blink */
@keyframes mxFlicker{
  0%,3%,6%,100%{ opacity:1 }
  4%  { opacity:.28 }
  5%  { opacity:.92 }
  41% { opacity:.35 }
  42% { opacity:1 }
  73% { opacity:.5 }
  74% { opacity:1 }
}
@keyframes mxLetter{ to{opacity:1;transform:translateY(0) rotateX(0)} }
@keyframes mxFade{ to{opacity:1} }

#mx-intro .mx-sub{ margin-top:24px; font-size:11px; letter-spacing:.46em;
  text-transform:uppercase; color:#9aa6b4; opacity:0; animation:mxFade 1s 2.5s forwards; }
#mx-intro .mx-demo{ margin:18px 0 0; font-family:ui-monospace,Consolas,monospace;
  font-size:12px; letter-spacing:.5em; text-transform:uppercase; color:#8FE23C;
  opacity:0; animation:mxFade .8s 2.9s forwards; }

#mx-intro .mx-bar{ margin:26px auto 0; width:min(320px,62vw); height:2px;
  background:rgba(255,255,255,.13); overflow:hidden; border-radius:2px; }
#mx-intro .mx-bar i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,#FE3C00,#FFB03A);
  box-shadow:0 0 16px rgba(254,60,0,.8); transition:width .35s ease; }
#mx-intro .mx-pct{ margin-top:12px; font-family:ui-monospace,Consolas,monospace;
  font-size:11px; letter-spacing:.3em; color:#6f7c8b; }

#mx-intro .mx-enter{
  position:relative; margin-top:34px; cursor:pointer;
  background:rgba(10,14,20,.82); border:1px solid rgba(190,235,255,.30);
  color:#EAF4FF; letter-spacing:.34em; font-weight:700; font-size:13px;
  text-transform:uppercase; padding:16px 40px; border-radius:44px;
  opacity:0; pointer-events:none;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
#mx-intro .mx-enter.mx-on{ opacity:1; pointer-events:auto; }
#mx-intro .mx-enter:hover{ background:rgba(18,26,36,.92);
  border-color:rgba(210,245,255,.65); transform:translateY(-2px); }
#mx-intro .mx-enter::before{
  content:""; position:absolute; inset:-26px; z-index:-1; border-radius:70px;
  background:radial-gradient(closest-side, rgba(150,225,255,.42), transparent 72%),
             radial-gradient(closest-side, rgba(120,180,255,.24), transparent 78%);
  filter:blur(16px); animation:mxEnterGlow 2.4s ease-in-out infinite;
}
#mx-intro .mx-enter::after{
  content:""; position:absolute; inset:-6px; border-radius:52px; z-index:-1;
  border:1px solid rgba(180,235,255,.55); animation:mxEnterRing 2.4s ease-out infinite;
}
@keyframes mxEnterGlow{ 0%,100%{opacity:.45;transform:scale(.94)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes mxEnterRing{ 0%{opacity:.75;transform:scale(.96)} 70%,100%{opacity:0;transform:scale(1.22)} }

/* ============================ REDUCED MOTION ============================= */
@media (prefers-reduced-motion: reduce){
  #mx-dock a, #mx-bot-orb, #mx-audio-btn,
  .mx-head, .mx-lid, .mx-aura, .mx-halo, .mx-sig, .mx-bolt, .mx-spark,
  .mx-eye-glow, .mx-scanline, .mx-fing, .mx-arm, .mx-arm2,
  #mx-intro .mx-alien, #mx-intro .mx-word, #mx-intro .mx-word span,
  #mx-intro .mx-eyebrow, #mx-intro .mx-sub, #mx-intro .mx-demo,
  #mx-intro .mx-core::before, #mx-intro .mx-enter::before,
  #mx-intro .mx-enter::after, #mx-intro .mx-scan{
    animation:none !important;
  }
  #mx-intro .mx-word span, #mx-intro .mx-eyebrow,
  #mx-intro .mx-sub, #mx-intro .mx-demo{ opacity:1; transform:none; }
}


/* ============================================================================
   v10 — LIGHTNING behind the intro wordmark
   ========================================================================== */
#mx-intro .mx-bolts{
  position:absolute; inset:-14% -8%; pointer-events:none; z-index:-1;
  opacity:0; animation:mxFade .6s 2.4s forwards;
}
#mx-intro .mx-bolts svg{ width:100%; height:100%; display:block; overflow:visible; }
#mx-intro .mx-bolts path{
  fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.95)) drop-shadow(0 0 26px rgba(255,255,255,.55));
  opacity:0;
}
#mx-intro .mx-bolts path.b1{ animation:mxStrike 5.2s 3.0s linear infinite; }
#mx-intro .mx-bolts path.b2{ animation:mxStrike 5.2s 4.4s linear infinite; }
#mx-intro .mx-bolts path.b3{ animation:mxStrike 5.2s 6.1s linear infinite; }
@keyframes mxStrike{
  0%,92%{ opacity:0 }
  93%   { opacity:1 }
  94%   { opacity:.1 }
  95%   { opacity:.9 }
  97%,100%{ opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  #mx-intro .mx-word, #mx-intro .mx-word span, #mx-intro .mx-bolts path{ animation:none !important; }
  #mx-intro .mx-word span{ opacity:1; transform:none; }
}


/* ============================================================================
   MX · OPENING SKY  —  replaces the flat dark wall behind the intro clouds
   ----------------------------------------------------------------------------
   The cloud plates themselves were fine: all four are proper soft-alpha PNGs
   with 0% opaque black. What read as "black and ugly" was the intro's own
   backdrop — a near-flat radial from #0e1b28 to #04070c — plus a heavy 72%
   vignette on top of it.

   Their intro injects its <style> at runtime, so those rules land after this
   file. !important is required here, and is used ONLY on paint properties.
   Nothing below changes size, position or layout.
   ========================================================================== */

html #mxIceIntro{
  background:
    /* a low warm horizon glow, as if the sun is just under the cloud deck */
    radial-gradient(120% 62% at 50% 104%, rgba(255,168,92,.30) 0%, transparent 58%),
    /* cold upper atmosphere */
    radial-gradient(100% 78% at 50% 8%,  rgba(96,168,232,.24) 0%, transparent 62%),
    /* the deep sky itself — blue-black, never flat black */
    linear-gradient(178deg, #071A2C 0%, #0A2338 30%, #0B2B42 54%, #071726 78%, #04101B 100%)
    !important;
}

/* slow aurora curtains drifting behind the clouds */
html #mxIceIntro::before{
  content:""; position:absolute; inset:-20%; pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 62% at 22% 40%, rgba(120,255,214,.20) 0%, transparent 64%),
    radial-gradient(30% 54% at 74% 30%, rgba(140,190,255,.18) 0%, transparent 62%),
    radial-gradient(52% 40% at 50% 78%, rgba(255,190,120,.14) 0%, transparent 68%);
  filter:blur(38px);
  mix-blend-mode:screen;
  animation:mxSkyDrift 26s ease-in-out infinite alternate;
}
@keyframes mxSkyDrift{
  0%   { transform:translate3d(-3%, 1%, 0) scale(1.04); opacity:.72 }
  50%  { transform:translate3d( 2%,-2%, 0) scale(1.12); opacity:1   }
  100% { transform:translate3d( 4%, 2%, 0) scale(1.06); opacity:.8  }
}

/* a faint starfield above the cloud deck */
html #mxIceIntro::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 9%,  rgba(214,238,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 58% 22%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 78% 12%, rgba(200,230,255,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 26%, rgba(255,244,220,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 24% 32%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 66% 6%,  rgba(255,255,255,.6),  transparent 60%);
  animation:mxStarTwinkle 5.5s ease-in-out infinite alternate;
}
@keyframes mxStarTwinkle{ 0%{opacity:.55} 100%{opacity:1} }

/* the 72% vignette was crushing the frame edges — open it up */
html #mxIceIntro .mxi-vgn{
  background:radial-gradient(88% 74% at 50% 44%,
    transparent 58%, rgba(3,12,22,.42) 100%) !important;
}

/* let the clouds sit in the light instead of on top of a wall */
html #mxIceIntro .mxi-cloud{
  mix-blend-mode:screen !important;
  filter:brightness(1.24) saturate(1.08) contrast(1.04) !important;
}
html #mxIceIntro .mxi-mist{ opacity:.9 !important; }

@media (prefers-reduced-motion: reduce){
  html #mxIceIntro::before, html #mxIceIntro::after{ animation:none !important; }
}

/* ============================================================================
   MX · DRAGON BUILD — position fix
   Their sound button #snd sits at  right:min(4.5vw,56px); bottom:12vh
   and it is a large pill with a label. My assistant was landing on top of it.
   Lifted clear above it, and the chat panel moved with it.
   ========================================================================== */
#mx-bot{ right:min(4.5vw,56px) !important; bottom:calc(12vh + 104px) !important; }
#mx-chat{ right:min(4.5vw,56px) !important; bottom:calc(12vh + 320px) !important; }
#mx-bot-orb{ width:150px !important; height:210px !important; }

/* their scene counter #hud-count sits bottom-left at 11.5vh — lift my dock too */
#mx-dock{ bottom:calc(11.5vh + 34px) !important; }

@media(max-width:900px){
  #mx-bot{ bottom:calc(12vh + 76px) !important; }
  #mx-bot-orb{ width:108px !important; height:150px !important; }
  #mx-chat{ bottom:calc(12vh + 236px) !important; left:12px !important; right:12px !important; width:auto !important; }
  #mx-dock{ bottom:calc(11.5vh + 20px) !important; }
}

/* ============================================================================
   v2 — OPENING CLOUDS REMOVED
   You asked for them gone. The sky, aurora and starfield stay; only the cloud
   and mist plates are hidden. Nothing is deleted from your files, so setting
   these two rules back to `initial` brings them straight back.
   ========================================================================== */
html #mxIceIntro .mxi-cloud{ display:none !important; }
html #mxIceIntro .mxi-mist { display:none !important; }

/* ============================================================================
   v2 — THE OLD MAN: higher, larger, and clear of the sound button
   Your #snd pill sits at bottom:12vh and is tall. He now clears it by 190px.
   ========================================================================== */
#mx-bot{ right:min(4.5vw,56px) !important; bottom:calc(12vh + 190px) !important; }
#mx-chat{ right:min(4.5vw,56px) !important; bottom:calc(12vh + 420px) !important; }
#mx-bot-orb{ width:176px !important; height:246px !important; }

@media(max-width:900px){
  #mx-bot{ bottom:calc(12vh + 140px) !important; }
  #mx-bot-orb{ width:120px !important; height:168px !important; }
  #mx-chat{ bottom:calc(12vh + 300px) !important; left:12px !important; right:12px !important; width:auto !important; }
}

/* --- he shivers in the cold, and his stick swings --------------------------- */
.mx-shiver{ animation:mxShiver 2.9s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; }
@keyframes mxShiver{
  0%,100%{ transform:translateX(0) rotate(0) }
  22%    { transform:translateX(.7px) rotate(.5deg) }
  46%    { transform:translateX(-.7px) rotate(-.5deg) }
  70%    { transform:translateX(.5px) rotate(.35deg) }
}
.mx-stick{ animation:mxStick 3.6s ease-in-out infinite; transform-box:fill-box; transform-origin:top center; }
@keyframes mxStick{ 0%,100%{ transform:rotate(-2.2deg) } 50%{ transform:rotate(2.2deg) } }

.mx-breath{ animation:mxBreath 4.2s ease-in-out infinite; }
@keyframes mxBreath{ 0%,62%,100%{ opacity:0; transform:translate(0,0) scale(.7) }
                     72%{ opacity:.55; transform:translate(9px,-5px) scale(1) }
                     88%{ opacity:0;   transform:translate(20px,-12px) scale(1.5) } }

.mx-snow{ animation:mxSnowFall linear infinite; }
.mx-snow.f1{ animation-duration:5.2s } .mx-snow.f2{ animation-duration:6.8s; animation-delay:.9s }
.mx-snow.f3{ animation-duration:4.4s; animation-delay:1.8s } .mx-snow.f4{ animation-duration:7.6s; animation-delay:2.6s }
.mx-snow.f5{ animation-duration:5.9s; animation-delay:3.4s } .mx-snow.f6{ animation-duration:6.2s; animation-delay:.4s }
@keyframes mxSnowFall{
  0%  { transform:translate(0,-18px); opacity:0 }
  12% { opacity:.9 }
  88% { opacity:.9 }
  100%{ transform:translate(-10px,238px); opacity:0 }
}

@media (prefers-reduced-motion: reduce){
  .mx-shiver,.mx-stick,.mx-breath,.mx-snow{ animation:none !important; }
  .mx-snow,.mx-breath{ opacity:.5 }
}

/* ============================================================================
   MX · OPENING SCENE TEXT — readable on the bright sky
   ----------------------------------------------------------------------------
   Scene 01 sits over a pale blue sky. Every line in it was white or near-white
   at low opacity, so it disappeared. These rules change COLOUR, SHADOW, GLOW
   and OPACITY only. Font family, size, weight, letter-spacing, indent, margin
   and layout are all left exactly as they are, as asked.
   Scoped to .sc[data-sc="0"] so only the opening scene is affected.
   ========================================================================== */

/* MARVIX LABS — deep ink navy with a white halo, so it reads on light AND
   still glows. The halo is what keeps it feeling cinematic rather than flat. */
.sc[data-sc="0"] .brand-wordmark{
  color:#062038 !important;
  -webkit-text-fill-color:#062038 !important;
  opacity:1 !important;
  text-shadow:
    0 0 12px rgba(255,255,255,.95),
    0 0 30px rgba(255,255,255,.75),
    0 0 62px rgba(150,215,255,.55),
    0 2px 3px rgba(4,20,36,.35) !important;
  animation:mxHeroPulse 3.2s ease-in-out infinite;
}
@keyframes mxHeroPulse{
  0%,100%{ text-shadow:0 0 10px rgba(255,255,255,.85),0 0 24px rgba(255,255,255,.6),
                       0 0 50px rgba(150,215,255,.4),0 2px 3px rgba(4,20,36,.35) }
  50%    { text-shadow:0 0 18px rgba(255,255,255,1),0 0 46px rgba(255,255,255,.95),
                       0 0 96px rgba(120,200,255,.8),0 2px 3px rgba(4,20,36,.35) }
}

/* marvixlabs.ai — the brand orange, glowing. This is the one line that should
   be the warm accent on a cold blue sky. */
.sc[data-sc="0"] .brand-domain{
  color:#D93000 !important;
  opacity:1 !important;
  text-shadow:0 0 10px rgba(255,255,255,.9), 0 0 26px rgba(254,60,0,.45),
              0 1px 2px rgba(60,10,0,.3) !important;
}

/* Intelligence That Builds Tomorrow — deep teal-navy, clearly legible */
.sc[data-sc="0"] .brand-tagline{
  color:#0A3350 !important;
  opacity:1 !important;
  text-shadow:0 0 10px rgba(255,255,255,.9), 0 0 24px rgba(160,220,255,.5),
              0 1px 2px rgba(4,20,36,.25) !important;
}

/* the descriptive paragraph and the two creed lines were at .42–.62 opacity
   in near-white — effectively invisible. Darkened and brought up to full. */
.sc[data-sc="0"] .sub{
  color:#123A57 !important; opacity:1 !important;
  text-shadow:0 0 8px rgba(255,255,255,.85), 0 1px 2px rgba(4,20,36,.2) !important;
}
.sc[data-sc="0"] .hero-line{
  color:#0B4A6E !important; opacity:1 !important;
  text-shadow:0 0 9px rgba(255,255,255,.9), 0 0 20px rgba(120,200,255,.35) !important;
}
.sc[data-sc="0"] .hero-creed{
  color:#16405C !important; opacity:1 !important;
  text-shadow:0 0 8px rgba(255,255,255,.85) !important;
}
.sc[data-sc="0"] .hero-creed--dim{
  color:#2B5875 !important; opacity:.92 !important;
  text-shadow:0 0 8px rgba(255,255,255,.8) !important;
}
.sc[data-sc="0"] .label{
  color:#B23400 !important; opacity:1 !important;
  text-shadow:0 0 8px rgba(255,255,255,.9) !important;
}

@media (prefers-reduced-motion: reduce){
  .sc[data-sc="0"] .brand-wordmark{ animation:none !important; }
}