@view-transition{navigation:auto}@media(prefers-reduced-motion: no-preference){:root{--main-duration: 1.3s;--get-in-place-time: 0.5s;--fade-out-time: 0.3s;--thumb-radius: 8.3333333333vw}}@media(prefers-reduced-motion: no-preference)and (hover: hover)and (min-width: 768px){:root{--thumb-radius: 50%}}@media(prefers-reduced-motion: no-preference){main{view-transition-name:main}header{view-transition-name:header}.page-content{view-transition-name:page-content}:not(.single-work) .work-thumb{view-transition-name:var(--vt);view-transition-class:work-thumb}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-fill-mode:both}::view-transition-group(main){z-index:2;animation-timing-function:var(--default-ease);animation-delay:var(--fade-out-time);animation-duration:var(--get-in-place-time)}::view-transition-old(main),::view-transition-new(main){animation-duration:0s}::view-transition-group(page-title){animation-duration:0s;animation-timing-function:var(--ease-in-back);overflow:clip}::view-transition-old(page-title){animation-name:title-to-up;animation-duration:var(--fade-out-time);animation-timing-function:var(--ease-in-back)}::view-transition-new(page-title){animation-name:title-from-down;animation-duration:var(--get-in-place-time);animation-delay:calc(var(--get-in-place-time));animation-timing-function:var(--ease-out-back)}::view-transition-group(page-content){z-index:4;animation-duration:0s;animation-delay:.2s;animation-timing-function:var(--default-ease)}::view-transition-old(page-content){animation-duration:.2s;animation-delay:0s}::view-transition-group(.work-thumb){z-index:4;animation-duration:var(--fade-out-time);animation-timing-function:var(--default-ease);overflow:clip}::view-transition-old(.work-thumb){animation-name:fade-out;animation-duration:var(--fade-out-time)}::view-transition-new(page-content),::view-transition-new(.work-thumb){animation:none}::view-transition-group(header){z-index:10;background:var(--color-background);animation-timing-function:var(--default-ease);animation-duration:var(--fade-out-time);animation-delay:var(--fade-out-time)}::view-transition-old(header){animation-name:fade-out;animation-duration:.3s;animation-delay:.3s;animation-timing-function:var(--default-ease);z-index:1}::view-transition-new(header){animation-name:fade-in;opacity:0;animation-delay:0s;animation-duration:.3s;animation-timing-function:var(--default-ease)}::view-transition-group(header-active-indicator){z-index:11;animation-timing-function:var(--default-ease);animation-duration:var(--fade-out-time);animation-delay:var(--fade-out-time)}::view-transition-old(header-active-indicator):only-child{animation-duration:.1s}::view-transition-new(header-active-indicator):only-child{animation-duration:.1s;animation-delay:var(--main-duration)}::view-transition-group(header-box){animation-delay:.35s;animation-duration:0s;animation-timing-function:var(--default-ease);z-index:11}::view-transition-old(header-box){animation-name:header-box-up;animation-duration:.35s;animation-delay:0s;animation-timing-function:var(--ease-in-back);animation-fill-mode:both}::view-transition-new(header-box){animation-duration:0s;animation-fill-mode:both}::view-transition-old(.work-image),::view-transition-old(.work-no-bg),::view-transition-old(.work-text){animation-duration:var(--fade-out-time)}::view-transition-group(footer){z-index:15;animation-timing-function:var(--default-ease);animation-duration:var(--get-in-place-time)}::view-transition-old(footer),::view-transition-new(footer){animation-duration:.25s;animation-delay:0s;animation-timing-function:var(--default-ease)}.active-thumb .full-image img,.active-thumb .img-container img{view-transition-name:var(--vt)}.active-thumb .img-container img{view-transition-class:work-no-bg}.active-thumb .full-image img{view-transition-class:work-image}.active-thumb .work-thumb__text{view-transition-name:var(--vt);view-transition-class:work-text}.single-work{--get-in-place-time: 0.5s;--fade-out-time: 0.5s}.single-work::view-transition-old(root),.single-work::view-transition-old(main),.single-work::view-transition-new(root),.single-work::view-transition-new(main),.single-work::view-transition-new(work-content),.single-work::view-transition-group(selected-work),.single-work::view-transition-group(homepage-header){animation-duration:.1s;animation-timing-function:ease-out}.single-work::view-transition-new(page-title){animation-duration:var(--fade-out-time);animation-delay:var(--main-duration)}.single-work::view-transition-group(.work-image){z-index:3;animation-duration:.7s;animation-timing-function:var(--default-ease);animation-delay:.3s;overflow:clip}.single-work::view-transition-new(.work-image){opacity:0;animation:none}.single-work::view-transition-old(.work-image){height:100%;object-fit:cover;object-position:0 var(--top, 0);border-radius:var(--border-radius);overflow:clip;opacity:1;animation-name:clip-from-circle;animation-duration:var(--main-duration);animation-delay:0s;animation-timing-function:var(--default-ease)}.single-work::view-transition-group(.work-no-bg){z-index:3;animation-duration:.7s;animation-delay:.3s;animation-timing-function:var(--default-ease);overflow:clip}.single-work::view-transition-new(.work-no-bg){opacity:0;animation:none}.single-work::view-transition-old(.work-no-bg){height:100%;object-fit:cover;object-position:0 var(--top, 0);opacity:1;animation-name:clip-from-circle-inner;animation-duration:var(--main-duration);animation-delay:0s;animation-timing-function:var(--default-ease);clip-path:inset(0 round var(--border-radius-from))}.single-work::view-transition-old(.work-image):only-child,.single-work::view-transition-old(.work-no-bg):only-child{animation:fade-out;animation-duration:.3s;animation-delay:0s;animation-timing-function:var(--default-ease)}}@keyframes clip-from-circle-inner{from{clip-path:inset(0 round var(--border-radius-from))}to{clip-path:inset(0 round var(--border-radius))}}@keyframes clip-from-circle{0%{clip-path:inset(0 round 100%)}50%{clip-path:inset(0 round var(--border-radius))}70%{clip-path:inset(0 round var(--border-radius))}100%{clip-path:inset(var(--clip-top) 0 0 round var(--border-radius))}}@keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes title-to-up{0%{transform:translateY(0)}99%{transform:translateY(-100%);opacity:1}100%{transform:translateY(-100%);opacity:0}}@keyframes title-from-down{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes header-box-up{0%{transform:translateY(0)}99%{transform:translateY(-120%);opacity:1}100%{transform:translateY(-120%);opacity:0}}