/* Spatial detail and direct exploration extend the existing cinematic sequence. */
.scene-wrap canvas{touch-action:pan-y;cursor:grab}
.scene-wrap canvas.is-dragging{cursor:grabbing}
.scene-wrap canvas:focus-visible{outline:2px solid #d4b77c;outline-offset:-7px}
.villa-interaction{position:absolute;top:94px;right:7%;z-index:3;display:flex;align-items:center;gap:16px;max-width:calc(100% - 14%);color:#ddd0b8}
.villa-interaction>span{font-size:12px;letter-spacing:.08em}
.villa-interaction button{min-height:44px;padding:10px 18px;font-size:14px;line-height:1.35;color:#f3e9d5;border:1px solid #b29b6955;border-radius:100px;background:#14130fd9;backdrop-filter:blur(16px);transition:background .2s,border-color .2s}
.villa-interaction button:hover{background:#30291ee8;border-color:#d4b77c}
.scene-controls button{min-height:48px;font-size:12px}
.scene-controls button span{font-size:14px;line-height:1.4}
.scene-instruction{font-size:11px;line-height:1.6;max-width:280px;text-align:right}
html[data-theme=light] .villa-interaction{color:#5c574a}
html[data-theme=light] .villa-interaction button{color:#3d382e;background:#fffdf5db;border-color:#99897066}
html[data-theme=light] .villa-interaction button:hover{background:#efe8d9;border-color:#8b754c}
@media(max-width:1000px){.villa-interaction{right:6%}.scene-instruction{max-width:190px}}
@media(max-width:700px){.villa-interaction{top:86px;right:6%;gap:10px}.villa-interaction>span{font-size:11px;letter-spacing:.035em}.villa-interaction button{font-size:13px;padding:10px 13px}.spatial-copy{max-width:88%}.spatial-copy>p{max-width:325px}.scene-controls{gap:12px}.scene-controls button{gap:7px}.scene-controls button span{font-size:14px}.scene-controls button:last-child{justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){.villa-interaction button{transition:none}}

.villa-film{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--film-opacity,1);transform:scale(var(--film-scale,1));will-change:opacity,transform}
.villa-film img{width:100%;height:100%;object-fit:cover;object-position:52% 50%}
.villa-film:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101010df,transparent 76%),linear-gradient(0deg,#101010b0,transparent 35%,transparent 75%,#10101065)}
.villa-film>span{position:absolute;right:7%;bottom:112px;z-index:1;font-size:9px;letter-spacing:.12em;color:#efdfbf}
.scene-wrap:after{z-index:1}.scene-wrap canvas{z-index:0}.spatial-heading,.spatial-copy,.spatial-footer,.study-credit,.assembly-meter{z-index:2}
[data-phase=film] #spatial-canvas{pointer-events:none}
.spatial-copy{top:auto;bottom:155px}
/* Keep the caption steady as the lighting controls enter the scene. */
.villa-atmosphere-slot{display:flow-root;min-height:80px}
.villa-atmosphere{--villa-rule:#b29b694d;--villa-muted:#c4bba8;--villa-selected:#f6e4ba;position:relative;z-index:3;display:flex;align-items:center;gap:14px;width:100%;max-width:420px;margin-top:20px;padding-top:6px;border-top:1px solid var(--villa-rule);color:var(--villa-muted);pointer-events:auto}
.villa-lighting{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;min-width:0;gap:10px}
.villa-lighting button{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:48px;padding:9px 0;border:0;border-radius:0;font-size:13px;font-weight:600;line-height:1.35;color:var(--villa-muted);transition:color .2s}
.villa-lighting button:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--villa-selected);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.villa-lighting button[aria-pressed=true],.villa-lighting button:hover{color:var(--villa-selected)}
.villa-lighting button[aria-pressed=true]:after{transform:scaleX(1)}
.light-swatch{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#ead9b1;box-shadow:0 0 8px #ead9b122}
[data-villa-light=golden] .light-swatch{background:#dba063;box-shadow:0 0 8px #dba06333}[data-villa-light=evening] .light-swatch{background:#9eaccb;box-shadow:0 0 8px #9eaccb22}
#villa-sound{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--villa-rule);border-radius:50%;color:var(--villa-muted);transition:color .2s,border-color .2s,background .2s}
#villa-sound:hover,#villa-sound[aria-pressed=true]{color:var(--villa-selected);border-color:currentColor;background:#d4b77c12}
#villa-sound[aria-pressed=false] svg{opacity:.65}#villa-sound[aria-pressed=false] svg path:last-child{display:none}
.villa-atmosphere button:focus-visible{outline:2px solid #d4b77c;outline-offset:3px}
html[data-theme=light] .villa-film:after{background:linear-gradient(90deg,#f7f5f0d0,transparent 76%),linear-gradient(0deg,#f7f5f070,transparent 45%)}html[data-theme=light] .villa-film>span{color:#302c23}
html[data-theme=light] .villa-atmosphere{--villa-rule:#99897066;--villa-muted:#655b49;--villa-selected:#71511b}
html[data-theme=light] .light-swatch{background:#8e7847;box-shadow:none}html[data-theme=light] [data-villa-light=golden] .light-swatch{background:#ab6a29}html[data-theme=light] [data-villa-light=evening] .light-swatch{background:#64749a}
html[data-theme=light] .villa-atmosphere button:focus-visible{outline-color:#71511b}
.motion-paused .villa-film{opacity:0;transform:none}
@media(max-width:1000px){.spatial-copy{max-width:300px}.villa-film>span{right:6%}.villa-atmosphere{gap:10px}.villa-lighting{gap:8px}.villa-lighting button{font-size:12px;gap:5px}}
@media(max-width:700px){
 .villa-interaction>span{display:none}.assembly-meter{top:86px;width:180px;gap:8px;font-size:8px}
 .villa-film img{object-fit:contain;object-position:50% 33%;background:#101010}.villa-film>span{bottom:290px;font-size:8px}
 .spatial-copy{left:6%;right:6%;bottom:143px;max-width:none}.spatial-copy h2{font-size:clamp(34px,9.5vw,41px)}.spatial-copy>p{max-width:325px;line-height:1.65}
 .villa-atmosphere{max-width:none;margin-top:16px;gap:12px}.villa-lighting{gap:10px}.villa-lighting button{font-size:12px;gap:5px}
 .scene-wrap:after{background:linear-gradient(0deg,#101010 0%,#101010f2 19%,#1010109c 38%,transparent 65%)}
 html[data-theme=light] .scene-wrap:after{background:linear-gradient(0deg,#f7f5f0 0%,#f7f5f0f2 19%,#f7f5f09c 38%,transparent 65%)}html[data-theme=light] .villa-film img{background:#f7f5f0}
}
@media(max-width:360px){.villa-lighting{gap:8px}.villa-lighting button{gap:4px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.villa-film{opacity:0;transform:none}.villa-lighting button,.villa-lighting button:after,#villa-sound{transition:none}}

/* A longer, native scroll gives the reveal, orbit and waterside finale room to breathe. */
.spatial-story{height:360vh}
[data-villa-light=auto] .light-swatch{background:linear-gradient(135deg,#f2e5c9,#dba063 50%,#7e96c2);box-shadow:none}
.villa-lighting button:disabled{opacity:.45;cursor:default}
@media(max-width:1000px){.villa-lighting{gap:8px}.villa-lighting .light-swatch{display:none}.villa-lighting button{font-size:11.5px}}
@media(max-width:700px){.spatial-story{height:340svh}.villa-lighting{gap:6px}.villa-lighting button{font-size:11.5px;line-height:1.25}}
.motion-paused .spatial-story{height:auto}
@media(prefers-reduced-motion:reduce){.spatial-story{height:auto}}