/* Isolated preview V3: clear imagery, focus-frame interaction and corrected text. */
:root{--font-system:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Ryan Inter","Ryan Sans SC","Microsoft YaHei",sans-serif;--type-mono:var(--font-system)}
body.motion-v3{font-weight:400}
body.motion-v3 *{font-family:var(--font-system)}
.motion-v3 .project-info h3,.motion-v3 .case-heading #detail-title{font-weight:500;letter-spacing:-.018em}
.motion-v3 .project-info p,.motion-v3 .card-keywords,.motion-v3 .case-heading #detail-intro{font-weight:400;letter-spacing:0}
.motion-v3 .case-keywords>span{letter-spacing:.02em;line-height:1.7}
.motion-v3 motion-unit.reveal-unit,.motion-v3 motion-unit.type-char{border:0;padding:0;margin:0;background:none;font:inherit;color:inherit;letter-spacing:inherit}
.motion-v3 motion-unit.reveal-unit{display:inline-block}
.motion-v3 motion-unit.type-char{display:inline}
.motion-v3 .kinetic-icon .icon-arrow{transform:none}
.motion-v3 .kinetic-icon{transform:none!important}
.motion-v3 .noodle-profile-cta{width:100%;gap:10px;text-align:left}
.motion-v3 :is(.project,.view-material,#next-project,.noodle-profile-link,.outro-mail,.kinetic-link):is(:hover,:focus-visible) .icon-corners{transform:scale(.9)}
.motion-v3 :is(.project,.view-material,#next-project,.noodle-profile-link,.outro-mail,.kinetic-link):is(:hover,:focus-visible) .icon-arrow{transform:none}
.motion-v3 .project .art:after{display:none}
.motion-v3 .project .art{isolation:isolate}
.motion-v3 .focus-frame{position:absolute;inset:10px;z-index:3;pointer-events:none;color:#e1edff;filter:drop-shadow(0 1px 2px #07111daa);transition:color .35s}
.focus-frame i{position:absolute;width:24px;height:24px;border-color:currentColor;border-style:solid;border-width:0;opacity:.65;transition:transform .35s var(--motion-ease),opacity .35s}
.focus-frame i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.focus-frame i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.focus-frame i:nth-child(3){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.focus-frame i:nth-child(4){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.motion-v3 .project:is(:hover,:focus-visible) .focus-frame i{opacity:1}
.motion-v3 .project:is(:hover,:focus-visible) .focus-frame i:nth-child(1){transform:translate(5px,5px)}
.motion-v3 .project:is(:hover,:focus-visible) .focus-frame i:nth-child(2){transform:translate(-5px,5px)}
.motion-v3 .project:is(:hover,:focus-visible) .focus-frame i:nth-child(3){transform:translate(-5px,-5px)}
.motion-v3 .project:is(:hover,:focus-visible) .focus-frame i:nth-child(4){transform:translate(5px,-5px)}
.motion-v3 .project .art img,.motion-v3 .case-cover img,.motion-v3 .case-contactsheet img{filter:none!important;transform:none!important}
.motion-v3 .project[data-id=noodle] .focus-frame{color:#b8d1ff}
.motion-v3 .about{padding-block:88px;gap:clamp(40px,6vw,96px);grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);background-image:linear-gradient(90deg,transparent 42%,#6c89b325 42%,#6c89b325 calc(42% + 1px),transparent calc(42% + 1px));border-top:1px solid #486380;isolation:isolate}
.motion-v3 .about-name{min-width:0;align-self:start}
.motion-v3 .about-name:after{display:none}
.motion-v3 .about-name h2{margin:32px 0 24px;font-weight:450}
.motion-v3 .about-name h2>span{display:block;margin:0;color:inherit;letter-spacing:-.025em;line-height:1.25}
.motion-v3 .about-name h2>.about-name-cn{font-size:clamp(42px,4.7vw,66px);white-space:nowrap}
.motion-v3 .about-name h2>.about-name-en{font-size:clamp(24px,2.65vw,38px);margin-top:12px;letter-spacing:.035em;color:#a9bcd9;white-space:nowrap}
.motion-v3 .about-name>.blue{display:block;font-size:14px;letter-spacing:.015em}
.motion-v3 .about-intro{font-size:clamp(25px,2.4vw,34px);font-weight:450;letter-spacing:-.015em}
.motion-v3 .about-body{min-width:0;border-top:1px solid #56718f70;padding-top:24px}
.motion-v3 .about-body>p:not(.about-intro){font-size:15px;color:#b0bed1}
.motion-v3 .experience{margin-top:28px}
.motion-v3 .experience>div{padding-block:18px}
.motion-v3 .skills{gap:8px}
.motion-v3 .skills span{font-size:11px;padding:5px 8px}
.about-focus-study{width:min(100%,360px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:50px;color:#91afd8;position:relative}
.about-focus-study svg{display:block;width:100%;height:auto;flex-basis:100%;stroke:currentColor;stroke-width:1}
.about-focus-study .study-grid{opacity:.12}
.about-focus-study .study-orbit{opacity:.45;stroke-dasharray:3 5}
.about-focus-study .study-brackets{opacity:.65}
.about-focus-study .study-ticks{opacity:.45}
.about-focus-study text{fill:#9fbcdf;stroke:none;font-size:14px;letter-spacing:5px;opacity:.5}
.about-focus-study>span{font-size:10px;letter-spacing:.1em;color:#879dbb}
.motion-v3 .outro-copy h2{letter-spacing:-.035em;font-weight:450}
.motion-v3 .preview-controls{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:800px){.motion-v3 .about{grid-template-columns:1fr;gap:38px;padding-block:58px;background-image:none}.motion-v3 .about-name h2{margin-block:24px 20px}.motion-v3 .about-name h2>.about-name-cn{font-size:46px}.motion-v3 .about-name h2>.about-name-en{font-size:27px}.about-focus-study{margin-top:30px;width:min(100%,310px)}.motion-v3 .about-body{padding-top:28px}.motion-v3 .preview-controls{max-width:calc(100vw - 16px)}.motion-v3 .preview-controls button,.motion-v3 .preview-controls>a{font-size:10px;padding:10px 6px}.focus-frame i{width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){.motion-v3 .focus-frame,.motion-v3 .focus-frame i{transition:none}}
.motion-v3.motion-static .focus-frame,.motion-v3.motion-static .focus-frame i{transition:none}
