/* Page transitions: moving between pages is one slow breath, the old page lets go, the new one settles.
   The header stays where it is; a listing's title and picture fly from the card (js/transitions.js). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Day / night switch: the new sky opens as a circle from the button (site-header.js); the usual page breath is off then */
html.theme-switch site-header { view-transition-name: none; }
html.theme-switch::view-transition-old(root), html.theme-switch::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, canvas, video { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  site-header { view-transition-name: site-header; }
  ::view-transition-group(*) { animation-duration: 640ms; animation-timing-function: var(--ease); }
  ::view-transition-old(root) { animation: 360ms var(--ease) both page-out; }
  ::view-transition-new(root) { animation: 700ms 80ms var(--ease) both page-in; }
  ::view-transition-old(listing-title), ::view-transition-new(listing-title) { block-size: 100%; inline-size: auto; }
  /* phones: the same breath, shorter, so moving between pages never feels slow */
  @media (max-width: 40rem) {
    ::view-transition-group(*) { animation-duration: 320ms; }
    ::view-transition-old(root) { animation-duration: 160ms; }
    ::view-transition-new(root) { animation-duration: 300ms; animation-delay: 0ms; }
  }
  @keyframes page-out { to { opacity: 0; transform: translateY(-12px) scale(0.99); filter: blur(4px); } }
  @keyframes page-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
  html { scroll-padding-block-start: calc(var(--header-h) + var(--space-4)); }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    min-block-size: 100dvh;
    display: flex; flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--type-body);
    line-height: var(--leading-body);
    text-wrap: pretty;
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased;
  }
  /* The sky sits on its own fixed layer behind the page, so scrolling just moves the page over it
     (background-attachment: fixed would repaint the whole screen on every scroll step) */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--atmosphere), var(--bg);
  }
  main { flex: 1; }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
  }
  h1 { font-size: var(--type-title); }
  h2 { font-size: var(--type-heading); }
  h3 { font-size: var(--type-sub); }

  p, li, dd { max-inline-size: var(--measure); }

  a { color: var(--accent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
  a:hover { color: var(--accent-strong); }

  /* One focus ring for everything, in a colour that passes 3:1 on the page */
  :focus-visible { outline: var(--ring) solid var(--focus); outline-offset: var(--ring-offset); }

  ::selection { background: var(--signal); color: var(--on-signal); }

  /* While the dictionary loads, hide only the translatable text (not the layout) */
  .i18n-pending [data-i18n] { visibility: hidden; }

  .visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .skip-link {
    position: absolute; inset-inline-start: var(--space-3); inset-block-start: calc(-1 * var(--space-9));
    z-index: 100; padding: var(--space-2) var(--space-4);
    background: var(--text); color: var(--bg);
  }
  .skip-link:focus { inset-block-start: var(--space-3); }

  /* Motion is opt-out: people who ask for less get none of the decorative kind */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}