/* Opaline glass and fine light, kept separate so this direction is easy to revise. */
.expressive-surface{background:#edf3f2;background-image:radial-gradient(ellipse at 95% 0,#e8e5f452,transparent 48%),radial-gradient(ellipse at 0 25%,#def1e745,transparent 44%)}
.intro-card{isolation:isolate;position:relative}
.intro-prism{position:absolute;z-index:-1;pointer-events:none;inset:-35px -18px 45px 20%;overflow:hidden;opacity:.85;contain:paint}
.intro-prism svg{width:100%;height:100%;animation:prism-arrive 1.6s cubic-bezier(.16,1,.3,1) both}
.intro-prism g[stroke] ellipse{stroke-dasharray:1;animation:ring-draw 2.1s cubic-bezier(.2,.7,.2,1) .15s both}
.intro-prism g[stroke] ellipse:nth-child(2){animation-delay:.3s}
.intro-prism g[stroke] ellipse:nth-child(3){animation-delay:.45s}
.intro-card h1{color:#203c38;letter-spacing:-2px;text-shadow:0 2px 0 #fff8}
.intro-card h1>span{color:#698e87;font-style:italic;font-family:Georgia,serif;letter-spacing:-1px}
.intro-card h2{color:#3b5853}
.intro-main .eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid #fff;border-radius:99px;background:#ffffff80;box-shadow:0 3px 14px #30685608;color:#52756b}
.intro-main .status-dot{margin-right:1px;box-shadow:0 0 0 4px #80bea51a}
.expressive-surface .header{border-radius:999px;background:#fafffd99;box-shadow:0 5px 22px #344d4209,inset 0 1px 0 #ffffffeb;backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%);border-color:#ffffffb3}
.expressive-surface .header .nav-link,.expressive-surface .header .nav-indicator{border-radius:999px}
.expressive-surface .header .nav-indicator{background:#ddf0e87a;box-shadow:inset 0 1px 0 #ffffffc9,0 2px 7px #3c786608}
.expressive-surface .header .nav-link:hover{background:#ffffff66}
.has-photo .profile-portrait{border-radius:22px;background:#ffffffb3;padding:5px;box-shadow:0 12px 32px #416e5e16,inset 0 0 0 1px #fff;rotate:2deg;transition:rotate .55s cubic-bezier(.2,.75,.2,1),box-shadow .4s}
.has-photo .profile-portrait .profile-photo{border-radius:17px}
.has-photo .hello-bubble{border-radius:22px;background:#ffffffec;box-shadow:0 10px 28px #476a5b0c,inset 0 1px 0 #fff;border-color:#fff}
.has-photo .hello-bubble:before{background:#fcfdfc}
.has-photo .cat-bubble{border-radius:16px;box-shadow:0 7px 18px #9d805314,inset 0 1px 0 #fff8}
.personal-hello.has-photo{position:relative;isolation:isolate}
.bubble-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.has-connected-tails .hello-bubble,.has-connected-tails .cat-bubble,.has-connected-tails .profile-portrait{z-index:1}
.has-connected-tails .hello-bubble:before,.has-connected-tails .cat-bubble:before{display:none}
.intro-work-row .primary-action{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(125deg,#254c45,#427d70);border-color:#ffffff75;border-radius:13px;box-shadow:0 7px 18px #286a5724,inset 0 1px 0 #b8dfc975;transition:box-shadow .3s,translate .25s,background .3s}
.primary-action:before{content:"";position:absolute;inset:-40% -80%;z-index:-1;background:linear-gradient(110deg,transparent 42%,#fff6 50%,transparent 58%);transform:translateX(-65%);pointer-events:none}
.intro-index a{position:relative;padding-bottom:3px}
.intro-index a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#609a87;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.background-grid>.glass-card,.app-card,.visual-icon-card,.experience-card{position:relative;isolation:isolate;box-shadow:0 10px 30px #314f4210,inset 0 1px 0 #fff;border:1px solid #fff;background-color:#ffffffb3}
.background-grid>.glass-card:after,.app-card:after,.visual-icon-card:after,.experience-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(230px circle at var(--light-x,50%) var(--light-y,50%),#c7f7e548,transparent 75%);box-shadow:inset 0 0 0 1px #b3d6ca8c;transition:opacity .35s}
.section-heading h2,.render-section-heading h3{font-weight:550}
.section-heading .eyebrow{display:flex;align-items:center;gap:10px;color:#628c7f}
.section-heading .eyebrow:before{content:"";width:20px;height:1px;background:#79ac99;box-shadow:6px 3px 0 #c1d9cc}
.self-icon-module,.scene-gallery{box-shadow:0 14px 44px #324e410a,inset 0 1px 0 #fff}
.tool-overview{box-shadow:0 6px 24px #345c4808,inset 0 1px 0 #fff}
.tool-overview .tool-symbol{transition:translate .3s cubic-bezier(.2,.9,.3,1.5),box-shadow .3s}
.icon-stage>img{transition:transform .5s cubic-bezier(.18,.9,.25,1.15),filter .4s}
.app-view-image{transition:box-shadow .35s,border-color .35s}
.open-app .arrow-icon,.wechat-action .arrow-icon,.resume-open .arrow-icon{transition:translate .25s}
@media(hover:hover) and (pointer:fine){
 .has-photo .profile-portrait:hover{rotate:0deg;box-shadow:0 16px 36px #416e5e24}
 .intro-work-row .primary-action:hover{box-shadow:0 10px 25px #286a5738,inset 0 1px 0 #d5f5e8}
 .primary-action:hover:before{animation:button-glint .75s ease both}
 .intro-index a:hover:after{transform:scaleX(1)}
 .light-active:after{opacity:1}
 .tool-overview .tool-badge:hover .tool-symbol{translate:0 -6px;box-shadow:0 9px 18px #32695720}
 .icon-stage:hover>img{transform:translateY(-5px) rotate(-3deg) scale(1.055);filter:drop-shadow(0 12px 10px #3d4e5718)}
 .app-view-image:hover{box-shadow:0 8px 22px #39715d18;border-color:#a5cbbd}
 .open-app:hover .arrow-icon,.wechat-action:hover .arrow-icon,.resume-open:hover .arrow-icon{translate:2px -2px}
}
@keyframes prism-arrive{from{opacity:0;transform:translate(32px,12px) scale(.92)}to{opacity:1;transform:none}}
@keyframes button-glint{to{transform:translateX(65%)}}
@keyframes ring-draw{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@media(max-width:600px){
 .expressive-surface .header{background:#fafffdb8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
 .intro-prism{inset:75px -8px 75px 4%;opacity:.6}
 .has-photo .profile-portrait{padding:3px;border-radius:18px;rotate:1.5deg}
 .has-photo .profile-portrait .profile-photo{border-radius:15px}
 .has-photo .cat-bubble{justify-self:end;margin:0 4px 0 0;transform:none}
 .personal-hello.has-photo{grid-template-rows:minmax(142px,auto) auto}
 .background-grid>.glass-card,.app-card,.visual-icon-card,.experience-card{box-shadow:0 7px 20px #314f420a,inset 0 1px 0 #fff}
 .intro-card h1{letter-spacing:-1.4px}
}
@media(max-width:360px){.personal-hello.has-photo{grid-template-rows:minmax(126px,auto) auto}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .expressive-surface .header{background:#fafffdeb}
}
@media(prefers-reduced-motion:reduce){
 .intro-prism svg,.intro-prism g[stroke] ellipse,.primary-action:before{animation:none}
 .has-photo .profile-portrait{rotate:0deg}
 .intro-work-row .primary-action,.tool-overview .tool-symbol,.open-app .arrow-icon,.wechat-action .arrow-icon,.resume-open .arrow-icon{translate:none!important}
 .icon-stage:hover>img{transform:none;filter:none}
}

/* Reversible entry only: cards never shrink as they leave through the top. */
.scroll-grow{--grow-shift:34px;--grow-scale:.94;--grow-scale-delta:.06;transform-origin:50% 90%}
.scroll-grow[data-scroll-mode="native"]{animation:card-scroll-growth linear both;animation-duration:auto;animation-timeline:view(block);animation-range:entry 0% entry 85%}
.scroll-grow[data-scroll-mode="fallback"]{opacity:calc(.25 + .75 * var(--grow-progress,1));transform:translateY(calc(var(--grow-shift) * (1 - var(--grow-progress,1)))) scale(calc(var(--grow-scale) + var(--grow-scale-delta) * var(--grow-progress,1)))}
@keyframes card-scroll-growth{from{opacity:.25;transform:translateY(var(--grow-shift)) scale(var(--grow-scale))}to{opacity:1;transform:translateY(0) scale(1)}}
.scroll-grow:focus-within{animation:none!important;opacity:1!important;transform:none!important}
@media(max-width:600px){.scroll-grow{--grow-shift:18px;--grow-scale:.97;--grow-scale-delta:.03}}
@media(prefers-reduced-motion:reduce){.scroll-grow{animation:none!important;opacity:1!important;transform:none!important}}