/* Title: local corruption that eases in before the pointer reaches the letters. */
.word{pointer-events:auto;cursor:crosshair}
#intro[aria-hidden=true] .word{pointer-events:none}
.title-pixels{display:none;position:absolute;left:var(--hover-x,50%);top:var(--hover-band,40%);width:.32em;height:.07em;background:white;pointer-events:none;box-shadow:.18em .22em 0 -.01em #fff,-.26em -.12em 0 -.02em #fff}
.word.is-interacting .glitch-copy{opacity:var(--hover-strength,0);animation:none;clip-path:inset(var(--hover-band,40%) 0 calc(82% - var(--hover-band,40%)) 0);transform:translateX(calc(var(--hover-drift,9px)*var(--hover-strength,0)));text-shadow:12px 0 #ffffff70,-8px 0 #ffffff40}
.word.is-interacting .glitch-two{opacity:calc(var(--hover-strength,0)*.8);clip-path:inset(calc(var(--hover-band,40%) + 20%) 0 calc(68% - var(--hover-band,40%)) 0);transform:translateX(calc(var(--hover-drift,9px)*var(--hover-strength,0)*-1))}
.word.is-interacting .title-pixels{display:block;opacity:var(--hover-strength,0);animation:pixel-packet .72s steps(1) infinite}
@keyframes pixel-packet{0%,100%{clip-path:inset(0);transform:scaleX(1)}24%{clip-path:inset(0 25% 0 0);transform:scaleX(2.8)}51%{transform:translateY(.13em) scaleX(.6)}73%{transform:translateX(-.3em) scaleX(1.5)}}
#about-link.signal-glitch{animation:nav-signal .34s steps(1)}
@keyframes nav-signal{0%,100%{clip-path:inset(0);text-shadow:none}18%{clip-path:polygon(0 0,100% 0,100% 44%,0 44%,0 52%,100% 52%,100% 100%,0 100%);text-shadow:3px 0 #ffffff80}45%{clip-path:inset(0 0 24% 0);text-shadow:-4px 0 #ffffff60}72%{clip-path:inset(0);text-shadow:2px 0 #ffffff50}}
/* A displaced strip replaces exactly that strip of the original, never doubles it. */
.about-word{display:inline-block;position:relative;white-space:pre-wrap;max-width:100%;line-height:1.25;vertical-align:baseline}
.about-face{display:block}
.about-cut{display:none;position:absolute;inset:0;pointer-events:none;user-select:none;clip-path:inset(var(--cut-top,40%) 0 calc(100% - var(--cut-bottom,58%)))}
.about-word.charged .about-face{clip-path:polygon(0 0,100% 0,100% var(--cut-top,40%),0 var(--cut-top,40%),0 var(--cut-bottom,58%),100% var(--cut-bottom,58%),100% 100%,0 100%)}
.about-word.charged .about-cut{display:block;animation:word-splice var(--burst-duration,360ms) cubic-bezier(.2,.7,.3,1) both}
@keyframes word-splice{
  0%,100%{transform:translateX(0)}
  18%,30%{transform:translateX(var(--word-shift,.16em))}
  52%{transform:translateX(calc(var(--word-shift,.16em)*-.22))}
  82%{transform:translateX(0)}
}
html[data-reduced=true] .about-face{clip-path:none}
html[data-reduced=true] .about-cut{display:none}
@media(prefers-reduced-motion:reduce){.about-word.charged .about-face{clip-path:none}.about-word.charged .about-cut{display:none}}
@media print{.about-word.charged .about-face{clip-path:none}.about-word.charged .about-cut{display:none}}
/* Native scrolling stays enabled; the custom marker replaces only scrollbar chrome. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
/* A clean face with travelling, sharply cut signal echoes. No displacement filters. */
.projects a{position:relative;isolation:isolate;justify-content:center;text-align:center;min-height:106px;--project-p:0;--project-x:0px;--project-y:0px;--tear:0;--scan:50%;--split:12px}
.projects a:hover{padding-left:0;padding-right:0}
.project-name{position:relative;z-index:2;display:inline-block;text-shadow:0 1px #000,0 -1px #000,1px 0 #000,-1px 0 #000}
.project-warp{position:absolute;z-index:3;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%);pointer-events:none;user-select:none;white-space:nowrap;opacity:calc(var(--project-p)*var(--tear))}
.project-warp>span{display:block;clip-path:inset(var(--scan) -45px calc(94% - var(--scan)) -45px);transform:translateX(calc(var(--split)*var(--tear)));text-shadow:5px 0 #ffffff50,-5px 0 #000}
.project-warp>span+span{position:absolute;inset:0}
.project-warp>span:nth-child(2){clip-path:inset(calc(var(--scan) + 9%) -45px calc(83% - var(--scan)) -45px);transform:translateX(calc(var(--split)*var(--tear)*-.65))}
.project-warp>span:nth-child(3){clip-path:inset(calc(var(--scan) + 21%) -45px calc(77% - var(--scan)) -45px);transform:translateX(calc(var(--split)*var(--tear)*1.4));color:transparent;-webkit-text-stroke:.5px white}
.project-translation{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none;user-select:none;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;font-size:1.85em;font-weight:400;letter-spacing:.16em;color:transparent;-webkit-text-stroke:.65px #fff;opacity:calc(var(--project-p)*.32);transform:translate(calc(var(--project-x)*.4 + var(--tear)*var(--split)*-.35),calc(-7px + var(--project-y)*.3)) skewX(calc(var(--tear)*-3deg));mask-image:linear-gradient(180deg,#000 0%,#0008 40%,#000 48%,#0002 65%,#000 100%)}
.projects a .project-arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}
.projects a:hover .project-arrow{transform:translate(3px,calc(-50% - 3px))}
.about-dismiss{position:fixed;z-index:16;left:50%;bottom:max(30px,env(safe-area-inset-bottom));transform:translateX(-50%);font-size:10px;line-height:44px;white-space:nowrap;color:#ffffff90;padding:0 8px}
.about-dismiss:hover{color:#fff}.about-sheet{position:relative;z-index:1;cursor:text}
@media(max-width:767px){.projects a{min-height:98px}.about-dismiss{font-size:9px;bottom:25px}}
html[data-reduced=true] .project-warp,html[data-reduced=true] .project-translation{display:none}
html[data-reduced=true] .project-name{transform:none}
html[data-sleeping=true] .about-cut,html[data-sleeping=true] .project-warp>span,html[data-sleeping=true] .project-translation{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.title-pixels,.project-warp,.project-translation{display:none!important}.project-name{transform:none!important}}
@media print{.title-pixels,.project-warp,.project-translation,.about-dismiss{display:none}.project-name{transform:none}}