.uh-doors{padding:clamp(56px,11vh,130px) var(--gutter);border-bottom:1px solid var(--line);scroll-margin-top:clamp(70px,12vh,110px)}.uh-doors-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}.uh-doors-cue{display:inline-flex;align-items:center;gap:.75em;white-space:nowrap}.uh-doors-cue i{font-style:normal;color:var(--y);transition:transform .4s var(--ease)}.uh-doors:hover .uh-doors-cue i{transform:translate(6px)}.uh-doors-rail{display:flex;margin-top:clamp(20px,3.4vh,38px);min-height:clamp(400px,58vh,620px);border:1px solid var(--line);background:var(--k)}.uh-door{position:relative;flex:1 1 0%;min-width:0;display:block;padding:clamp(22px,2.2vw,38px);overflow:hidden;isolation:isolate;border-left:1px solid var(--line);transition:flex-grow .52s var(--ease),background-color .45s ease,box-shadow .45s ease}.uh-door:first-child{border-left:0}.uh-doors-rail:hover .uh-door,.uh-doors-rail:focus-within .uh-door{flex-grow:.9}.uh-doors-rail:hover .uh-door:hover,.uh-doors-rail:focus-within .uh-door:focus-visible{flex-grow:1.5;background:#0c0a08;box-shadow:inset 1px 0 #f0cf1e80,inset -1px 0 #f0cf1e80}.uh-door:before,.uh-door:after{content:"";position:absolute;left:-1px;right:-1px;height:2px;background:var(--y);z-index:4;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.uh-door:before{top:0}.uh-door:after{bottom:0}.uh-door:hover:before,.uh-door:hover:after,.uh-door:focus-visible:before,.uh-door:focus-visible:after{transform:scaleX(1)}.uh-doors .uh-door:focus-visible{outline:2px solid var(--y);outline-offset:-5px}.uh-door-in{position:relative;z-index:2;display:block}.uh-door-n{display:block;font-family:var(--f-util);font-size:12px;letter-spacing:.18em;color:var(--y)}.uh-door-w{display:block;margin-top:clamp(14px,2vh,26px);font-family:var(--f-heavy);font-stretch:74%;font-weight:800;font-size:clamp(1.9rem,3.4vw,3.5rem);line-height:.86;letter-spacing:-.035em;text-transform:uppercase;color:var(--w)!important}.uh-door-rule{display:block;width:34px;height:3px;background:var(--y);margin:clamp(14px,2vh,22px) 0 0;transition:width .5s var(--ease)}.uh-door:hover .uh-door-rule{width:58px}.uh-door-c{display:block;margin-top:clamp(12px,1.6vh,18px);font-family:var(--f-heavy);font-stretch:84%;font-weight:800;font-size:clamp(13px,1.05vw,15px);letter-spacing:.02em;text-transform:uppercase;color:var(--y)}.uh-door-d{display:block;margin-top:9px;max-width:24ch;color:var(--grey);font-size:clamp(13px,1vw,15px);line-height:1.42;transition:color .4s ease}.uh-door:hover .uh-door-d{color:#ffffffd1}.uh-door-fx{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:.3;transition:opacity .6s var(--ease);-webkit-mask-image:linear-gradient(to top,#000 34%,rgba(0,0,0,.4) 64%,transparent 90%);mask-image:linear-gradient(to top,#000 34%,rgba(0,0,0,.4) 64%,transparent 90%)}.uh-door:hover .uh-door-fx,.uh-door:focus-visible .uh-door-fx{opacity:1}.uh-door-fx i{position:absolute;display:block}.uh-door-fx .uh-fx-img{top:0;right:0;bottom:0;left:0;opacity:.42;background-size:cover;background-position:center bottom}.uh-door--play .uh-fx-a{left:-60%;right:-60%;bottom:-14%;height:64%;background-image:repeating-linear-gradient(to right,rgba(240,207,30,.3) 0 1px,transparent 1px 56px),repeating-linear-gradient(to bottom,rgba(240,207,30,.22) 0 1px,transparent 1px 40px);transform:perspective(300px) rotateX(64deg);transform-origin:50% 100%}.uh-door--play .uh-fx-b{left:0;right:0;bottom:24%;height:34%;background:radial-gradient(58% 100% at 50% 100%,rgba(240,207,30,.6),rgba(240,207,30,.13) 44%,transparent 72%);filter:blur(10px)}.uh-door--play .uh-door-fx:before,.uh-door--play .uh-door-fx:after{content:"";position:absolute;width:15px;height:15px;bottom:15%;border:1px solid rgba(240,207,30,.5)}.uh-door--play .uh-door-fx:before{left:7%;border-right:0;border-top:0}.uh-door--play .uh-door-fx:after{right:7%;border-left:0;border-top:0}.uh-door--pixels .uh-fx-a,.uh-door--pixels .uh-fx-b{top:-40px;right:0;bottom:-40px;left:0}.uh-door--pixels .uh-fx-a{background-image:linear-gradient(rgba(240,207,30,.55) 3px,transparent 3px);background-size:19px 19px;-webkit-mask-image:linear-gradient(90deg,#000 3px,transparent 3px);mask-image:linear-gradient(90deg,#000 3px,transparent 3px);-webkit-mask-size:19px 19px;mask-size:19px 19px}.uh-door--pixels .uh-fx-b{background-image:linear-gradient(rgba(255,255,255,.28) 2px,transparent 2px);background-size:31px 31px;-webkit-mask-image:linear-gradient(90deg,#000 2px,transparent 2px);mask-image:linear-gradient(90deg,#000 2px,transparent 2px);-webkit-mask-size:31px 31px;mask-size:31px 31px}.uh-door--pixels:hover .uh-fx-a{animation:uh-door-drift-a 9s linear infinite}.uh-door--pixels:hover .uh-fx-b{animation:uh-door-drift-b 15s linear infinite}@keyframes uh-door-drift-a{0%{transform:translateY(0)}to{transform:translateY(19px)}}@keyframes uh-door-drift-b{0%{transform:translateY(0)}to{transform:translateY(-31px)}}.uh-door--horizon .uh-fx-a{left:50%;bottom:-6%;width:240%;aspect-ratio:1;transform:translate(-50%);border-radius:50%;background:#000;box-shadow:inset 0 3px 7px #f0cf1ed9,inset 0 22px 50px #f0cf1e12,0 0 60px 6px #f0cf1e33,0 0 170px 44px #f0cf1e17}.uh-door--horizon .uh-fx-b{left:-50%;right:-50%;bottom:0;height:30%;background-image:repeating-linear-gradient(to right,rgba(240,207,30,.16) 0 1px,transparent 1px 60px),repeating-linear-gradient(to bottom,rgba(240,207,30,.12) 0 1px,transparent 1px 46px);transform:perspective(320px) rotateX(70deg);transform-origin:50% 100%}.uh-door--diagnostic .uh-fx-a{top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.09) 0 1px,transparent 1px 8px)}.uh-door--diagnostic .uh-fx-b{left:50%;bottom:13%;width:min(64%,185px);aspect-ratio:1;transform:translate(-50%);border:1px solid rgba(255,255,255,.22);border-radius:50%}.uh-door--diagnostic .uh-fx-b:before,.uh-door--diagnostic .uh-fx-b:after{content:"";position:absolute;left:50%;top:50%;background:#ffffff61}.uh-door--diagnostic .uh-fx-b:before{width:15px;height:1px;transform:translate(-50%,-50%)}.uh-door--diagnostic .uh-fx-b:after{width:1px;height:15px;transform:translate(-50%,-50%)}.uh-door--diagnostic .uh-door-fx:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;background:linear-gradient(to bottom,transparent 0%,rgba(240,207,30,.5) 3%,transparent 6%);background-size:100% 300%;background-position:0 -100%}.uh-door--diagnostic:hover .uh-door-fx:before{opacity:1;animation:uh-door-sweep 3.8s linear infinite}@keyframes uh-door-sweep{0%{background-position:0 -100%}to{background-position:0 200%}}.uh-door--hardware .uh-fx-a,.uh-door--hardware .uh-fx-b{bottom:12%;left:50%;width:min(76%,235px);aspect-ratio:4/2.9;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:linear-gradient(158deg,#ffffff0d,#fff0 62%);transition:transform .6s var(--ease)}.uh-door--hardware .uh-fx-a{transform:translate(-58%) rotate(-9deg)}.uh-door--hardware .uh-fx-b{transform:translate(-42%) rotate(6deg);border-color:#ffffff45}.uh-door--hardware:hover .uh-fx-a{transform:translate(-63%) rotate(-12deg)}.uh-door--hardware:hover .uh-fx-b{transform:translate(-37%) rotate(9deg)}@media(max-width:860px){.uh-doors{padding:clamp(44px,8vh,80px) var(--gutter)}.uh-doors-cue{white-space:normal}.uh-doors-rail{display:block;min-height:0}.uh-door{border-left:0;border-top:1px solid var(--line);padding:clamp(16px,3.4vw,22px) 0 clamp(18px,3.6vw,24px);overflow:visible}.uh-door:first-child{border-top:0}.uh-doors-rail:hover .uh-door,.uh-doors-rail:focus-within .uh-door,.uh-doors-rail:hover .uh-door:hover,.uh-doors-rail:focus-within .uh-door:focus-visible{flex-grow:1;background:transparent;box-shadow:none}.uh-door:before,.uh-door:after{display:none}.uh-doors .uh-door:focus-visible{outline-offset:3px}.uh-door-fx{display:none}.uh-door-n{display:inline-block;vertical-align:middle;font-size:11px}.uh-door-w{display:inline-block;vertical-align:middle;margin:0 0 0 .6em;font-size:clamp(1.75rem,7.5vw,2.3rem)}.uh-door-rule{margin-top:12px;width:26px;height:2px}.uh-door-c{margin-top:10px}.uh-door-d{margin-top:6px;max-width:42ch}}@media(prefers-reduced-motion:reduce){.uh-doors-rail:hover .uh-door,.uh-doors-rail:focus-within .uh-door,.uh-doors-rail:hover .uh-door:hover,.uh-doors-rail:focus-within .uh-door:focus-visible{flex-grow:1}.uh-door:before,.uh-door:after{transform:scaleX(1)}.uh-door-fx{opacity:.45}.uh-door-fx i,.uh-door-fx:before{animation:none!important}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/utopia-doors.css.map */