/* Page moves for the logbook. The bottom dock stays put; the page itself does one move per destination, reversed on the way back. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@property --w{syntax:"<length>";inherits:false;initial-value:0px}
::view-transition{background:#F5F3EF}
::view-transition-group(dock){z-index:9;animation-duration:.01s}
::view-transition-group(mast){z-index:9;animation-duration:.01s}
::view-transition-group(root){animation-duration:.9s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.9s;animation-timing-function:cubic-bezier(.65,0,.25,1);animation-fill-mode:both;mix-blend-mode:normal}
::view-transition-group(hero){animation-duration:.9s;animation-timing-function:cubic-bezier(.65,0,.25,1)}
::view-transition-old(hero),::view-transition-new(hero){height:100%;object-fit:cover}
html:active-view-transition-type(f-fwd,f-back)::view-transition-image-pair(root){perspective:2200px}

/* visit: a logbook page is turned (spine on the right) */
html:active-view-transition-type(visit-fwd)::view-transition-old(root){z-index:2;transform-origin:100% 50%;animation-name:turn}
html:active-view-transition-type(visit-fwd)::view-transition-new(root){animation-name:under}
html:active-view-transition-type(visit-back)::view-transition-new(root){z-index:2;transform-origin:100% 50%;animation-name:turnBack}
html:active-view-transition-type(visit-back)::view-transition-old(root){animation-name:underOut}
html:active-view-transition-type(visit-fwd,visit-back)::view-transition-image-pair(root){perspective:2200px}
@keyframes turn{to{transform:rotateY(100deg);filter:brightness(.4)}}
@keyframes turnBack{from{transform:rotateY(100deg);filter:brightness(.4)}to{transform:none;filter:none}}
@keyframes under{from{filter:brightness(.5);transform:scale(.97)}to{filter:none;transform:none}}
@keyframes underOut{to{filter:brightness(.5);transform:scale(.97)}}

/* glossary: a rubber stamp lands on the page */
html:active-view-transition-type(glossary-fwd)::view-transition-new(root){animation-name:thud}
html:active-view-transition-type(glossary-fwd)::view-transition-old(root){animation-name:dim}
html:active-view-transition-type(glossary-back)::view-transition-old(root){z-index:2;animation-name:lift}
@keyframes thud{0%{opacity:0;transform:scale(1.18) translateY(-30px)}55%{opacity:1;transform:scale(.985)}75%{transform:scale(1.008)}100%{opacity:1;transform:none}}
@keyframes dim{to{filter:brightness(.4)}}
@keyframes lift{from{opacity:1}to{opacity:0;transform:scale(1.12) translateY(-30px)}}

/* log: a chalk line is snapped across the floor, diagonally */
html:active-view-transition-type(log-fwd)::view-transition-new(root){animation-name:chalk}
html:active-view-transition-type(log-fwd)::view-transition-old(root){animation-name:chalkOld}
html:active-view-transition-type(log-back)::view-transition-old(root){z-index:2;animation-name:chalkOut}
@keyframes chalk{from{clip-path:polygon(100% 0,100% 0,100% 0,100% 0)}to{clip-path:polygon(-60% 0,100% 0,100% 100%,-160% 100%)}}
@keyframes chalkOut{from{clip-path:polygon(-60% 0,100% 0,100% 100%,-160% 100%)}to{clip-path:polygon(100% 0,100% 0,100% 0,100% 0)}}
@keyframes chalkOld{to{transform:translateX(4%);filter:brightness(.5)}}

/* contact: the old page closes like an iris onto the link that was tapped */
html:active-view-transition-type(contact-fwd)::view-transition-old(root){z-index:2;animation-name:iris}
html:active-view-transition-type(contact-fwd)::view-transition-new(root){animation-name:irisUnder}
html:active-view-transition-type(contact-back)::view-transition-new(root){z-index:2;animation-name:irisOpen}
@keyframes iris{from{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}to{clip-path:circle(0 at var(--ox,50%) var(--oy,50%))}}
@keyframes irisOpen{from{clip-path:circle(0 at var(--ox,50%) var(--oy,50%))}to{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}}
@keyframes irisUnder{from{transform:scale(1.08)}to{transform:none}}