/* Motion direction inspired by Pear, built for Chisato's portfolio. */
:root{--motion-ease:cubic-bezier(.19,1,.22,1)}
body{overflow-x:clip}header{position:relative;z-index:5}header nav a{position:relative;text-decoration:none!important}header nav a::after{content:"";position:absolute;bottom:-6px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--motion-ease)}header nav a:hover::after,header nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.scroll-progress{height:2px;background:#b3bda2;position:fixed;inset:0 0 auto;z-index:20;transform:scaleX(0);transform-origin:left;pointer-events:none}
.chapter-rail{position:fixed;right:15px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:19px;mix-blend-mode:difference;color:white}.chapter-rail a{display:flex;justify-content:end;align-items:center;gap:9px;text-decoration:none;min-height:24px}.chapter-rail i{width:8px;height:1px;background:currentColor;transition:width .6s var(--motion-ease)}.chapter-rail span{font-size:8px;text-transform:uppercase;letter-spacing:.1em;opacity:0;transform:translateX(6px);transition:opacity .3s,transform .5s}.chapter-rail a.active i,.chapter-rail a:hover i{width:22px}.chapter-rail a.active span,.chapter-rail a:hover span,.chapter-rail a:focus-visible span{opacity:1;transform:none}
.motion-ready .reveal,.motion-ready .reveal.in-view{opacity:1;transform:none;transition:none}
.motion-ready .motion-item{opacity:0;transform:translate3d(0,45px,0) rotateX(5deg);filter:blur(4px);transition:opacity 1s var(--motion-ease),transform 1.2s var(--motion-ease),filter 1s var(--motion-ease);transition-delay:var(--delay,0ms)}.motion-ready .motion-item.is-visible{opacity:1;transform:none;filter:none}
.section-title,.section-head{position:relative;border-top-color:transparent}.section-title::before,.section-head::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--motion-ease)}.section-title.is-visible::before,.section-head.is-visible::before{transform:scaleX(1)}
.motion-word{display:inline-block;white-space:nowrap}.motion-char{display:inline-block;transition:opacity .14s linear;color:inherit}.scroll-ink .motion-char{opacity:var(--ink,1)}
.motion-title{perspective:900px}.motion-title .motion-char{transform-origin:50% 100%}.motion-ready .motion-title .motion-char{opacity:0;transform:translateY(95%) rotateX(-65deg);filter:blur(5px);transition:transform 1s var(--motion-ease),opacity .65s,filter .8s;transition-delay:calc(var(--char-index)*22ms)}.motion-ready .motion-title.is-visible .motion-char{opacity:1;transform:none;filter:none}
.hero h1{animation:none!important}.hero-scene{position:relative}.hero-film,.hero-grid{display:none}.hero-top,.hero-bottom,.hero-spotlight{animation:none!important}.hero-top{animation:motionFade .9s .15s both!important}.hero-bottom{animation:motionRise 1.1s .65s both!important}
.hero-spotlight,.project{transform-style:preserve-3d}.hero-spotlight{position:relative;isolation:isolate;overflow:hidden;transition:transform .25s ease-out,color .4s,border-color .4s}.hero-spotlight::before{content:"";position:absolute;inset:0;background:#f1eee8;transform:translateY(101%);z-index:-1;transition:transform .65s var(--motion-ease)}.hero-spotlight:hover{background:transparent;color:#171717;transform:none}.hero-spotlight:hover::before,.hero-spotlight:focus-visible::before{transform:none}.hero-spotlight:focus-visible{color:#171717}.hero-spotlight strong{transform:translateZ(24px)}
.project{position:relative;perspective:1200px;transition:transform .3s ease-out,box-shadow .5s}.project-image img{height:115%;min-height:100%;object-fit:cover;transform:translateY(var(--image-y,-5%)) scale(1.04);transition:transform .3s ease-out,filter 1s}.project:hover .project-image img{transform:translateY(var(--image-y,-5%)) scale(1.09)}.project:hover{box-shadow:0 25px 55px -35px #18181866}
.project-copy a,.back{position:relative;isolation:isolate;padding:14px 12px!important;overflow:hidden;transition:color .4s!important;letter-spacing:.12em!important}.project-copy a::before,.back::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;transform:translateY(103%);transition:transform .55s var(--motion-ease)}.project-copy a::before{background:#181818}.back::before{background:#eee}.project-copy a:hover,.project-copy a:focus-visible{color:#eee;opacity:1}.back:hover,.back:focus-visible{color:#181818}.project-copy a:hover::before,.project-copy a:focus-visible::before,.back:hover::before,.back:focus-visible::before{transform:none}
.focus-grid{perspective:1100px}.focus-grid>div{position:relative;transition:background .5s,transform .7s var(--motion-ease)}.focus-grid>div:hover{background:#dadad5;transform:translateY(-7px)}.index-row{position:relative;transition:padding .65s var(--motion-ease),background .5s}.index-row:hover{padding-left:14px;background:#deded9}.index-row h3{transition:transform .6s var(--motion-ease)}.index-row:hover h3{transform:translateX(8px)}
.motion-spark{display:inline-block;margin-left:10px;width:12px;height:12px;vertical-align:middle;transition:transform 1s var(--motion-ease)}.section-title:hover .motion-spark{transform:rotate(180deg)}.motion-spark path{fill:currentColor}.scroll-cue{position:absolute;bottom:18px;left:clamp(22px,4vw,70px);display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#eee8}.scroll-cue i{width:36px;height:1px;overflow:hidden;background:#fff3}.scroll-cue i::after{content:"";display:block;height:1px;background:#eee;animation:cueSweep 2s ease-in-out infinite}
.image{overflow:hidden}.image img{transform:translateY(var(--image-y,0px)) scale(1.06);animation:none!important;transition:transform .3s ease-out}.footer{position:relative;overflow:hidden}.footer::before{content:"";position:absolute;pointer-events:none;width:65vw;height:65vw;right:-20%;top:-90%;border-radius:50%;background:radial-gradient(circle,#a6ad9620,transparent 65%);transform:translate(var(--pointer-x,0px),var(--pointer-y,0px));transition:transform .6s ease-out}.footer>*{position:relative}
@keyframes motionFade{from{opacity:0}to{opacity:1}}@keyframes motionRise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes cueSweep{0%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}
@media(min-width:761px) and (prefers-reduced-motion:no-preference){.hero-scene{height:175svh}.hero-scene .hero{position:sticky;top:0;height:100svh;min-height:680px;padding-top:35px;padding-bottom:65px}.hero-scene h1{font-size:clamp(92px,13.4vw,214px);margin:38px 0 28px;transform:translate3d(calc(var(--scene,0)*-65px),calc(var(--scene,0)*-38px),0) scale(calc(1 - var(--scene,0)*.06));opacity:calc(1 - var(--scene,0)*.72);filter:blur(calc(var(--scene,0)*3px))}.hero-scene .hero::before{animation:none;background:radial-gradient(ellipse at calc(70% + var(--pointer-x,0px)) calc(35% + var(--pointer-y,0px)),#62645b 0%,#292b28 30%,#121212 75%)}.hero-film{display:block;position:absolute!important;inset:0;pointer-events:none;clip-path:circle(var(--film-radius,0%) at 74% 48%);transform:scale(calc(1.2 - var(--scene,0)*.2));opacity:calc(var(--scene,0)*.7)}.hero-film img{width:100%;height:100%;object-fit:cover;filter:brightness(.4) saturate(.7)}.hero-grid{display:block;position:absolute!important;inset:0;pointer-events:none;opacity:calc(.4 - var(--scene,0)*.25);background:linear-gradient(90deg,transparent calc(72% - .5px),#ffffff40 72%,transparent calc(72% + .5px)),linear-gradient(transparent calc(20% - .5px),#ffffff40 20%,transparent calc(20% + .5px));transform:translate3d(calc(var(--pointer-x,0px)*.2),calc(var(--pointer-y,0px)*.2),0)}.hero-grid::before{content:"✦";position:absolute;left:calc(72% - 7px);top:calc(20% - 9px);font-size:18px;color:#b9c2a7;transform:rotate(calc(var(--scene,0)*180deg))}.hero-scene .hero-top{opacity:calc(1 - var(--scene,0)*.35)}.hero-scene .hero-bottom{transform:translateY(calc(var(--scene,0)*-18px))}.hero-scene .hero-bottom p{max-width:640px}.hero-scene .hero-spotlight{backdrop-filter:blur(12px);background:#18181844}}
@media(max-width:760px){.chapter-rail{display:none}.hero-scene{height:auto}.hero-scene .hero{min-height:610px}.hero-scene h1{font-size:clamp(76px,17vw,130px);margin:90px 0 55px}.motion-ready .motion-item{transform:translateY(24px);filter:none}.motion-ready .motion-title .motion-char{filter:none;transition-delay:calc(var(--char-index)*14ms)}.focus-grid>div:hover,.index-row:hover,.index-row:hover h3{transform:none}.scroll-cue{display:none}.project-image img{height:110%}.hero-spotlight{overflow:visible}.hero-spotlight::before{display:none}}
.image img{transform:translateY(var(--image-y,0px)) scale(1.14)}
.plateit-art-stage{position:relative;overflow:hidden;isolation:isolate;background:#c9c7bf}
.plateit-art-layer{position:absolute;inset:-5%;animation:plateitFloat 9s ease-in-out infinite;will-change:transform}
.plateit-art-stage .plateit-art-layer img,.project:hover .plateit-art-stage img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 50%;transform:none!important;transition:none!important;animation:none!important}
.art-wide{height:clamp(330px,48vw,650px)}
.art-scan{position:absolute;left:12%;right:12%;top:25%;height:1px;background:linear-gradient(90deg,transparent,#f5f4d2b3,transparent);box-shadow:0 0 18px 3px #dce4b620;opacity:0;animation:plateitScan 7s ease-in-out infinite;pointer-events:none}
.art-corner{position:absolute;width:22px;height:22px;pointer-events:none;opacity:.55;color:#f4f3e7}.art-corner-a{top:25px;left:25px;border-top:1px solid;border-left:1px solid}.art-corner-b{right:25px;bottom:70px;border-right:1px solid;border-bottom:1px solid}
.art-toggle{position:absolute;right:18px;bottom:18px;border:1px solid #f4f3e76b;border-radius:0;background:#262720b3;color:#f4f3e7;font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;padding:10px 12px;cursor:pointer;z-index:3}.art-toggle:hover{background:#181a14}.art-toggle:focus-visible{outline:2px solid white;outline-offset:3px}.plateit-art-stage .image-label{max-width:calc(100% - 155px);bottom:18px;left:18px;background:#262720b3;font-size:9px;padding:10px 12px;line-height:1.3}
.art-paused .plateit-art-layer,.art-paused .art-scan,.art-offscreen .plateit-art-layer,.art-offscreen .art-scan{animation-play-state:paused}
@keyframes plateitFloat{0%,100%{transform:translate3d(-.4%,.7%,0) rotate(-.4deg) scale(1.015)}50%{transform:translate3d(.4%,-.7%,0) rotate(.4deg) scale(1.035)}}
@keyframes plateitScan{0%,20%{opacity:0;transform:translateY(0)}30%{opacity:.55}70%{opacity:.3;transform:translateY(200px)}80%,100%{opacity:0;transform:translateY(220px)}}
@media(max-width:760px){.project-image.plateit-art-stage{height:290px}.plateit-art-layer{inset:-3%}.plateit-art-stage .plateit-art-layer img{object-position:52% 50%}.plateit-art-stage .image-label{letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){.plateit-art-layer{transform:none;will-change:auto}.art-scan,.art-toggle{display:none}}
html:not(.motion-ready) .section-title::before,html:not(.motion-ready) .section-head::before{transform:none}
@media(max-width:760px){.hero-spotlight:hover,.hero-spotlight:focus-visible{color:#f5f5f3;background:#333}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .motion-item,.motion-ready .motion-title .motion-char{opacity:1;transform:none;filter:none}.scroll-ink .motion-char{opacity:1}.section-title::before,.section-head::before{transform:none}.project-image img,.project:hover .project-image img,.image img{transform:none}.hero-film,.hero-grid,.scroll-cue,.scroll-progress,.chapter-rail{display:none}.hero h1,.hero-top,.hero-bottom{opacity:1!important;transform:none!important}.focus-grid>div:hover,.index-row:hover h3{transform:none}}