:root{--black:#0a0a0a;--white:#fafafa;--blue:#1300ff}*{box-sizing:border-box}html,body{background:var(--black);min-height:100%;color:var(--white);margin:0;font-family:Helvetica Neue,Arial,sans-serif;overflow:hidden}button,a{font:inherit}button{cursor:pointer;border:0}.site-shell,.landing,.portfolio{width:100%;min-height:100svh;position:relative}.hello{z-index:300;background:var(--black);place-content:center;justify-items:center;gap:24px;animation:.55s cubic-bezier(.7,0,.2,1) 1.9s forwards hello-away;display:grid;position:fixed;inset:0}.hello p{letter-spacing:-.045em;margin:0;font-size:31px;animation:.4s 1.55s forwards hey-away}.hello-orb{background:var(--white);border-radius:999px;width:54px;height:25px;animation:1.85s cubic-bezier(.2,.85,.25,1) forwards hello-orb;position:relative}.hello-smiley{object-fit:contain;opacity:0;filter:drop-shadow(0 15px 24px #000);width:92px;height:92px;animation:.78s cubic-bezier(.16,1,.3,1) 1.12s forwards smiley-dissolve;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.36)}.landing{background:radial-gradient(circle at 50% 55%,#151515 0,var(--black) 52%);place-items:center;display:grid}.landing-copy{z-index:3;text-align:center;flex-direction:column;align-items:center;display:flex;position:relative}.landing-sphere{flex:none;width:92px;height:92px;margin:0 0 18px;position:relative}.landing-orb{object-fit:contain;filter:drop-shadow(0 16px 26px #000);width:100%;height:100%;display:block}.landing h1 span{display:block}.landing h1{letter-spacing:0;margin:0 0 27px;font-size:clamp(25px,2.2vw,36px);font-weight:450;line-height:1.06}.enter-button,.menu-button{background:var(--white);color:var(--black);border-radius:999px;padding:13px 16px;font-size:18px;transition:transform .25s,background .25s}.enter-button:hover,.menu-button:hover{background:#dfff00;transform:scale(1.06)}.enter-button span,.menu-button span{margin-left:6px}.portfolio{background:var(--black);isolation:isolate}.webgl-spiral{z-index:2;touch-action:none;position:absolute;inset:0;overflow:hidden}.webgl-spiral:after{content:"";z-index:2;pointer-events:none;background:linear-gradient(to bottom,var(--black) 0%,#0a0a0ab8 3%,#0a0a0a24 7%,transparent 12%,transparent 88%,#0a0a0a29 93%,#0a0a0ac2 97%,var(--black) 100%);position:absolute;inset:0}.webgl-spiral canvas{width:100%;height:100%;display:block}.spiral-hover-title{z-index:3;pointer-events:none;min-width:280px;color:var(--black);opacity:0;white-space:nowrap;text-align:left;background:#fffffff5;border-radius:13px;flex-direction:column;align-items:flex-start;padding:12px 16px 11px;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;bottom:26px;left:50%;transform:translate(-50%,12px);box-shadow:0 12px 35px #0008}.spiral-hover-title.visible{opacity:1;transform:translate(-50%)}.spiral-hover-title strong{letter-spacing:-.02em;font-size:15px;font-weight:500}.spiral-hover-title small{color:#686868;letter-spacing:.05em;margin-top:3px;font-size:10px}.grid{z-index:-2;opacity:.22;background-image:linear-gradient(#282828 1px,#0000 1px),linear-gradient(90deg,#282828 1px,#0000 1px);background-size:4vw 4vw;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 28%,#0000 82%);mask-image:radial-gradient(#000 28%,#0000 82%)}.topbar{z-index:30;pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:fixed;inset:30px 30px auto}.topbar>*{pointer-events:auto}.gaze-shell{--gaze-x:0deg;--gaze-y:0deg;--eye-x:0px;--eye-y:0px;transform:perspective(700px) rotateX(var(--gaze-y)) rotateY(var(--gaze-x)) scale(1.005);transform-style:preserve-3d;will-change:transform;transition:transform .22s cubic-bezier(.22,1,.36,1),filter .55s;position:relative}.gaze-shell:after{content:"";z-index:1;pointer-events:none;transform:translate(calc(var(--eye-x) * .28),calc(var(--eye-y) * .28)) translateZ(6px);background:radial-gradient(circle at 32% 24%,#ffffff42,#0000 34%);border-radius:50%;transition:transform .22s cubic-bezier(.22,1,.36,1);position:absolute;inset:12%}.gaze-eyes{z-index:2;width:38%;height:26%;transform:translate(calc(-50% + var(--eye-x)),calc(-50% + var(--eye-y))) translateZ(12px);pointer-events:none;justify-content:center;gap:12%;transition:transform .2s cubic-bezier(.22,1,.36,1);display:flex;position:absolute;top:39%;left:50%}.gaze-eyes i{background:#fff;border-radius:999px;width:32%;height:100%;display:block;box-shadow:0 0 7px #fff8}.mark-area{width:90px;height:90px;position:relative}.mark-shell{width:90px;height:90px}.mark{object-fit:contain;filter:drop-shadow(0 8px 15px #000);width:90px;height:90px}.mark-shell:hover{filter:hue-rotate(150deg)saturate(1.7)drop-shadow(0 12px 22px #000)}.mark-shell:hover .mark{animation:1.35s ease-in-out infinite mark-breathe}.mascot-message{min-width:max-content;color:var(--black);background:var(--white);letter-spacing:-.01em;opacity:0;visibility:hidden;transform-origin:0 100%;pointer-events:none;border-radius:14px 14px 14px 4px;padding:11px 15px;font-size:17px;font-weight:500;transition:opacity .2s,transform .35s cubic-bezier(.16,1,.3,1),visibility 0s linear .35s;position:absolute;top:8px;left:calc(100% + 13px);transform:translate(-8px,5px)scale(.92);box-shadow:0 10px 30px #0007}.mascot-message.visible{opacity:1;visibility:visible;transition:opacity .2s,transform .35s cubic-bezier(.16,1,.3,1),visibility;transform:none}.view-switch{align-items:center;gap:16px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.view-switch button{color:#777;background:0 0;padding:14px 0;font-size:18px}.view-switch button.active{color:var(--white)}.work-field{--mx:0px;--my:0px;transform:translate3d(var(--mx),var(--my),0);perspective:1100px;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0}.work-card{--sx:0px;--sy:0px;--ss:.8;--sr:0deg;--rx:0deg;--skew:0deg;--curve:20px;--blur:0px;--alpha:1;width:22vw;min-width:250px;transform:translate(-50%,-50%) translate3d(var(--sx),var(--sy),0) perspective(1050px) rotateY(var(--sr)) rotateX(var(--rx)) rotateZ(var(--skew)) scale(var(--ss));transform-origin:50%;filter:blur(var(--blur));opacity:var(--alpha);will-change:transform,filter;transition:filter .35s,opacity .35s;position:absolute;top:50%;left:50%}.card-button{width:100%;color:inherit;text-align:left;background:0 0;padding:0;display:block}.picture-wrap{aspect-ratio:1.78;background:#222;border-radius:28px;display:block;overflow:hidden;transform:translateZ(0);box-shadow:0 18px 38px #0008}.work-card img{object-fit:cover;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s;display:block;transform:scale(1.04)}.work-card:hover{filter:blur()!important;opacity:1!important}.work-card:hover img{filter:saturate(1.2);transform:scale(1.08)}.work-info{display:none}.showreel-card{z-index:20;width:238px;height:238px;color:inherit;filter:drop-shadow(0 16px 30px #000b);text-decoration:none;transition:transform .65s cubic-bezier(.16,1,.3,1);position:fixed;bottom:-90px;left:-84px;transform:rotate(-13deg)}.showreel-card:hover{transform:translate(34px,-29px)rotate(-8deg)scale(1.06)}.showreel-image{border-radius:10px;transition:transform .65s cubic-bezier(.16,1,.3,1),border-radius .4s;position:absolute;inset:38px;overflow:hidden;transform:rotate(13deg)}.showreel-card:hover .showreel-image{border-radius:50%;transform:rotate(8deg)scale(1.04)}.showreel-image img{object-fit:cover;filter:brightness(.76)saturate(.92);width:100%;height:100%;display:block}.orbit-copy{animation:18s linear infinite spin;position:absolute;inset:0}.orbit-copy span{--total:42;height:50%;color:var(--white);letter-spacing:.12em;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(calc(var(--char) * (360deg / var(--total))));font-size:17px;position:absolute;top:50%;left:50%}.sound-button{z-index:30;background:var(--white);width:52px;height:52px;color:var(--black);border-radius:50%;place-items:center;transition:transform .25s,background .25s;display:grid;position:fixed;bottom:30px;right:30px}.sound-button:hover{background:#dfff00;transform:scale(1.08)}.play-icon{border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:11px solid var(--black);width:0;height:0;margin-left:4px}.equalizer{align-items:center;gap:3px;height:19px;display:flex}.equalizer i{background:var(--black);border-radius:4px;width:3px;height:7px;animation:.7s ease-in-out infinite alternate eq;display:block}.equalizer i:nth-child(2){animation-delay:-.36s}.equalizer i:nth-child(3){animation-delay:-.18s}.equalizer i:nth-child(4){animation-delay:-.52s}.portfolio-list{height:100svh;overflow-y:auto}.portfolio-list .work-field{flex-direction:column;align-items:center;width:min(960px,100vw - 140px);margin:0 auto;padding:145px 0 100px;display:flex;position:relative;inset:auto;overflow:visible;transform:none!important}.portfolio-list .work-card{width:100%;min-width:0;animation:list-row-in .65s calc(var(--i) * 45ms) both;transition:opacity .3s;position:relative;inset:auto;transform:none}.portfolio-list .work-field:hover .work-card:not(:hover){opacity:.38}.portfolio-list .card-button{justify-content:center;align-items:center;min-height:72px;display:flex;position:relative;overflow:visible}.portfolio-list .picture-wrap{z-index:1;aspect-ratio:1.72;opacity:0;pointer-events:none;border-radius:18px;width:300px;transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-70%)scale(.88)}.portfolio-list .work-card:hover .picture-wrap,.portfolio-list .work-card:focus-within .picture-wrap{opacity:1;transform:translate(-50%,-76%)scale(1)}.portfolio-list .work-card img{transform:none}.portfolio-list .work-info{z-index:2;text-align:center;margin:0;display:block;position:relative}.portfolio-list .work-info>span{display:block}.portfolio-list .work-info strong{color:var(--white);letter-spacing:-.045em;font-size:clamp(42px,4.2vw,60px);font-weight:500;line-height:1;display:block}.portfolio-list .work-info small,.portfolio-list .work-info b{display:none}.menu-panel{z-index:60;color:var(--black);opacity:0;visibility:hidden;pointer-events:none;background:#00000080;transition:opacity .45s,visibility 0s linear .95s;position:fixed;inset:0}.menu-panel.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s,visibility}.menu-sheet{background:var(--white);transform-origin:100%;border-radius:16px;flex-direction:column;width:min(32.315vw,465px);min-width:420px;height:calc(100svh - 60px);padding:20px 20px 20px 45px;transition:transform .95s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:30px;right:30px;overflow:hidden;transform:translate(calc(100% + 45px))scaleX(.72)}.menu-panel.open .menu-sheet{transform:none}.close-control{align-self:flex-end;align-items:center;gap:12px;font-size:18px;font-weight:500;display:flex}.close-button{background:var(--black);width:48px;height:48px;color:var(--white);border-radius:50%;padding:0;transition:transform .25s;position:relative}.close-button:hover{transform:rotate(8deg)}.close-button i{background:currentColor;width:16px;height:1px;position:absolute;top:23px;left:16px;transform:rotate(45deg)}.close-button i:last-child{transform:rotate(-45deg)}.menu-panel nav{flex-direction:column;align-items:flex-start;gap:15px;margin-top:clamp(80px,14vh,130px);display:flex}.menu-panel nav a,.menu-panel nav button{color:var(--black);letter-spacing:-.05em;background:0 0;padding:0;font-size:clamp(58px,5.55vw,80px);font-weight:500;line-height:1;text-decoration:none;transition:padding-left .45s cubic-bezier(.16,1,.3,1),opacity .3s,transform .45s cubic-bezier(.16,1,.3,1);position:relative}.menu-panel nav a:before,.menu-panel nav button:before{content:"";opacity:0;background:currentColor;border-radius:50%;width:.18em;height:.18em;transition:opacity .25s,transform .45s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;left:0;transform:translate(-1em,-50%)scale(.25)}.menu-panel nav a:hover,.menu-panel nav button:hover,.menu-panel nav a:focus-visible,.menu-panel nav button:focus-visible{padding-left:.42em;transform:translate(.05em)}.menu-panel nav a:hover:before,.menu-panel nav button:hover:before,.menu-panel nav a:focus-visible:before,.menu-panel nav button:focus-visible:before{opacity:1;transform:translateY(-50%)scale(1)}.menu-panel nav:hover>:not(:hover){opacity:.32}.about-view{z-index:2;place-items:center;padding:120px clamp(24px,8vw,150px);display:grid;position:absolute;inset:0}.about-copy{color:#858585;letter-spacing:-.055em;text-align:center;text-wrap:balance;width:min(920px,72vw);margin:0;font-size:clamp(30px,2.7vw,48px);font-weight:500;line-height:1.02;animation:.9s cubic-bezier(.16,1,.3,1) both about-in}.menu-footer{flex-direction:column;align-items:flex-start;gap:24px;margin-top:auto;font-size:18px;display:flex}.menu-footer>a{color:inherit;text-underline-offset:4px}.social-links{gap:10px;display:flex}.social-links a{width:48px;height:48px;color:var(--white);background:var(--black);border-radius:50%;place-items:center;font-size:14px;font-weight:600;text-decoration:none;display:grid}.social-links:hover a:not(:hover){color:#8b8b8b;background:#dedede}.social-links a{transition:color .3s,background .3s,transform .3s}.social-links a:hover{transform:translateY(-4px)}.project-detail{z-index:200;overscroll-behavior:contain;padding:72px 0 100px;animation:.5s cubic-bezier(.2,.8,.2,1) both detail-in;position:fixed;inset:0;overflow:hidden auto}.project-detail.detail-dark{background:#080808}.project-detail.detail-light{background:#f2f2f0}.project-detail>img{object-fit:contain;object-position:top center;width:min(72vw,1180px);height:auto;margin:0 auto;display:block;box-shadow:0 22px 70px #0003}.detail-close{z-index:20;color:var(--black);background:var(--white);border-radius:999px;padding:14px 18px;transition:transform .25s,background .25s;position:fixed;top:24px;right:24px;box-shadow:0 8px 28px #0007}.detail-close:hover{background:#dfff00;transform:scale(1.06)}.detail-close span{margin-left:8px}body.detail-open{overflow:hidden}@keyframes orb-float{50%{transform:translateY(7px)rotate(4deg)}}@keyframes hello-orb{0%{background:var(--white);transform:translateY(0)scale(1)}34%{transform:translateY(-13px)scale(.92,1.08)}55%{transform:translateY(5px)scale(1.16,.82)}72%{background:var(--white);transform:translateY(-4px)scale(1.12)}to{background:0 0;transform:translateY(0)scale(2.35)}}@keyframes smiley-dissolve{0%{opacity:0;transform:translate(-50%,-50%)scale(.36)}44%{opacity:.68}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes hey-away{to{opacity:0;transform:translateY(8px)}}@keyframes hello-away{to{opacity:0;visibility:hidden;transform:scale(1.025)}}@keyframes landing-in{to{opacity:1}}@keyframes landing-item{to{opacity:1;filter:blur();transform:none}}@keyframes sphere-reveal{0%,54%{opacity:0;clip-path:ellipse(18% 8%)}76%{opacity:.55;clip-path:ellipse(48% 48%)}90%,to{opacity:1;clip-path:ellipse(50% 50%)}}@keyframes sphere-mask{0%{opacity:1;border-radius:999px;width:32%;height:14%;transform:translate(-50%,-50%)}12%{width:40%;height:12%;transform:translate(-50%,-145%)}24%{width:34%;height:17%;transform:translate(-50%,-50%)}37%{width:45%;height:12%;transform:translate(-50%,-170%)}50%{border-radius:999px;width:36%;height:18%;transform:translate(-50%,-50%)}76%{opacity:1;border-radius:50%;width:100%;height:100%;transform:translate(-50%,-50%)}90%,to{opacity:0;border-radius:50%;width:100%;height:100%;transform:translate(-50%,-50%)}}@keyframes eq{0%{height:5px}to{height:19px}}@keyframes list-row-in{0%{opacity:0;filter:blur(8px);transform:translateY(20px)}to{opacity:1;filter:none;transform:none}}@keyframes float{50%{transform:translateY(15px)rotate(8deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes card-in{0%{opacity:0;filter:blur(14px);transform:translate(-50%,-50%) rotate(var(--r)) scale(.65)}}@keyframes detail-in{0%{opacity:0}}@keyframes about-in{0%{opacity:0;filter:blur(10px);transform:translateY(24px)}}@keyframes mark-breathe{0%,to{transform:translateY(0)scale(1)}35%{transform:translateY(-12px)scale(1.06)}70%{transform:translateY(7px)scale(.97)}}@media (width<=800px){.topbar{inset:18px 18px auto}.mark-area,.mark,.mark-shell{width:74px;height:74px}.mascot-message{white-space:nowrap;max-width:210px;top:5px;left:calc(100% + 9px)}.about-copy{width:min(94vw,680px);font-size:clamp(26px,7vw,38px)}.menu-button{font-size:15px}.view-switch{top:62px}.work-card{width:62vw;min-width:210px}.showreel-card{width:250px;height:181px;bottom:-102px;left:-118px}.portfolio-list .work-field{width:calc(100vw - 32px);padding:145px 0 90px}.portfolio-list .card-button{min-height:54px}.portfolio-list .work-info strong{font-size:40px;line-height:1}.menu-sheet{width:calc(100vw - 40px);min-width:0;height:calc(100svh - 40px);top:20px;right:20px}.landing-sphere{width:78px;height:78px;margin-bottom:15px}.detail-close{padding:12px 15px;top:14px;right:14px}.project-detail{padding:64px 0 72px}.project-detail>img{width:92vw}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}