/* Smooth motion. Only opacity and transform move, because the phone's
   WebView can hand those to the GPU; animating height or margin redraws
   the page every frame and stutters. Nothing keeps a transform once it has
   arrived (no fill-mode), so tap positions inside a box stay true. The map
   sheet is left out: its tap-to-pin reads coordinates off the box. */
@keyframes arrive{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.scrim.on{animation:fade var(--t) var(--ease-out)}
.scrim.on:not(#mapScrim)>*{animation:arrive var(--t-slow) var(--ease-out)}
/* A page only fades: a transform on .pane, even mid-animation, makes it the
   box every fixed sheet inside it is placed against, and a tap lands wrong. */
.pane.on{animation:fade var(--t) var(--ease-out)}
details[open]>:not(summary){animation:fade var(--t) var(--ease-out)}
/* A routine step is a new box each time, on the same black, so the black
   shows at once and only the words rise in, one after another. */
.demand>*{animation:stepIn var(--t-slow) var(--ease-out) backwards}
.demand>:nth-child(2){animation-delay:.04s}.demand>:nth-child(3){animation-delay:.08s}
.demand>:nth-child(4){animation-delay:.12s}.demand>:nth-child(n+5){animation-delay:.16s}
button:active{transition-duration:var(--t-quick)}
/* Out of index.html for the page budget. Reduce motion on the phone still
   switches all of this off. */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}