/* Manoj Builds — build-area ambient layer. Home intentionally does not load this file. */
:root{
  --mb-amb-blue:#2B6BFF;
  --mb-amb-cyan:#3ED8FF;
  --mb-amb-orange:#F79219;
  --mb-amb-violet:#8B5CF6;
}

/* Shared Manoj Builds badge: top-left on Builds + every project/prototype page. */
.brand-floater,.mb-brand-floater{
  position:fixed!important;
  left:clamp(14px,2vw,24px)!important;
  right:auto!important;
  top:clamp(12px,2vw,20px)!important;
  bottom:auto!important;
  z-index:9998!important;
  width:clamp(66px,6.6vw,94px)!important;
  height:clamp(66px,6.6vw,94px)!important;
  display:block!important;
  border-radius:24px!important;
  padding:3px!important;
  background:linear-gradient(145deg,rgba(11,18,38,.76),rgba(4,6,14,.34))!important;
  border:1px solid rgba(126,164,255,.20)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.025) inset!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
  filter:none!important;
  overflow:visible!important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease!important;
  text-decoration:none!important;
}
.brand-floater::after,.mb-brand-floater::after{
  content:"";position:absolute;inset:-7px;border-radius:30px;z-index:-1;opacity:.0;
  background:conic-gradient(from 120deg,rgba(62,216,255,.45),rgba(43,107,255,.08),rgba(247,146,25,.38),rgba(62,216,255,.45));
  filter:blur(11px);transition:opacity .25s ease;
}
.brand-floater:hover,.mb-brand-floater:hover{
  transform:translateY(-2px) rotate(-1deg) scale(1.035)!important;
  border-color:rgba(126,164,255,.42)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.42),0 0 30px rgba(43,107,255,.10)!important;
}
.brand-floater:hover::after,.mb-brand-floater:hover::after{opacity:.65}
.brand-floater img,.mb-brand-floater img{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;border-radius:20px!important}

/* Builds overview: richer animated gradient field, still dark and premium. */
body.mb-ambient-art{
  background:
    radial-gradient(circle at 12% 18%,rgba(62,216,255,.09),transparent 24%),
    radial-gradient(circle at 86% 15%,rgba(139,92,246,.12),transparent 27%),
    radial-gradient(circle at 72% 76%,rgba(247,146,25,.10),transparent 28%),
    radial-gradient(circle at 24% 84%,rgba(43,107,255,.13),transparent 30%),
    linear-gradient(135deg,#03050c 0%,#081127 38%,#060813 64%,#100a18 100%)!important;
  background-size:150% 150%,155% 155%,145% 145%,160% 160%,100% 100%!important;
  animation:mbAmbientGradient 19s ease-in-out infinite alternate;
}
@keyframes mbAmbientGradient{
  0%{background-position:0% 10%,100% 0%,86% 100%,0% 88%,0 0}
  50%{background-position:18% 2%,84% 16%,100% 82%,14% 100%,0 0}
  100%{background-position:6% 22%,100% 8%,82% 94%,4% 78%,0 0}
}

/* Decorative icon constellation. JS supplies icon nodes and pointer parallax. */
.mb-icon-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;perspective:1100px}
.mb-ambient-icon{
  --ix:0px;--iy:0px;--rz:0deg;
  position:absolute;width:clamp(28px,3.2vw,50px);aspect-ratio:1;object-fit:contain;
  opacity:.14;filter:saturate(.92) brightness(.95) drop-shadow(0 12px 25px rgba(0,0,0,.24));
  transform:translate3d(var(--ix),var(--iy),0) rotate(var(--rz));
  will-change:transform;transition:opacity .35s ease,filter .35s ease;
  animation:mbIconFloat var(--floatDur,7s) ease-in-out var(--floatDelay,0s) infinite alternate;
}
.mb-ambient-icon:nth-child(3n){opacity:.10;width:clamp(24px,2.7vw,42px)}
.mb-ambient-icon:nth-child(4n){opacity:.17}
@keyframes mbIconFloat{
  from{margin-top:-4px}
  to{margin-top:7px}
}
/* Keep icons in edge/negative-space zones; never in the project-card centre. */
.mb-ambient-icon.i1{left:2.2%;top:18%;--rz:-13deg}
.mb-ambient-icon.i2{right:2.7%;top:19%;--rz:10deg}
.mb-ambient-icon.i3{left:1.4%;top:45%;--rz:8deg}
.mb-ambient-icon.i4{right:1.5%;top:48%;--rz:-9deg}
.mb-ambient-icon.i5{left:3.6%;top:73%;--rz:-7deg}
.mb-ambient-icon.i6{right:3.2%;top:76%;--rz:12deg}
.mb-ambient-icon.i7{left:14%;top:92%;--rz:6deg}
.mb-ambient-icon.i8{right:15%;top:91%;--rz:-5deg}
.mb-ambient-icon.i9{left:10%;top:7%;--rz:-8deg}
.mb-ambient-icon.i10{right:10%;top:7%;--rz:8deg}

body.mb-ambient-art .page,body.mb-ambient-art main,body.mb-ambient-art .top-center-nav{position:relative;z-index:2}
body.mb-ambient-art .field{z-index:0;opacity:.72}

@media(max-width:900px){
  .brand-floater,.mb-brand-floater{width:68px!important;height:68px!important;border-radius:20px!important}
  .brand-floater img,.mb-brand-floater img{border-radius:17px!important}
  .mb-ambient-icon{width:31px;opacity:.10}
  .mb-ambient-icon.i3,.mb-ambient-icon.i4,.mb-ambient-icon.i7,.mb-ambient-icon.i8{display:none}
}
@media(max-width:640px){
  .brand-floater,.mb-brand-floater{left:10px!important;top:10px!important;width:58px!important;height:58px!important;padding:2px!important}
  .mb-ambient-icon{opacity:.08;width:27px}
  .mb-ambient-icon.i5,.mb-ambient-icon.i6{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.mb-ambient-art,.mb-ambient-icon{animation:none!important}
}

/* Final sizing pass: compact on full prototypes, more prominent on the Builds gallery. */
body:not(.mb-ambient-art) .mb-brand-floater,
body:not(.mb-ambient-art) .brand-floater{width:58px!important;height:58px!important;border-radius:18px!important;padding:2px!important}
body:not(.mb-ambient-art) .mb-brand-floater img,
body:not(.mb-ambient-art) .brand-floater img{border-radius:15px!important}
body.mb-ambient-art .mb-brand-floater,
body.mb-ambient-art .brand-floater{width:clamp(70px,6.6vw,92px)!important;height:clamp(70px,6.6vw,92px)!important}
/* Existing simple-project back links sit below the new top-left badge instead of underneath it. */
body.mb-ambient-art > a:first-of-type:not(.mb-brand-floater):not(.brand-floater){top:116px!important;left:22px!important;z-index:9997!important}
@media(max-width:640px){
  body:not(.mb-ambient-art) .mb-brand-floater,body:not(.mb-ambient-art) .brand-floater{width:50px!important;height:50px!important}
  body.mb-ambient-art .mb-brand-floater,body.mb-ambient-art .brand-floater{width:58px!important;height:58px!important}
  body.mb-ambient-art > a:first-of-type:not(.mb-brand-floater):not(.brand-floater){top:82px!important;left:12px!important}
}