/* Clip decoration at its owning region, without making a sideways scroll container. */
html,body{overflow-x:clip;overscroll-behavior-x:none}
main{overflow-x:clip}
.hero{overflow-x:clip;overflow-y:visible}
.section>*,.experience-list{min-width:0}
.experience h2{white-space:normal;text-wrap:balance}
.about-picture{isolation:isolate}
.about-model,.contact-model{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%)}
.about-picture:has(.character-model):after,.contact-avatar:after{content:"";display:block;position:absolute;inset:76% 0 0;z-index:2;pointer-events:none; background:transparent;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
.contact-avatar:after{right:auto;width:235px}
.about-model .character-poster,.contact-model .character-poster{position:static;width:100%;height:100%;object-fit:contain}
.food-scene{position:absolute;inset:0;pointer-events:none;z-index:-1}
.food-float{position:absolute;width:112px;height:112px;animation:food-drift 7s ease-in-out infinite;animation-play-state:paused;transform:rotate(var(--tilt));opacity:.85}
.food-scene.in-view .food-float{animation-play-state:running}
.food-float:nth-child(1){left:0;top:12%;--tilt:-18deg}
.food-float:nth-child(2){right:0;top:35%;--tilt:14deg;animation-delay:-2.4s}
.food-float:nth-child(3){left:0;top:62%;--tilt:-8deg;animation-delay:-4.8s}
.food-model{display:block;width:100%;height:100%;--poster-color:transparent;background:transparent;pointer-events:none}
@keyframes food-drift{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-12px) rotate(calc(var(--tilt) + 7deg))}}
.motion-paused .food-scene .food-float{animation-play-state:paused}
@media(max-width:760px){.food-float{width:82px;height:82px}.food-float:nth-child(1){top:10%;left:-2px}.food-float:nth-child(2){top:33%;right:-2px}.food-float:nth-child(3){top:61%;left:-2px}.contact-avatar:after{width:215px}.experience h2 small{display:inline-block}}
@media(prefers-reduced-motion:reduce){.food-scene .food-float{animation:none}}

/* Use the supplied Chinese lettering without changing the English title. */
html:not([lang=en]) .contact h2{position:relative;width:clamp(220px,29vw,360px);height:auto;aspect-ratio:494.334 / 230.05;margin-inline:auto;font-size:0;letter-spacing:0;transform:none}
html:not([lang=en]) .contact h2::before{content:"";position:absolute;inset:0;background:var(--ink);-webkit-mask:url('assets/contact-title.svg') center / contain no-repeat;mask:url('assets/contact-title.svg') center / contain no-repeat}

/* Symmetric navigation stays centred even with desktop settings on the right. */
.site-header nav{flex:1;grid-template-columns:1fr 1fr 1.4fr 1fr 1fr}
@media(min-width:761px){.site-header{padding-inline:90px;gap:0}.site-header .header-tools{position:absolute;right:0;top:50%;transform:translateY(-50%)}}
@media(max-width:760px){.site-header nav{grid-template-columns:1fr 1fr 1.45fr 1fr 1fr}}
.contact-linkedin{display:flex;width:44px;height:44px;margin:12px auto 0;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;transition:color .2s,background .2s,transform .2s}
.contact-linkedin:hover{color:var(--ink);background:var(--surface);transform:translateY(-2px)}
.sharing-link{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;margin:-24px 0 48px;border:1px solid var(--line);border-radius:16px;transition:background .2s,transform .2s}
.sharing-link:hover{background:var(--surface);transform:translateY(-2px)}
.sharing-label{font:12px var(--font-body);color:var(--muted)}
.sharing-link h3{font-size:20px;margin:6px 0}.sharing-link p{font-size:14px;margin:0;color:var(--muted)}
.sharing-arrow{font-size:28px;flex-shrink:0}
@media(max-width:760px){.sharing-link{padding:18px;margin-top:-20px;margin-bottom:36px}.sharing-link h3{font-size:18px}}

/* Enlarge the hero while keeping its feet anchored above the scroll prompt. */
.hero-model.character-model,.hero-avatar.hero-preview{scale:1.3;translate:0 24px}

/* Gentle levitation uses translate so drag controls remain independent. */
.experience-model{animation:meditation-float 5s ease-in-out infinite;animation-play-state:paused}
.experience-model.character-in-view{animation-play-state:running}
.meditate .meditate-glow{inset:10% -4% 8%;background:radial-gradient(ellipse at center,#b3ff8790 0%,#dfffad55 35%,transparent 70%);filter:blur(20px);animation:meditation-glow 5s ease-in-out infinite;pointer-events:none}
[data-theme=dark] .meditate .meditate-glow{background:radial-gradient(ellipse at center,#7dff6555 0%,#9de77b28 36%,transparent 70%)}
@keyframes meditation-float{0%,100%{translate:0 7px}50%{translate:0 -11px}}
@keyframes meditation-glow{0%,100%{opacity:.65;scale:.96}50%{opacity:1;scale:1.04}}
.motion-paused .experience-model,.motion-paused .meditate .meditate-glow{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.experience-model,.meditate .meditate-glow{animation:none}}

.food-float.mini-ghost,.food-float.mini-bomb{width:35px;height:35px;opacity:1;animation-name:mini-prop-drift}.food-float.mini-ghost{left:23%;top:35%;--tilt:-10deg;animation-delay:-1s}.food-float.mini-bomb{right:22%;top:72%;--tilt:12deg;animation-delay:-3s}@keyframes mini-prop-drift{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-3px) rotate(calc(var(--tilt) + 8deg))}}

/* Keep decorative props secondary to the portrait. */
.food-float:nth-child(-n+3){width:88px;height:88px}.food-float:nth-child(2){right:3%;top:32%}.food-float:nth-child(3){left:2%;top:65%}@media(max-width:760px){.food-float:nth-child(-n+3){width:64px;height:64px}.food-float:nth-child(1){left:1%;top:14%}.food-float:nth-child(2){right:2%;top:35%}.food-float:nth-child(3){left:1%;top:66%}}