/* Dark mode: the near-black of the "coming soon" page. Light stays the default. */
html[data-theme="dark"] {
  --bg: #141311;
  --fg: #ece8df;
  --muted: #7d786e;
  --line: #3a3833;
  color-scheme: dark;
}
html[data-theme="dark"] img { background-color: #1e1d1a; }

.foot-right { display: flex; gap: 28px; }

/* Moving between tabs: the page fades across while header and footer stay put,
   the new content rises a few pixels into place. Browsers without support just jump. */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
footer { view-transition-name: site-footer; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.2, .7, .2, 1) .08s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Theme switch: the new theme spreads out in a circle from the button. */
html.vt-theme header, html.vt-theme footer, html.vt-lang header, html.vt-lang footer { view-transition-name: none; }
html.vt-theme::view-transition-old(root) { animation: none; }
html.vt-theme::view-transition-new(root) {
  animation: vt-reveal .7s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes vt-reveal {
  from { clip-path: circle(0 at var(--vx) var(--vy)); }
  to   { clip-path: circle(var(--vr) at var(--vx) var(--vy)); }
}
/* Language switch: a quick dissolve, the new words settling up into place. */
html.vt-lang::view-transition-old(root) { animation: vt-out .16s ease both; }
html.vt-lang::view-transition-new(root) { animation: vt-in .32s cubic-bezier(.2, .7, .2, 1) .06s both; }