/* Motion extends the portfolio's existing identity; content works without JS. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.hero-line{display:block}
.header{position:sticky;top:0;z-index:20;max-width:none;background:rgba(242,246,248,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:padding .45s var(--motion-ease),box-shadow .45s}
.header.is-scrolled{padding-top:14px;padding-bottom:14px;box-shadow:0 8px 30px #122c4209}
.header::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(var(--page-progress,0));transform-origin:left;pointer-events:none}
.header nav a{position:relative;transition:color .25s}
.header nav a:not(.nav-contact)::after{content:'';position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--motion-ease)}
.header nav a:hover::after,.header nav a[aria-current]::after{transform:scaleX(1)}
.header nav a[aria-current]{color:var(--accent)}
.mobile-nav{position:fixed;top:85px;left:0;right:0;z-index:19;background:rgba(242,246,248,.97);backdrop-filter:blur(18px)}
.hero-visual{perspective:1100px}
.portrait{border-radius:4px;transform:translate3d(0,var(--portrait-y,0px),0) scale(var(--portrait-scale,1));will-change:transform}
.portrait img{transform:scale(1.035) translate3d(var(--portrait-x,0px),var(--portrait-pointer-y,0px),0);transition:filter .8s,transform 1.1s var(--motion-ease)}
.hero-note{transform:translate3d(0,var(--note-y,0px),0) rotate(var(--note-rotate,7deg));box-shadow:0 14px 32px #122c421b}
.hero-copy{transform:translate3d(0,var(--copy-y,0px),0)}
.hero-line:last-child em{display:inline-block;background:linear-gradient(110deg,var(--accent) 15%,#df7b44 45%,var(--accent) 75%);background-size:180% 100%;background-clip:text;-webkit-background-clip:text;color:transparent}
.motion-ready .hero-copy>.eyebrow,.motion-ready .hero-line,.motion-ready .intro,.motion-ready .hero-actions,.motion-ready .hero-visual,.motion-ready .hero-bottom{animation:hero-arrive 1.2s var(--motion-ease) both}
.motion-ready .hero-line:nth-child(1){animation-delay:.08s}.motion-ready .hero-line:nth-child(2){animation-delay:.19s}.motion-ready .hero-line:nth-child(3){animation-delay:.3s}.motion-ready .intro{animation-delay:.4s}.motion-ready .hero-actions{animation-delay:.5s}.motion-ready .hero-visual{animation-delay:.22s}.motion-ready .hero-bottom{animation-delay:.65s}
.motion-ready .hero-line:last-child em{animation:ink-light 3s ease-out 1 both}
@keyframes hero-arrive{from{opacity:0;translate:0 36px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes ink-light{from{background-position:100% 0}to{background-position:0 0}}
.motion-ready .reveal{opacity:0;translate:0 42px;transition:opacity .9s var(--motion-ease),translate 1.1s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;translate:0 0}
.project-card{perspective:1200px}
.project-image{border-radius:8px;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .7s var(--motion-ease),box-shadow .7s var(--motion-ease);will-change:transform}
.project-image::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,50%),#ffffff55,transparent 65%);opacity:0;transition:opacity .45s;pointer-events:none}
.project-image img{transition:transform .9s var(--motion-ease),filter .9s}
.project-meta strong{transition:color .3s}
.project-card:hover .project-meta strong,.project-card:focus-visible .project-meta strong{color:var(--accent)}
.project-card:focus-visible .project-image{box-shadow:0 16px 36px #122c421f}
.view-label{z-index:1;border-radius:24px;transition:opacity .4s,transform .5s var(--motion-ease)}
.primary{border-radius:30px;transition:background .35s,transform .5s var(--motion-ease),box-shadow .5s}
.primary:hover{transform:translateY(-3px);box-shadow:0 10px 24px #122c4226}
.primary:active{transform:translateY(0) scale(.98)}
.filter{transition:background .3s,color .3s,border-color .3s,transform .35s var(--motion-ease)}
.filter:hover{transform:translateY(-2px)}
.about-photo{overflow:hidden;border-radius:6px}
.about-photo img{transform:scale(1.07) translate3d(0,var(--about-y,0px),0);will-change:transform}
.about-photo>span{position:relative;background:var(--paper);margin-top:0;padding-top:12px}
.timeline article{position:relative;transition:background .45s}
.timeline article::before{content:'';position:absolute;left:0;top:-1px;width:100%;height:1px;background:#a8c9e2;transform:scaleX(0);transform-origin:left;transition:transform 1.25s var(--motion-ease)}
.timeline article.is-visible::before{transform:scaleX(1)}
.skill-grid article{transition:transform .5s var(--motion-ease)}
.values span{transition:background .35s,border-color .35s,transform .45s var(--motion-ease)}
.values span:hover{transform:translateY(-3px);background:#ffffff55;border-color:var(--accent)}
.contact{overflow:hidden}.contact h2{transform:scale(var(--contact-scale,1));transform-origin:center}
.contact-mail{transition:color .35s,border-color .35s,transform .5s var(--motion-ease)}
.contact-mail:hover{transform:translateY(-3px)}
dialog{border-radius:16px}dialog[open]{animation:dialog-arrive .5s var(--motion-ease) both}dialog[open]::backdrop{animation:backdrop-arrive .4s ease both}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(hover:hover) and (pointer:fine){.project-card:hover .project-image{box-shadow:0 22px 48px #122c4220}.project-card:hover .project-image::after{opacity:1}.project-card:hover .project-image img{transform:scale(1.065)}.skill-grid article:hover{transform:translateY(-7px)}}
@media(max-width:700px){.header.is-scrolled{padding-top:14px;padding-bottom:14px}.motion-ready .reveal{translate:0 24px}.project-image{transform:none;will-change:auto}.hero-copy,.portrait,.hero-note,.about-photo img,.contact h2{will-change:auto}.motion-ready .hero-visual{animation-delay:.15s}.mobile-nav{top:75px}.contact h2{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-ready .reveal{opacity:1;translate:none}.hero-copy,.portrait,.hero-note,.about-photo img,.contact h2,.project-image{transform:none}.portrait img{transform:none}.hero-note{transform:rotate(7deg)}*,*::before,*::after{animation:none!important;transition:none!important;will-change:auto!important}}