/* Visual refinement. Uses the existing portfolio palette and content. */
body{overflow-x:hidden}
.top{transition:box-shadow .3s,border-color .3s}
.top.is-scrolled{box-shadow:0 12px 40px #080e1b30;border-bottom-color:#375a7f}
.brand{display:inline-flex;align-items:center;gap:10px}
.brandmark{transition:transform .45s,box-shadow .45s}
.brand:hover .brandmark{transform:rotate(-12deg);box-shadow:0 0 24px #6bd8ee30}
.links a{position:relative;padding-block:10px}
.links a:after{content:"";position:absolute;inset-inline:0;bottom:1px;height:2px;background:var(--cyan,var(--lime));transform:scaleX(0);transition:transform .25s;transform-origin:center}
.links a:hover:after,.links a.current:after{transform:scaleX(1)}
.hero{position:relative;gap:56px;padding-block:78px 68px;min-height:680px}
.hero>div:first-child{position:relative;z-index:1}
.hero .welcome{display:inline-flex;align-items:center;gap:12px;margin-top:25px}
.hero .welcome:before{content:"";width:28px;height:1px;background:var(--cyan,var(--lime))}
.hero h1{font-weight:600;line-height:1.3;margin-block:18px 20px;text-wrap:balance}
.hero .role-line{line-height:1.8;max-width:600px}
.hero #bio{max-width:550px;line-height:2.1}
.hero .intro-tag{border-inline-start:2px solid var(--line);padding-inline-start:12px;margin-top:36px}
.visual{isolation:isolate;border:1px solid var(--line);border-radius:32px;min-width:0;background:radial-gradient(ellipse at 50% 45%,#2677bb18,transparent 65%);box-shadow:inset 0 0 70px #080e1b30,0 22px 60px #080e1b25;transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .25s ease-out;will-change:auto}
.visual:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:linear-gradient(#375a7f15 1px,transparent 1px),linear-gradient(90deg,#375a7f15 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(ellipse,#000,transparent 75%);pointer-events:none}
.visual:after{content:"";position:absolute;inset:14px;border-radius:22px;border:1px solid #375a7f55;pointer-events:none}
.visual>svg{width:96%;overflow:visible}
.visual .orbital{transform-box:view-box;transform-origin:250px 250px;animation:portfolio-orbit 75s linear infinite}
.floater{z-index:2;backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 10px 30px #080e1b40;animation:portfolio-float 7s ease-in-out infinite}
.float1{left:5%;top:12%}.float2{right:5%;bottom:14%;animation-delay:-3.5s}
.v-caption{left:0;right:0;bottom:24px;text-align:center;font-size:8px;letter-spacing:1.2px}
.portrait-frame{margin:30px auto 52px;box-shadow:0 24px 70px #080e1b50}
.actions .btn{min-height:49px;padding-inline:24px;border-radius:10px;transition:transform .22s,box-shadow .22s,border-color .22s}
.actions .btn:hover{transform:translateY(-4px);box-shadow:0 14px 26px #080e1b55}
.actions .btn span{transition:transform .2s}.actions .btn:hover span{transform:translate(-3px,3px)}
.strip{position:relative;overflow:hidden;border-radius:14px;padding:22px 20px;gap:16px}
.strip:after{content:"";position:absolute;top:0;inset-inline-start:18%;width:24%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan,var(--lime)),transparent)}
.strip>span{display:flex;align-items:center;gap:10px}.strip i{font-style:normal;font-size:19px}
main>section:not(.hero){position:relative;padding-block:82px;scroll-margin-top:16px}
.section-kicker{display:flex;align-items:center;gap:12px;letter-spacing:2px}
.section-kicker:before{content:"";height:1px;width:24px;flex-shrink:0;background:var(--cyan,var(--lime))}
h2{text-wrap:balance;letter-spacing:-.5px}.section-top{align-items:flex-end;gap:28px;margin-bottom:30px}
.section-top>p{max-width:440px;line-height:2}
.about{gap:64px}.about #aboutBio{line-height:2.2}
.personal-facts{gap:10px;flex-wrap:wrap}.personal-facts span{border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.discipline{position:relative;padding:22px;margin-bottom:12px;border:1px solid var(--line);border-radius:14px;gap:18px;background:var(--panel);transition:transform .25s,border-color .25s,box-shadow .25s}
.discipline:hover{transform:translateY(-4px);border-color:#375a7f;box-shadow:0 12px 28px #080e1b25}
.discipline .num{border:1px solid var(--line);border-radius:10px;width:42px;height:42px;display:grid;place-items:center;flex-shrink:0;color:var(--cyan,var(--lime));font-size:11px}
.discipline h3{margin-top:0}.discipline p{margin-bottom:0}
.cert-card,.resume-block{position:relative;border-radius:18px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;background:var(--panel)}
.cert-card:after,.resume-block:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(350px circle at var(--pointer-x,50%) var(--pointer-y,0%),#6bd8ee0c,transparent 70%);transition:opacity .25s}
.cert-card:hover,.resume-block:hover{border-color:#375a7f;box-shadow:0 16px 40px #080e1b35;transform:translateY(-5px)}
.cert-card:hover:after,.resume-block:hover:after{opacity:1}
.cert-preview{border-radius:10px;transition:transform .45s}.cert-card:hover .cert-preview{transform:scale(1.025)}
.verify-link{position:relative;z-index:1;padding-block:14px;min-height:44px}
.empty-cert{border-radius:18px;border:1px dashed #375a7f;min-height:245px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px}
.empty-cert .cert-icon{font-size:36px;margin-bottom:12px}.empty-cert h3{margin:12px 0 6px}
.skill-list{gap:12px}.skill-chip{border-radius:9px;padding:13px 20px;transition:transform .22s,border-color .22s,box-shadow .22s}
.skill-chip:hover{transform:translateY(-4px);border-color:var(--cyan,var(--lime));box-shadow:0 8px 20px #080e1b25}
.resume-grid{gap:22px}.resume-block{padding:30px}.resume-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;margin-bottom:20px}
.timeline-item{border-inline-start:1px solid var(--line);border-top:0;padding:0 20px 12px;margin-top:22px;position:relative}
.timeline-item:before{content:"";position:absolute;inset-inline-start:-4px;top:8px;width:7px;height:7px;background:var(--cyan,var(--lime));border-radius:50%}
main>section.contact{padding:46px;margin-block:20px 60px;border-radius:22px;overflow:hidden;gap:30px;border:1px solid #375a7f}
.contact:after{content:"";position:absolute;width:230px;height:230px;border:1px solid #375a7f44;border-radius:50%;inset-inline-end:-100px;bottom:-140px;pointer-events:none}
.contact-links{gap:12px;position:relative;z-index:1}.contact-links .btn{border-radius:9px;transition:transform .2s}.contact-links .btn:hover{transform:translateY(-3px)}
.footer{padding-block:30px;gap:20px;flex-wrap:wrap}.footer .brand{font-size:21px}
#certViewer{border-radius:18px}#certViewer::backdrop{backdrop-filter:blur(7px)}

.reveal-pending{opacity:0;transform:translateY(22px)}.reveal-ready{opacity:1;transform:translateY(0);transition:opacity .65s ease,transform .65s ease}
html[data-motion=off] .visual .orbital,html[data-motion=off] .floater{animation:none!important}
html[data-motion=off] .reveal-pending{opacity:1;transform:none}
html[data-motion=off] .visual{transform:none}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{transition:none!important;animation:none!important}
@keyframes portfolio-orbit{to{transform:rotate(360deg)}}
@keyframes portfolio-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:1000px){.hero{gap:30px}.top nav{gap:14px}.top .links{gap:18px}.brand{font-size:22px}.about{gap:30px}}
@media(max-width:650px){.hero{padding-block:42px 34px;gap:35px;min-height:0}.hero h1{font-size:clamp(36px,10vw,52px);overflow-wrap:anywhere}.hero .eyebrow{font-size:8px;letter-spacing:1px}.hero #bio{font-size:15px}.visual{max-width:420px;width:100%;margin:auto;border-radius:24px}.floater{font-size:9px}.v-caption{font-size:6px;bottom:17px}.strip{display:grid;grid-template-columns:1fr 1fr;padding:16px 12px;gap:18px 8px}.strip>span{font-size:8px;white-space:normal}.strip i{font-size:15px}main>section:not(.hero){padding-block:48px}.section-top{align-items:flex-start}.section-top>p{font-size:13px}.discipline{padding:18px}.resume-block{padding:23px}main>section.contact{padding:28px 22px;margin-block:15px 35px}.top .brand{font-size:18px;gap:7px}.top nav{gap:8px}.nav-action{gap:5px}.brandmark{width:27px;height:27px}.footer{justify-content:center;text-align:center}.reveal-pending{transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.reveal-pending{opacity:1;transform:none}.visual{transform:none!important}}
@media print{.reveal-pending{opacity:1;transform:none}.visual,.floater{animation:none!important}.hero{min-height:0;padding-block:20px}main>section:not(.hero){padding-block:20px}.cert-card,.resume-block{box-shadow:none}}

/* Quiet ambient movement, using only the existing blue/cyan palette.
   Transform animations avoid layout work; the decorative layer ignores input. */
body{isolation:isolate}
.ambient-background{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;contain:strict}
.ambient-background span{position:absolute;display:block;pointer-events:none}
.ambient-glow{width:70vmax;height:70vmax;border-radius:50%;opacity:.65}
.glow-one{top:-35vmax;right:-24vmax;background:radial-gradient(circle,#6bd8ee10 0%,#2677bb08 38%,transparent 68%);animation:ambient-drift-one 32s ease-in-out infinite alternate}
.glow-two{bottom:-36vmax;left:-26vmax;background:radial-gradient(circle,#497ffa12 0%,#2677bb08 38%,transparent 68%);animation:ambient-drift-two 38s ease-in-out infinite alternate}
.ambient-particles{inset:-40px;opacity:.24;background-image:radial-gradient(circle,#6bd8ee 0 .7px,transparent 1.4px),radial-gradient(circle,#587fa6 0 .8px,transparent 1.5px);background-size:157px 173px,229px 251px;background-position:28px 45px,119px 97px;mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent);animation:ambient-particles-drift 28s ease-in-out infinite alternate}
@keyframes ambient-drift-one{from{transform:translate3d(0,0,0)}to{transform:translate3d(-7vw,7vh,0)}}
@keyframes ambient-drift-two{from{transform:translate3d(0,0,0)}to{transform:translate3d(6vw,-6vh,0)}}
@keyframes ambient-particles-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(16px,-24px,0)}}
html[data-theme=light] .ambient-glow{opacity:.45}
html[data-theme=light] .ambient-particles{opacity:.13}
@media(max-width:650px){.ambient-particles{background-size:157px 193px,229px 271px;opacity:.17}.ambient-glow{opacity:.5}}
@media(prefers-reduced-motion:reduce){.ambient-background span{animation:none!important}}
@media print{.ambient-background{display:none}}