/* ============================================================
   MAGNETS ONE — Scene-1 support (visuals live in the WebGL scene)
============================================================ */
/* guaranteed first frame: real Earth behind #webgl before JS/WebGL draws */
#webgl{ background:#05070c !important; }
@media (max-width:820px){
  #webgl{ background:#05070c !important; }
}
#loader{ opacity:0 !important; pointer-events:none !important; }         /* let the real first frame show */
#s1 .overlay .col{ transition:opacity .55s ease; }                       /* smooth hero reveal at handoff */

/* ============================================================
   HEADLINES — LIGHT, VIBRANT, HEAVY CONTINUOUS GLOW (always visible)
   Solid light fill (no background-clip:text, so it can NEVER render black/invisible)
============================================================ */
@keyframes mxGlow{ 0%,100%{ text-shadow:0 0 16px rgba(150,195,255,.55),0 0 40px rgba(90,150,255,.32),0 2px 6px rgba(0,0,0,.55);} 50%{ text-shadow:0 0 32px rgba(175,215,255,.9),0 0 78px rgba(120,175,255,.6),0 2px 6px rgba(0,0,0,.55);} }
@keyframes mxGlowGold{ 0%,100%{ text-shadow:0 0 16px rgba(255,196,96,.6),0 0 42px rgba(255,164,64,.38),0 2px 5px rgba(0,0,0,.5);} 50%{ text-shadow:0 0 34px rgba(255,214,124,.95),0 0 82px rgba(255,184,84,.68),0 2px 5px rgba(0,0,0,.5);} }

.scene-title, #s1 .col h1, .hero h1, .scene h1, .scene h2{
  color:#f3f8ff !important; -webkit-text-fill-color:#f3f8ff !important;
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  filter:none !important;
  text-shadow:0 0 22px rgba(150,195,255,.6),0 0 52px rgba(90,150,255,.38),0 2px 6px rgba(0,0,0,.55) !important;
  animation:mxGlow 3s ease-in-out infinite !important;
}
/* highlight words ("Marvelous", "Digital Solutions") — bright warm gold, glowing */
.accent{
  color:#ffd873 !important; -webkit-text-fill-color:#ffd873 !important;
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  filter:none !important;
  text-shadow:0 0 22px rgba(255,196,96,.62),0 0 50px rgba(255,164,64,.4),0 2px 5px rgba(0,0,0,.5) !important;
  animation:mxGlowGold 2.6s ease-in-out infinite !important;
}
/* body copy + labels stay crisp over bright 3D */
#s1 .col p, .scene-sub, .overlay p, .overlay h2, .overlay h3{
  color:#e9f0ff !important;
  text-shadow:0 2px 16px rgba(0,0,0,.72), 0 0 6px rgba(0,0,0,.6) !important;
}
#webgl{ z-index:0 !important; }
main, .scene, .overlay, section, footer{ position:relative; z-index:5; }

/* ============================================================
   CINEMATIC ATMOSPHERE — vignette + periodic lightning flash
============================================================ */
#mxVignette{position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 50%, rgba(0,0,0,.28) 82%, rgba(0,0,0,.55) 100%);}
#mxLightning{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 34%, rgba(255,244,190,.6), rgba(255,214,110,.18) 46%, rgba(255,200,80,0) 72%);
  animation:mxFlash 9s ease-in-out infinite;mix-blend-mode:screen;}
@keyframes mxFlash{0%,100%{opacity:0}1.5%{opacity:.85}4%{opacity:.15}6%{opacity:.65}10%{opacity:0}55%{opacity:0}56.5%{opacity:.5}59%{opacity:0}}