/* One responsive scene. Every object is a direct link, with no panels or slides. */
:root{--brand-red:#fa4238;--cream:#f6f3ec;--ink:#481511}
*{box-sizing:border-box}
html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;background:var(--brand-red)}
#root>div{width:100%;height:100%;min-height:0}
.studio-scene{position:relative;width:100%;height:100svh;height:100dvh;overflow:hidden;background:var(--brand-red);color:var(--cream);font-family:'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate}
.studio-header{position:absolute;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;padding:clamp(18px,3.4vh,40px) 3.5vw;z-index:5;pointer-events:none}
.studio-logo{display:block;width:44px;height:44px;pointer-events:auto}.studio-logo img{display:block;width:100%;height:100%}
.studio-header .studio-intro{width:clamp(235px,23vw,340px);max-width:none;margin:0;text-align:left;font-size:clamp(16px,1.35vw,21px);font-weight:400;line-height:1.23;letter-spacing:-.025em;color:var(--cream)}
.studio-intro .intro-discipline{display:block}
.studio-intro .intro-aside{display:block;margin-top:.6em;font-size:.76em;line-height:1.4;letter-spacing:-.012em;color:var(--cream);opacity:.8}
@media(max-width:700px){.studio-header .studio-intro{width:207px;max-width:62vw;font-size:15px}.studio-intro .intro-aside{font-size:12px;margin-top:.5em}}
@media(max-height:520px) and (min-width:701px){.studio-header .studio-intro{font-size:14px;width:240px}}
.studio-title{position:absolute;left:50%;top:46%;width:82%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:0}
.studio-title h1{margin:0;font-size:min(20vw,31vh);font-weight:400;line-height:.78;letter-spacing:-.08em}
.studio-title-line{display:block;white-space:nowrap}.studio-title-line>span{display:inline-block}
.studio-title-line:first-child{padding-right:7%}.studio-title-line:last-child{padding-left:14%}
.studio-title p{margin:24px 0 0;font-size:clamp(11px,1.05vw,16px);color:var(--ink);letter-spacing:-.01em}
.studio-objects{position:absolute;inset:0;pointer-events:none;z-index:2}
.studio-object{position:absolute;display:block;left:var(--x);top:var(--y);width:var(--size);height:var(--size);transform:translate(-50%,-50%) rotate(var(--rotate,0deg));pointer-events:auto;text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.object-art{--pose:perspective(800px) rotateX(var(--pitch,0deg)) rotateY(var(--yaw,0deg));display:block;width:100%;height:100%;background-image:url('./assets/studio-objects.png');background-repeat:no-repeat;background-size:400% 300%;clip-path:inset(2.5%);transform:var(--pose);transform-origin:50% 60%;transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s;filter:drop-shadow(var(--shadow-x,3px) var(--shadow-y,8px) var(--shadow-blur,5px) #54151030)}
.studio-object:is(:hover,:focus-visible){z-index:10}
.studio-object:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:24px;z-index:10}
.object-tooltip{position:absolute;left:50%;bottom:0;transform:translate(-50%,8px) rotate(calc(var(--rotate,0deg)*-1));font-size:12px;font-weight:500;white-space:nowrap;background:var(--cream);color:var(--ink);padding:7px 11px;border-radius:30px;box-shadow:0 4px 10px #54151020;opacity:0;transition:opacity .18s,translate .18s;pointer-events:none}
.studio-object:hover .object-tooltip,.studio-object:focus-visible .object-tooltip{opacity:1}
.object-portfolio{--x:17%;--y:33%;--size:min(28vw,39vh);--rotate:-14deg;--pitch:12deg;--yaw:-8deg;--shadow-x:6px;--shadow-y:17px;--shadow-blur:8px;z-index:3}
.object-camera{--x:84%;--y:25%;--size:min(22vw,28vh);--rotate:11deg;--pitch:-8deg;--yaw:-14deg;--shadow-y:14px;--shadow-blur:8px}
.object-basketball{--x:58%;--y:14%;--size:min(10vw,14vh);--rotate:-8deg;--shadow-x:6px;--shadow-y:20px;--shadow-blur:12px}
.object-badge{--x:92%;--y:61%;--size:min(13vw,18vh);--rotate:-19deg;--pitch:16deg;--yaw:5deg;--shadow-y:4px;--shadow-blur:3px}
.object-envelope{--x:58%;--y:80%;--size:min(22vw,26vh);--rotate:17deg;--pitch:21deg;--yaw:-7deg;--shadow-y:3px;--shadow-blur:3px;z-index:2}
.object-resume{--x:43%;--y:85%;--size:min(16vw,21vh);--rotate:-9deg;--pitch:7deg;--yaw:11deg;--shadow-y:3px;--shadow-blur:2px}
.object-phone{--x:11%;--y:78%;--size:min(22vw,30vh);--rotate:-29deg;--pitch:8deg;--yaw:16deg;--shadow-y:13px;--shadow-blur:7px}
.object-moodboard{--x:79%;--y:81%;--size:min(14vw,19vh);--rotate:13deg;--pitch:27deg;--yaw:-11deg;--shadow-y:3px;--shadow-blur:2px}
.object-keycap{--x:28%;--y:62%;--size:min(8vw,11vh);--rotate:23deg;--pitch:-12deg;--yaw:11deg;--shadow-y:8px;--shadow-blur:4px}
.object-acrylic{--x:88%;--y:87%;--size:min(7vw,10vh);--rotate:-14deg;--pitch:12deg;--yaw:-15deg;--shadow-y:12px;--shadow-blur:6px}

/* Real project prints sit between the sleeve's back and cloth front. */
.folio-art{position:relative;overflow:visible;background:none;clip-path:none}
.folio-back{position:absolute;left:9%;top:28%;width:83%;height:52%;background:#143e92;border-radius:5% 8% 4% 4%;box-shadow:inset 1px 2px 2px #8aa7e866;transform:rotate(1deg)}
.folio-sheet{position:absolute;top:13%;width:45%;height:57%;padding:3%;background:#f5f2e8;box-shadow:1px 3px 5px #081f584f;transform:translateY(0) rotate(var(--paper-angle));transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.75,.15,1)}
.folio-sheet img{display:block;width:100%;height:80%;object-fit:cover;object-position:center}
.sheet-0{left:12%;--paper-angle:-13deg;--fan-angle:-22deg;--fan-rise:-14%}
.sheet-1{left:30%;top:8%;--paper-angle:3deg;--fan-angle:1deg;--fan-rise:-22%}
.sheet-2{left:46%;top:18%;--paper-angle:16deg;--fan-angle:26deg;--fan-rise:-12%}
.folio-cover{position:absolute;left:0;top:18%;width:100%;height:84%;object-fit:fill}
.folio-mark{position:absolute;left:39%;top:55%;width:24%;height:auto;transform:rotate(1deg);filter:drop-shadow(0 1px 0 #071b6122)}
.object-portfolio:is(:hover,:focus-visible) .folio-sheet{transform:translateY(var(--fan-rise)) rotate(var(--fan-angle))}
.object-portfolio:is(:hover,:focus-visible) .folio-art{transform:translateY(-3%) var(--pose) rotate(2deg)}

/* Each material reacts in its own way; links stay immediately clickable. */
.object-phone:is(:hover,:focus-visible) .object-art{animation:phone-ring .72s ease-in-out infinite}
.object-phone::before,.object-phone::after{content:'';position:absolute;width:14%;height:23%;top:34%;border:2px solid var(--cream);border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-radius:50%;opacity:0;pointer-events:none}
.object-phone::before{right:10%}.object-phone::after{right:3%}
.object-phone:is(:hover,:focus-visible)::before{animation:ring-wave .72s ease-out infinite}
.object-phone:is(:hover,:focus-visible)::after{animation:ring-wave .72s .12s ease-out infinite}
.object-basketball:is(:hover,:focus-visible) .object-art{animation:ball-bounce .95s infinite;transform-origin:50% 85%}
.object-camera:is(:hover,:focus-visible) .object-art{animation:camera-shutter .8s ease-out}
.object-camera::after{content:'';position:absolute;left:59%;top:26%;width:28%;height:28%;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#fff9 18%,#fff0 70%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.object-camera:is(:hover,:focus-visible)::after{animation:camera-flash .8s ease-out}
.object-badge:is(:hover,:focus-visible) .object-art{animation:badge-swing 1.6s ease-in-out infinite;transform-origin:50% 12%}
.object-envelope:is(:hover,:focus-visible) .object-art{animation:paper-nudge .8s ease-in-out}
.object-resume:is(:hover,:focus-visible) .object-art{animation:paper-rustle .65s ease-in-out}
.object-moodboard:is(:hover,:focus-visible) .object-art{transform:translateY(-4%) perspective(800px) rotateX(10deg) rotateY(6deg) rotate(-3deg)}
.object-keycap:is(:hover,:focus-visible) .object-art{transform:translateY(6%) var(--pose) scale(.92);filter:drop-shadow(1px 2px 1px #54151050)}
.object-acrylic:is(:hover,:focus-visible) .object-art{transform:translateY(-7%) perspective(800px) rotateX(-8deg) rotateY(25deg) rotate(8deg);filter:drop-shadow(6px 18px 8px #54151040)}
.studio-object:active .object-art{filter:brightness(1.08)}
@keyframes phone-ring{0%,60%,100%{transform:var(--pose) rotate(0)}8%,24%,40%{transform:translateX(-2%) var(--pose) rotate(-7deg)}16%,32%,48%{transform:translateX(2%) var(--pose) rotate(7deg)}}
@keyframes ring-wave{0%{opacity:0;translate:-4px 0;scale:.8}30%{opacity:.8}85%,100%{opacity:0;translate:5px 0;scale:1.2}}
@keyframes ball-bounce{0%,100%{transform:var(--pose) scale(1.08,.92);animation-timing-function:cubic-bezier(.2,.65,.4,1);filter:drop-shadow(4px 3px 3px #54151044)}45%{transform:translateY(-30%) var(--pose) rotate(12deg) scale(.98,1.02);animation-timing-function:cubic-bezier(.6,0,.8,.35);filter:drop-shadow(8px 38px 15px #54151025)}85%{transform:var(--pose) rotate(0deg) scale(1,1)}93%{transform:var(--pose) scale(1.12,.88)}}
@keyframes camera-shutter{0%,100%{transform:var(--pose)}18%{transform:var(--pose) scale(.96) rotate(-2deg)}35%{transform:var(--pose) scale(1.03) rotate(1deg)}}
@keyframes camera-flash{0%,12%,38%,100%{opacity:0;scale:.5}17%,24%{opacity:1;scale:2.7}}
@keyframes badge-swing{0%,100%{transform:var(--pose) rotate(0)}25%{transform:var(--pose) rotate(10deg)}75%{transform:var(--pose) rotate(-7deg)}}
@keyframes paper-nudge{0%,100%{transform:var(--pose)}30%{transform:translate(3%,-5%) var(--pose) rotate(-5deg)}65%{transform:translate(-1%,-2%) var(--pose) rotate(2deg)}}
@keyframes paper-rustle{0%,100%{transform:var(--pose)}25%{transform:translateY(-5%) var(--pose) rotate(-4deg)}50%{transform:translateY(-3%) var(--pose) rotate(3deg)}75%{transform:var(--pose) rotate(-1deg)}}
.studio-bottom{position:absolute;left:3.5vw;right:3.5vw;bottom:22px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:3;color:var(--ink)}
.studio-bottom p{margin:0;font-size:11px;letter-spacing:.01em}.studio-bottom kbd{padding:2px 4px;border:1px solid #48151160;border-radius:4px;font:inherit}
@media(max-width:700px){
 .studio-header{padding:20px 20px 0}.studio-logo{width:34px;height:34px}.studio-intro{font-size:9px;max-width:190px}
 .studio-title{top:46%;width:94%}.studio-title h1{font-size:24vw;line-height:.86;letter-spacing:-.085em}.studio-title p{font-size:10px;margin-top:15px}
 .studio-title-line:first-child{padding-right:3%}.studio-title-line:last-child{padding-left:13%}
 .object-portfolio{--x:27.5%;--y:25%;--size:min(43vw,23vh);--rotate:-16deg}
 .object-camera{--x:77%;--y:23%;--size:min(35vw,19vh);--rotate:13deg}
 .object-basketball{--x:56%;--y:14%;--size:min(19vw,11vh)}
 .object-badge{--x:83%;--y:58%;--size:min(25vw,15vh);--rotate:12deg}
 .object-envelope{--x:53%;--y:80%;--size:min(37vw,19vh);--rotate:17deg}
 .object-resume{--x:25%;--y:84%;--size:min(28vw,17vh);--rotate:-10deg}
 .object-phone{--x:24%;--y:62%;--size:min(34vw,20vh);--rotate:-28deg}
 .object-moodboard{--x:64%;--y:65%;--size:min(25vw,14vh);--rotate:14deg}
 .object-keycap{--x:80%;--y:83%;--size:min(17vw,10vh);--rotate:24deg}
 .object-acrylic{--x:67%;--y:90%;--size:min(15vw,9vh)}
 .studio-bottom{left:20px;right:20px;bottom:max(13px,env(safe-area-inset-bottom))}.studio-bottom p{font-size:9px}.silk-hint{display:none}
 .object-tooltip{font-size:10px;padding:5px 8px}
}
@media(max-height:520px) and (min-width:701px){.studio-header{padding-top:14px}.studio-logo{width:30px;height:30px}.studio-bottom{bottom:10px}.studio-title p{margin-top:15px}.object-basketball{--y:21%}.object-moodboard{--y:23%}}
@media(prefers-reduced-motion:reduce){.object-art,.object-tooltip,.folio-sheet{transition:none!important;animation:none!important}.studio-object::before,.studio-object::after{animation:none!important}.studio-object:is(:hover,:focus-visible) .object-art{filter:brightness(1.1)}}