/* Progressive enhancement: content is readable before the animation module loads. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.hero{position:relative;isolation:isolate}
.kinetic-field{position:absolute;inset:0;width:100%;height:min(100%,760px);pointer-events:none;mask-image:linear-gradient(transparent,#000 10%,#000 85%,transparent)}
.has-kinetic-field .motion-orbit{opacity:.13}
.has-kinetic-field .motion-scan{opacity:0;animation:none}
.hero-name{text-shadow:0 3px 0 #122242,0 14px 40px #0003}
.hero-motion-field{position:absolute;inset:0 -40px 0;overflow:clip;z-index:-1;pointer-events:none;contain:paint}
.motion-grid{position:absolute;inset:0;background-image:linear-gradient(#4b7dff14 1px,transparent 1px),linear-gradient(90deg,#4b7dff14 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(transparent,#0009 25%,#0006 60%,transparent 88%)}
.motion-orbit{position:absolute;width:440px;height:440px;right:-40px;top:90px;opacity:.65}
.motion-orbit i{position:absolute;inset:0;border:1px solid #477aff99;border-radius:50%;transform:rotate(-25deg) scaleY(.55)}
.motion-orbit i:nth-child(2){inset:35px;border-color:#6797ffc9;transform:rotate(35deg) scaleY(.7)}
.motion-orbit i:nth-child(3){inset:75px;border-style:dashed;border-color:#baf26a88;transform:rotate(-55deg) scaleY(.6)}
.motion-orbit>span{position:absolute;inset:15px;border-radius:50%;border-top:3px solid #bcf367;border-right:1px solid #4b7dff55;transform:rotate(-45deg) scaleY(.6)}
.motion-scan{position:absolute;left:4%;right:4%;top:15%;height:150px;background:linear-gradient(transparent,#255eff0b 70%,#497dff22);border-bottom:1px solid #648cff66;transform:translateY(0);opacity:0}
.hero-motion-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-height:30px;margin-top:15px;position:relative;z-index:2}
.hero-motion-controls+.hero-name{margin-top:24px}
.hero-name>span.motion-name-line{display:block;overflow:clip;padding:.12em .08em .16em;margin:-.12em -.08em -.16em;perspective:1000px;color:var(--ink)}
.hero-name .motion-name-line:last-child{color:var(--blue)}
.motion-letter{display:inline-block;transform-origin:50% 100%;white-space:pre}
.motion-name-line .name-period{color:var(--accent)}
.portfolio-motion .hero-name,.portfolio-motion .hero-bottom{animation:none}
.motion-paused .hero-name,.motion-paused .hero-bottom{animation:none!important}
.portrait-motion-frame{overflow:hidden;position:relative}
.motion-word-clip{display:inline-block;overflow:clip;vertical-align:bottom;padding:.12em .07em .15em;margin:-.12em -.07em -.15em}
.motion-word{display:inline-block;transform-origin:0 100%}
.motion-scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:100;background:var(--accent);transform-origin:left;pointer-events:none}
.motion-scroll-progress{box-shadow:0 0 12px #bcf36780}
.feature-project{perspective:1000px}
.motion-depth{transform-style:preserve-3d;backface-visibility:hidden}
.motion-depth::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--spot-x,50%) var(--spot-y,50%),#ffffff25,transparent 60%);opacity:0;transition:opacity .4s;z-index:2}
.motion-depth.motion-hover::after{opacity:1}
.motion-depth .project-number,.motion-depth .project-launch{transition:translate .65s var(--motion-ease),box-shadow .65s;translate:0 0 0}
.motion-depth.motion-hover .project-number{translate:5px -5px 28px}
.motion-depth.motion-hover .project-launch{translate:-6px -6px 40px;box-shadow:12px 16px 28px #0003}
.motion-shutters{position:absolute;inset:-1px;display:grid;grid-template-columns:repeat(6,1fr);z-index:5;pointer-events:none}
.motion-shutters>span{display:block;background:#111c31;transform-origin:top;border-right:1px solid #3b5384}
.project-engineering .motion-shutters>span{background:#0a225e}
.cafe-art .motion-shutters>span{background:#8cba46;border-color:#baf26a}
.feature-caption h3{transition:transform .6s var(--motion-ease),color .6s}
.feature-project:hover .feature-caption h3{transform:translateX(8px);color:var(--accent)}
.hero-portrait{perspective:1200px}
.hero-portrait img{transition:filter 1.2s,box-shadow 1.2s}
.hero-portrait:hover img{filter:grayscale(0);box-shadow:0 25px 90px #255eff26}
.hero-portrait .portrait-motion-frame{transition:box-shadow 1.2s}
.hero-portrait:hover .portrait-motion-frame{box-shadow:0 0 0 1px #759dff66,0 25px 80px #255eff18}
.travel-feature>img{transition:filter .8s}
.travel-feature:hover>img{filter:brightness(.88)}
.motion-edge{position:absolute;inset:0;z-index:4;border:1px solid #85a4ef36;pointer-events:none}
@property --edge-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@supports (mask-composite:exclude){
 .motion-edge::before{content:"";position:absolute;inset:-1px;padding:2px;background:conic-gradient(from var(--edge-angle),transparent 30%,#719bff 44%,#bcf367 50%,transparent 64%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity .4s}
 .motion-hover .motion-edge::before{opacity:1;animation:nr-edge-light 4s linear infinite}
}
@keyframes nr-edge-light{to{--edge-angle:360deg}}
.motion-pointer-aura{position:fixed;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid #bed6ff80;border-radius:50%;pointer-events:none;z-index:80;display:grid;place-items:center;font:12px/1 Arial,sans-serif;font-weight:700;letter-spacing:.04em;opacity:0;transition:width .3s,height .3s,margin .3s,background .3s,opacity .2s,border-color .3s;contain:layout style}
.motion-pointer-aura.is-visible{opacity:1}
.motion-pointer-aura.is-project{width:78px;height:78px;margin:-39px 0 0 -39px;background:#bcf367eb;color:#122011;border-color:#bcf367;box-shadow:0 0 36px #bcf36720}
.motion-pointer-aura.is-control{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:#bcf36799;background:#bcf36709}
.motion-ripple-host{position:relative;overflow:hidden;isolation:isolate}
.motion-ripple{position:absolute;width:300px;height:300px;margin:-150px 0 0 -150px;border:1px solid currentColor;border-radius:50%;background:radial-gradient(circle,transparent 45%,#ffffff55 68%,transparent 71%);pointer-events:none;z-index:1}
.motion-footer-light{background:radial-gradient(ellipse at var(--footer-light,20%) 45%,#fff 5%,#bcf367 30%,#7c9ac9 75%);background-clip:text;-webkit-background-clip:text;color:transparent!important}
.motion-footer-light>span{color:var(--accent)}
.motion-footer-light::after{content:"";position:absolute;bottom:-12px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,#bcf367,transparent);transform:scaleX(.15);transform-origin:left;transition:transform 1s var(--motion-ease)}
.motion-footer-light:hover::after{transform:scaleX(1)}
.project-thumb{position:relative}
.motion-magnet{display:inline-flex;gap:18px;align-items:center;justify-content:center;pointer-events:none}
.portfolio-motion .feature-image>img{transition:transform .65s var(--motion-ease)}
.portfolio-motion .feature-project:hover .feature-image>img{transform:scale(1.04)}
.portfolio-motion .travel-feature:hover>img{transform:none}
.site-header nav>a{position:relative}
.site-header nav>a:not(.nav-contact)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--motion-ease)}
.site-header nav>a:not(.nav-contact):hover::after,.site-header nav>a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.site-header nav>a:hover{text-decoration:none}
.hero-statement .button,.nav-contact{transition:background .3s,color .3s,box-shadow .3s}
.hero-statement .button:hover{box-shadow:0 0 32px #bcf36726}
.personal-directory a{transition:padding-left .5s var(--motion-ease),color .3s}
.personal-directory a:hover{padding-left:16px}
.personal-directory i{transition:transform .5s var(--motion-ease)}
.personal-directory a:hover i{transform:translate(5px,-5px)}
.footer-cta>span{transition:transform .6s var(--motion-ease)}
.footer-cta:hover>span{transform:translate(10px,-10px) rotate(5deg)}
.motion-toggle,.motion-replay{border:1px solid #42516a;background:#090e17bb;color:#c3cfdf;border-radius:20px;padding:9px 13px;min-height:38px;font:14px/1.3 Arial,sans-serif;cursor:pointer}
.motion-replay{border-color:transparent;background:transparent;padding-inline:0;color:var(--accent)}
.motion-toggle:hover,.motion-replay:hover{color:#fff;border-color:#a9c0df}
.motion-toggle:focus-visible,.motion-replay:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.motion-replay:disabled{opacity:.45;cursor:default}
.motion-toggle::before{content:"Ⅱ";margin-right:8px;color:var(--accent)}
.motion-toggle[aria-pressed=true]::before{content:"▷"}
.motion-toggle:disabled{opacity:.7;cursor:default}
.motion-paused .motion-letter,.motion-paused .motion-word{transform:none!important;opacity:1!important;filter:none!important}
.motion-paused .personal-directory a:hover{padding-left:0}
.motion-paused .footer-cta:hover>span,.motion-paused .personal-directory a:hover i{transform:none}
.motion-paused .motion-depth::after{opacity:0}
.motion-paused #main *,.motion-paused .site-header *,.motion-paused .site-footer *{animation:none!important;transition:none!important}
.motion-paused .feature-project:hover .feature-image>img,.motion-paused .travel-feature:hover>img{transform:none!important}
/* Ambient motion starts with CSS, even if a separate app module is unavailable. */
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:nr-page-out .45s cubic-bezier(.4,0,.2,1) both}
 ::view-transition-new(root){animation:nr-page-in .6s var(--motion-ease) both}
 .motion-orbit i:first-child{animation:nr-orbit-a 12s linear infinite}
 .motion-orbit i:nth-child(2){animation:nr-orbit-b 15s linear infinite}
 .motion-orbit i:nth-child(3){animation:nr-orbit-c 18s linear infinite reverse}
 .motion-orbit>span{animation:nr-orbit-b 7s linear infinite reverse}
 .motion-scan{animation:nr-scan 6s ease-in-out infinite}
 .motion-name-line:last-child .motion-letter:not(.name-period){animation:nr-chrome 5s ease-in-out infinite;animation-delay:calc(var(--letter-index,0)*.13s)}
 .motion-name-line:last-child .motion-letter:nth-child(2){--letter-index:1}
 .motion-name-line:last-child .motion-letter:nth-child(3){--letter-index:2}
 .motion-name-line:last-child .motion-letter:nth-child(4){--letter-index:3}
 .motion-name-line:last-child .motion-letter:nth-child(5){--letter-index:4}
 .motion-name-line:last-child .motion-letter:nth-child(6){--letter-index:5}
 .motion-name-line:last-child .motion-letter:nth-child(7){--letter-index:6}
 .motion-name-line:last-child .motion-letter:nth-child(8){--letter-index:7}
 .hero .signal-dot{animation:nr-signal 3s ease-out infinite}
 .portrait-motion-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-top:2px solid #bcf367;transform:scaleX(.12);transform-origin:left;animation:nr-portrait-line 5s ease-in-out infinite}
}
@keyframes nr-page-out{to{opacity:0;transform:translateY(-24px) scale(.98)}}
@keyframes nr-page-in{from{clip-path:inset(100% 0 0 0);transform:translateY(40px)}to{clip-path:inset(0);transform:none}}
.motion-paused::view-transition-old(root),.motion-paused::view-transition-new(root),.motion-paused::view-transition-group(*){animation:none!important}
@keyframes nr-orbit-a{from{transform:rotate(-25deg) scaleY(.55)}to{transform:rotate(335deg) scaleY(.55)}}
@keyframes nr-orbit-b{from{transform:rotate(35deg) scaleY(.7)}to{transform:rotate(395deg) scaleY(.7)}}
@keyframes nr-orbit-c{from{transform:rotate(-55deg) scaleY(.6)}to{transform:rotate(305deg) scaleY(.6)}}
@keyframes nr-scan{0%{transform:translateY(-70px);opacity:0}15%{opacity:.75}65%{opacity:.75}85%,100%{transform:translateY(390px);opacity:0}}
@keyframes nr-chrome{0%,40%,100%{color:#3971ff}54%{color:#b7d7ff}66%{color:#3971ff}}
@keyframes nr-signal{0%,100%{box-shadow:0 0 0 0 #bcf36700}25%{box-shadow:0 0 0 8px #bcf36725}65%{box-shadow:0 0 0 14px #bcf36700}}
@keyframes nr-portrait-line{0%,100%{transform:scaleX(.12);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}99%{transform-origin:right}}
.motion-idle .hero *, .motion-idle .hero *::after{animation-play-state:paused!important}
.motion-paused .hero *::after{animation:none!important}
.motion-paused .motion-scan{opacity:0}
.motion-paused .motion-edge::before{animation:none!important;opacity:0}
.motion-paused .feature-project:hover .feature-caption h3{transform:none}
.motion-paused .motion-depth .project-number,.motion-paused .motion-depth .project-launch{translate:none}
.motion-paused .kinetic-field{display:none}
@media(prefers-reduced-motion:reduce){.kinetic-field,.motion-pointer-aura{display:none!important}::view-transition-old(root),::view-transition-new(root),::view-transition-group(*){animation:none!important}}
@media(hover:none){.motion-pointer-aura{display:none!important}}
@media(max-width:700px){.hero-motion-field{inset:0 -20px}.motion-orbit{width:270px;height:270px;top:160px;right:-80px;opacity:.5}.hero-motion-controls{justify-content:flex-start;margin-top:18px;gap:16px}.hero-motion-controls+.hero-name{margin-top:30px}.hero-motion-controls button{font-size:14px}}
@media(hover:none){.personal-directory a:hover{padding-left:0}.footer-cta:hover>span,.personal-directory a:hover i{transform:none}}
@media(prefers-reduced-motion:reduce){.motion-word{transform:none!important;opacity:1!important}.motion-scroll-progress{display:none}.footer-cta:hover>span,.personal-directory a:hover i{transform:none}}
@media(prefers-reduced-motion:reduce){.motion-letter{transform:none!important;opacity:1!important;filter:none!important}}