/* Motion is decorative. Content and page navigation work without it. */
.hero-greeting{font:500 clamp(28px,2.4vw,36px)/1.4 Manrope,Arial,sans-serif;letter-spacing:-.04em;margin-bottom:24px;color:var(--ink)}
.wave-hand{display:inline-block;transform-origin:70% 75%;margin-left:4px;animation:hand-wave 2s .35s 2 ease-in-out}
@keyframes hand-wave{0%,60%,100%{transform:rotate(0deg)}10%,30%{transform:rotate(18deg)}20%,40%{transform:rotate(-9deg)}50%{transform:rotate(12deg)}}
@media(max-width:560px){.hero-greeting{font-size:28px;margin-bottom:20px}}
.current-stack{border:1px solid #b5b9ab;border-radius:50px;padding:11px 18px;font-size:12px;white-space:nowrap}
@media(max-width:560px){.current-stack{font-size:10px;padding:9px 12px}.header-actions{gap:12px}}
.job{grid-template-columns:1fr!important;position:relative}
.motion-toggle{font:9px var(--mono);padding:6px 0;display:inline-flex;gap:10px;align-items:center;color:var(--muted);white-space:nowrap}
.motion-toggle:hover{color:var(--orange)}
.header{transition:box-shadow .35s,background .35s}
.header.scrolled{box-shadow:0 8px 30px #24282409;background:#f4f2e9f5}
.monogram{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.brand:hover .monogram{transform:rotate(-7deg)}
.button{position:relative;isolation:isolate;overflow:hidden}
.button.primary::before{content:'';position:absolute;inset:-30%;background:linear-gradient(105deg,transparent 35%,#ffffff22 50%,transparent 65%);transform:translateX(-120%);transition:transform .65s;pointer-events:none;z-index:-1}
.button.primary:hover::before{transform:translateX(120%)}
.button>span{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.button:hover>span{transform:translate(3px,3px)}
.profile-trigger>span{transition:transform .3s}
.profile-trigger:hover>span{transform:rotate(45deg)}
.motion-ready .system-layer{animation:layer-assemble .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.18s + var(--step,0)*.12s)}
.motion-ready .system-layer:nth-child(2){--step:1}.motion-ready .system-layer:nth-child(3){--step:2}.motion-ready .system-layer:nth-child(4){--step:3}
.orbital-track{position:absolute;inset:-4px;border-radius:50%;animation:orbit-lap 18s linear infinite;animation-play-state:paused;pointer-events:none}
.orbital-track::before{content:'';position:absolute;left:calc(50% - 3px);top:0;width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px #d94c2a0b}
.motion-ready .system-art.in-view .orbital-track{animation-play-state:running}
.motion-ready .layer-stack{animation:stack-float 7s ease-in-out 1.2s infinite;animation-play-state:paused}
.motion-ready .system-art.in-view .layer-stack{animation-play-state:running}
.motion-ready .tech-ribbon span{animation:ribbon-enter .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.5s + var(--tech-order,0)*.07s)}
.project-visual{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));will-change:auto}
.project-visual::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,50%),#fff7 0,transparent 55%);opacity:0;transition:opacity .4s}
.project-visual:hover::before{opacity:1}
.project-visual:hover{box-shadow:0 20px 45px #0002}
.motion-ready .flow::after{content:'';position:absolute;left:0;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;z-index:2;background:var(--orange);box-shadow:0 0 0 4px #d94c2a15;animation:flow-packet 4.8s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused;pointer-events:none}
.motion-ready .project.in-view .flow::after{animation-play-state:running}
.motion-ready .project:nth-child(2) .flow::after{animation-delay:-1.6s}.motion-ready .project:nth-child(3) .flow::after{animation-delay:-3.2s}
.js-ready .project-body>*{transition:opacity .6s ease,translate .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--detail-order,0)*65ms)}
.js-ready .project:not(.visible) .project-body>*{opacity:0;translate:0 15px}
.js-ready .project.visible .project-body>*{opacity:1;translate:0 0}
.skill-row{transition:border-color .3s,opacity .65s,transform .65s!important}
.skill-row .row-number{transition:transform .35s,color .35s}
.skill-row:hover{border-color:var(--orange)}
.skill-row:hover .row-number{transform:translateX(5px)}
.skill-row h3{transition:color .3s}
.skill-row:hover h3{color:var(--orange)}
.job::before{content:'';position:absolute;left:-18px;top:28px;bottom:34px;width:2px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.job:hover::before{transform:scaleY(1)}
.job .job-dot{transition:transform .3s,box-shadow .3s}
.job:hover .job-dot{transform:scale(1.3);box-shadow:0 0 0 6px #d94c2a12}
.contact-arrow{position:relative}
.contact-arrow::before{content:'';position:absolute;inset:-9px;border:1px solid #adb69d66;border-radius:50%;transform:scale(.85);opacity:0;transition:transform .5s,opacity .5s}
.contact-arrow:hover::before{transform:scale(1);opacity:1}
.copy-email span{transition:transform .3s}.copy-email:hover span{transform:rotate(-12deg)}
.motion-ready .profile-panel:not([hidden]) .stack-option{animation:menu-item-in .4s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--menu-order,0)*35ms)}
.motion-ready .art-detail.is-changing{animation:detail-change .4s ease both}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important;transition:none!important}
.motion-paused .reveal,.motion-paused .project-body>*{opacity:1!important;transform:none!important;translate:none!important}
.motion-paused .system-layer,.motion-paused .tech-ribbon span,.motion-paused .stack-option{animation:none!important;opacity:1!important}
.motion-paused .project-visual{transform:none}
@keyframes layer-assemble{from{opacity:0;translate:0 55px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes stack-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes orbit-lap{to{transform:rotate(360deg)}}
@keyframes flow-packet{0%{transform:translateX(0) scale(.5);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(var(--flow-distance,250px)) scale(1);opacity:0}}
@keyframes ribbon-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes menu-item-in{from{opacity:0;translate:15px 0}to{opacity:1;translate:0 0}}
@keyframes detail-change{from{opacity:.2;translate:0 5px}to{opacity:1;translate:0 0}}
@media(max-width:850px){.motion-toggle{font-size:8px}.job::before{left:-10px}}
@media(hover:none){.project-visual{transform:none}.project-visual::before{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js-ready .project-body>*{opacity:1!important;translate:none!important}.project-visual{transform:none!important}.orbital-track,.flow::after{display:none!important}}
