/* ASYMETRIX — immersive architectural backdrop / preview v3 */
html{background:#0b1014}
body{background:transparent;isolation:isolate}
body::before{
 content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
 background:
 radial-gradient(ellipse 75% 70% at 88% 12%,rgba(49,94,119,.42),transparent 74%),
 radial-gradient(ellipse 80% 75% at 2% 93%,rgba(157,111,54,.24),transparent 73%),
 radial-gradient(ellipse 45% 55% at 52% 52%,rgba(52,70,83,.22),transparent 85%),
 linear-gradient(145deg,#0b1014 0%,#18232b 49%,#0c1116 100%);
}
body::after{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:
 linear-gradient(123deg,transparent 0 28%,rgba(217,179,122,.13) 28.08%,transparent 28.28% 62%,rgba(217,179,122,.11) 62.08%,transparent 62.25%),
 linear-gradient(150deg,transparent 0 57%,rgba(133,169,188,.13) 57.1%,transparent 57.28%),
 repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgba(217,179,122,.055) 80px),
 repeating-linear-gradient(0deg,transparent 0,transparent 79px,rgba(217,179,122,.035) 80px);
 opacity:.85;
}
.atmosphere-architecture{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.atmosphere-architecture svg{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.48}
.atmosphere-architecture .halo{position:absolute;width:65vmax;height:65vmax;right:-27vmax;top:10%;border:1px solid rgba(217,179,122,.18);border-radius:50%;box-shadow:0 0 0 6vmax rgba(217,179,122,.018),0 0 0 13vmax rgba(133,169,188,.018)}
.atmosphere-architecture .axis{position:absolute;width:1px;height:120vh;left:77%;top:-10%;transform:rotate(24deg);background:linear-gradient(transparent,rgba(217,179,122,.32),transparent)}
.portfolio{background:rgba(13,20,26,.73)}
.contact-coming{backdrop-filter:blur(8px)}
@media(max-width:600px){
 body::before{background:radial-gradient(ellipse 110% 60% at 105% 16%,rgba(55,104,132,.43),transparent 76%),radial-gradient(ellipse 95% 70% at -20% 92%,rgba(169,116,51,.25),transparent 75%),linear-gradient(150deg,#0b1014,#1a2730 54%,#0b1116)}
 body::after{opacity:.62}
 .atmosphere-architecture svg{width:190%;left:-48%;opacity:.38}
 .atmosphere-architecture .halo{width:88vmax;height:88vmax;right:-69vmax;top:15%;border-color:rgba(217,179,122,.2)}
 .atmosphere-architecture .axis{left:87%;opacity:.6}
 .portfolio{background:rgba(13,20,26,.78)}
}
@media(prefers-reduced-motion:reduce){.atmosphere-architecture *{animation:none!important}}