/* Organic texture over the cohesive page: paper you could touch. Everything here is static; the
   richness is material (grain, washes, print), not motion. Remove this file and the page is the plain
   version again. The grain tile comes from marketing/textures.py: periodic, so it repeats without
   seams, and drawn at twice its size, so it stays sharp on Retina screens. */

:root {
  /* The dial's rings, fine, like a watermark pressed into the sheet. */
  --rings: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-500 -500 1000 1000'><g fill='none' stroke='%232A7A5E'><circle r='470' stroke-width='1.2' stroke-opacity='0.16'/><circle r='470' stroke-width='22' stroke-dasharray='1.4 60.1' stroke-opacity='0.18'/><circle r='458' stroke-width='10' stroke-dasharray='1 28.78' stroke-opacity='0.12'/><circle r='360' stroke-width='0.8' stroke-opacity='0.1'/></g></svg>");
}

/* The sheet: a fine, even grain, scrolling with the page like real paper. */
body {
  background-color: var(--paper);
  background-image: url("/media/texture/grain.webp");
  background-size: 256px;
  position: relative; isolation: isolate;
}

/* The dial's rings behind the hero, static. */
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(1050px, 125vw); aspect-ratio: 1; right: max(-26vw, -330px); top: -210px;
  background: var(--rings) center / contain no-repeat;
}

/* Tonal washes: two sections sit on a slightly different stock, full-bleed, with soft edges. */
.ask, .mission { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem); }
.ask::before, .mission::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.ask::before { background: rgba(92, 196, 154, 0.1); }
.mission::before { background: rgba(224, 150, 42, 0.06); }

/* The film and screens sit on the sheet like prints: a paper edge and a soft shadow. */
.film video { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(28, 38, 33, 0.1), 0 24px 60px rgba(28, 38, 33, 0.14); }

@media (prefers-color-scheme: dark) {
  /* The dark sheet gets a grain that is nearly all shadow, and no washes: faint tints on a dark
     ground turn muddy and band. */
  body { background-image: url("/media/texture/grain-dark.webp"); }
  .ask::before, .mission::before { content: none; }
  .film video { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.4); }
}