.formats-preview-page{margin:0;min-height:100vh;background:#060403;font-family:Arial,Helvetica,sans-serif;color-scheme:dark}
.formats-preview-page:has(.formats-scene[data-device="mobile"]){max-width:470px;margin:0 auto}
.formats-scene{font-family:Arial,Helvetica,sans-serif;color-scheme:dark;color:#e8d5b0;font-synthesis:none}
.formats-scene,.formats-scene *{box-sizing:border-box}
.formats-scene a{color:inherit}
.formats-scene h1,.formats-scene h2,.formats-scene p{margin:0}
.formats-scene{--door-ease:cubic-bezier(.2,.6,.3,1);position:relative;isolation:isolate;min-height:700px;height:100svh;overflow:hidden;background:#060403}
.formats-scene .formats-viewport{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.formats-scene .formats-world{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;transition:transform 1.55s var(--door-ease);will-change:transform}
.formats-scene .scene-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 42% 23%,#55321926,transparent 51%),radial-gradient(ellipse at 84% 69%,#5e210f1c,transparent 40%)}
.formats-scene .scene-floor,.formats-scene .scene-ribbon{position:absolute;inset:0;pointer-events:none;background:url('assets/door-scene.png') center/100% 100% no-repeat}
.formats-scene .scene-floor{opacity:.6;mask-image:linear-gradient(transparent 76%,#000 82%)}
.formats-scene .scene-ribbon{background-image:url('../assets/portfolio-reference-desktop.png');opacity:.83;-webkit-mask-image:linear-gradient(transparent 77%,#000 88%),radial-gradient(ellipse 25% 12% at 50% 86%,transparent 85%,#000 100%);mask-image:linear-gradient(transparent 77%,#000 88%),radial-gradient(ellipse 25% 12% at 50% 86%,transparent 85%,#000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.formats-scene .formats-doors{position:absolute;inset:15.5% 11.7% 22%;display:flex;justify-content:space-between;align-items:stretch;gap:5.5vw}
.formats-scene .format-door{--leaf-angle:0deg;--material-light:.82;position:relative;flex:1;max-width:214px;min-width:0;isolation:isolate}
.formats-scene .door-name{position:absolute;top:-52px;left:-10%;width:120%;font-size:clamp(14px,1.196vw,22px);font-weight:400;letter-spacing:.21em;text-align:center;color:#d4b477;line-height:1.45;transition:opacity .4s var(--door-ease)}
.formats-scene .door-space{position:relative;left:-25%;width:150%;height:100%;perspective:1300px;transform-style:preserve-3d;pointer-events:none}
.formats-scene .door-name{pointer-events:none}
.formats-scene .door-aperture,.formats-scene .door-frame{position:absolute;inset:0}
.formats-scene .door-aperture{left:5%;right:5%;top:1%;bottom:1%;overflow:hidden;clip-path:polygon(50% 0,69% 5%,87% 12%,100% 23%,100% 100%,0 100%,0 23%,13% 12%,31% 5%);background:#080605;transform:translateZ(-4px)}
.formats-scene .door-aperture:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 24px #eeb26a55,inset 0 0 8px #070403;background:linear-gradient(90deg,#8a1b1026,transparent 40%,#f0b56826);transition:opacity .7s var(--door-ease)}
.formats-scene .format-video{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .7s var(--door-ease)}
.formats-scene .door-frame{pointer-events:none;transform:translateZ(-1px);filter:drop-shadow(0 0 3px #c0792626);transition:filter .8s var(--door-ease)}
.formats-scene .door-frame svg{display:block;width:100%;height:100%;overflow:visible}
.formats-scene .door-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;transition:transform 1.35s var(--door-ease)}
.formats-scene .door-leaf--left{left:0;transform-origin:8.411215% 52%;transform:rotateY(calc(-1 * var(--leaf-angle)))}
.formats-scene .door-leaf--right{left:50%;transform-origin:91.588785% 52%;transform:rotateY(var(--leaf-angle))}
.formats-scene .leaf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d}
.formats-scene .leaf-front{transform:translateZ(2px)}
.formats-scene .leaf-back{transform:rotateY(180deg) translateZ(2px)}
.formats-scene .door-surface{display:block;width:100%;height:100%;overflow:hidden;filter:brightness(var(--material-light));transition:filter .85s var(--door-ease)}
.formats-scene .leaf-back .door-surface{filter:brightness(.51) saturate(.78)}
.formats-scene .leaf-edge,.formats-scene .leaf-hinge{position:absolute;display:block;width:4px;background:linear-gradient(90deg,#291b10,#b88e52 28%,#f0d39c 47%,#76522e 65%,#20180f);backface-visibility:visible}
.formats-scene .leaf-edge{top:.72%;bottom:.9%;transform-origin:50% 50%;transform:rotateY(90deg)}
.formats-scene .leaf-hinge{top:22%;bottom:.9%;transform:rotateY(90deg);background:linear-gradient(90deg,#100b07,#886539,#d5b580,#352213)}
.formats-scene .door-leaf--left .leaf-edge{right:-2px}
.formats-scene .door-leaf--right .leaf-edge{left:-2px}
.formats-scene .door-leaf--left .leaf-hinge{left:calc(8.411215% - 2px)}
.formats-scene .door-leaf--right .leaf-hinge{right:calc(8.411215% - 2px)}
.formats-scene .contact-shadow{position:absolute;left:-8%;right:-8%;top:97.5%;height:7%;background:radial-gradient(ellipse,#000d 0%,#0008 30%,transparent 70%);transform:skewX(-14deg);filter:blur(2px)}
.formats-scene .threshold-light{position:absolute;left:-35%;right:-35%;top:94%;height:16%;background:radial-gradient(ellipse,#dda45a3d,transparent 67%);filter:blur(8px);opacity:.72;transition:opacity .8s var(--door-ease),filter .8s var(--door-ease)}
.formats-scene .threshold-edge{position:absolute;top:99.05%;left:4.2%;right:4.2%;height:2px;background:linear-gradient(90deg,#332315,#e9c48b9c 18%,#b68340c7 50%,#f0d6a48c 80%,#2a1b10);box-shadow:0 2px 3px #000c,0 0 8px #d5944238;transform:translateZ(2px)}
.formats-scene .door-reflection{position:absolute;top:99.1%;left:0;width:100%;height:23%;opacity:.13;filter:blur(1.1px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#0009,transparent 85%);mask-image:linear-gradient(#0009,transparent 85%)}
.formats-scene .reflection-art{position:absolute;inset:0;perspective:1300px;transform:scaleY(-1);transform-style:preserve-3d}
.formats-scene .door-reflection .door-surface{filter:brightness(.65) saturate(.65)}
.formats-scene .door-trigger{appearance:none;-webkit-appearance:none;touch-action:manipulation;position:absolute;inset:-55px -25% 0;z-index:5;display:block;width:150%;border:0;padding:0;background:transparent;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
.formats-scene .door-trigger:focus{outline:none}
.formats-scene.keyboard-navigation .format-door:has(.door-trigger:focus-visible) .door-name{text-decoration:underline;text-underline-offset:.3em}
.formats-scene[data-state="hover"] .is-selected{--leaf-angle:27deg;--material-light:1.04}
.formats-scene[data-state="hover"] .format-door:not(.is-selected){--material-light:.69}
.formats-scene[data-state="opened"] .is-selected{--leaf-angle:69deg;--material-light:.96}
.formats-scene[data-state="opened"] .format-door:not(.is-selected){--material-light:.30}
.formats-scene[data-state="hover"] .is-selected .format-video,.formats-scene[data-state="opened"] .is-selected .format-video{opacity:1}
.formats-scene[data-state="hover"] .is-selected .door-aperture:after,.formats-scene[data-state="opened"] .is-selected .door-aperture:after{opacity:1}
.formats-scene[data-state="hover"] .is-selected .door-frame,.formats-scene[data-state="opened"] .is-selected .door-frame{filter:brightness(1.09) drop-shadow(0 0 5px #eab66944)}
.formats-scene[data-state="hover"] .is-selected .threshold-light,.formats-scene[data-state="opened"] .is-selected .threshold-light{background:radial-gradient(ellipse,#ffca7552,#941f1826 38%,transparent 68%);opacity:1}
.formats-scene[data-state="opened"] .format-door:not(.is-selected) .door-frame{filter:brightness(.34)}
.formats-scene[data-state="opened"] .format-door:not(.is-selected) .threshold-light{opacity:.25}
.formats-scene[data-state="opened"] .door-name{opacity:0}
.formats-scene[data-state="opened"] .door-trigger{visibility:hidden;pointer-events:none}
.formats-scene .global-dust{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.formats-scene .formats-back{position:absolute;z-index:8;right:8.7%;top:5.5%;font-family:inherit;font-size:11px;font-weight:400;line-height:normal;letter-spacing:.18em;text-decoration:none;color:#c7b28b;padding:10px 0;cursor:pointer;background:transparent;border:0}
.formats-scene .formats-back[hidden]{display:none}
.formats-scene .formats-back:focus-visible{outline:1px solid #dfc287;outline-offset:6px}
.formats-scene .format-copy{position:absolute;z-index:6;left:57%;top:14%;width:34%;max-width:570px;max-height:77%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b49050 transparent;padding-right:10px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity .4s var(--door-ease),transform .5s var(--door-ease),visibility 0s .5s}
.formats-scene[data-state="opened"] .format-copy{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .7s .5s var(--door-ease),transform .7s .5s var(--door-ease),visibility 0s}
.formats-scene[data-text-side="left"] .format-copy{left:9%;width:34%}
.formats-scene .format-index{font-size:10px;letter-spacing:.2em;color:#b49050;display:flex;align-items:center;gap:20px;margin-bottom:18px}
.formats-scene .format-index span{width:40px;height:1px;background:#b49050}
.formats-scene .format-copy h1{font-weight:300;font-size:clamp(34px,3.4vw,58px);line-height:1.15;letter-spacing:.31em;color:#f3e3bb}
.formats-scene .format-lead{font-size:clamp(16px,1.24vw,23px);line-height:1.5;font-weight:400;color:#d6bb85;margin-top:19px;max-width:470px}
.formats-scene .format-points{margin-top:35px;display:grid;gap:24px}
.formats-scene .format-points section{position:relative;padding-left:32px}
.formats-scene .format-points section:before{content:'';position:absolute;left:0;top:8px;width:18px;height:1px;background:#b99759}
.formats-scene .format-points h2{font-weight:400;font-size:clamp(11px,.87vw,16px);line-height:1.4;letter-spacing:.12em;color:#e6dfd0}
.formats-scene .format-points p{font-size:clamp(13px,.99vw,18px);line-height:1.6;color:#b8b0a2;margin-top:7px;max-width:455px}
.formats-scene .formats-mobile-list{display:none}
.formats-scene[data-device="mobile"]{min-height:740px;height:var(--view-height,100svh)}
.formats-scene[data-device="mobile"] .formats-viewport{height:var(--view-height,100svh);bottom:auto}
.formats-scene[data-device="mobile"] .formats-doors{gap:92px}
.formats-scene[data-device="mobile"] .door-name{font-size:20px}
.formats-scene[data-device="mobile"][data-state="closed"] .formats-doors{visibility:hidden}
.formats-scene[data-device="mobile"] .formats-mobile-list{position:absolute;z-index:6;inset:8% 8% 12%;display:grid;grid-template-rows:repeat(4,1fr);transition:opacity .3s var(--door-ease),visibility 0s}
.formats-scene .format-list-item{position:relative;appearance:none;-webkit-appearance:none;touch-action:manipulation;padding:0;margin:0;min-height:0;width:100%;text-align:left;font-family:inherit;background:transparent;border:0;border-bottom:1px solid #c398552b;color:#d4b477;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.formats-scene .format-list-item:focus{outline:none}
.formats-scene .format-list-item:focus-visible .list-name{text-decoration:underline;text-underline-offset:.3em}
.formats-scene .list-name{position:absolute;top:47%;left:40%;font-size:15px;line-height:1.45;font-weight:400;letter-spacing:.18em;pointer-events:none}
.formats-scene .list-door{position:absolute;left:-4.25%;top:7%;width:43.5%;height:230%;--leaf-angle:0deg;--material-light:.82;pointer-events:none}
.formats-scene .format-list-item:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#090504,transparent 28%);pointer-events:none}
.formats-scene[data-device="mobile"][data-state="opened"] .formats-mobile-list{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--door-ease),visibility 0s .25s}
.formats-scene[data-device="mobile"][data-state="opened"]{height:auto;min-height:100svh;padding:calc(var(--view-height,100svh) + 24px) 30px 85px}
.formats-scene[data-device="mobile"] .format-copy{display:none;position:relative;left:auto;top:auto;width:auto;max-width:none;max-height:none;overflow:visible;padding:0}
.formats-scene[data-device="mobile"][data-state="opened"] .format-copy{display:block}
.formats-scene[data-device="mobile"] .format-copy h1{font-size:34px;letter-spacing:.28em}
.formats-scene[data-device="mobile"] .format-index{margin-bottom:14px}
.formats-scene[data-device="mobile"] .format-lead{font-size:17px;line-height:1.55;margin-top:20px}
.formats-scene[data-device="mobile"] .desktop-break{display:none}
.formats-scene[data-device="mobile"] .format-points{margin-top:30px;gap:29px}
.formats-scene[data-device="mobile"] .format-points h2{font-size:12px;line-height:1.6;letter-spacing:.11em}
.formats-scene[data-device="mobile"] .format-points p{font-size:15px;line-height:1.65}
.formats-scene[data-device="mobile"] .format-points section{padding-left:26px}
.formats-scene[data-device="mobile"] .formats-back{position:fixed;top:16px;left:max(20px,calc((100vw - 470px)/2 + 20px));right:auto;padding:10px;font-size:10px;background:#090504e8}
@media(max-width:900px){
.formats-scene[data-device="desktop"] .format-copy{top:13%;width:36%;left:56%}
.formats-scene[data-device="desktop"][data-text-side="left"] .format-copy{left:9%;width:34%}
.formats-scene[data-device="desktop"] .format-points{gap:18px;margin-top:24px}
.formats-scene[data-device="desktop"] .format-points p{font-size:13px}}
.formats-scene.is-measuring .formats-world{transition:none!important}
@media(prefers-reduced-motion:reduce){
.formats-scene.is-interactive *{transition:none!important;scroll-behavior:auto!important}}

.formats-scene .list-frame{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}