/* Shared palette: the portfolio and aviation reader use the same colors. */
:root {
  color-scheme: dark;
  --page-background: #111110;
  --page-text: #ededeb;
  --text-muted: #aaa9a4;
  --text-disabled: #666662;
  --border-subtle: #2b2b29;
  --border-strong: #333330;
  --link-underline: #444440;
  --link-underline-hover: #777773;
  --photo-outline: rgb(255 255 255 / .08);
  --tooltip-background: #191918;
  --tooltip-border: #343432;
  --toggle-hover: rgb(255 255 255 / .06);
}

:root[data-theme="light"] {
  color-scheme: light;
  --page-background: #fafaf8;
  --page-text: #252523;
  --text-muted: #6c6c66;
  --text-disabled: #94948c;
  --border-subtle: #e5e5df;
  --border-strong: #d8d8d1;
  --link-underline: #c4c4bc;
  --link-underline-hover: #85857c;
  --photo-outline: rgb(0 0 0 / .08);
  --tooltip-background: #f2f2ee;
  --tooltip-border: #ddddd5;
  --toggle-hover: rgb(0 0 0 / .045);
}

::selection {
  background: var(--page-text);
  color: var(--page-background);
}

html.theme-transition { view-transition-name: root !important; }
html.theme-transition body { view-transition-name: none !important; }

/* A feathered circle blooms from the toggle, keeping the same soft whoosh. */
html.theme-transition::view-transition-old(root),
html.theme-transition::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.3, 0, .2, 1);
  animation-fill-mode: both;
}
html.theme-transition::view-transition-old(root) {
  z-index: 1;
  animation-name: theme-soften;
}
html.theme-transition::view-transition-new(root) {
  z-index: 2;
  mask-image: radial-gradient(circle closest-side, #000 85%, transparent 100%);
  mask-repeat: no-repeat;
  animation-name: theme-bloom;
}
html.theme-transition::view-transition-group(root) { animation-duration: 0s; }
html.theme-transition::view-transition { pointer-events: none; }

@keyframes theme-soften {
  from { filter: blur(0); }
  to { filter: blur(4px); }
}
@keyframes theme-bloom {
  from {
    mask-size: 0px 0px;
    mask-position: var(--theme-origin-x) var(--theme-origin-y);
    filter: blur(10px);
  }
  to {
    mask-size: var(--theme-diameter) var(--theme-diameter);
    mask-position: var(--theme-left) var(--theme-top);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-transition::view-transition-old(root),
  html.theme-transition::view-transition-new(root) { animation: none; }
}