/* Deep-blue atmosphere and progressive enhancement. */
:root{--bg:#061226;--panel:#0b1d38;--border:#263e61;--text:#edf3ff;--muted:#a4b5d0;--accent:#78aaff;--deep-blue:#194db3}
body{background:var(--bg);isolation:isolate;overflow-x:clip}
.ambient-scene{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 12%,#102d59 0%,transparent 55%),linear-gradient(150deg,#061226 0%,#071830 48%,#040d1b 100%)}
.ambient-wash{position:absolute;width:88vw;height:88vh;min-width:580px;min-height:540px;opacity:.65;will-change:transform;background:radial-gradient(ellipse,#1753bc55 0%,#0b429b30 30%,transparent 65%)}
.wash-one{left:-28%;top:-37%;animation:aurora-one 23s ease-in-out infinite alternate}
.wash-two{right:-27%;bottom:-30%;background:radial-gradient(ellipse,#1554bd4d 0%,#1a6bbf22 35%,transparent 66%);animation:aurora-two 29s ease-in-out infinite alternate}
.ambient-grid{position:absolute;left:-45%;right:-45%;height:110vh;bottom:-75vh;background-image:linear-gradient(#589bff22 1px,transparent 1px),linear-gradient(90deg,#589bff22 1px,transparent 1px);background-size:78px 78px;transform:perspective(500px) rotateX(60deg);transform-origin:center top;mask-image:linear-gradient(transparent,#0008 20%,#000 70%);animation:grid-drift 25s linear infinite;opacity:.55}
#ambient-particles{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,#1b51bb,#66b9ff);transform:scaleX(var(--scroll-progress,0));transform-origin:left;z-index:40;pointer-events:none;box-shadow:0 0 15px #378dff99}
.site-header{background:#061226df;border-bottom-color:#4276b125;box-shadow:0 4px 30px #030b1918}
.brand{letter-spacing:-.8px}.brand-dot{display:inline-block;animation:signal-breathe 5s ease-in-out infinite}
.nav-contact{border-color:#3b5d8d;background:#12316433;transition:border-color .25s,background .25s,box-shadow .25s,translate .25s}
.nav-contact:hover{background:#143e7c77;border-color:#679dff;box-shadow:0 0 25px #3c81f520;translate:0 -2px}
.desktop-nav a{position:relative;transition:color .2s}.desktop-nav a:after{content:'';position:absolute;height:1px;left:0;right:0;bottom:-8px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}.desktop-nav a:hover:after,.desktop-nav a.current:after{transform:scaleX(1)}
.hero{position:relative}.hero-copy{position:relative;z-index:2}
.hero h1>span{color:#8eb7ff;background:linear-gradient(110deg,#d0e4ff 0%,#86b1fb 27%,#5e91ee 53%,#9dc7ff 78%,#d0e4ff 100%);background-size:230% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:title-glow 14s ease-in-out infinite alternate}
.hero-art{border-color:#598bdb55;box-shadow:0 25px 70px #02091766,0 0 45px #2869da15;animation:hero-float 9s ease-in-out infinite;transition:box-shadow .4s,border-color .4s}
.hero-art:hover{box-shadow:0 28px 80px #02091799,0 0 50px #2869da33;border-color:#8bb8ff80}
.hero-art>img{animation:world-breathe 24s ease-in-out infinite alternate;clip-path:inset(0 round 11px)}
.hero-art:before{content:'';position:absolute;inset:-20px;border:1px solid #5489da18;border-radius:23px;pointer-events:none;z-index:-1}
.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#cde5ff08 48%,#cde5ff18 50%,transparent 56%);background-size:250% 100%;background-position:190% 0;border-radius:11px;pointer-events:none;animation:glass-pass 15s ease-in-out infinite}
.code-note{background:#0c2345ed;border-color:#4674af99;box-shadow:0 12px 35px #03091677;animation:badge-float 7s ease-in-out infinite}
.code-led,.tiny-square,.image-label i{animation:signal-breathe 4s ease-in-out infinite}.code-led{background:#8dc8ff}.code-note code>span{color:#8eb5ff}.code-note em{color:#a3d3ff}.crosshair{color:#bbd8ff;animation:crosshair-turn 20s ease-in-out infinite}
.button.primary{position:relative;overflow:hidden;background:linear-gradient(130deg,#215bc8,#163e8d);border:1px solid #598af0;color:#f5f8ff;box-shadow:0 5px 23px #0d4dbb35;transition:transform .25s,box-shadow .25s,border-color .25s}
.button.primary:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,#fff2 48%,transparent 70%);transform:translateX(-150%);animation:button-sheen 11s ease-in-out infinite;pointer-events:none}
.button.primary:hover{background:linear-gradient(130deg,#2d6bdf,#194da8);box-shadow:0 8px 32px #2369e155;border-color:#8cb5ff;transform:translateY(-3px)}
.text-link span,.round-link,.project-corner,.contact-arrow{transition:transform .3s,background .3s,color .3s}.text-link:hover span,.contact-card:hover .contact-arrow{transform:translate(3px,-3px)}.round-link:hover{transform:rotate(6deg);color:#041126}.project-card:hover .project-corner{transform:rotate(6deg);background:#1c53a9aa}
.discipline-strip{background:#0a1c368c;border-color:#31598945;backdrop-filter:blur(8px)}.discipline-strip b{color:#77aaff;animation:signal-breathe 6s ease-in-out infinite}.discipline-strip b:nth-of-type(even){animation-delay:-3s}
.project-card{background:linear-gradient(150deg,#102541e8,#09182fe8);border-color:#31578680;box-shadow:0 12px 40px #02091922;transition:transform .35s,border-color .35s,box-shadow .35s}
.project-card:hover{transform:translateY(-6px);border-color:#6298ebaa;box-shadow:0 20px 44px #020a1a66,0 0 30px #2763b514}
.project-card-info{position:relative}.project-card-info:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 0,#3c83e415,transparent 65%);opacity:0;transition:opacity .4s}.project-card:hover .project-card-info:before{opacity:1}
.project-card img{transition:transform 1s cubic-bezier(.2,.7,.3,1),filter .7s}.project-card:hover img{transform:scale(1.065);filter:brightness(1.08)}
.project-card-footer{border-top-color:#78aaff18}.next-art{background:radial-gradient(ellipse at center,#2863ae33,transparent 66%),repeating-linear-gradient(0deg,transparent 0 39px,#78aaff0a 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#78aaff0a 39px 40px),#0b1b32}.next-orbit{border-color:#78aaff44;animation:orbit-turn 30s linear infinite}.next-orbit:after{border-color:#78aaff44}.next-symbol{color:#83b1f7}.next-art:after{color:#8ba7cf}
.expertise-section{background:linear-gradient(110deg,#091b36cc,#0b2240bb);border-color:#31598950;backdrop-filter:blur(10px)}.skill-grid{background:#06152b60;border-color:#31598977}.skill{position:relative;border-color:#31598955;transition:background .3s}.skill:hover{background:#16438333}.skill-icon{transition:transform .4s,filter .4s}.skill:hover .skill-icon{transform:translateY(-4px) rotate(-5deg);filter:drop-shadow(0 0 10px #629eff66)}.skill-tags{color:#9ab4db}
.about-identity{border-color:#5282c6;position:relative}.about-identity:before{content:'';position:absolute;left:-2px;top:15%;height:26px;width:3px;border-radius:4px;background:#8dbdff;box-shadow:0 0 17px #4987ea;animation:identity-signal 8s ease-in-out infinite alternate}
.contact-section{background:radial-gradient(ellipse at 95% 0%,#265dbd44,transparent 60%),linear-gradient(140deg,#102e59e8,#091b35f5);border-color:#3e6bb188;box-shadow:0 20px 80px #020a1d44}
.contact-section:before{content:'';position:absolute;right:-140px;top:-200px;width:420px;height:420px;border:1px solid #6faaff22;border-radius:50%;box-shadow:0 0 0 44px #6faaff08,0 0 0 88px #6faaff06;animation:contact-orbit 18s ease-in-out infinite alternate;pointer-events:none}.contact-top,.contact-methods{position:relative}.contact-top>p{color:#b5c5df}.contact-card{background:#07172ccc;border-color:#3d6298;transition:border-color .3s,background .3s,transform .3s,box-shadow .3s}.contact-card:hover{background:#143466;transform:translateY(-3px);box-shadow:0 12px 30px #020b1d44}.contact-card small,.contact-card em{color:#a3bbdf}.contact-arrow{color:#9dc4ff}
dialog{background:#0b1b34;border-color:#426da9}.dialog-topbar{background:#0b1b34ef}.dialog-index{color:#4b6b9a}.clip-tab{background:#0d2342;border-color:#35578366}.clip-tab.active{background:#19407766}.clip-tab small,.clip-tab>span,.clip-caption{color:#a2b9db}.clip-stage{background:#07162d}.clip-placeholder p{color:#b4c6e1}.pending-badge{color:#b1cefa;border-color:#6d9ee766}.dialog-heading p:not(.eyebrow){color:#b3c5df}.dialog-heading .project-tags span{color:#b3c5df}.project-pagination button{color:#bbd1f1}.clip-stage:after{background:linear-gradient(0deg,#07162deb,transparent)}
.motion-reveal{opacity:0;translate:0 18px;transition:opacity .75s ease,translate .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}.motion-reveal.is-revealed{opacity:1;translate:0 0}
@keyframes aurora-one{0%{transform:translate(-4%,2%) scale(.9)}50%{transform:translate(20%,20%) scale(1.15)}100%{transform:translate(35%,-1%) scale(1)}}
@keyframes aurora-two{0%{transform:translate(4%,0) scale(1)}100%{transform:translate(-30%,-25%) scale(1.2)}}
@keyframes grid-drift{from{background-position:0 0}to{background-position:0 78px}}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes world-breathe{from{filter:brightness(1)}to{filter:brightness(1.1)}}
@keyframes badge-float{0%,100%{translate:0 0}50%{translate:3px 5px}}
@keyframes title-glow{from{background-position:0 50%}to{background-position:100% 50%}}
@keyframes signal-breathe{0%,100%{opacity:.6;filter:drop-shadow(0 0 0 transparent)}50%{opacity:1;filter:drop-shadow(0 0 7px #72a8ff77)}}
@keyframes crosshair-turn{0%,65%{transform:rotate(0)}80%,100%{transform:rotate(90deg)}}
@keyframes glass-pass{0%,55%{background-position:190% 0}85%,100%{background-position:-70% 0}}
@keyframes button-sheen{0%,70%{transform:translateX(-150%)}90%,100%{transform:translateX(150%)}}
@keyframes orbit-turn{from{transform:rotate(-15deg)}to{transform:rotate(345deg)}}
@keyframes identity-signal{from{top:12%;opacity:.45}to{top:75%;opacity:1}}
@keyframes contact-orbit{from{transform:translate(-10px,0) scale(.9)}to{transform:translate(-40px,40px) scale(1.08)}}
@media(max-width:760px){.ambient-wash{opacity:.5;min-width:400px}.ambient-grid{background-size:60px 60px;opacity:.32}.hero-art:before{inset:-11px;border-radius:18px}.hero-art{animation-duration:11s}.project-card:hover{transform:translateY(-3px)}}

html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after{animation-play-state:paused!important}

/* Subtle background movement and consistent interaction timing. */
.ambient-orbit{position:absolute;width:340px;height:340px;border:1px solid #84b4ff18;border-radius:50%;animation:background-orbit 42s linear infinite;opacity:.7}
.ambient-orbit:before{content:'';position:absolute;left:48%;top:-3px;width:5px;height:5px;background:#8ebaff90;border-radius:50%;box-shadow:0 0 16px #7daaff55}
.orbit-one{left:-140px;top:22%}.orbit-two{width:520px;height:520px;right:-240px;bottom:4%;animation-duration:57s;animation-direction:reverse}
.ambient-streak{position:absolute;width:110px;height:1px;background:linear-gradient(90deg,transparent,#8bb9ff55,transparent);animation:background-streak 16s linear infinite;opacity:0;rotate:-26deg}
.streak-one{left:16%;top:30%}.streak-two{left:64%;top:68%;animation-delay:-9s;animation-duration:21s}
@keyframes background-orbit{to{transform:rotate(360deg)}}
@keyframes background-streak{0%,5%{transform:translateX(-90px);opacity:0}15%,75%{opacity:.6}95%,100%{transform:translateX(290px);opacity:0}}
.filter,.clip-tab,.game-link,.source-example summary,.project-pagination button,.dialog-close,.back-top{transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
@media(hover:hover){.filter:hover,.clip-tab:hover,.game-link:hover{transform:translateY(-2px)}.source-example summary:hover{background:#18335188}.project-pagination button:hover,.back-top:hover{color:#fff;transform:translateX(2px)}.dialog-close:hover{background:#244576;transform:rotate(5deg)}}
.clip-tabs{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}


.hero-art>img{object-position:83% 50%}
@media(max-width:760px){.nav-contact{display:none}.brand{white-space:nowrap}.nav-wrap{gap:16px}}
/* Showcase controls and scroll surfaces. */
.dialog-close{display:grid;place-items:center;padding:0;flex:0 0 34px;width:34px;height:34px;line-height:1;appearance:none;color:#dbe9ff}
.dialog-close .icon{display:block;vertical-align:initial;width:20px;height:20px;margin:0}
.dialog-close:hover{transform:none;border-color:#6488bc;background:#244576}
html,dialog,pre{scrollbar-width:thin;scrollbar-color:#3d608d #0b1b34}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0b1b34;border-radius:8px}
::-webkit-scrollbar-thumb{background:#3d608d;border:2px solid #0b1b34;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#668bb8}
::-webkit-scrollbar-corner{background:#0b1b34}