/* 2.6-second show cue, shared across the site. */
@view-transition{navigation:auto}
::view-transition{background:#0b0d10}
::view-transition-group(*){animation-duration:2.6s}
::view-transition-old(root){animation:fx-show-out 2.6s both;mix-blend-mode:normal}
::view-transition-new(root){animation:fx-show-in 2.6s both;mix-blend-mode:normal}
@keyframes fx-show-out{0%,5%{opacity:1;transform:translateX(0)}32%{opacity:.45;transform:translateX(-45px)}40%,100%{opacity:0;transform:translateX(-65px)}}
@keyframes fx-show-in{0%,46%{opacity:0;transform:translateY(35px)}65%{opacity:.6;transform:translateY(15px)}100%{opacity:1;transform:translateY(0)}}
::view-transition-group(show-navigation){animation:none}
::view-transition-old(show-navigation){animation:none;opacity:0}
::view-transition-new(show-navigation){animation:none;opacity:1}
::view-transition-old(show-headline){animation:fx-title-release 2.6s both;mix-blend-mode:normal}
::view-transition-new(show-headline){animation:fx-title-lock 2.6s both;mix-blend-mode:normal}
::view-transition-old(show-intro),::view-transition-old(show-actions){animation:fx-detail-release 2.6s both;mix-blend-mode:normal}
::view-transition-new(show-intro),::view-transition-new(show-actions){animation:fx-detail-lock 2.6s both;mix-blend-mode:normal}
@keyframes fx-title-release{0%,8%{opacity:1;transform:translateX(0)}31%,100%{opacity:0;transform:translateX(140px) rotate(1.5deg)}}
@keyframes fx-title-lock{0%,52%{opacity:0;transform:translateX(-100px) rotate(-1deg)}79%{opacity:1;transform:translateX(2px)}100%{opacity:1;transform:translateX(0)}}
@keyframes fx-detail-release{0%{opacity:1;transform:translateY(0)}28%,100%{opacity:0;transform:translateY(35px)}}
@keyframes fx-detail-lock{0%,61%{opacity:0;transform:translateY(32px)}100%{opacity:1;transform:translateY(0)}}
::view-transition-old(show-module-1),::view-transition-old(show-module-2),::view-transition-old(show-module-3){animation:fx-module-release 2.6s both;mix-blend-mode:normal}
::view-transition-new(show-module-1),::view-transition-new(show-module-2),::view-transition-new(show-module-3){animation:fx-module-lock 2.6s both;mix-blend-mode:normal}
::view-transition-new(show-module-2){animation-delay:70ms}::view-transition-new(show-module-3){animation-delay:140ms}
@keyframes fx-module-release{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(100px,35px) rotate(3deg)}}
@keyframes fx-module-lock{0%,58%{opacity:0;transform:translate(-90px,45px) rotate(-2deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* Counter-travel gives the center module a separate mechanical track. */
::view-transition-old(show-module-2){animation-name:fx-module-release-counter}
::view-transition-new(show-module-2){animation-name:fx-module-lock-counter}
@keyframes fx-module-release-counter{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(-100px,35px) rotate(-3deg)}}
@keyframes fx-module-lock-counter{0%,58%{opacity:0;transform:translate(90px,45px) rotate(2deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}

/* Automatic directory-card tracks: every visible card, eight travel directions. */
@keyframes fx-card-release-0{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(-110px,0px) rotate(3deg)}}
@keyframes fx-card-lock-0{0%,58%{opacity:0;transform:translate(-110px,0px) rotate(3deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes fx-card-release-1{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(110px,0px) rotate(-3deg)}}
@keyframes fx-card-lock-1{0%,58%{opacity:0;transform:translate(110px,0px) rotate(-3deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes fx-card-release-2{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(0px,-90px) rotate(-2deg)}}
@keyframes fx-card-lock-2{0%,58%{opacity:0;transform:translate(0px,-90px) rotate(-2deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes fx-card-release-3{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(0px,90px) rotate(2deg)}}
@keyframes fx-card-lock-3{0%,58%{opacity:0;transform:translate(0px,90px) rotate(2deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes fx-card-release-4{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(-90px,-75px) rotate(3deg)}}
@keyframes fx-card-lock-4{0%,58%{opacity:0;transform:translate(-90px,-75px) rotate(3deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes fx-card-release-5{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(90px,-75px) rotate(-3deg)}}
@keyframes fx-card-lock-5{0%,58%{opacity:0;transform:translate(90px,-75px) rotate(-3deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes fx-card-release-6{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(-90px,75px) rotate(-2deg)}}
@keyframes fx-card-lock-6{0%,58%{opacity:0;transform:translate(-90px,75px) rotate(-2deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes fx-card-release-7{0%,4%{opacity:1;transform:translate(0,0) rotate(0)}35%,100%{opacity:0;transform:translate(90px,75px) rotate(2deg)}}
@keyframes fx-card-lock-7{0%,58%{opacity:0;transform:translate(90px,75px) rotate(2deg)}87%{opacity:1;transform:translate(0,-2px) rotate(0)}100%{opacity:1;transform:translate(0,0) rotate(0)}}

/* Keep entrance travel from creating horizontal page scrolling. */
.tools-grid{overflow:clip;overflow-clip-margin:12px}