/* Interaction polish layered over the original portfolio layout. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:page-out .18s ease-out both}
::view-transition-new(root){animation:page-in .42s ease-out both}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}to{opacity:1}}

.js.motion-enabled .reveal{transition-delay:var(--reveal-delay,0ms)}
.desktop-nav>a.section-active{color:var(--acid)}
.desktop-nav>a.section-active:after{width:100%}
.mobile-nav>a.section-active{color:var(--acid)}
.case-nav a{position:relative;transition:color .25s}
.case-nav a:not(.case-repo):after{content:'';position:absolute;left:0;right:0;bottom:-23px;height:2px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.case-nav a.section-active{color:var(--acid)}
.case-nav a.section-active:after{transform:scaleX(1)}

.project-image-link{position:relative}
.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;filter:saturate(.9);transition:opacity .65s ease,transform .8s var(--ease)}
.scene-playing .scene-video{opacity:1}
.scene-state{position:absolute;right:20px;bottom:23px;z-index:2;display:flex;align-items:center;gap:7px;pointer-events:none;padding:6px 9px;background:#090d1299;border:1px solid #ffffff20;backdrop-filter:blur(8px);font-size:7px;letter-spacing:.12em;color:#d6e4cc;opacity:0;transform:translateY(5px);transition:opacity .4s,transform .4s}
.scene-state i{display:block;width:4px;height:4px;border-radius:50%;background:var(--acid)}
.scene-playing .scene-state{opacity:1;transform:translateY(0)}
.project-card-visual:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(500px circle at var(--glow-x,50%) var(--glow-y,50%),#ccff7c10,transparent 60%);transition:opacity .6s}
.motion-enabled .project-card:hover .project-card-visual:before{opacity:1}
.motion-enabled .hero-media>img,.motion-enabled .hero-media>video{transform:translate3d(var(--depth-x,0px),calc(var(--depth-y,0px) + var(--scroll-depth,0px)),0) scale(1.075);transition:opacity 1s ease,transform .75s var(--ease)}

.portrait-card{margin:36px 0 0;width:min(100%,300px)}
.portrait-frame{position:relative;aspect-ratio:1;isolation:isolate;margin:14px}
.portrait-frame:before{content:'';position:absolute;inset:-35px;z-index:-1;background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),#ccff7c0b,transparent 65%)}
.portrait-frame>img{width:100%;height:100%;object-fit:contain;border-radius:50%;position:relative;border:1px solid #ffffff17;background:var(--bg)}
.portrait-orbit{position:absolute;inset:-11px;border:1px solid #ccff7c24;border-radius:50%;pointer-events:none}
.portrait-orbit:after{content:'';position:absolute;inset:-1px;border:1px solid transparent;border-top-color:#ccff7ca0;border-radius:50%;transform:rotate(-25deg)}
.motion-enabled .portrait-orbit:after{animation:portrait-orbit 22s linear infinite}
.portrait-mark{position:absolute;right:-6px;bottom:15px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #ccff7c44;background:#10190fee;backdrop-filter:blur(7px);border-radius:50%;font-size:24px;font-weight:400;line-height:1;color:var(--acid)}
.portrait-card figcaption{margin-top:30px}
.portrait-card figcaption>strong{display:block;font-size:22px;font-weight:400;letter-spacing:-.025em;line-height:1.2}
.portrait-role{display:block;font-size:11px;margin-top:7px;color:var(--muted)}
.portrait-link{display:inline-flex;align-items:center;gap:9px;font-size:10px;color:#899b91;margin-top:17px;transition:color .25s}
.portrait-link:hover{color:var(--acid)}
.portrait-link svg{width:13px;height:13px}
.portrait-link svg:last-child{width:11px;height:11px;color:var(--acid)}
@keyframes portrait-orbit{to{transform:rotate(335deg)}}
.motion-enabled details[open]>.skill-body,.motion-enabled details[open]>.system-body{animation:detail-in .38s var(--ease)}
.motion-enabled .media-dialog[open]{animation:media-in .3s var(--ease)}
.motion-enabled #media-body>img{animation:page-in .3s ease-out}
@keyframes detail-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes media-in{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(hover:hover) and (pointer:fine){
 .motion-enabled .project-card:hover .project-image-link img,.motion-enabled .project-card:focus-within .project-image-link img,.motion-enabled .scene-playing .scene-video{transform:translate3d(var(--depth-x,0px),var(--depth-y,0px),0) scale(1.055)}
 .project-card:focus-within{border-color:#ccff7c66}
 .project-card:focus-within .project-link{color:var(--acid)}
 .gallery-item>a:before{content:'';position:absolute;inset:0;z-index:1;border:1px solid #ccff7c00;pointer-events:none;transition:border-color .35s}
 .gallery-item>a:hover:before{border-color:#ccff7c66}
}
@media(max-width:960px){.portrait-card{margin-top:30px}.portrait-frame{margin:11px}.portrait-orbit{inset:-9px}.portrait-mark{width:32px;height:32px;font-size:21px}.portrait-card figcaption>strong{font-size:20px}.portrait-role{font-size:10px}}
@media(max-width:720px){.about-label.has-portrait{display:block;margin-bottom:38px}.portrait-card{width:min(100%,235px);margin:32px auto 0;text-align:center}.portrait-frame{margin:12px}.portrait-card figcaption{margin-top:24px}.portrait-card figcaption>strong{font-size:23px}.portrait-role{font-size:11px}.portrait-link{margin-top:12px}.case-nav a:not(.case-repo):after{bottom:-20px}.scene-state{right:14px;bottom:19px;font-size:6px}}
@media(max-width:480px){.scene-state{display:none}}
.motion-disabled .hero-media>img,.motion-disabled .hero-media>video,.motion-disabled .project-card:hover .project-image-link img{transform:none}
.motion-disabled .scene-video,.motion-disabled .scene-state{opacity:0!important}
.motion-disabled::view-transition-group(*),.motion-disabled::view-transition-old(*),.motion-disabled::view-transition-new(*){animation:none!important}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}.hero-media>img,.hero-media>video,.project-card:hover .project-image-link img{transform:none!important}.portrait-orbit:after{animation:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media print{.portrait-orbit,.portrait-mark,.scene-state,.scene-video{display:none!important}.portrait-card{max-width:160px}.portrait-frame{margin:0}.portrait-card figcaption{margin-top:12px}.portrait-card figcaption>strong{font-size:14pt}.portrait-role,.portrait-link{font-size:9pt}.portrait-card{break-inside:avoid}}