.portfolio-grid{display:block;columns:2;column-gap:22px}
.portfolio-card{break-inside:avoid;page-break-inside:avoid;display:inline-flex;width:100%;margin-bottom:22px;vertical-align:top;transition:border-color .25s,box-shadow .25s}
.portfolio-card:hover{border-color:#a4bad378;box-shadow:0 12px 32px #03081238}
.portfolio-card.without-preview{padding:24px 30px 21px;background:linear-gradient(120deg,#172941eb,#111f35eb)}
.without-preview .project-code{margin-top:16px}.without-preview .project-summary{margin-bottom:16px}.without-preview .project-flow{margin:18px 0}.without-preview h3{font-size:21px}
.project-shot-link{overflow:hidden;border-radius:8px}.project-shot{transition:transform .6s ease}.project-shot-link:hover .project-shot{transform:scale(1.025)}
.motion-toggle{padding:5px 0;color:#d9c9ae;font-size:11px;border-bottom:1px solid #d9c9ae55;margin-top:7px;text-align:right}
.sky-layer{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:.7}
.sky-layer span{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#dce7ff;box-shadow:0 0 7px #d3dcff88;animation:starlight var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
body:before{inset:-18px;height:calc(100vh + 36px);transform:translate3d(var(--sky-x,0px),var(--sky-y,0px),0);will-change:transform}
.hero-wallpaper{transform:scale(1.025);animation:train-drift 28s ease-in-out infinite alternate;transform-origin:60% 55%}
.hero:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 75% 35%,#9eb2ff15,transparent 50%);animation:nebula-glow 14s ease-in-out infinite alternate}
.hero-copy,.wallpaper-caption{position:relative;z-index:1}.wallpaper-caption{position:absolute}
.route-line{position:relative;overflow:hidden}.route-line:after{content:'';position:absolute;left:-10%;top:50%;width:70px;height:1px;background:linear-gradient(90deg,transparent,#e7d1a1,transparent);box-shadow:0 0 7px #dfc7a877;animation:orbit-trace 16s linear infinite;pointer-events:none}
dialog[open]{animation:detail-arrive .2s ease-out}
.motion-off .sky-layer,.focused .sky-layer{display:none}
.motion-off .hero-wallpaper,.motion-off .hero:before,.motion-off .route-line:after,.focused .hero-wallpaper,.focused .hero:before,.focused .route-line:after{animation:none}
.motion-off:before,.focused:before{transform:none;will-change:auto}
.motion-off .hero:before,.focused .hero:before{display:none}
.motion-suspended .sky-layer span,.motion-suspended .hero-wallpaper,.motion-suspended .hero:before,.motion-suspended .route-line:after{animation-play-state:paused}
@keyframes starlight{from{opacity:.15;transform:translateY(0)}to{opacity:.75;transform:translateY(-5px)}}
@keyframes train-drift{from{transform:scale(1.025) translate3d(-3px,2px,0)}to{transform:scale(1.05) translate3d(5px,-4px,0)}}
@keyframes nebula-glow{from{opacity:.3}to{opacity:.8}}
@keyframes orbit-trace{0%{left:-10%;opacity:0}8%,85%{opacity:.65}100%{left:110%;opacity:0}}
@keyframes detail-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:700px){.portfolio-grid{columns:1}.portfolio-card,.portfolio-card.without-preview{padding:23px;margin-bottom:17px}.without-preview h3{font-size:20px}.sky-layer{opacity:.4}.hero-wallpaper{animation-duration:36s}}
@media(prefers-reduced-motion:reduce){.sky-layer,.hero:before,.route-line:after{display:none}body:before{transform:none;will-change:auto}.hero-wallpaper{animation:none;transform:none}.portfolio-card,.project-shot{transition:none}dialog[open]{animation:none}}