
.studio-atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:#080a0a}.ks-landing #app{position:relative;z-index:1}
.atmo-scene{position:absolute;inset:0;opacity:0;will-change:opacity}.atmo-scene:first-child{opacity:1}
.atmo-scene img{position:absolute;inset:-5%;width:110%;height:110%;max-width:none;object-fit:cover;object-position:65% center;filter:blur(3px) saturate(.45) brightness(.5);opacity:.48}
.atmo-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#080a0acc 0%,#080a0a88 42%,#080a0a18 76%),linear-gradient(0deg,#080a0a55,transparent 50%)}
.atmo-light{position:absolute;inset:-25%;mix-blend-mode:screen;will-change:transform,opacity}
.atmo-light-0{background:radial-gradient(ellipse at 73% 35%,#ebd2a480,transparent 35%),conic-gradient(from 230deg at 74% 28%,transparent 0deg,#e4c38b38 27deg,transparent 60deg);filter:blur(18px)}
.atmo-light-1{background:radial-gradient(ellipse at 72% 55%,transparent 15%,#e4d5b850 23%,transparent 32%),linear-gradient(115deg,transparent 35%,#dce6e53d 48%,transparent 60%);filter:blur(16px)}
.atmo-light-2{background:radial-gradient(ellipse at 78% 32%,#ffe1a85c,transparent 32%),linear-gradient(125deg,transparent 45%,#f2e8cf22 60%,transparent 75%);filter:blur(24px)}
.atmo-scene[data-scene="1"]{transform:scaleX(-1)}.atmo-scene[data-scene="1"]:after{transform:scaleX(-1)}

@media(prefers-reduced-motion:reduce){.atmo-scene,.atmo-light{will-change:auto}}


.real-photo-desk{position:absolute;inset:0;background:radial-gradient(ellipse at 85% 40%,#514535,#191917 60%,#111312);filter:blur(3px) saturate(.45) brightness(.5);opacity:.48;overflow:hidden}
.desk-arrangement{position:absolute;right:-1%;top:2%;width:min(76vw,1050px);aspect-ratio:1.18;transform:perspective(1600px) rotateX(18deg) rotateZ(9deg);transform-origin:70% 45%}
.desk-ipad{position:absolute;width:66%;right:1%;top:1%;padding:2%;border-radius:24px;background:linear-gradient(130deg,#333,#050505 20%,#171717);border:2px solid #6e6d69;box-shadow:2px 5px 0 #555,9px 18px 30px #000b}
.desk-screen{aspect-ratio:4/3;position:relative;overflow:hidden;background:#282828;border-radius:8px;display:flex;flex-direction:column}.desk-gallery-title{flex:none;height:10%;display:flex;align-items:center;justify-content:space-between;padding:0 4%;color:#eee;font:14px Arial}.desk-gallery-title span{font-size:10px;color:#aaa}
.atmo-scene .desk-screen img{position:static;inset:auto;width:100%;height:90%;opacity:1;filter:none;object-fit:cover;object-position:50% 30%;max-width:100%;will-change:auto}.desk-screen:after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,#ffffff10,transparent 45%,#ffffff0a);pointer-events:none}
.desk-print{position:absolute;width:27%;aspect-ratio:3/4;background:#e3ddcf;padding:1.4%;padding-bottom:3%;box-shadow:2px 4px 3px #0007,5px 12px 23px #0007}.atmo-scene .desk-print img{position:static;inset:auto;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;filter:none;max-width:100%;will-change:auto}.print-one{left:14%;top:30%;transform:rotate(-19deg)}.print-two{left:36%;top:49%;transform:rotate(-5deg);z-index:2}.print-three{left:62%;top:51%;transform:rotate(13deg)}
@media(max-width:720px){.desk-arrangement{width:115vw;right:-36%;top:20%}.desk-gallery-title{font-size:9px}.desk-gallery-title span{font-size:7px}.desk-ipad{border-radius:16px}}

/* Portrait screens frame the photographic subject by width, not viewport height.
   Light and photograph share a canvas so the highlight stays on its subject. */
@media(max-width:900px) and (orientation:portrait){
 .atmo-scene{--scene-width:160vw;--scene-left:-60vw;--scene-top:22svh}
 .atmo-scene>img{inset:auto;left:var(--scene-left);top:var(--scene-top);width:var(--scene-width);height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent)}
 .atmo-light{inset:auto;left:var(--scene-left);top:var(--scene-top);width:var(--scene-width);height:auto;aspect-ratio:16/9}
 .atmo-scene:after{background:linear-gradient(180deg,#080a0a35,transparent 35%,#080a0a35),linear-gradient(90deg,#080a0a55,transparent 70%)}
 .desk-arrangement{width:90vw;right:5vw;top:26svh;transform:perspective(1600px) rotateX(12deg) rotateZ(5deg);transform-origin:center}
 .atmo-light-2{left:-10vw;top:22svh;width:115vw;aspect-ratio:1.18}
 .real-photo-desk{background:radial-gradient(ellipse at 55% 45%,#514535,#191917 65%,#111312)}
}
