/* Flip transitions between the five iterations. Linked (render-blocking) into every page by build.py, so both
   the page being left and the page arriving opt in to cross-document view transitions before first paint. */

@view-transition { navigation: auto; }

/* The pill holds still while the pages move under it; only its label changes. */
.flip-pill { view-transition-name: flip-pill; }

::view-transition-group(root) { animation-duration: .5s; }
::view-transition-old(root),
::view-transition-new(root) { animation-timing-function: cubic-bezier(.22, .8, .24, 1); animation-duration: .5s; }

/* Forward: the page leaves to the left and recedes; the next arrives from the right. Back is the mirror. */
html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: flip-out-left; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: flip-in-right; }
html:active-view-transition-type(back)::view-transition-old(root)    { animation-name: flip-out-right; }
html:active-view-transition-type(back)::view-transition-new(root)    { animation-name: flip-in-left; }

@keyframes flip-out-left  { to   { transform: translateX(-22%) scale(.94); opacity: 0; filter: blur(3px); } }
@keyframes flip-out-right { to   { transform: translateX(22%)  scale(.94); opacity: 0; filter: blur(3px); } }
@keyframes flip-in-right  { from { transform: translateX(36%); opacity: 0; } }
@keyframes flip-in-left   { from { transform: translateX(-36%); opacity: 0; } }

::view-transition-group(flip-pill) { animation-duration: .5s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  html:active-view-transition-type(forward)::view-transition-old(root),
  html:active-view-transition-type(back)::view-transition-old(root) { animation: flip-fade-out .25s ease both; }
  html:active-view-transition-type(forward)::view-transition-new(root),
  html:active-view-transition-type(back)::view-transition-new(root) { animation: flip-fade-in .25s ease both; }
}
@keyframes flip-fade-out { to { opacity: 0; } }
@keyframes flip-fade-in { from { opacity: 0; } }

/* Browsers without cross-document view transitions: a short fade in on arrival (flip-head.js sets the class). */
html.flip-arriving body { animation: flip-fade-in .22s ease both; }

/* The pill: previous, a dot per site (the current one drawn long), the site's name, next. Its markup is written
   into every page by build.py so it is in the first frame. */
.flip-pill{--fp-bg:rgba(255,255,255,.82);--fp-ink:#1d1f24;--fp-dim:#6a6f78;--fp-line:rgba(0,0,0,.12);
  position:fixed;z-index:2147483647;left:50%;transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:2px;
  padding:4px;border-radius:999px;background:var(--fp-bg);color:var(--fp-ink);
  border:1px solid var(--fp-line);box-shadow:0 4px 18px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  max-width:calc(100vw - 32px);white-space:nowrap;box-sizing:border-box}
@media (prefers-color-scheme:dark){.flip-pill{--fp-bg:rgba(28,30,36,.82);--fp-ink:#f1f2f4;--fp-dim:#9aa0aa;--fp-line:rgba(255,255,255,.14)}}
.flip-pill button{all:unset;cursor:pointer;display:grid;place-items:center;border-radius:999px}
.flip-pill .fp-arrow{width:32px;height:32px;font-size:17px}
.flip-pill .fp-arrow:hover{background:var(--fp-line)}
.flip-pill button:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.flip-pill .fp-dots{display:flex;align-items:center;gap:2px;padding:0 4px}
.flip-pill .fp-dot{width:16px;height:24px}
.flip-pill .fp-dot::before{content:"";width:6px;height:6px;border-radius:3px;background:var(--fp-dim);opacity:.55;transition:width .25s,opacity .25s}
.flip-pill .fp-dot:hover::before{opacity:1}
.flip-pill .fp-dot[aria-current]{width:24px}
.flip-pill .fp-dot[aria-current]::before{width:16px;background:var(--fp-ink);opacity:1}
.flip-pill .fp-name{padding:0 6px 0 4px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.flip-room{height:64px}
@media (max-width:360px){.flip-pill .fp-name{display:none}}
@media print{.flip-pill,.flip-room{display:none}}