/* The home page recedes around a single optical object. */
.opening{min-height:680px;max-height:1050px}
.opening-type{padding-top:clamp(80px,14vh,160px);width:44%}
.opening-description{margin:28px 0 38px;color:#c4bdd1;white-space:nowrap}

.opening-object{inset:0 0 90px 34%}
.opening-object canvas{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 9%,#000 97%,transparent);mask-composite:intersect}
.opening-bottom{justify-content:flex-end;border:0;bottom:27px;padding:0}
.object-controls{grid-template-columns:auto minmax(100px,180px) 38px auto;gap:16px}
.scene-hotspot{position:absolute;left:57%;top:40%;width:44px;height:44px;transform:translate(-50%,-50%);z-index:3}

.scene-info{position:absolute;top:50%;left:100%;width:256px;padding:18px 0 18px 16px;transform:translate(14px,-50%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s,visibility .4s}
.scene-hotspot[data-side=left] .scene-info{left:auto;right:100%;padding:18px 16px 18px 0;transform:translate(-14px,-50%)}
.scene-hotspot[data-side=below] .scene-info{left:var(--card-left);right:auto;top:100%;padding:8px 0 0;transform:translateY(12px)}
.scene-hotspot[data-open=true] .scene-info{visibility:visible;opacity:1;transform:translate(0,-50%);pointer-events:auto}
.scene-hotspot[data-side=below][data-open=true] .scene-info{transform:translateY(0)}
.info-surface{padding:22px;background:rgba(211,220,240,.1);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid #e2e4f229;color:#ded5f1;border-radius:3px}
.info-surface h2{font-size:23px;letter-spacing:0;line-height:1.3}
.info-surface h2 span{font-size:10px;letter-spacing:.1em;margin-left:9px;color:#d3c6e5}
.info-surface p{font-size:12px;line-height:1.9;color:#d5cbe6}
.info-surface .info-role{font-size:11px;margin:8px 0 16px;color:#d5cbe6}

.chapter-rail{position:fixed;left:calc(6vw - 14px);bottom:22px;z-index:40;display:flex;padding:0 6px;background:linear-gradient(90deg,#0b0d15c9,#0b0d15a6);border-radius:2px}
.chapter-rail a{position:relative;display:grid;place-items:center;width:44px;height:44px;color:#9ca5d2}

.chapter-rail a[aria-current=location]{color:var(--warm)}

body[data-site-home] .site-footer{padding-bottom:90px}
@media(min-width:761px) and (max-width:1000px){.opening-type{padding-top:110px}.object-controls{grid-template-columns:auto 115px 30px auto;gap:10px}.opening h1{font-size:70px}.scene-info{width:230px}.info-surface{padding:18px}}
@media(max-width:760px){
 .opening{min-height:0;height:auto;padding:0 0 125px;display:flex;flex-direction:column;overflow:hidden}
 .opening-type{padding:40px 20px 0;width:100%;min-height:238px}
 .opening h1{font-size:60px}.opening-description{font-size:12px;margin:20px 0 0}
 
 
 .opening-object{position:relative;inset:auto;height:clamp(320px,46svh,400px);width:100%;margin-top:8px;overflow:visible}
 .opening-bottom{position:relative;inset:auto;margin:0 20px;display:block;padding:0}
 .object-controls{display:grid;grid-template-columns:auto 1fr 32px;gap:5px 12px}
 .object-controls button{grid-column:1/-1;justify-self:end;min-height:44px;font-size:10px}
 .scene-info{width:225px;padding-left:10px;padding-right:0}
 .scene-hotspot[data-side=left] .scene-info{padding-left:0;padding-right:10px}
 .info-surface{padding:18px}.info-surface h2{font-size:21px}
 .chapter-rail{left:50%;bottom:12px;transform:translateX(-50%);padding:0 16px;background:#0b0d15ed}
 #viewer-status{position:relative;inset:auto;padding:10px 20px 0;max-width:100%;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.scene-info{transition:none!important}}