/*
 * Base: page background, text, headings, links, focus and the skip link.
 * Element selectors and the skip link's id only. Colors and font families come from tokens.css.
 * Rationale: see DESIGN.md.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Page navigation: browsers that support cross-document view transitions crossfade between pages
 * instead of flashing white. The header keeps its place across pages. Others navigate as usual.
 */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

::view-transition-group(root) {
  animation-duration: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
}

/*
 * The page is solid --color-bg on the left half. On the right, a radial glow
 * (--color-bg-glow) sits behind where the symbol will be (see DESIGN.md).
 */
body {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
  margin: 0;
  background-color: var(--color-bg);
  background-image: radial-gradient(circle 26vw at 74% 70%, var(--color-bg-glow), var(--color-bg));
  background-repeat: no-repeat;
  background-size: 100% 100svh; /* the glow belongs to the first screen, not to the page height: a tall article stays flat below it */
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
}

/*
 * Water: the canvas that src/scripts/water.js adds as the first child of the body. It sits behind
 * everything, never takes a click, and fades in once it has drawn. Without script it does not exist.
 * 100lvh keeps it from resizing when a phone's address bar comes and goes.
 */
body > canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100lvh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

body > canvas[data-ready] {
  opacity: 1;
}

/* Once the water draws the home symbol itself, the SVG in the page steps aside (it stays as the fallback). */
:root[data-water-mark] .hero__symbol {
  visibility: hidden;
}

/*
 * Header and footer have no fill while the water runs, so it shows through them (they keep --color-bg otherwise).
 * When the router leaves a water page, water.js keeps data-water until the canvas has faded out, so the bar never paints a flat fill over water that is still visible. The fill then fades in softly.
 */
.site-header,
.site-footer {
  transition: background-color 1s ease;
}

:root[data-water] .site-header,
:root[data-water] .site-footer {
  background-color: transparent;
}

/*
 * Grain: a fixed film of fine speckles over the whole page while the water runs, so text and buttons are
 * not perfectly clean against it. A tiled SVG noise (no script, no extra request, never takes a click).
 */
:root[data-water] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.9 0 0 0 -0.78'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  transition: opacity 1s ease;
}

:root[data-water][data-water-out] body::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body > canvas,
  .site-header,
  .site-footer {
    transition: none;
  }
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-title);
  line-height: 1.25;
}

/* Links have no underline (Rafael's decision). They stand out by color; in the reading block also by weight.
   Visited links use the muted text color, not red. */
a {
  color: var(--color-link);
  text-decoration: none;
}

a:visited {
  color: var(--color-text-muted);
}

a:hover {
  color: var(--color-link-hover);
}

/* One focus ring for every interactive element. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* The skip link is off screen until it gets focus, then it sits at the top left. Touch target: 44 px. */
#skip-link {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 1;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  transform: translateY(-250%);
}

#skip-link:focus {
  transform: none;
}

/* Text for screen readers only: the language list's title (the site name is already in the header),
   the articles page's h1 (the page shows article titles as h2) and the "opens in a new tab" note of links. */
#root-title,
#feed-title,
[data-sr-only] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The footer is always at the bottom: main takes the free height. */
main {
  flex: 1;
}