/* Base: self-hosted font faces (latin subsets), reset and page-wide defaults. */
@font-face {
  font-family: "Staff X Wide Test";
  src: url("../../public/fonts/staff-x-wide.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../../public/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../public/fonts/unbounded-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { box-sizing: border-box; }

*, *::before, *::after { box-sizing: inherit; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  overflow-x: clip;
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* while the footer is on screen (sections/impressum): no rubber-band past the page's end, which would pull the bare film grain
   (body::after, with nothing under it to blend with there) into view below the footer; the top keeps it, and pull-to-refresh */
[data-page-end] { overscroll-behavior-y: none; }

/* while a script holds the page (core/scroll-lock.js): no overscroll on either axis, and on touch screens no scrolling at all,
   which also stops a fling that is still running; the script can still move the page with scrollTo */
[data-scroll-lock] { overscroll-behavior: none; }

@media (pointer: coarse) {
  [data-scroll-lock] { overflow: hidden; }
}

/* the curtain a jump from the header goes under (sections/site-header/site-header.js). The page darkens, the jump lands unseen and the
   curtain lifts on the section, instead of the page cutting half the site away in one frame. A plain fill whose opacity is animated,
   never a moving gradient: iPhone Safari leaves the foot of one of those unpainted. It overhangs by a pixel so no edge of the page
   shows through at fractional pixel ratios, and sits over everything, the grain included */
body::before {
  content: '';
  position: fixed;
  inset: -1px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: var(--bg);
}

[data-curtain="closing"] body::before {
  opacity: 1;
  transition: opacity .25s ease;
}

[data-curtain="opening"] body::before { transition: opacity .45s ease; }

/* film grain over the whole page, flickering in steps; blended so it shows on the lit areas (gradients, glows) and leaves pure black
   black. The layer overhangs the screen by 64px on each side and the steps move it (translate, on the compositor) rather than its
   image, so the noise is painted once and never repainted */
body::after {
  content: '';
  position: fixed;
  inset: -64px;
  z-index: 5;
  pointer-events: none;
  opacity: .6;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: page-grain .9s steps(1) infinite;
}

/* phones: no grain at all. Blending a layer fixed over the whole screen holds the entire page in one blending group, and a jump down
   it (the header's Contact link) then landed on a flat grey screen until the backdrop had been rastered again */
@media (max-width: 760px) {
  body::after { display: none; }
}

@keyframes page-grain {
  0% { translate: 0 0; }
  25% { translate: -40px 30px; }
  50% { translate: 30px -50px; }
  75% { translate: -30px -30px; }
}

/* the hero's headline and the header fading out as the page scrolls off the first screen into the dark lead of the section below
   (hero.css, site-header.css); shared so both fade on the same curve over the same stretch of scroll */
@keyframes page-leave {
  to { opacity: 0; }
}

/* slow sway shared by the drifting lights of the sections (edge glows, the closing red lights) */
@keyframes light-sway {
  0% { translate: 0 0; }
  25% { translate: 3vw 2%; }
  50% { translate: -1vw -3%; }
  75% { translate: -3vw 1%; }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}