.beyond-plan{isolation:isolate;background:radial-gradient(ellipse at 50% 50%,#30251c,#211912);perspective:1000px;height:150dvh;min-height:900px;position:relative;overflow:hidden;color:#f4f0e9;font-family:Archivo,Arial,sans-serif}
.beyond-plan *{box-sizing:border-box}
.beyond-intro{font-size:14px;line-height:1.6;position:absolute;top:8%;left:6%;z-index:4}
.beyond-intro p{margin:0;font:inherit}.beyond-intro span{font-family:'Bodoni Moda',Georgia,serif;font-size:24px;font-style:italic}
.beyond-title{z-index:1;letter-spacing:-.08em;white-space:nowrap;margin:0;font-size:clamp(100px,20vw,360px);font-weight:900;line-height:.79;position:absolute;top:22%;left:-3%;color:#f4f0e9;transform:translateX(var(--title-x,0px));will-change:transform}
.beyond-title span{padding-left:11vw}
.beyond-object{position:absolute;will-change:transform;transform:translate3d(var(--object-x,0px),var(--object-y,0px),0)}
.beyond-object figure{height:100%;width:100%;margin:0;display:flex;flex-direction:column;justify-content:center;position:relative;animation:beyond-orbit 9s ease-in-out infinite;transform-style:preserve-3d}
.beyond-object img{width:100%;height:auto;max-height:calc(100% - 42px);object-fit:contain;filter:drop-shadow(0 35px 30px #120b0880);display:block}
.beyond-object figcaption{font:600 14px/1.5 Archivo,Arial,sans-serif;letter-spacing:.13em;color:#fff;margin-top:20px;align-self:start;text-shadow:0 2px 10px #0009}
.beyond-object[data-slot="left"]{z-index:0;width:28%;height:62%;top:32%;left:-3%;--angle:9deg;--depth:0deg}.beyond-object.plan figcaption{margin-left:18%}
.beyond-object[data-slot="center"]{z-index:3;width:49%;height:76%;top:12%;left:25%;--angle:-8deg;--depth:7deg}.beyond-object.vision figure{animation-delay:-3s}
.beyond-object[data-slot="right"]{z-index:2;width:28%;height:47%;top:11%;left:73%;--angle:-2deg;--depth:0deg}.beyond-object.feel figure{animation-delay:-6s}
@keyframes beyond-orbit{0%,100%{transform:translateY(0) rotateZ(var(--angle)) rotateY(var(--depth))}50%{transform:translateY(-22px) rotateZ(calc(var(--angle) + 3deg)) rotateY(calc(var(--depth) - 5deg))}}
.beyond-front{z-index:4;letter-spacing:-.04em;font-size:clamp(27px,4vw,65px);font-weight:600;line-height:1.04;position:absolute;bottom:15%;right:8%;margin:0;color:#f4f0e9}
.beyond-front em{font-family:'Bodoni Moda',Georgia,serif;font-size:1.35em;font-weight:400}
.beyond-link{border-bottom:1px solid #f4f0e94d;z-index:6;width:200px;padding:16px 0;font-size:14px;position:absolute;bottom:6%;left:6%;color:inherit;text-decoration:none}
.beyond-credit{font:12px/1.5 Archivo,Arial,sans-serif;position:absolute;bottom:2%;left:6%;right:6%;color:#ddd3c9;z-index:5}
@media(max-width:860px){.beyond-plan{height:115dvh;min-height:730px}.beyond-title{font-size:22vw;top:32%;left:-4%}.beyond-intro{font-size:14px;top:8%}.beyond-object[data-slot="center"]{width:72%;height:67%;top:19%;left:10%}.beyond-object[data-slot="left"]{width:42%;height:55%;top:31%;left:-9%}.beyond-object[data-slot="right"]{width:42%;height:39%;top:17%;left:64%}.beyond-front{font-size:30px;bottom:16%;right:6%}.beyond-object figcaption{font-size:12px;margin-top:14px}.beyond-link{bottom:7%}.beyond-credit{font-size:12px}}
@media(prefers-reduced-motion:reduce){.beyond-object figure{animation:none}.beyond-object,.beyond-title{transform:none!important;will-change:auto}.beyond-plan{height:110dvh}}

.beyond-object figcaption{background:#211912;padding:4px 8px}
.beyond-credit a{color:inherit;text-decoration:underline}

.beyond-object{transition:left 1.25s cubic-bezier(.22,.7,.18,1),top 1.25s cubic-bezier(.22,.7,.18,1),width 1.25s cubic-bezier(.22,.7,.18,1),height 1.25s cubic-bezier(.22,.7,.18,1);pointer-events:none}
.beyond-object[data-slot="center"]{z-index:5}
.beyond-select{display:block;position:relative;width:100%;padding:0;border:0;background:transparent;line-height:0;pointer-events:auto;color:inherit;cursor:pointer;transform:translateZ(0);transition:transform 1.25s cubic-bezier(.22,.7,.18,1)}
.beyond-select img{max-height:none;filter:grayscale(1) drop-shadow(0 35px 30px #120b0880);transition:filter 1.8s ease;pointer-events:none}
.beyond-object.is-revealed .beyond-select{transform:translateZ(45px) scale(1.035)}
.beyond-object.is-revealed .beyond-select img{filter:grayscale(0) drop-shadow(0 40px 36px #120b08a0)}
.beyond-object.plan.is-revealed img{filter:sepia(.16) drop-shadow(0 40px 36px #120b08a0)}
.beyond-select .feel-lit{position:absolute;inset:0;height:100%;opacity:0;filter:none;transition:opacity 2.6s cubic-bezier(.3,0,.2,1) .25s}
.beyond-object.is-revealed .feel-lit{opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){.beyond-object,.beyond-select,.beyond-select img{transition:none}.beyond-select .feel-lit{transition:none}}

/* Opaque image plates cast a shadow onto the lower artwork layers. */
.beyond-object figure{transform-style:flat}
.beyond-select{isolation:isolate;opacity:1;background:#eee9df;backface-visibility:hidden;box-shadow:0 16px 24px #0005;transition:transform 1.25s cubic-bezier(.22,.7,.18,1),box-shadow 1.25s cubic-bezier(.22,.7,.18,1)}
.beyond-object.is-revealed .beyond-select{box-shadow:0 55px 52px -8px #000c,0 20px 25px -5px #000b}
.beyond-select img,.beyond-object.is-revealed .beyond-select img{filter:grayscale(1)}
.beyond-object.is-revealed .beyond-select img{filter:grayscale(0)}
.beyond-object.plan.is-revealed img{filter:sepia(.16)}
.beyond-select .feel-unlit{opacity:1}
.beyond-select .feel-lit,.beyond-object.is-revealed .feel-lit{filter:none}
/* Three identical text masks, one material every four seconds. */
.beyond-title{width:max-content;height:1.58em;color:transparent;pointer-events:none}
.beyond-title>.beyond-material{padding:0;display:block;position:absolute;inset:0;background-size:cover;background-position:center;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:beyond-material-cycle 12s ease-in-out infinite;will-change:opacity}
.beyond-material.material-marble{background-image:url('/assets/beyond-marquina.webp');-webkit-text-stroke:.5px #a99b8c80}
.beyond-material.material-wood{background-image:url('/assets/beyond-parquet.webp');animation-delay:-8s}
.beyond-material.material-porcelain{background-image:linear-gradient(#fff0,#ffd49c50),url('/assets/beyond-porcelain.webp');filter:drop-shadow(0 0 8px #ffe4b140) drop-shadow(0 0 24px #ffc17b24);animation-delay:-4s}
@keyframes beyond-material-cycle{0%,20%,100%{opacity:1}33.333%,86.666%{opacity:0}}
@media(prefers-reduced-motion:reduce){.beyond-title>.beyond-material{animation:none;will-change:auto}.beyond-material.material-wood,.beyond-material.material-porcelain{display:none}.beyond-select{transition:none}}
.beyond-title>.material-marble{position:relative}
/* Reveal the drawing only once the selected plate has reached the center. */
.beyond-plan-vector{display:block;width:100%;height:auto;background:#f7f5ee;overflow:hidden;pointer-events:none}
.beyond-object.vision .vision-base,.beyond-object.vision.is-revealed .vision-base{filter:grayscale(1) brightness(1.12) contrast(.72)}
.beyond-select .vision-color{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none!important;opacity:0;transition:opacity 2.8s cubic-bezier(.3,0,.2,1)}
.beyond-object.vision.is-content-ready .vision-color{opacity:1}
.beyond-object.plan.is-revealed:not(.is-content-ready) .plan-stroke{stroke-opacity:.1}
.beyond-object.plan.is-content-ready .plan-stroke{stroke-dasharray:1;stroke-dashoffset:1;animation:plan-draft-stroke 2.5s ease-in-out forwards}
.beyond-object.plan.is-content-ready .plan-stroke:nth-child(3n){animation-delay:.25s}
.beyond-object.plan.is-content-ready .plan-stroke:nth-child(3n + 1){animation-delay:.5s}
.beyond-object.plan.is-content-ready .beyond-plan-vector text{animation:plan-draft-label 1.2s .65s both}
@keyframes plan-draft-stroke{to{stroke-dashoffset:0}}
@keyframes plan-draft-label{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.beyond-select .vision-color{transition:none}.beyond-object.plan.is-content-ready .plan-stroke{animation:none;stroke-dasharray:none;stroke-dashoffset:0}.beyond-object.plan.is-content-ready .beyond-plan-vector text{animation:none}.beyond-object.plan.is-revealed:not(.is-content-ready) .plan-stroke{stroke-opacity:1}}