/* Page-to-page moves, one per page, played in reverse on the way back up. Cross-document view transitions.
   Without support the browser just changes pages. Reduced motion turns them off. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@property --p{syntax:"<length>";inherits:false;initial-value:0px}
::view-transition{background:#0B57D0}
::view-transition-group(root){animation-duration:.85s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.85s;animation-timing-function:cubic-bezier(.7,0,.2,1);animation-fill-mode:both;mix-blend-mode:normal}
::view-transition-group(top){z-index:5}
::view-transition-group(hero){animation-duration:.85s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
::view-transition-old(hero),::view-transition-new(hero){height:100%;object-fit:cover}

/* services: a slab is lifted into place from below */
html:active-view-transition-type(services-fwd)::view-transition-new(root){animation-name:slabIn}
html:active-view-transition-type(services-fwd)::view-transition-old(root){animation-name:sink}
html:active-view-transition-type(services-back)::view-transition-old(root){z-index:2;animation-name:slabOut}
html:active-view-transition-type(services-back)::view-transition-new(root){animation-name:rise}
@keyframes slabIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes slabOut{from{clip-path:inset(0)}to{clip-path:inset(100% 0 0 0)}}
@keyframes sink{to{transform:translateY(-10%);filter:brightness(.55)}}
@keyframes rise{from{transform:translateY(-10%);filter:brightness(.55)}to{transform:none;filter:none}}

/* guide: floors go up one band at a time */
html:active-view-transition-type(guide-fwd)::view-transition-new(root){animation-name:floors;mask-image:repeating-linear-gradient(180deg,#000 0,#000 var(--p),transparent var(--p),transparent 110px)}
html:active-view-transition-type(guide-back)::view-transition-old(root){z-index:2;animation-name:floorsOut;mask-image:repeating-linear-gradient(180deg,#000 0,#000 var(--p),transparent var(--p),transparent 110px)}
@keyframes floors{from{--p:0px}to{--p:110px}}
@keyframes floorsOut{from{--p:110px}to{--p:0px}}

/* process: the tape measure is pulled across from the right */
html:active-view-transition-type(process-fwd)::view-transition-new(root){animation-name:tapeIn}
html:active-view-transition-type(process-fwd)::view-transition-old(root){animation-name:slideAway}
html:active-view-transition-type(process-back)::view-transition-old(root){z-index:2;animation-name:tapeOut}
html:active-view-transition-type(process-back)::view-transition-new(root){animation-name:slideBack}
@keyframes tapeIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes tapeOut{from{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes slideAway{to{transform:translateX(-7%);filter:brightness(.6)}}
@keyframes slideBack{from{transform:translateX(-7%);filter:brightness(.6)}to{transform:none;filter:none}}

/* report: a printed sheet is set down on the desk */
html:active-view-transition-type(report-fwd)::view-transition-new(root){animation-name:sheetDown}
html:active-view-transition-type(report-fwd)::view-transition-old(root){animation-name:deskAway}
html:active-view-transition-type(report-back)::view-transition-old(root){z-index:2;animation-name:sheetUp}
@keyframes sheetDown{from{opacity:0;transform:translateY(-48px) scale(1.05) rotate(.6deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes deskAway{to{transform:scale(.96);opacity:.2}}
@keyframes sheetUp{from{opacity:1;transform:none}to{opacity:0;transform:translateY(60px) scale(.97) rotate(-.6deg);filter:blur(6px)}}

/* contact: a survey point opens a circle from the link that was tapped */
html:active-view-transition-type(contact-fwd)::view-transition-new(root){animation-name:dotOpen}
html:active-view-transition-type(contact-back)::view-transition-old(root){z-index:2;animation-name:dotClose}
@keyframes dotOpen{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 dotClose{from{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}to{clip-path:circle(0 at var(--ox,50%) var(--oy,50%))}}