/* Small rules every main-site page shares. Kept out of style.css and effects.css on purpose:
   those two are also copied into the account site's header, and nothing here belongs there. */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Skip link: first Tab on any page. */
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 14px 18px; background: var(--lz-original); color: #0a0d0a; font: 700 16px/1 var(--lz-heading); letter-spacing: .06em; text-transform: uppercase; }
.skip-link:focus { top: 12px; }

/* Page changes. Browsers with cross-document view transitions cross-fade the page while the
   navigation bar stays put; the rest simply load the next page. The opt-in (@view-transition, and
   its reduced-motion off switch) is an inline <style> in every page's head, not here: Chrome reads
   it the moment <body> is parsed, before a linked sheet has necessarily loaded. From this file it
   lost that race on two page changes in three on the live site. */
.nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* Moving between the two worlds: the next page wipes in along the same slant as the homepage seam,
   from the side that world sits on there. original.html and life.html name the direction in a
   one-line head script (it has to run before the first paint). */
html:active-view-transition-type(to-life)::view-transition-old(root),
html:active-view-transition-type(to-original)::view-transition-old(root) { animation: none; }
html:active-view-transition-type(to-life)::view-transition-new(root) { animation: 460ms cubic-bezier(.22, 1, .36, 1) both lz-wipe-from-right; }
html:active-view-transition-type(to-original)::view-transition-new(root) { animation: 460ms cubic-bezier(.22, 1, .36, 1) both lz-wipe-from-left; }
@keyframes lz-wipe-from-right {
  from { clip-path: polygon(106% 0, 112% 0, 112% 100%, 100% 100%); }
  to { clip-path: polygon(0 0, 112% 0, 112% 100%, -6% 100%); }
}
@keyframes lz-wipe-from-left {
  from { clip-path: polygon(-12% 0, 0 0, -6% 100%, -12% 100%); }
  to { clip-path: polygon(-12% 0, 106% 0, 100% 100%, -12% 100%); }
}