/* Original photographic surfaces, separated at their physical joints. */
.photographic .photo-tile{position:absolute;inset:0;width:100%;height:100%;background-image:url('./assets/studio-objects.png');background-repeat:no-repeat;background-size:400% 300%;clip-path:inset(2.5%);backface-visibility:hidden}
.studio-object .photographic{filter:drop-shadow(2px 5px 4px #4815111c)}
.object-portfolio{--size:min(24vw,33vh);--pitch:6deg;--yaw:-4deg;--rotate:-10deg}
.object-camera{--size:min(21vw,29vh);--pitch:3deg;--yaw:0deg;--rotate:8deg}
.object-phone{--size:min(21vw,29vh);--rotate:-22deg;--pitch:3deg;--yaw:0deg}
.object-envelope{--size:min(20vw,25vh);--pitch:3deg;--yaw:0deg;--rotate:10deg}
.photographic .photo-book{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:4;transform-origin:20% 60%}
.photo-projects{inset:0;z-index:3}.photo-project{top:8%;width:37%;height:45%;padding:3% 3% 8%;background:#faf7ed;box-shadow:1px 3px 3px #091a4b66;transform-origin:50% 100%}
.project-one{left:19%;rotate:-9deg}.project-two{left:36%;top:5%;rotate:3deg}.project-three{left:49%;top:12%;rotate:14deg}
.is-playing .photo-project.project-one{animation:photo-page-one 4.2s both}.is-playing .photo-project.project-two{animation:photo-page-two 4.2s both}.is-playing .photo-project.project-three{animation:photo-page-three 4.2s both}
@keyframes photo-page-one{0%,100%{transform:none}25%,70%{transform:translate(-5%,-30%) rotate(-8deg)}}
@keyframes photo-page-two{0%,100%{transform:none}30%,65%{transform:translateY(-42%) rotate(3deg)}}
@keyframes photo-page-three{0%,100%{transform:none}35%,60%{transform:translate(6%,-22%) rotate(10deg)}}
.photographic .photo-camera{z-index:3}.photographic .camera-print{left:23%;top:48%;width:57%;height:53%;transform:translateY(-55%) rotate(-4deg);z-index:2;padding:4% 4% 13%;box-shadow:2px 5px 4px #48151144}
.photographic .camera-print img{filter:saturate(.85) contrast(.95)}
.photographic .camera-flare{left:69%;top:23%;width:16%;height:16%;z-index:5}
.photographic .camera-print{animation:none;opacity:0}.is-playing .photographic .camera-print{animation:real-photo-feed 4.2s both}.is-playing .photographic .camera-print img{animation:print-develop 4.2s both}
@keyframes real-photo-feed{0%,13%,100%{transform:translateY(-55%) rotate(-4deg);opacity:0}20%{transform:translateY(-35%) rotate(-4deg);opacity:1}58%{transform:translateY(63%) rotate(-4deg);opacity:1}70%,86%{transform:translate(3%,68%) rotate(-1deg);opacity:1}}
@keyframes print-develop{0%,18%{filter:brightness(1.8) saturate(0);opacity:.12}55%,100%{filter:brightness(1) saturate(.85);opacity:1}}
.photographic .ball-sphere{inset:0;width:100%;height:100%;background:none;box-shadow:none;border-radius:0;overflow:visible;transform-origin:50% 86%}
.photographic .photo-ball{clip-path:circle(34% at 50% 50%);border-radius:0}
.photographic .ball-shadow{left:19%;bottom:10%;width:64%;height:9%;filter:blur(5px);opacity:.24}
.photographic .mail-shell{inset:0;filter:none;perspective:650px}
.photo-mail-interior{left:13%;top:24%;width:72%;height:58%;background:repeating-linear-gradient(27deg,#cbb99b 0 1px,#cebd9e 1px 3px);transform:rotate(-6deg);border-radius:3%;z-index:0;opacity:0}
.photographic .photo-mail-front{clip-path:polygon(0 23%,11% 25%,53% 61%,85% 18%,100% 18%,100% 100%,0 100%);z-index:3}
.photographic .photo-mail-flap{clip-path:polygon(11% 25%,85% 18%,53% 61%);transform-origin:48% 22%;z-index:4;backface-visibility:visible}
.photographic .photo-mail-seal{clip-path:ellipse(12.5% 12% at 54% 54%);z-index:5}
.photographic .mail-letter{left:18%;top:27%;width:64%;height:53%;transform:rotate(-6deg);background:linear-gradient(100deg,#fff9eb,#eee3cc);box-shadow:1px 2px 3px #48351c33;opacity:0}
.is-playing .photo-mail-interior{animation:interior-reveal 4.2s both}
@keyframes interior-reveal{0%,8%,100%{opacity:0}18%,82%{opacity:1}}
.is-playing .photo-mail-flap{animation:real-mail-open 4.2s both}.is-playing .photo-mail-seal{animation:seal-release 4.2s both}
@keyframes real-mail-open{0%,100%{transform:rotateX(0)}18%,78%{transform:rotate3d(1,-.095,0,172deg);filter:brightness(.86);z-index:1}}
.photographic .paper-flight{filter:drop-shadow(3px 9px 4px #48151144)}
.is-playing .photographic .mail-shell{animation:none}
.photographic .photo-mail-front,.photographic .photo-mail-flap{mask-image:radial-gradient(ellipse 13% 13% at 54% 54%,transparent 97%,black 100%)}
.plane-photo{inset:0;background:url('./assets/paper-plane-photo.png') center/100% 100% no-repeat;transform-origin:15% 74%}
.wing-photo-a{clip-path:polygon(0 0,100% 0,100% 8%,15% 74%,0 74%)}
.wing-photo-b{clip-path:polygon(100% 8%,100% 100%,0 100%,0 74%,15% 74%)}
.is-playing .wing-photo-a{animation:photo-wing-a 4.2s both}.is-playing .wing-photo-b{animation:photo-wing-b 4.2s both}
@keyframes photo-wing-a{0%,27%{transform:rotate3d(.8,-.6,0,-65deg)}43%,100%{transform:rotate3d(.8,-.6,0,0deg)}}
@keyframes photo-wing-b{0%,27%{transform:rotate3d(.8,-.6,0,60deg)}43%,100%{transform:rotate3d(.8,-.6,0,0deg)}}
.photographic .plane-wing{background:repeating-linear-gradient(18deg,#ffffff09 0 1px,#7f644509 1px 2px),linear-gradient(135deg,#fff9ec,#d3c4a6)}
.photographic .wing-right{background:linear-gradient(130deg,#fffaf0,#e6d9bb)}
.photographic .photo-phone-receiver{clip-path:polygon(0 0,100% 0,100% 77%,26% 90%,0 82%);transform-origin:53% 58%;filter:drop-shadow(0 1px 1px #36513a33)}
.photographic .photo-phone-cord{clip-path:polygon(0 78%,32% 77%,100% 74%,100% 100%,0 100%);transform-origin:36% 78%}
.is-playing .photo-phone-receiver{animation:photo-handset-ring 4.2s both}.is-playing .photo-phone-cord{animation:photo-cord-flex 4.2s both}
@keyframes photo-handset-ring{0%,100%,40%,80%{transform:none}8%,20%,55%,67%{transform:translateY(-2%) rotate(-3deg)}14%,26%,61%,73%{transform:translateY(-1%) rotate(2deg)}}
@keyframes photo-cord-flex{0%,100%,40%,80%{transform:none}10%,23%,57%,70%{transform:scaleY(1.06) rotate(1.5deg)}}
.photographic .photo-badge-strap{clip-path:polygon(23% 0,100% 0,100% 65%,60% 65%,40% 45%,23% 39%)}
.photographic .photo-badge-card{clip-path:polygon(0 23%,44% 23%,63% 48%,68% 100%,0 100%);transform-origin:37% 35%}
.is-playing .photo-badge-card{animation:photo-tag-rock 4.2s both}
@keyframes photo-tag-rock{0%,100%{rotate:0deg}15%{rotate:7deg}35%{rotate:-5deg}55%{rotate:3deg}75%{rotate:-1deg}}
.photographic .photo-cv-back{display:none}
.photographic .photo-cv-front{clip-path:inset(2.5%);transform-origin:50% 25%}
.is-playing .photo-cv-front{animation:photo-sheet-lift 4.2s both}
@keyframes photo-sheet-lift{0%,100%{transform:none}25%,55%{transform:perspective(600px) rotateX(-16deg) rotate(2deg)}}
.is-playing .photo-board{animation:photo-tag-rock 4.2s both;transform-origin:50% 14%}
.photographic .photo-key-base{clip-path:inset(2.5%)}.photographic .photo-key-top{clip-path:polygon(20% 18%,65% 9%,83% 57%,37% 70%,13% 48%)}
.is-playing .photo-key-top{animation:photo-keypress 4.2s both}
@keyframes photo-keypress{0%,35%,100%{translate:0 0}15%,25%{translate:0 3%}}
.is-playing .photo-acrylic{animation:photo-glass-turn 4.2s both}
@keyframes photo-glass-turn{0%,100%{transform:none}25%,60%{transform:perspective(500px) rotateY(14deg) rotate(-3deg)}}
@media(max-width:700px){.object-portfolio{--size:35vw;--x:24%}.object-camera{--size:32vw;--x:80%}.object-phone{--size:36vw;--x:23%}.object-envelope{--size:32vw;--x:75%}}
/* Wax remains on the front pocket; the separate flap hinges above it. */
.photographic .photo-mail-front,.photographic .photo-mail-flap{mask-image:none}
.photographic .photo-mail-flap{clip-path:polygon(11% 25%,85% 18%,53% 47%)}
.is-playing .photo-mail-seal{animation:none}
.photo-mail-interior{left:15%;top:25%;width:68%;height:48%}
.object-phone{--rotate:0deg;--pitch:0deg;--yaw:0deg;--size:min(22vw,28.16vh)}
.studio-object .photographic.art-phone{filter:none}
.rotary-phone-canvas{display:block;width:100%;height:100%;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
@media(max-width:700px){.object-phone{--size:35.2vw}}
.rotary-phone-canvas{mask-image:none}
/* Flat linen catalogue: cover stays closed; real printed projects slide out. */
.object-portfolio{--size:min(20.4vw,28.05vh);--pitch:0deg;--yaw:0deg;--rotate:-11deg}
.art-portfolio .photo-book{transform:none;transform-origin:center;animation:none}
.art-portfolio .photo-projects{position:absolute;inset:0;z-index:3;pointer-events:none;transform:perspective(900px) rotateX(24deg);transform-origin:50% 65%;transform-style:preserve-3d}
.art-portfolio .photo-project{top:24%;left:26%;width:48%;height:42%;padding:2% 2% 5%;border-radius:1px;background:#f7f5ed;box-shadow:1px 2px 2px #091a4b55;rotate:0deg;transform:translate(0,0);transform-origin:50% 80%}
.art-portfolio .photo-project img{width:100%;height:100%;object-fit:cover;display:block}
.is-playing .art-portfolio .project-one{animation:catalog-print-one 4.2s cubic-bezier(.22,.7,.25,1) both}
.is-playing .art-portfolio .project-two{animation:catalog-print-two 4.2s cubic-bezier(.22,.7,.25,1) both}
.is-playing .art-portfolio .project-three{animation:catalog-print-three 4.2s cubic-bezier(.22,.7,.25,1) both}
@keyframes catalog-print-one{0%,8%,100%{transform:translate(0,0) rotate(0)}30%,76%{transform:translate(-18%,-81%) rotate(-12deg)}}
@keyframes catalog-print-two{0%,13%,100%{transform:translate(0,0) rotate(0)}38%,73%{transform:translate(29%,-93%) rotate(4deg)}}
@keyframes catalog-print-three{0%,18%,100%{transform:translate(0,0) rotate(0)}44%,70%{transform:translate(76%,-64%) rotate(17deg)}}
@media(max-width:700px){.object-portfolio{--size:29.75vw;--pitch:0deg;--yaw:0deg}}
@media(prefers-reduced-motion:reduce){.is-playing .art-portfolio .photo-project{animation:none}}

.keypad-phone-canvas{display:block;width:100%;height:100%;pointer-events:none}

.ring-phone-canvas{display:block;width:100%;height:100%;pointer-events:none}

/* Physically hinged folder; spare canvas margin accommodates the loose prints. */
.art-portfolio .folder-canvas{display:block;position:absolute;width:150%;height:150%;left:-25%;top:-25%;pointer-events:none}
.studio-object .photographic.art-portfolio{filter:none}
.object-portfolio{--rotate:-8deg;--pitch:0deg;--yaw:0deg}

.object-portfolio{--rotate:0deg;--pitch:0deg;--yaw:0deg}

.silk-object-pin{position:absolute;left:54%;top:56%;width:12px;height:12px;pointer-events:none}

/* The print passes through the slot, retaining its last tenth inside. */
.photographic .camera-output{position:absolute;left:38%;top:79.7%;width:46%;height:52%;z-index:4;overflow:hidden;transform:rotate(-8deg);transform-origin:0 0;pointer-events:none}
.photographic .camera-output .camera-print{position:absolute;left:0;top:0;width:100%;height:100%;padding:6% 6% 18%;opacity:1;animation:none;transform:translateY(-100%);transition:transform 1.45s cubic-bezier(.25,.65,.3,1);box-shadow:0 2px 3px #48151133;border-radius:1px;background:#faf6e9}
.is-camera-active .photographic .camera-output .camera-print{transform:translateY(-10%)}
.photographic .camera-output .camera-print img{width:100%;height:100%;object-fit:cover;animation:none;filter:saturate(.85) contrast(.95)}
.is-camera-active .camera-flare{animation:exposure 1s both}
.object-basketball{--rotate:0deg;--pitch:0deg;--yaw:0deg}
.photographic .ball-sphere{transform-origin:50% 84%}
@media(prefers-reduced-motion:reduce){.photographic .camera-output .camera-print{transition:none}.is-camera-active .camera-flare{animation:none}}

.studio-logo{width:56px;height:56px}
.object-keycap{--size:min(10vw,14vh)}
.is-playing .photo-key-top{animation:physical-keypress 1s both}
@keyframes physical-keypress{0%,100%{transform:none;filter:brightness(1)}25%,55%{transform:translate(1%,6%);filter:brightness(.83)}}
.photographic .camera-output{perspective:600px;overflow:visible;clip-path:polygon(-10% 0,110% 0,120% 120%,-20% 120%)}
.photographic .camera-output .camera-print{transform:translateY(-100%) rotateX(0deg);transform-origin:50% 0;transition:transform 1.5s cubic-bezier(.25,.65,.3,1);box-shadow:1px 7px 8px #48151144}
.is-camera-active .photographic .camera-output .camera-print{transform:translateY(-10%) rotateX(-15deg)}
.instagram-print-mark{position:absolute;left:8%;bottom:4%;font:10px Arial;color:#514c46}
/* Original photographic envelope restored as one intact surface. */
.photographic .photo-envelope-restored{clip-path:inset(2.5%);animation:none}
.object-envelope:is(:hover,:focus-visible) .object-art{animation:none;transform:var(--pose)}

.camera-flex-print{display:block;width:100%;height:100%;filter:drop-shadow(2px 9px 5px #48151133);pointer-events:none}

/* Canvas includes perspective margin; the slot itself retains its exact width. */
.photographic .camera-output{left:28.8%;width:64.4%;perspective:none;overflow:visible;clip-path:none}
.camera-flex-print{filter:drop-shadow(-3px 12px 6px #48151138)}

/* One rigid photographic cap travels into a separate stationary switch base. */
.object-keycap:is(:hover,:focus-visible) .object-art{transform:var(--pose);filter:drop-shadow(2px 5px 3px #48151133)}
.key-switch-base{left:14%;top:47%;width:70%;height:40%;border-radius:16%;background:linear-gradient(140deg,#252527,#111113);box-shadow:2px 4px 3px #48151140;transform:rotate(-15deg)}
.key-solid-cap{inset:0;transform:translate(0,0);transition:transform .13s cubic-bezier(.2,.7,.3,1);will-change:transform}
.photographic .photo-key-whole{clip-path:inset(2.5%)}
.key-brand{left:36%;top:31%;width:23%;height:24%;background:linear-gradient(130deg,#38383a,#333335);transform:rotate(-14deg) skewY(-3deg);display:grid!important;place-items:center;color:#f1eee5;border-radius:8%}
.key-brand svg{position:relative;width:75%;height:75%;filter:drop-shadow(0 1px 0 #ffffff20)}
.object-keycap:is(:hover,:focus-visible,:active) .key-solid-cap{transform:translate(1.5%,5%)}
.photographic .camera-output{clip-path:none}
.key-brand{left:43%;top:25%;width:34%;height:36%;border-radius:14%;background:linear-gradient(130deg,#3b3b3d,#353537)}.key-brand svg{width:55%;height:55%}.key-switch-base{left:24%;top:65%;width:56%;height:21%;border-radius:18%;transform:rotate(-15deg)}

/* Extra canvas margin prevents the forward-right edge being clipped. */
.photographic .camera-output{width:82.8%;overflow:visible;clip-path:none}

/* Restore the original unbroken key photograph; compress the rigid key as a whole. */
.object-keycap{--pitch:0deg;--yaw:0deg}
.key-solid-cap{transform-origin:50% 88%;transition:transform .12s cubic-bezier(.2,.7,.3,1),filter .12s}
.object-keycap:is(:hover,:focus-visible,:active) .key-solid-cap{transform:translateY(3%);filter:brightness(.96)}

/* Feed starts inside the dark slot, below its upper lip. */
.photographic .camera-output{top:81.3%}

/* Only the ball moves; its cast shadow always remains on the floor. */
.studio-object .photographic.art-basketball,.studio-object:is(:hover,:focus-visible) .photographic.art-basketball{filter:none!important;animation:none!important;transform:none!important;transition:none}
.photographic .photo-ball{clip-path:circle(34% at 50% 50%)}
.photographic .ball-shadow{left:22%;bottom:12%;width:64%;height:8%;opacity:.24;filter:blur(4px);transform:scale(1);background:radial-gradient(ellipse,#541510aa,transparent 72%)}

.key-logo-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain!important}.studio-object .photographic.art-keycap{filter:drop-shadow(2px 6px 3px #48151133)}

/* Contact is strongest at rest; the animation diffuses this same ground shadow. */
.photographic .ball-shadow{left:24%;bottom:12%;width:60%;height:7%;background:#541510;border-radius:50%;opacity:.42;filter:blur(2.5px);transform:scale(1);transform-origin:50% 50%;pointer-events:none}

/* Soft cast shadow with a dense contact core and a broad penumbra. */
.photographic .ball-shadow{left:18%;bottom:11.8%;width:64%;height:8%;background:radial-gradient(ellipse at 48% 48%,rgba(53,16,12,.95) 0%,rgba(65,19,14,.72) 19%,rgba(74,23,16,.38) 43%,rgba(79,25,17,.12) 65%,rgba(79,25,17,0) 85%);border-radius:50%;filter:blur(1.4px);opacity:.6;transform:scale(1);mix-blend-mode:multiply}

/* The key's cast shadow stays on the desk instead of following the cap. */
.studio-object .photographic.art-keycap,.studio-object:is(:hover,:focus-visible) .photographic.art-keycap{filter:none!important;transform:none!important}
.art-keycap .key-ground-shadow{position:absolute;left:10%;top:77%;width:82%;height:17%;border-radius:50%;background:radial-gradient(ellipse,rgba(49,15,11,.78) 0%,rgba(65,20,14,.48) 30%,rgba(78,25,17,.15) 58%,transparent 82%);opacity:.48;filter:blur(3px);transform:translate(2%,5%) scale(1.08,1);transform-origin:center;mix-blend-mode:multiply;transition:transform .14s ease,opacity .14s ease,filter .14s ease;pointer-events:none}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{opacity:.66;filter:blur(1.4px);transform:translate(1%,3%) scale(.96,.85)}
.art-keycap .key-solid-cap{z-index:1;transition:transform .14s cubic-bezier(.2,.7,.3,1);filter:none}

/* Cast the actual alpha silhouette of the key, projected onto the desk. */
.art-keycap .key-ground-shadow{inset:0;width:100%;height:100%;border-radius:0;background:#35100c;mask-image:url('./assets/x-keycap-logo.png');mask-size:100% 100%;mask-repeat:no-repeat;opacity:.3;filter:blur(2.8px);transform-origin:50% 88%;transform:translate(5%,5%) skewX(-17deg) scale(1.04,.35);transition:transform .14s ease,opacity .14s ease,filter .14s ease}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{opacity:.43;filter:blur(1.4px);transform:translate(2%,3%) skewX(-11deg) scale(1.01,.24)}

.art-keycap .key-ground-shadow{mask-image:none;background:none;filter:blur(2.8px)}
.key-shadow-silhouette{width:100%;height:100%;object-fit:contain;filter:brightness(0)}

/* Short, diffuse footprint follows the key's bottom edge on the desk. */
.art-keycap .key-ground-shadow{transform-origin:50% 88%;transform:translate(1%,2%) scale(1.025,.17);opacity:.24;filter:blur(7px)}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{transform:translate(.5%,1.5%) scale(1.015,.12);opacity:.32;filter:blur(5px)}
.art-keycap .key-ground-shadow::after{content:'';position:absolute;inset:0;background:url('./assets/x-keycap-logo.png') center/contain no-repeat;filter:brightness(0) blur(2px);opacity:.32}

/* Blur after projection, so flattening does not sharpen the shadow edges. */
.art-keycap .key-ground-shadow{transform:none;filter:blur(3.5px);opacity:.28}
.art-keycap .key-shadow-silhouette{transform-origin:50% 88%;transform:translate(1%,2%) scale(1.025,.17);transition:transform .14s ease}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{transform:none;filter:blur(2.4px);opacity:.36}
.object-keycap:is(:hover,:focus-visible,:active) .key-shadow-silhouette{transform:translate(.5%,1.5%) scale(1.015,.12)}
.art-keycap .key-ground-shadow::after{display:none}

/* The tilted key contacts the desk at its lower-left corner only. */
.art-keycap .key-ground-shadow{opacity:.23;filter:blur(4.5px)}
.art-keycap .key-shadow-silhouette{transform-origin:18% 86%;transform:translate(2%,0) skewX(-8deg) scale(1.02,.12);mask-image:linear-gradient(90deg,transparent 5%,#000 22%,#0009 55%,#0003 88%,transparent);mask-size:100% 100%}
.art-keycap::after{content:'';position:absolute;left:13%;top:82%;width:19%;height:5%;background:radial-gradient(ellipse,#35100c99 0%,#35100c44 38%,transparent 78%);filter:blur(1.3px);transform:rotate(-12deg);pointer-events:none;z-index:0;transition:opacity .14s ease}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{opacity:.3;filter:blur(3.5px)}
.object-keycap:is(:hover,:focus-visible,:active) .key-shadow-silhouette{transform-origin:18% 86%;transform:translate(1%,0) skewX(-5deg) scale(1.01,.09)}
.object-keycap:is(:hover,:focus-visible,:active) .art-keycap::after{opacity:.85}

.reference-phone-photo{display:block;width:100%;height:100%;object-fit:contain!important;pointer-events:none}

/* User-marked footprint: a continuous soft contact band along the lower edge. */
.art-keycap .key-ground-shadow{opacity:.4;filter:blur(3px)}
.art-keycap .key-shadow-silhouette{mask-image:none;transform-origin:50% 88%;transform:translate(0,1%) scale(1.01,.09)}
.art-keycap::after{left:14%;top:85%;width:72%;height:5%;transform:rotate(-2deg);background:radial-gradient(ellipse,#35100c99 0%,#35100c66 36%,#35100c22 65%,transparent 88%);filter:blur(1.8px);opacity:.8}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{opacity:.5;filter:blur(2.2px)}
.object-keycap:is(:hover,:focus-visible,:active) .key-shadow-silhouette{transform:translate(0,2%) scale(1.01,.065)}

/* Footprint follows the user's marked polygon beneath the entire key base. */
.art-keycap .key-ground-shadow{filter:blur(3px);opacity:.35;transform:none}
.art-keycap .key-shadow-silhouette{display:none}
.art-keycap .key-ground-shadow::after{display:block;content:'';position:absolute;left:11%;top:79%;width:77%;height:17%;background:#35100c;clip-path:polygon(0 0,100% 36%,100% 88%,18% 65%,3% 37%);filter:none;opacity:1}
.art-keycap::after{display:none}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{filter:blur(2px);opacity:.43;transform:translateY(1%)}

/* Low trapezoid under the base, with the footprint aligned to the photo. */
.art-keycap .key-ground-shadow{opacity:.38;filter:blur(3.5px);transform:none}
.art-keycap .key-ground-shadow::after{left:13%;top:84%;width:75%;height:12%;clip-path:polygon(0 0,95% 3%,100% 65%,13% 100%,0 40%);background:#35100c;transform:rotate(-18deg);transform-origin:0 0}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{opacity:.48;filter:blur(2.5px);transform:translateY(1%)}

.art-keycap .key-ground-shadow::after{inset:0;width:100%;height:100%;transform:none;clip-path:polygon(24% 87%,92% 76%,95% 87%,31% 98%,19% 92%);background:#35100c}
.art-keycap .key-ground-shadow{opacity:.38;filter:blur(3px)}

/* Short contact band plus a restrained lobe towards the back-left. */
.art-keycap .key-ground-shadow::after{clip-path:polygon(0% 74%,23% 79%,91% 76%,93% 82%,29% 93%,18% 88%,4% 82%)}
.art-keycap .key-ground-shadow{opacity:.32;filter:blur(3px)}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{opacity:.4;filter:blur(2.2px);transform:translateY(.5%)}

/* Compact rear-left tail, feathered away; narrow strip remains below the base. */
.art-keycap .key-ground-shadow::after{clip-path:polygon(9% 77%,25% 81%,91% 76%,94% 85%,29% 95%,19% 89%,11% 84%);background:linear-gradient(105deg,transparent 7%,#35100c44 13%,#35100c 25%,#35100c 88%,#35100c55 98%)}
.art-keycap .key-ground-shadow{opacity:.34;filter:blur(3.2px)}

/* Fade the entire left tail before its geometric boundary becomes visible. */
.art-keycap .key-ground-shadow{mask-image:linear-gradient(90deg,transparent 0%,transparent 5%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.4) 21%,#000 34%,#000 100%);mask-size:100% 100%;mask-repeat:no-repeat;filter:blur(3.8px)}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{filter:blur(3px)}

.art-keycap .key-ground-shadow{opacity:.408}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{opacity:.55;filter:blur(2.6px)}
/* Separate the photographed floor shadow from the camera surface. */
.photographic .photo-camera{clip-path:polygon(21% 18%,76% 16%,84% 22%,85% 54%,91% 66%,90% 80%,84% 86%,36% 88%,23% 82%,12% 64%,15% 35%)}
.photographic .photo-camera-ground{z-index:1;mix-blend-mode:multiply;filter:brightness(.45);clip-path:polygon(0 71%,21% 71%,36% 86%,85% 85%,96% 73%,100% 100%,0 100%);opacity:.45}

/* Clean camera cutout: one independent black contact shadow, no baked floor haze. */
.studio-object .photographic.art-camera,.studio-object:is(:hover,:focus-visible) .photographic.art-camera{filter:none!important;animation:none!important}
.camera-clean-photo{position:absolute;left:8%;top:8%;width:88%!important;height:88%!important;object-fit:contain!important;z-index:3;pointer-events:none}
.camera-contact-shadow{position:absolute;left:27%;top:83%;width:62%;height:4.5%;transform:rotate(-8deg);border-radius:50%;background:radial-gradient(ellipse at 52% 45%,rgba(39,18,15,.43) 0%,rgba(39,18,15,.23) 28%,rgba(39,18,15,.07) 53%,transparent 76%);filter:blur(1.8px);z-index:1;pointer-events:none}


.camera-left-contact{position:absolute;left:9%;top:78%;width:65%;height:12%;transform:rotate(-8deg);border-radius:50%;background:radial-gradient(ellipse at 60% 48%,rgba(55,22,17,.14) 0%,rgba(55,22,17,.08) 30%,rgba(55,22,17,.025) 54%,transparent 76%);filter:blur(5px);z-index:1;pointer-events:none}

/* Stationary mechanical socket; the cap alone travels into its cavity. */
.key-housing,.key-housing-lip{position:absolute;inset:0;width:100%;height:100%;object-fit:contain!important;pointer-events:none}
.key-housing{z-index:1}
.art-keycap .key-solid-cap{inset:auto;left:8%;top:2%;width:84%;height:84%;z-index:2;transform:translateY(0);transition:transform .18s cubic-bezier(.2,.75,.3,1);filter:none}
.key-housing-lip{z-index:3;clip-path:polygon(0 73%,32% 86%,84% 77%,100% 74%,100% 100%,0 100%)}
.object-keycap:is(:hover,:focus-visible,:active) .key-solid-cap{transform:translateY(7%);filter:none}
.art-keycap .key-ground-shadow{opacity:.38;filter:blur(3px);mask-image:linear-gradient(90deg,transparent 3%,#000 23%,#000 100%)}
.art-keycap .key-ground-shadow::after{clip-path:polygon(9% 84%,88% 85%,95% 94%,29% 100%,14% 94%);background:#35100c}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{opacity:.38;filter:blur(3px);transform:none}
.art-keycap .key-solid-cap{left:10%;top:12%;width:80%;height:80%}

.key-socket-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:2}

/* Ground contact follows the new socket footprint; the housing remains stationary. */
.art-keycap .key-ground-shadow{mask-image:none;opacity:.3;filter:blur(3px);transform:none}
.art-keycap .key-ground-shadow::after{inset:0;width:100%;height:100%;clip-path:none;background:#35100c;mask-image:url('./assets/x-socket-assembly-v2.png');mask-size:100% 100%;mask-repeat:no-repeat;transform-origin:50% 85%;transform:translate(1%,0) scale(1,.1)}
.object-keycap:is(:hover,:focus-visible,:active) .key-ground-shadow{opacity:.3;filter:blur(3px);transform:none}

/* Single loose reference key; no socket, rim, supplemental ground patch or tilt. */
.object-keycap{--rotate:0deg;--pitch:0deg;--yaw:0deg}
.reference-key-canvas{display:block;width:100%;height:100%;pointer-events:none}
.art-keycap::before,.art-keycap::after{display:none!important}


/* Logo and honey sit below the shared silk/prey canvas and spider renderer. */
.object-acrylic{--x:43%;--y:85%;--size:min(10vw,14vh);--rotate:0deg;--pitch:0deg;--yaw:0deg}
.studio-object .art-acrylic,.studio-object:is(:hover,:focus-visible) .art-acrylic{transform:none!important;animation:none!important;filter:none!important}
.art-acrylic .honey-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;filter:drop-shadow(1px 3px 2px #581c1735)}
.honey-flow-canvas{position:absolute;left:0;top:0;width:100%;height:124%;z-index:1;pointer-events:none}
@media(max-width:700px){.object-acrylic{--x:53%;--y:86%;--size:min(19vw,12vh)}}

/* The basketball occupies the former Pinterest board position. */
.object-basketball{--x:92%;--y:72%;--size:min(11vw,16vh);--rotate:0deg}
.object-disco{--x:69%;--y:16%;--size:min(11vw,15.5vh);--rotate:0deg;--pitch:0deg;--yaw:0deg}
.studio-object .photographic.art-disco,.studio-object:is(:hover,:focus-visible) .photographic.art-disco{transform:none!important;filter:none!important;animation:none!important}
.disco-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.disco-cable{position:absolute;left:calc(50% - .5px);bottom:86%;width:1px;height:100vh;background:linear-gradient(90deg,#4d5146bb,#e9e6c9d9);pointer-events:none}
@media(max-width:700px){.object-basketball{--x:85%;--y:57%;--size:21vw}.object-disco{--x:61%;--y:13%;--size:22vw}}

/* Move the hanging assembly left by 20% of its own width. */
.object-disco{translate:-20% 0}

/* Only this stationary suspension wire can support silk; the rotor cannot. */
.disco-cable{left:calc(50% - 4px);width:8px;background:none}
.disco-cable::before{content:'';position:absolute;left:3.5px;top:0;bottom:0;width:1px;background:linear-gradient(90deg,#4d5146bb,#e9e6c9d9)}

/* WhatsApp paper plane: real folds, independent floor shadow, short banked flight. */
.object-phone{--rotate:0deg;--pitch:0deg;--yaw:0deg}
.studio-object .photographic.art-phone,.studio-object:is(:hover,:focus-visible) .photographic.art-phone{filter:none!important;animation:none!important;transform:none!important}
.paper-plane-canvas{position:absolute;left:-15%;top:-15%;width:130%;height:130%;display:block;pointer-events:none;mask-image:radial-gradient(ellipse at 50% 50%,#000 62%,transparent 94%)}

/* Photo-like paper texture; the traveling plane is not clipped by its local canvas. */
.paper-plane-canvas{mask-image:none;z-index:2}
.paper-plane-ground{position:absolute;left:15%;top:92%;width:60%;height:8%;border-radius:50%;background:radial-gradient(ellipse,rgba(49,24,14,.30) 0%,rgba(49,24,14,.14) 36%,rgba(49,24,14,.04) 60%,transparent 82%);filter:blur(4px);z-index:1;opacity:1;transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.is-plane-flying .paper-plane-ground{opacity:0;transform:scale(.75)}
.paper-plane-flight{position:fixed;left:0;top:0;object-fit:contain;pointer-events:none;z-index:3;transform-origin:50% 50%;will-change:transform;filter:none}

/* One opaque inflated conversation bubble above the enlarged paper plane. */
.object-phone{--size:min(10.92vw,15.08vh)}
.plane-chat-canvas{position:absolute;left:-47.5%;top:-95.125%;width:195%;height:146.25%;display:block;pointer-events:auto;cursor:pointer;z-index:3}
.paper-plane-flight{transform-origin:50% 50%}
@media(max-width:700px){.object-phone{--size:18.72vw}}

.paper-plane-canvas{pointer-events:auto;cursor:pointer}

/* The return shadow uses the plane clock and hands off without a fade. */
.paper-plane-ground{transition:none}
.is-plane-flying .paper-plane-ground{transition:opacity .2s ease;transform:none}
.paper-plane-flight-shadow{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:2;transform-origin:50% 50%;will-change:transform}

/* Grab the suspended sphere; its wire pivots around the ceiling anchor. */
.object-disco{cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none}
.object-disco.is-disco-dragging{cursor:grabbing}
.disco-cable{transform-origin:50% 100%;will-change:transform}

.x-lightning{position:fixed;width:220px;height:360px;z-index:45;pointer-events:none;mix-blend-mode:screen}

/* Original Creative Works headline and typography. */
.studio-intro{max-width:clamp(220px,32vw,460px)}
@media(max-width:700px){.studio-intro{max-width:210px}}

/* Open the original tight tracking by ten percent. */
.studio-title h1{letter-spacing:-.072em}
@media(max-width:700px){.studio-title h1{letter-spacing:-.0765em}}

/* The new signature keeps the original face and tracking, with room for the phrase. */
.studio-title:has(.another-way-title){width:90%}
.studio-title .another-way-title{font-size:min(16.5vw,26vh);line-height:.9}
.another-way-title .studio-title-line:last-child{padding-left:4%}
.another-way-title .studio-title-line>span{white-space:pre}
@media(max-width:700px){.studio-title:has(.another-way-title){width:96%}.studio-title .another-way-title{font-size:18vw}.another-way-title .studio-title-line:last-child{padding-left:0}}

/* The Dribbble ball keeps the same illuminated material at rest and in flight. */
.object-basketball .photo-ball,.object-basketball:is(:hover,:focus-visible,:active) .photo-ball{filter:brightness(1.16) saturate(1.05)!important;transition:none!important}

/* Keep the ball above the folder's oversized cast-shadow canvas in every state. */
.studio-object.object-basketball,.studio-object.object-basketball:is(:hover,:focus-visible,:active){z-index:4!important}

/* The original mark, 20% larger, in lightly scattering frosted glass. */
.studio-logo{width:67.2px;height:67.2px}
.studio-logo img{display:block;width:100%;height:100%;filter:none}

/* A solid chrome badge sits front-on until clicked; the mounting mark stays behind. */
.studio-logo{position:relative;border:0;padding:0;background:none;cursor:pointer;flex-shrink:0;appearance:none}
.main-logo-mount-shadow{position:absolute;inset:0;background:linear-gradient(145deg,#671b12a3,#9d2c2375);mask:url('./logo.svg') center/contain no-repeat;-webkit-mask:url('./logo.svg') center/contain no-repeat;filter:blur(.4px);opacity:0;transition:opacity .12s ease}
.studio-logo .main-logo-badge{position:absolute;inset:0;transition:filter .2s ease;filter:drop-shadow(0 1px 1px #4815114d)}
.studio-logo:hover .main-logo-badge{filter:brightness(1.08) drop-shadow(0 1px 1px #4815114d)}
.is-logo-detached .main-logo-badge{visibility:hidden}
.is-logo-detached .main-logo-mount-shadow{opacity:1}
.main-logo-falling{position:fixed;left:0;top:0;z-index:30;pointer-events:none;transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 1px 1px #48151140)}
.main-logo-floor-shadow{position:fixed;left:0;top:0;z-index:29;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#43180d99,transparent 75%);transform-origin:center;will-change:transform}
/* The metal body is rendered once in a transparent viewport; the empty mount stays behind. */
.main-logo-physics{position:fixed;inset:0;z-index:30;pointer-events:none;width:100vw;height:100vh}
.studio-logo.is-logo-3d-ready .main-logo-badge{visibility:hidden}
.studio-logo{touch-action:none}
/* Show only the completed WebGL badge, never a different SVG during loading. */
.studio-logo .main-logo-badge{visibility:hidden!important}

/* A close contact shadow seats the mounted badge against the red surface. */
.studio-logo.is-logo-3d-ready:not(.is-logo-detached)::after{content:"";position:absolute;inset:0;pointer-events:none;background:#4b1d17;mask:url('./logo.svg') center/contain no-repeat;-webkit-mask:url('./logo.svg') center/contain no-repeat;opacity:.24;filter:blur(1.2px);transform:translate(2px,3px)}

/* The permanent red relief replaces the old flat mounting stain. */
.studio-logo .main-logo-mount-shadow{display:none}
.studio-logo.is-logo-3d-ready:not(.is-logo-detached)::after{display:none}

/* Move each object relative to its own responsive dimensions. */
.object-keycap{translate:20% 7%}
.object-camera{translate:-20% 7%}