/* A fixed number of small gradient layers. Only transform and opacity animate. */
.app-shell{position:relative;isolation:isolate;background:linear-gradient(125deg,#090f13d9,#080e12e8)}
.atmosphere{position:fixed;inset:0;left:50%;width:min(100%,580px);transform:translateX(-50%);pointer-events:none;overflow:hidden;contain:strict}
.atmosphere{z-index:-1;background:#080e12}
.cold-light{position:absolute;inset:-15%;background:radial-gradient(ellipse at 15% 20%,#0879b23d,transparent 48%),radial-gradient(ellipse at 90% 65%,#125c8633,transparent 50%);animation:light-orbit 18s ease-in-out infinite alternate}
.mist{position:absolute;width:165%;height:85%;left:-32%;background:radial-gradient(ellipse at 34% 48%,#8ebbd018,transparent 48%),radial-gradient(ellipse at 68% 54%,#1b709b26,transparent 50%);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);animation:mist-drift 20s cubic-bezier(.45,0,.55,1) infinite alternate}
.mist-one{top:-12%;transform:rotate(-17deg)}.mist-two{top:30%;animation-delay:-13s;animation-duration:27s;opacity:.65}
.atmosphere:after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 35deg at 50% 20%,transparent 0deg,#247eaa0a 18deg,transparent 42deg,#4896ae0c 67deg,transparent 100deg);animation:light-orbit 32s ease-in-out infinite alternate;mask-image:linear-gradient(#000,transparent 85%)}
.topbar,.content{position:relative}.topbar{z-index:2}.content{z-index:1}
html{view-transition-name:none}.content{view-transition-name:screen;animation:none}
::view-transition-group(screen){animation-duration:.8s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(screen){animation:screen-out .45s cubic-bezier(.4,0,.2,1) both;mix-blend-mode:normal}
::view-transition-new(screen){animation:screen-in .8s cubic-bezier(.22,1,.36,1) both;mix-blend-mode:normal}
[data-transition="panel"]::view-transition-old(screen),[data-transition="panel"]::view-transition-new(screen){animation:none}
.sheet-overlay{view-transition-name:dialog}
::view-transition-old(dialog){animation:panel-out .45s cubic-bezier(.4,0,.2,1) both;mix-blend-mode:normal}
::view-transition-new(dialog){animation:panel-in .7s cubic-bezier(.22,1,.36,1) both;mix-blend-mode:normal}
.hero-sky{position:absolute;inset:-15px -22px -25px;overflow:hidden;pointer-events:none;mask-image:linear-gradient(transparent,#000 16%,#000 70%,transparent)}
.temple{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.halo{position:absolute;left:3%;top:7%;width:43%;aspect-ratio:1;border:1px solid #c8e8ec40;border-radius:50%;background:radial-gradient(circle,#9cd6e01a,transparent 65%);box-shadow:0 0 35px #82c7dc12,inset 0 0 25px #82c7dc0d;animation:halo-breathe 8s ease-in-out infinite alternate}
.hero-cloud{position:absolute;left:-25%;width:150%;height:80%;background:url('/static/art/cloudbank.svg') center/100% 100% no-repeat;animation:elysian-drift 22s ease-in-out infinite alternate}
.cloud-near{bottom:-35%;opacity:.25}.cloud-far{top:-25%;opacity:.12;animation-delay:-11s;animation-duration:29s}
.home-hero blockquote{position:relative;text-shadow:0 2px 12px #071119}
.hero-paused *,.hero-paused:before{animation-play-state:paused!important}
.ascension{position:fixed;inset:0;left:50%;width:min(100%,580px);transform:translateX(-50%);overflow:hidden;pointer-events:none;z-index:25;visibility:hidden;contain:strict}
.ascension span{position:absolute;left:-30%;top:20%;width:160%;height:85%;background:url('/static/art/cloudbank.svg') center/100% 100% no-repeat;opacity:0}
.ascension span:nth-child(2){left:-45%;top:40%;width:180%;height:75%}
.ascension.rising{visibility:visible}.rising span{animation:cloud-ascent 1s cubic-bezier(.22,.6,.3,1) both}.rising span:nth-child(2){animation-delay:.08s;animation-duration:.92s}
.motion-off .ascension{display:none}
@keyframes cloud-ascent{0%{opacity:0;transform:translate3d(-3%,50%,0)}35%{opacity:.34}100%{opacity:0;transform:translate3d(5%,-70%,0)}}
@keyframes elysian-drift{from{transform:translate3d(-7%,5%,0)}to{transform:translate3d(10%,-8%,0)}}
@keyframes halo-breathe{from{opacity:.35;transform:scale(.97)}to{opacity:.85;transform:scale(1.04)}}
@keyframes panel-in{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
@keyframes panel-out{to{opacity:0;transform:translateY(35px)}}
.home-hero:before{content:"";position:absolute;inset:4% -8%;pointer-events:none;background:radial-gradient(ellipse at 30% 65%,#329bc51c,transparent 58%);animation:hero-light 9s ease-in-out infinite alternate}
.hero-logo{position:relative;animation:sculpture-drift 9s cubic-bezier(.45,0,.55,1) infinite alternate}
.skill-card{transition:transform .55s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s}
.skill-card:focus-within{border-color:#4886a4;box-shadow:0 10px 35px #0003}
.card-art{transition:transform .8s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.skill-card:hover{transform:translateY(-3px);border-color:#41647a}.skill-card:hover .card-art{transform:scale(1.04)}}
.route-stage{animation:stage-arrive .75s cubic-bezier(.22,1,.36,1) both}.route-stage:nth-child(2){animation-delay:60ms}.route-stage:nth-child(3){animation-delay:120ms}.route-stage:nth-child(4){animation-delay:180ms}.route-stage:nth-child(5){animation-delay:240ms}
.bottom-sheet{animation:sheet-rise .6s cubic-bezier(.22,1,.36,1) both}.sheet-overlay{animation:appear .4s ease both}
.progress-track i{transition:width .8s cubic-bezier(.22,1,.36,1)}
.resume-card{position:relative;overflow:hidden;margin:8px 0 25px;padding:16px;border:1px solid #2376a064;border-radius:14px;background:linear-gradient(120deg,#132c3c,#0d1822);box-shadow:inset 0 1px #92d8ff0d}
.resume-label{color:#77c9f2;font-size:10px;letter-spacing:1.6px;text-transform:uppercase}
.resume-card h2{font-size:19px;letter-spacing:-.3px;margin:8px 0 5px}
.resume-card p{color:#a4b6cb;font-size:12px;margin-bottom:13px}
.resume-card .progress{margin:0 0 14px;max-width:240px}
.resume-card .primary-btn{min-height:40px;padding:9px 13px;font-size:13px;justify-content:space-between}
.bookmark:hover{color:#8adfff}.bookmark.is-saved{animation:bookmark-glow .4s ease-out}
.route-thread path{stroke-dasharray:250;stroke-dashoffset:0;animation:thread-reveal .8s ease-out both}
.effects-paused *, .effects-paused ::before,.effects-paused ::after{animation-play-state:paused!important}
.motion-off .mist{display:none}.motion-off ::view-transition-old(screen),.motion-off ::view-transition-new(screen){animation:none}
@keyframes mist-drift{from{transform:translate3d(-8%,6%,0) rotate(-17deg) scale(.95);opacity:.5}to{transform:translate3d(12%,-12%,0) rotate(9deg) scale(1.12);opacity:1}}
@keyframes light-orbit{from{transform:translate3d(-4%,0,0) rotate(-9deg);opacity:.6}to{transform:translate3d(8%,-7%,0) rotate(12deg);opacity:1}}
@keyframes hero-light{from{transform:translateX(-8%);opacity:.35}to{transform:translateX(12%);opacity:.9}}
@keyframes sculpture-drift{from{transform:translateY(2px) rotate(-1deg)}to{transform:translateY(-7px) rotate(1deg)}}
@keyframes screen-out{to{opacity:0;transform:translateY(-10px) scale(.99)}}
@keyframes screen-in{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
@keyframes stage-arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes sheet-rise{from{transform:translateY(80px);opacity:0}to{transform:none;opacity:1}}
@keyframes bookmark-glow{50%{filter:drop-shadow(0 0 6px #00baff);transform:translateY(-2px)}}
@keyframes thread-reveal{from{stroke-dashoffset:250}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.mist,.ascension{display:none}.route-thread path{animation:none}::view-transition-old(screen),::view-transition-new(screen),::view-transition-old(dialog),::view-transition-new(dialog){animation:none}}