/* Decorative layers never change positioning of application elements. */
body { isolation: isolate; }
body > main, body > .card { position: relative; z-index: 2; }
#webgl-canvas, #mago-visual-fallback {
  position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  z-index: 1 !important; pointer-events: none !important;
  -webkit-mask-image: linear-gradient(90deg,rgba(0,0,0,.28),#000 65%);
  mask-image: linear-gradient(90deg,rgba(0,0,0,.28),#000 65%);
}
#webgl-canvas { display:block; visibility:hidden; background:transparent; }
.mago-webgl-ready #webgl-canvas { visibility:visible; }
#mago-visual-fallback { overflow:hidden; }
.mago-webgl-ready #mago-visual-fallback { display:none; }
.fallback-globe {
  position:absolute; left:74%; top:52%; width:min(62vh,640px); aspect-ratio:1;
  border:1px solid #00d9f575; border-radius:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  background:radial-gradient(ellipse,transparent 50%,#00c4ed0c 70%,transparent 71%);
}
.fallback-globe::before,.fallback-globe::after {
  content:""; position:absolute; inset:0; border-radius:50%; border:1px solid #00d9f566;
  transform:scaleX(.4) rotate(28deg); animation:mago-fallback-orbit 24s ease-in-out infinite alternate;
}
.fallback-globe::after { inset:20%; border-color:#9470ed99; transform:rotate(-40deg) scaleY(.55); animation-delay:-10s; }
.fallback-mage {
  position:absolute; left:76%; top:22%; width:clamp(88px,12vw,160px); aspect-ratio:1;
  background:url('/assets/mago-bot-wizard-flight.png') center/contain no-repeat;
  animation:mago-fallback-flight 22s ease-in-out infinite alternate;
}
#mago-motion-toggle {
  position:fixed; bottom:14px; right:14px; z-index:12; padding:8px 12px;
  border:1px solid #234558; border-radius:20px; color:#a5b4cc;
  background:#07101fe6; font:12px system-ui,sans-serif; cursor:pointer;
}
#mago-motion-toggle:hover {color:#fff; border-color:#00cfe8;}
#mago-motion-toggle:focus-visible {outline:2px solid #00eaff;outline-offset:3px;}
#mago-motion-toggle:disabled {cursor:default;}
.mago-motion-paused .fallback-globe::before,.mago-motion-paused .fallback-globe::after,.mago-motion-paused .fallback-mage {animation-play-state:paused;}
@keyframes mago-fallback-orbit {to {transform:rotate(85deg) scaleX(.75);}}
@keyframes mago-fallback-flight {
  0% {opacity:0;transform:translate(-58vw,62vh) rotate(12deg)}
  5% {opacity:1}
  42% {opacity:1;transform:translate(8vw,-15vh) rotate(-8deg)}
  47% {opacity:0;transform:translate(8vw,-15vh) rotate(-8deg)}
  52% {opacity:0;transform:translate(0,62vh) rotate(-12deg) scaleX(-1)}
  57% {opacity:1}
  94% {opacity:1;transform:translate(-58vw,-15vh) rotate(8deg) scaleX(-1)}
  100% {opacity:0;transform:translate(-58vw,-15vh) rotate(8deg) scaleX(-1)}
}
@media(max-width:800px) {
  #webgl-canvas,#mago-visual-fallback {
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,.55));
    mask-image:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,.55));
  }
  .fallback-globe{left:74%;width:85vw}.fallback-mage{left:68%;width:80px}
}
@media(prefers-reduced-motion:reduce) {
  .fallback-globe::before,.fallback-globe::after,.fallback-mage {animation:none;}
  html {scroll-behavior:auto;}
}