/* Three schematic windows exist only during assembly; one finished glass rim. */
@property --glass-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.elements-study .assembly-scene{perspective:1800px;margin-top:54px;margin-bottom:48px;isolation:isolate}
.elements-study .assembly-stage{position:relative;z-index:1}
.merge-windows{display:none;position:absolute;inset:0;perspective:1800px;pointer-events:none;z-index:0}
.merge-window{position:absolute;inset:0;border:1px solid #829cc58c;border-radius:18px;background:linear-gradient(135deg,#1b304ce6,#0d1929eb 55%,#272440de);box-shadow:inset 0 1px 1px #d4edff40,0 16px 25px #0005;transform-origin:center;overflow:hidden}
.merge-window-1{--layer-y:76px;--layer-scale:.98;--layer-angle:18deg;z-index:0}
.merge-window-2{--layer-y:38px;--layer-scale:.96;--layer-angle:18deg;z-index:1}
.merge-window-3{--layer-y:0px;--layer-scale:.94;--layer-angle:18deg;z-index:2}
.merge-toolbar{position:absolute;left:2%;right:2%;top:3%;height:7%;display:flex;align-items:center;gap:6px;border-bottom:1px solid #7891b443}
.merge-toolbar i{width:5px;height:5px;border-radius:50%;background:#92b4d36b}
.merge-sidebar{position:absolute;left:2%;top:14%;bottom:4%;width:18%;border-radius:9px;border:1px solid #91acc12e;background:repeating-linear-gradient(180deg,#8eafcf14 0 12%,transparent 12% 16%)}
.merge-content{position:absolute;left:23%;right:3%;top:14%;bottom:4%;display:grid;grid-template-columns:repeat(2,1fr);gap:5%}
.merge-content i{border-radius:9px;border:1px solid #93accc30;background:linear-gradient(140deg,#89aacc14,transparent)}
.elements-study .is-assembling .merge-windows{display:block}
.elements-study .is-assembling .merge-window{animation:windows-unite 8.3s cubic-bezier(.4,0,.2,1) both}
.elements-study .is-assembling .glass-rim{animation:finished-glass 8.3s ease-in-out both}
@keyframes windows-unite{0%,16%{transform:translateY(var(--layer-y)) rotateX(var(--layer-angle)) scale(var(--layer-scale));opacity:1}74%{opacity:.8}86%,100%{transform:none;opacity:0}}
@keyframes finished-glass{0%,65%{opacity:0}98%,100%{opacity:1}}
.elements-study .assembly-stage{border:0!important;border-radius:16px!important;background:#090b0d!important;box-shadow:0 28px 65px #0009!important}
.elements-study .assembly-stage .product-image{aspect-ratio:var(--assembly-aspect,10666/5469);border-radius:16px;background:#090b0d;transform-style:preserve-3d}
.elements-study .assembly-stage .product-image>img{border-radius:16px;display:block}
.glass-rim{position:absolute;inset:-11px;border-radius:26px;pointer-events:none;z-index:6;border:1px solid #b1d6ea80;box-shadow:inset 0 1px 1px #ffffffa1,inset 0 -2px 3px #3b5c9266,0 0 18px #76aade29,0 13px 24px #0008}
.glass-rim:before,.glass-rim:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:10px;pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass-rim:before{background:conic-gradient(from var(--glass-angle),#334052aa 0deg,#aecbe4aa 36deg,#e1fbff 43deg,#82bed69c 49deg,#487592a6 64deg,#25374fb0 92deg,#a397d1ba 139deg,#ecdbfef2 153deg,#7768aabd 164deg,#334455ba 204deg,#8dbfd0bd 245deg,#e7fafae8 253deg,#6c9cb9aa 263deg,#334052aa 360deg);animation:glass-reflections 16s linear infinite}
.glass-rim:after{background:linear-gradient(125deg,transparent 20%,#ffffff20 40%,#e9faffae 49.4%,#ffffffd9 50%,#a7c8ea36 50.8%,transparent 62%);background-size:280% 280%;animation:glass-sheen 11s ease-in-out infinite alternate;opacity:.7;box-shadow:inset 0 0 3px #fff}
@keyframes glass-reflections{to{--glass-angle:360deg}}
@keyframes glass-sheen{from{background-position:0 10%}to{background-position:100% 90%}}
.ui-pieces{display:none;position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}
.elements-study .ui-piece{display:block;position:absolute;max-width:none;border-radius:0!important;transform-origin:center;backface-visibility:hidden;pointer-events:none}
.elements-study .is-assembling .assembly-stage{animation:single-window-settle 8.3s cubic-bezier(.3,0,.2,1) both;transform-style:preserve-3d}
.elements-study .is-assembling .ui-pieces{display:block}
.elements-study .is-assembling .ui-piece{animation:individual-arrival 6.8s cubic-bezier(.33,0,.17,1) var(--delay) both}
.elements-study .is-assembling .product-image>img{animation:window-reveal 8.3s linear both}
.elements-study .is-assembling .zoom-label{visibility:hidden}
@keyframes single-window-settle{0%,14%{transform:translateY(-38px) rotateX(18deg) rotateY(-3deg) scale(.92)}88%,100%{transform:none}}
@keyframes individual-arrival{0%,10%{transform:translate3d(var(--dx),var(--dy),var(--depth));opacity:.98;filter:drop-shadow(0 16px 12px #0008)}94%,100%{transform:translate3d(0,0,0);opacity:1;filter:drop-shadow(0 0 0 transparent)}}
@keyframes window-reveal{0%,88%{opacity:0}100%{opacity:1}}
.elements-study .is-offscreen .glass-rim:before,.elements-study .is-offscreen .glass-rim:after{animation-play-state:paused}
@media(max-width:800px){.elements-study .assembly-scene{width:calc(100% - 20px)}.elements-study .glass-rim{inset:-7px;border-radius:22px}.elements-study .glass-rim:before,.elements-study .glass-rim:after{padding:6px}.elements-study .is-assembling .ui-piece{--depth:0px!important;--dx:0px!important;--dy:12px!important}.elements-study .is-assembling .assembly-stage{animation-name:single-window-mobile}}
@keyframes single-window-mobile{0%,14%{transform:translateY(-12px) scale(.94)}88%,100%{transform:none}}
@media(max-width:800px){.elements-study .assembly-scene{margin-top:30px;margin-bottom:18px}.merge-window-1{--layer-y:30px;--layer-angle:12deg}.merge-window-2{--layer-y:16px;--layer-angle:12deg}.merge-window-3{--layer-y:2px;--layer-angle:12deg}.merge-toolbar{gap:3px}.merge-toolbar i{width:3px;height:3px}}
@media(prefers-reduced-motion:reduce){.elements-study .merge-windows{display:none!important}.elements-study .glass-rim{opacity:1!important;animation:none!important}}
.elements-study.no-motion .merge-windows{display:none!important}.elements-study.no-motion .glass-rim{opacity:1!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.elements-study .ui-pieces{display:none!important}.elements-study .product-image>img{opacity:1!important;animation:none!important}.elements-study .glass-rim:before,.elements-study .glass-rim:after{animation:none!important}}
.elements-study.no-motion .ui-pieces{display:none!important}.elements-study.no-motion .product-image>img{opacity:1!important;animation:none!important}.elements-study.no-motion .assembly-stage{transform:none!important}
