/* Shared 3D scenes for the demo hotels (see fx3d.js) */
[data-x3]{will-change:transform,opacity;transform-origin:50% 100%}
.x3-sec{position:relative}
.x3-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.x3-copy{position:absolute;z-index:5;left:var(--pad);top:calc(var(--hd) + 50px);max-width:420px}
.x3-copy h2{margin:0 0 14px;font-size:clamp(36px,4.4vw,72px);line-height:.98}
.x3-copy p{margin:0;font-size:16px;line-height:1.55;opacity:.85}
.x3-hint{position:absolute;z-index:5;left:var(--pad);bottom:28px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}

/* FJELL map */
#x3map{height:330vh;background:radial-gradient(70% 60% at 60% 55%,#22394a,#0f1c26 70%);color:#f4f6f7}
#x3map .x3-stage{position:absolute;inset:0;perspective:1600px;perspective-origin:60% 30%;display:flex;align-items:center;justify-content:center}
.x3-plane{position:relative;width:min(80vmin,760px);aspect-ratio:1;transform-style:preserve-3d;margin-left:18vw}
.x3-layer{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}
.x3-lake{position:absolute;left:43%;top:35%;width:14%;height:30%;border-radius:50%;background:radial-gradient(circle at 40% 40%,#9cc3d5,#3f7c98);transform:translateZ(1px);box-shadow:0 0 30px rgba(156,195,213,.5)}
.x3-pin{position:absolute;z-index:3;transform-origin:50% 100%;border:0;background:none;padding:0;cursor:pointer;opacity:0;transition:opacity .6s;color:#0f1e27}
.x3-pin.on{opacity:1}
.x3-pin span{display:block;background:#fff;border-radius:12px;padding:8px 12px;font:600 13px/1.25 "Manrope",sans-serif;white-space:nowrap;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:transform .3s}
.x3-pin span small{display:block;font-weight:500;color:#d8662f}
.x3-pin::after{content:"";display:block;width:2px;height:46px;margin:0 auto;background:linear-gradient(#fff,rgba(255,255,255,.2))}
.x3-pin:hover span{transform:translateY(-4px) scale(1.05)}
.x3-mapcap{position:absolute;z-index:5;right:var(--pad);bottom:30px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:0;text-align:right}
.x3-mapcap b{display:block;font-size:28px;letter-spacing:-.02em;font-weight:300;text-transform:none}

/* SAHAR cube */
#x3cube{height:330vh;background:linear-gradient(180deg,#efe2cc,#e6c99b);color:#3a2418}
#x3cube .x3-stage{position:absolute;inset:0;perspective:1500px;display:flex;align-items:center;justify-content:center}
.x3-box{position:relative;width:min(38vmin,340px);aspect-ratio:1;transform-style:preserve-3d;margin-top:6vh}
.x3-face{position:absolute;inset:0;margin:0;overflow:hidden;border:4px solid #f6eee1;background:#3a2418;cursor:default;transition:box-shadow .4s}
.x3-face img{width:100%;height:100%;object-fit:cover}
.x3-face figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font:italic 400 clamp(16px,1.5vw,22px)/1.1 "DM Serif Display",serif;color:#fff;background:linear-gradient(0deg,rgba(30,15,8,.8),transparent)}
.x3-face figcaption small{display:block;font:600 11px "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffd39a;font-style:normal;margin-top:4px}
.x3-face.flat[data-room]{cursor:pointer}
.x3-face.flat[data-room]:hover{box-shadow:0 0 0 4px #c97a2b;z-index:2}
.x3-cubecap{position:absolute;z-index:5;right:var(--pad);bottom:30px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
#x3cube .x3-done{position:absolute;z-index:5;left:50%;bottom:7vh;transform:translate(-50%,20px);opacity:0;transition:opacity .6s,transform .6s;font-size:13px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
#x3cube.open .x3-done{opacity:1;transform:translate(-50%,0)}

/* NOIR tower */
#x3tower{height:340vh;background:radial-gradient(60% 70% at 50% 80%,#2a0f18,#0a0a0a 70%);color:#efefef}
#x3tower .x3-stage{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 20%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12vh}
.x3-tw{--w:clamp(110px,13vw,190px);--half:calc(var(--w) / 2);--fh:clamp(15px,2.4vh,24px);position:relative;width:var(--w);height:calc(var(--fh) * 21);transform-style:preserve-3d}
.x3-fl{position:absolute;left:0;bottom:0;width:var(--w);height:var(--fh);transform-style:preserve-3d;transition:opacity .2s}
.x3-fl i{position:absolute;inset:0;background:#121216 center/100% 100%;border-top:1px solid #000;backface-visibility:hidden}
.x3-fl.hot i{background:linear-gradient(180deg,#ff6f8f,#e2335c);box-shadow:0 0 30px rgba(255,61,106,.8)}
.x3-roof{position:absolute;left:0;width:var(--w);height:var(--w);bottom:calc(var(--fh) * 21 - var(--half));transform:rotateX(90deg);background:repeating-linear-gradient(45deg,#1b1b20 0 6px,#232329 6px 12px);border:2px solid #ff3d6a;transition:opacity .4s}
.x3-tlabs{position:absolute;left:50%;bottom:12vh;width:0;height:calc(clamp(15px,2.4vh,24px) * 21)}
.x3-tlab{position:absolute;left:calc(clamp(110px,13vw,190px) * .9);bottom:calc((var(--f) - .5) * clamp(15px,2.4vh,24px));display:flex;align-items:center;gap:10px;border:0;background:none;color:#fff;cursor:pointer;opacity:0;transform:translateX(-20px);transition:opacity .5s,transform .6s;white-space:nowrap;font:600 13px "Inter Tight",sans-serif;padding:0}
.x3-tlab::before{content:"";width:60px;height:1px;background:#ff3d6a}
.x3-tlab b{font:400 26px "Anton",Impact,sans-serif;color:#ff3d6a}
.x3-tlab small{display:block;font:400 11px "JetBrains Mono",monospace;color:#8d8d8d}
.x3-tlab.on{opacity:1;transform:none}
.x3-tlab:nth-child(even){left:auto;right:calc(clamp(110px,13vw,190px) * .9);flex-direction:row-reverse;text-align:right}

/* LOFT house */
#x3house{height:300vh;background:#fff0d6;color:#14163a}
#x3house .x3-stage{position:absolute;inset:0;perspective:2400px;display:flex;align-items:center;justify-content:center}
.x3-iso{--W:clamp(170px,22vw,300px);--h:46px;position:relative;width:var(--W);height:var(--W);transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(var(--rz,-45deg));margin:14vh 0 0 18vw}
.x3-lv,.x3-hroof{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(var(--z,0)) rotateZ(var(--tw,0deg));cursor:pointer;background:#14163a}
.x3-lv>.t{position:absolute;inset:0;transform:translateZ(var(--h));background:center/cover;border:3px solid #14163a}
.x3-lv>.w{position:absolute;background:var(--c);border:2px solid #14163a;background-image:repeating-linear-gradient(90deg,transparent 0 14%,rgba(255,255,255,.55) 14% 22%,transparent 22% 33%)}
.x3-lv>.w1{left:0;top:100%;width:100%;height:var(--h);transform-origin:top;transform:rotateX(90deg)}
.x3-lv>.w2{left:0;bottom:100%;width:100%;height:var(--h);transform-origin:bottom;transform:rotateX(-90deg)}
.x3-lv>.w3{left:100%;top:0;width:var(--h);height:100%;transform-origin:left;transform:rotateY(-90deg)}
.x3-lv>.w4{right:100%;top:0;width:var(--h);height:100%;transform-origin:right;transform:rotateY(90deg)}
.x3-lab{position:absolute;left:50%;top:50%;transform:translateZ(calc(var(--h) + 30px)) rotateZ(calc(-1 * (var(--rz,-45deg) + var(--tw,0deg)))) rotateX(-58deg) translate(-50%,-100%);transform-origin:0 0;background:#fff;border:2.5px solid #14163a;border-radius:14px;padding:8px 14px;font:800 15px/1.2 "Bricolage Grotesque",sans-serif;white-space:nowrap;box-shadow:4px 4px 0 #14163a;opacity:0;transition:opacity .4s}
.x3-lab small{display:block;font-weight:600;font-size:12px;color:#f0502d}
.x3-lv.on .x3-lab{opacity:1}
.x3-hroof{background:#ffd23f;border:3px solid #14163a;display:flex;align-items:center;justify-content:center;font:800 64px "Bricolage Grotesque";cursor:default;transform:translateZ(calc(var(--z,0px) + var(--h)))}

@media (max-width:800px){
	.x3-plane{margin:24vh 0 0;width:92vw}
	#x3map .x3-stage{perspective-origin:50% 20%}
	.x3-copy{max-width:none;right:var(--pad);top:calc(var(--hd) + 24px)}
	.x3-copy h2{font-size:34px}
	.x3-copy p{font-size:14px}
	.x3-pin span{font-size:11px;padding:6px 9px}
	.x3-box{width:min(42vw,200px);margin-top:20vh}
	.x3-iso{margin:20vh 0 0;--W:min(46vw,200px);--h:32px}
	.x3-lab{font-size:12px;padding:6px 10px}
	.x3-tlab::before{width:24px}
	.x3-tlab b{font-size:20px}
	.x3-tlab small{display:none}
	#x3tower .x3-stage{padding-bottom:8vh}
	.x3-tlabs{bottom:8vh}
}
@media (min-width:801px){
	.x3-tw{margin-left:22vw}
	.x3-tlabs{left:calc(50% + 11vw)}
}
.x3-iso{margin-top:30vh}
.x3-lab{left:104%;top:104%}
@media (max-width:800px){.x3-iso{margin-top:34vh}}