/* Progressive enhancement: all content remains visible without JavaScript. */
.reading-progress{position:fixed;inset:0 0 auto;height:2px;z-index:100;pointer-events:none;background:linear-gradient(90deg,var(--accent),var(--warm));transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px #fe6f2740}
.header{transition:background-color .3s ease,box-shadow .3s ease}
.header.is-scrolled{background:#121212f5;box-shadow:0 8px 30px #0003}
#navigation a{position:relative;transition:color .2s ease}
#navigation a::after{content:"";position:absolute;bottom:-5px;left:0;width:18px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
#navigation a[aria-current="location"]{color:var(--warm)}
#navigation a[aria-current="location"]::after{transform:scaleX(1)}
.project,.ai-card{transition:border-color .3s ease,box-shadow .3s ease}
.button,.nav-contact{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.hero-portrait{--tilt-x:0deg;--tilt-y:0deg;--layer-x:0px;--layer-y:0px;--light-x:50%;--light-y:35%;--light-opacity:0;--scroll-drift:0px}
.hero-portrait .orbital{translate:0 var(--scroll-drift)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-portrait .portrait-frame{transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-origin:50% 50%;backface-visibility:hidden}
 .hero-portrait .portrait-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--light-x) var(--light-y),#ffe1bf66,transparent 62%);opacity:var(--light-opacity);mix-blend-mode:soft-light;transition:opacity .35s ease}
 .hero-portrait .portrait-stack{transform:translate3d(var(--layer-x),var(--layer-y),0) rotate(4deg)}
 .hero-portrait .portrait-code{transform:translate3d(calc(var(--layer-x) * -.65),calc(var(--layer-y) * -.65),0) rotate(-4deg)}
 .hero-portrait.is-tracking .portrait-frame{will-change:transform}
 .project:hover,.ai-card:hover{border-color:#805034;box-shadow:0 12px 35px #0003}
 .button:hover{box-shadow:0 8px 28px #fe6f2733}
 .nav-contact:hover{border-color:var(--accent)}
 .tags span{transition:background-color .2s ease,border-color .2s ease}
 .tags span:hover{background:#38281c;border-color:#795033}
}
@media(max-width:720px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-portrait .portrait-stack{transform:translate3d(var(--layer-x),var(--layer-y),0) rotate(3deg)}
 .hero-portrait .portrait-code{transform:translate3d(calc(var(--layer-x) * -.65),calc(var(--layer-y) * -.65),0) rotate(-2deg)}
}
@media(prefers-reduced-motion:reduce){
 .header,#navigation a,#navigation a::after,.project,.ai-card,.button,.nav-contact{transition:none}
 .hero-portrait .portrait-frame{transform:none}
 .hero-portrait .orbital{translate:none}
 .hero-portrait .portrait-frame::after{display:none}
 .reading-progress{display:none}
}