.joinery-webgl{display:block;width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.webgl-ready{position:relative}.webgl-ready>:not(.joinery-webgl){visibility:hidden!important}.entry-frame.webgl-ready{background:transparent;border-color:transparent;box-shadow:none}.window-stage.webgl-ready{aspect-ratio:3/4;transform:none!important;max-width:440px;width:85%;perspective:none}.joinery-motion.webgl-ready{background:transparent!important;border-color:transparent!important;box-shadow:none!important;transform:none!important;overflow:visible}.showcase-object .joinery-motion.webgl-ready{width:100%;height:100%;max-width:none}.showcase-object:has(.webgl-ready){transform:translateY(var(--object-y,0px))!important}.service-list .joinery-motion.webgl-ready{width:235px;height:240px;max-width:100%}.service-list .garage-motion.webgl-ready,.service-list .gate-motion.webgl-ready{width:280px;height:225px}.entry-frame.webgl-ready{width:min(360px,75vw)}@media(max-width:700px){.window-stage.webgl-ready{max-width:315px;width:85%}.service-list .joinery-motion.webgl-ready{width:200px;height:210px}.service-list .garage-motion.webgl-ready,.service-list .gate-motion.webgl-ready{width:245px;height:200px}}@media(prefers-reduced-motion:reduce){.showcase-object:has(.webgl-ready){transform:none!important}}
/* Refined 3D presentation: the object stays legible through the entrance. */
.entry-frame.webgl-ready{animation:entry-camera 3.2s cubic-bezier(.2,.7,.2,1) both;height:min(430px,51svh);width:min(390px,80vw)}@keyframes entry-camera{0%{transform:scale(.88) translateY(12px)}45%{transform:scale(1)}80%{transform:scale(1.12)}100%{transform:scale(1.18)}}.entry-frame.webgl-ready .joinery-webgl{filter:drop-shadow(0 22px 15px #0005)}.window-stage.webgl-ready{width:95%;max-width:475px;aspect-ratio:1/1.12}.window-stage.webgl-ready:after{content:'';position:absolute;bottom:9%;left:23%;right:15%;height:5%;border-radius:50%;background:#0004;filter:blur(14px);z-index:-1}.joinery-webgl{filter:drop-shadow(0 12px 10px #0002)}.service-list .joinery-motion.webgl-ready{border-radius:26px;background:radial-gradient(ellipse at 55% 40%,#ffe4a8,#f4f0e6 80%)!important;margin-top:14px;margin-bottom:25px}.showcase-object .joinery-webgl{filter:drop-shadow(0 25px 18px #0004)}.service-list .joinery-webgl{filter:drop-shadow(0 8px 8px #66502126)}@media(max-width:700px){.window-stage.webgl-ready{width:96%;max-width:360px}.entry-frame.webgl-ready{height:min(350px,46svh)}.service-list .joinery-motion.webgl-ready{width:220px;height:225px}}@media(max-height:500px){.entry-frame.webgl-ready{height:44vh;width:44vh}}@media(prefers-reduced-motion:reduce){.entry-frame.webgl-ready{animation:none}}
/* Composite-only transitions keep scene changes light. */
.showcase-object.swap{animation:fluid-model-in .65s cubic-bezier(.16,1,.3,1)}@keyframes fluid-model-in{from{opacity:0;translate:16px 10px}to{opacity:1;translate:0 0}}.joinery-webgl,.entry-frame.webgl-ready .joinery-webgl,.showcase-object .joinery-webgl,.service-list .joinery-webgl{filter:none}.window-stage.webgl-ready,.showcase-object{will-change:transform,opacity}.entry-frame.webgl-ready{will-change:transform}.service-list .joinery-motion.webgl-ready{box-shadow:0 10px 25px #66502112!important}@media(prefers-reduced-motion:reduce){.showcase-object.swap{animation:none}}
/* Architectural studio presentation. Branding colors live in the setting. */
.entry-window{background:radial-gradient(ellipse at 50% 46%,#62533b,#303030 64%)}.scene-halo{background:radial-gradient(circle,#efb13e35,#f4ddaa18 46%,transparent 70%)}.scene-beam{background:linear-gradient(90deg,transparent,#ffe8b821,transparent)}.window-stage.webgl-ready:after{bottom:15%;left:22%;right:18%;height:3%;background:#0004;filter:blur(10px)}.service-list .joinery-motion.webgl-ready{background:radial-gradient(ellipse at 53% 35%,#fffdf6,#f3f0e8 85%)!important;border:1px solid #e8e3d6!important}.showcase-object:after{content:'';position:absolute;bottom:7%;left:15%;right:12%;height:4%;border-radius:50%;background:#0004;filter:blur(13px);pointer-events:none;z-index:-1}.entry-frame.webgl-ready{animation:architectural-camera 3.2s cubic-bezier(.25,.7,.25,1) both}@keyframes architectural-camera{from{transform:scale(.94) translateY(8px)}60%{transform:scale(1.04)}to{transform:scale(1.12)}}.door-motion .part-one{background:repeating-linear-gradient(90deg,#b48d61 0 22px,#9f764e 22px 23px,#b48d61 23px 46px);border-color:#333}.door-motion .part-one:after{background:#d4d8da}.shutter-motion .part-one{background:repeating-linear-gradient(to bottom,#f0f0ed 0 9px,#999b99 9px 10px,#fafafa 10px 13px)}.garage-motion .part-one{background:repeating-linear-gradient(to bottom,#3b3e40 0 28px,#242627 28px 30px,#4b4e50 30px 33px)}.gate-motion .joinery-part{border-color:#35383a;background:repeating-linear-gradient(90deg,#35383a 0 15px,transparent 15px 19px)}.window-leaf i{background:linear-gradient(90deg,#eee,#8b9094)}@media(prefers-reduced-motion:reduce){.entry-frame.webgl-ready{animation:none}}
.door-motion .part-one{background:linear-gradient(115deg,#4c5153,#282e31);border-color:#383d3f}.door-motion .part-one:before{inset:9% auto 9% 10%;width:13%;border:2px solid #aeb9bb;border-radius:0;background:linear-gradient(#cadcde,#e4ece9)}.door-motion .part-one:after{right:17%;top:29%;width:4px;height:40%;border-radius:3px;background:linear-gradient(90deg,#eee,#929b9f)}

/* A quiet, short entrance: one window opens, then gives way to the homepage. */
.entry-simple{background:radial-gradient(ellipse at 50% 47%,#fff3d5,#faf8f3 66%);padding:18px 18px 76px;gap:14px;animation:simple-entry-reveal .5s 2.25s forwards;overflow:hidden;isolation:isolate}
.entry-simple .entry-brand{position:relative;top:auto;left:auto;color:#343434;font-size:18px;letter-spacing:2px;z-index:2;animation:none}
.entry-simple .entry-brand span{color:#a67321}
.entry-simple .entry-frame,.entry-simple .entry-frame.webgl-ready{position:relative;inset:auto;width:min(420px,86vw);height:min(450px,58svh);min-height:0;max-width:none;border:0;border-radius:0;box-shadow:none;background:transparent;margin:0;aspect-ratio:auto;transform:none;perspective:1000px;animation:simple-entry-approach 2.25s ease-out both}
.entry-simple>p{margin:0;color:#6c6458;font-size:12px;letter-spacing:.6px;animation:none}
.entry-simple .skip-entry{position:absolute;left:50%;right:auto;bottom:24px;transform:translateX(-50%);background:#fff9ef;border:1px solid #d8cfbd;color:#343434;z-index:3;white-space:nowrap;min-height:44px}
.entry-simple .skip-entry:hover{background:#efb13e;border-color:#efb13e}
.simple-window{position:absolute;left:50%;top:50%;width:70%;height:80%;transform:translate(-50%,-50%);border:9px solid #f5f6f3;box-shadow:0 0 0 2px #aaa99e,3px 4px 0 #999990,0 15px 28px #70624824;perspective:1000px}
.simple-window-light{position:absolute;inset:0;background:radial-gradient(ellipse at 63% 35%,#fff2bf,#edf2eb 70%)}
.simple-sash{position:absolute;top:0;bottom:0;width:50%;border:7px solid #f7f8f5;background:linear-gradient(120deg,#c4e2e850,transparent 45%,#ffffff90 46%,#ddeff150 48%);transform-style:preserve-3d;backface-visibility:visible}
.simple-left{left:0;transform-origin:left;animation:simple-open-left 1.45s .22s cubic-bezier(.2,.7,.2,1) forwards}
.simple-right{right:0;transform-origin:right;animation:simple-open-right 1.45s .25s cubic-bezier(.2,.7,.2,1) forwards}
.simple-sash i{position:absolute;top:51%;width:4px;height:25px;border-radius:3px;background:linear-gradient(90deg,#eee,#8a8d87)}
.simple-left i{right:3px}.simple-right i{left:3px}
@keyframes simple-open-left{to{transform:rotateY(-88deg)}}@keyframes simple-open-right{to{transform:rotateY(88deg)}}
@keyframes simple-entry-approach{from{transform:scale(.96)}to{transform:scale(1.04)}}
@keyframes simple-entry-reveal{to{opacity:0;visibility:hidden}}
@media(max-width:700px){.entry-simple .entry-brand{font-size:16px;letter-spacing:1px}.entry-simple>p{font-size:11px}.entry-simple .skip-entry{font-size:12px;padding:12px 18px}}
@media(max-height:500px){.entry-simple{padding:12px 12px 68px;gap:10px}.entry-simple .entry-frame,.entry-simple .entry-frame.webgl-ready{height:54svh;width:min(380px,80vw)}.entry-simple .entry-brand{font-size:14px}.entry-simple>p{font-size:11px}.entry-simple .skip-entry{bottom:15px;font-size:11px;padding:9px 17px}}
@media(prefers-reduced-motion:reduce){.entry-simple{display:none}.simple-sash{animation:none}}