/* Edition 04 adds movement to Elena's existing typography and colours. One line per component. */
/* Feedback answers immediately; settle eases the remaining navigation and Works movement. */
:root{--motion-feedback:160ms;--motion-settle:320ms;--ease-out:cubic-bezier(.22,1,.36,1);--quiet:#6b6b6b}html{scrollbar-gutter:stable;transition:background-color var(--motion-feedback) ease-out}[hidden]{display:none!important}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}a{-webkit-tap-highlight-color:#002fa714}button:focus-visible{outline:2px solid var(--blue);outline-offset:6px}.motion-page{min-height:100svh;display:flex;flex-direction:column}.motion-page main{flex:1}.motion-page main.home,.motion-page main.contact{min-height:0}.text-button{border:0;background:none;padding:8px 0;cursor:pointer;font-size:11px;line-height:1.5;transition:color var(--motion-feedback) ease-out}.muted{color:var(--quiet)}.edition-footer{display:flex;justify-content:space-between;gap:24px;padding:24px 40px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;color:#626262}.edition-footer a{text-decoration:none;transition:color var(--motion-feedback) ease-out}body.motion-page{background:#fff}
/* Page changes stay short, so the next click is never held up for long. */
::view-transition-old(root){animation:fade-out 70ms ease-in both}::view-transition-new(root){animation:fade-in 130ms 40ms var(--ease-out) both}::view-transition-group(root),::view-transition-group(lele-brand),::view-transition-group(yiwu-cover),::view-transition-group(works-nav),::view-transition-group(contact-nav){animation-duration:180ms;animation-timing-function:var(--ease-out)}
/* Navigation labels lean toward the pointer; the current page keeps Elena's underline on the moving label. */
.magnetic-inner{display:inline-block;transition:transform var(--motion-settle) var(--ease-out)}.magnetic-active .magnetic-inner{transition-duration:var(--motion-feedback)}.navigation a[aria-current] .magnetic-inner{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
/* Elena's composition, with a quiet copyright line beneath the introduction. */
.motion-home{position:relative;padding:clamp(200px,34svh,350px) 52px 40px}
.home-composition{position:relative;max-width:1080px;margin:auto}
.motion-home .navigation-home .nav-contact{right:0}
.motion-home .company-intro{margin-top:120px}
.home-note{margin-top:35px;text-align:center;color:var(--quiet);font-size:11px}
/* Works: the film still is the subject of the row and nothing follows the pointer. Hover or keyboard focus is one gesture on the shared timing:
   the still zooms 3% inside its fixed frame, the arrow turns and goes orange, "View film" turns blue and underlines. Colour answers first; movement settles. The title never moves while it is read. */
.motion-works{--index:22px;--index-gap:16px;width:min(1120px,calc(100% - 96px));margin:auto;padding:80px 0}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;font:11px 'JetBrains Mono',monospace}.section-label h1{font:inherit;text-transform:uppercase}.section-label>span{color:var(--quiet)}.project-row{--title:clamp(44px,6.2vw,92px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto 1fr;grid-template-areas:"heading still" "meta still";column-gap:clamp(32px,4vw,64px);padding:44px 0 40px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;text-decoration:none}.project-row:focus-visible{outline-offset:10px}.project-heading{grid-area:heading;display:flex;gap:var(--index-gap);align-items:flex-start}.project-index{flex:0 0 var(--index);font:11px 'JetBrains Mono',monospace;color:var(--quiet);padding-top:calc(var(--title) * .17)}.project-heading h2{min-width:0;font:400 var(--title)/1.03 Barlow,Arial,sans-serif;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word}.project-working-title{display:block;font-size:.5em;line-height:1.2;margin-top:12px;letter-spacing:0;color:var(--quiet)}.project-chinese{display:block;font-size:17px;line-height:1.6;margin-top:18px;letter-spacing:.12em;color:var(--ink)}.project-bottom{grid-area:meta;align-self:end;margin:32px 0 0 calc(var(--index) + var(--index-gap));font-size:13px;line-height:1.65}.project-thumbnail{grid-area:still;min-width:0}.project-frame{overflow:hidden;aspect-ratio:16/9;background:#2d3528 url(data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAADwBACdASogABIAPt1cpkyopSOiMAgBEBuJYwDE2CIZXPt2Fxx/J7x8I54JD8b4xgAA/vQm8XLxsxvsr7b7kl2xNOT8JKasR7YFFQFUuGRD+9kgq1GPzydxLMgzRVmsH4Kydk9IgxxY6bb/yBPiLu1eK2Xn6meMyvwgsOvwNX+A6Qz7yXx/H+H6APx/nIiGZdOXJJytqgbEHoNJDtBXQWHW+hl5gBIAAAA=) center/cover;view-transition-name:yiwu-cover}.project-frame img{width:100%;height:100%;object-fit:cover;transition:scale var(--motion-settle) var(--ease-out),opacity var(--motion-settle) ease-out}.project-frame img.is-loading{opacity:0}html:active-view-transition .project-frame{background:none}html:active-view-transition .project-frame img{transition:none}.project-cta{display:flex;justify-content:space-between;align-items:center;padding-top:12px;font:11px 'JetBrains Mono',monospace;letter-spacing:.04em}.project-cta-label{position:relative;padding:4px 0;transition:color var(--motion-feedback) ease-out}.project-cta-label::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;scale:0 1;transform-origin:left;transition:scale var(--motion-settle) var(--ease-out)}.project-arrow{font:30px/1 Barlow,Arial,sans-serif;transition:translate var(--motion-settle) var(--ease-out),color var(--motion-feedback) ease-out}.project-row:is(:focus-visible,:active) .project-cta-label{color:var(--blue);transition-duration:var(--motion-feedback)}.project-row:is(:focus-visible,:active) .project-arrow{color:var(--orange);transition-duration:var(--motion-settle),var(--motion-feedback)}.project-row:focus-visible .project-frame img{scale:1.03;transition-duration:var(--motion-settle)}.project-row:focus-visible .project-cta-label::after{scale:1 1;transition-duration:var(--motion-settle)}.project-row:focus-visible .project-arrow{translate:6px 0}.project-row:active :is(.project-cta-label,.project-arrow){transition-duration:0s}.works-note{font-size:11px;margin-top:24px;color:var(--quiet)}
/* Page changes: the still you clicked becomes the film's cover (and back) as one picture. The old picture stays underneath until the new one paints. */
::view-transition-old(yiwu-cover):not(:only-child){animation:none}::view-transition-new(yiwu-cover):not(:only-child){animation:none}::view-transition-old(yiwu-cover):only-child,::view-transition-old(lele-brand):only-child,::view-transition-old(works-nav):only-child,::view-transition-old(contact-nav):only-child{animation:fade-out 70ms ease-in both}::view-transition-new(yiwu-cover):only-child,::view-transition-new(lele-brand):only-child,::view-transition-new(works-nav):only-child,::view-transition-new(contact-nav):only-child{animation:fade-in 130ms 40ms var(--ease-out) both}
/* Film page. */
.motion-film{padding-top:56px}.eyebrow-motion{font:10px 'JetBrains Mono',monospace;color:var(--quiet);margin-bottom:24px;letter-spacing:.08em}.motion-film .film-intro h1{font-size:clamp(28px,4vw,48px);margin-bottom:0}.film-zh{font-size:15px;letter-spacing:.12em;color:var(--blue);margin:6px 0 34px!important}.motion-film .film-intro>.film-cover{max-width:580px}.motion-film .film-meta{font-size:16px}.motion-film .film-meta p+p{margin-top:12px}.motion-film .film-body{font-size:17px;line-height:1.65}.motion-film .film-body section+section{margin-top:80px}.motion-film .film-body>section:not(.stills-section):not(.director-section){max-width:760px;margin-inline:auto}.motion-film .logline{max-width:640px;margin-inline:auto}.motion-film .film-body h2{font-size:17px}.motion-film .support-list{font-size:15px}.motion-film .support-list em{font-size:14px}.press-list a{transition:color var(--motion-feedback) ease-out}.film-next{display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:760px;margin:96px auto 0;padding-top:28px;border-top:1px solid #ddd;font-size:15px}.film-next a{text-decoration:none;padding:10px 0;white-space:nowrap;transition:color var(--motion-feedback) ease-out}.film-next a:last-child{font-family:Barlow,Arial,sans-serif;font-size:24px;text-transform:uppercase}
/* Stills are ordinary images. The supplied director portrait and bio follow them. */
.director-layout{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:48px;align-items:start;max-width:892px;margin:auto;text-align:left}
.director-portrait{width:100%;max-width:354px;height:auto}
.director-bio p+p{margin-top:24px}
/* Contact uses the same reading size as Elena's Canva design. */
.motion-contact{padding-top:130px;padding-bottom:110px;font-size:20px;line-height:1.4}
.motion-contact .contact-email{display:inline-block;font:inherit;margin:0;padding:0;text-decoration:none}
.contact-email:hover .magnetic-inner,.contact-email:focus-visible .magnetic-inner{color:var(--blue);text-decoration:underline;text-underline-offset:.22em}
.copy-line{margin:12px 0 32px!important;min-height:24px}
.copy-line .text-button{font-size:12px;color:var(--quiet)}
.instagram-line a{transition:color var(--motion-feedback) ease-out}
.motion-contact .instagram-line{margin-top:0;font-size:inherit}
/* Pointer-only flourishes stay off touch screens. */
@media(hover:hover) and (pointer:fine){
 .text-button:hover,.edition-footer a:hover,.press-list a:hover,.film-next a:hover,.instagram-line a:hover{color:var(--blue)}
 .project-row:hover .project-frame img{scale:1.03;transition-duration:var(--motion-settle)}
 .project-row:hover .project-cta-label{color:var(--blue)}
 .project-row:hover .project-cta-label::after{scale:1 1;transition-duration:var(--motion-settle)}
 .project-row:hover .project-arrow{translate:6px 0;color:var(--orange);transition-duration:var(--motion-settle),var(--motion-feedback)}
}
@media(min-width:701px) and (max-height:780px){.motion-works{padding-top:44px}}
@media(max-width:700px),(orientation:portrait){
 .project-row{--title:clamp(39px,7.5vw,56px);grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"heading" "still" "meta";padding-top:32px}
 .motion-works{padding-top:56px}.project-thumbnail{margin-top:24px}.project-bottom{margin:24px 0 0 calc(var(--index) + var(--index-gap))}
}
@media(max-width:900px){.motion-home{padding-inline:36px}.director-layout{gap:32px}}
@media(max-width:760px){.motion-contact{font-size:17px;line-height:1.55}}
@media(max-width:600px){
 .edition-footer{padding:24px;font-size:10px;gap:12px;letter-spacing:0}.edition-footer a{padding:10px 0;margin:-10px 0}
 .motion-home{padding:180px 24px 45px}.motion-home .navigation-home{width:100%;height:205px}.motion-home .navigation-home .brand{width:140px}
 .motion-home .navigation-home>a:not(.brand){font-size:29px;top:160px;padding:12px 0}
 .motion-home .navigation-home .nav-works{left:12px}.motion-home .navigation-home .nav-contact{right:12px}
 .motion-home .line-orange{left:12px;right:calc(50% + 42px);top:110px;height:4px}.motion-home .line-blue{left:calc(50% + 65px);right:12px;top:134px;height:4px}
 .motion-home .company-intro{margin-top:104px;max-width:310px;font-size:15px;line-height:1.6}.home-note{margin-top:24px}
 .motion-works{--index:16px;--index-gap:12px;width:calc(100% - 48px);padding:65px 0 70px}.section-label{font-size:10px}
 .project-row{--title:clamp(34px,10vw,56px);padding:32px 0 28px}.project-index{font-size:10px}.project-chinese{font-size:13px;margin-top:12px}
 .project-thumbnail{margin-top:24px}.project-bottom{margin-top:20px;font-size:12px}.project-cta{font-size:12px}.project-arrow{font-size:28px}.works-note{font-size:11px}
 .motion-film{padding-top:38px}.motion-film .film-meta{font-size:14px}.motion-film .film-body{font-size:15px}.motion-film .film-body section+section{margin-top:55px}
 .motion-film .film-intro h1{font-size:25px}.film-zh{font-size:13px;margin-bottom:26px!important}.motion-film .support-list{font-size:13px}.motion-film .support-list em{font-size:12px}
 .director-layout{grid-template-columns:minmax(0,1fr);gap:28px}.director-portrait{width:min(100%,300px);margin-inline:auto}
 .film-next{margin-top:64px;font-size:14px;flex-wrap:wrap;row-gap:28px}.film-next a:last-child{margin-left:auto;font-size:20px}
 .motion-contact{padding-top:95px}.motion-contact .contact-email{overflow-wrap:anywhere}
 .motion-contact .instagram-line a{display:inline-block;padding:12px 0;margin:-12px 0}
}
@media(pointer:coarse){
 .copy-line .text-button,.edition-footer a,.instagram-line a,.press-list a,.film-next a{display:inline-block;padding:14px 0;margin:-14px 0}
 .edition-footer a{padding-block:15px;margin-block:-15px}
 .motion-contact .contact-email{padding:10px 0;margin:-10px 0}
}
@media(prefers-reduced-motion:reduce){
 .magnetic-inner{transform:none!important}.project-frame img,.project-arrow{scale:none!important;translate:none!important}
 .project-cta-label::after{scale:1 1!important;opacity:0}.project-row:is(:hover,:focus-visible) .project-cta-label::after{opacity:1}
}