/* ============================================================
   NASA Space Apps official patterns
   Source: Space Apps Brand Guidelines (updated 25 June 2026), p.19
   "abstractions of ... orbits, coordinates, waves, cells, code,
    and geometry" — single-colour vector art, screened back.
   Delivered as masks so one asset works on any surface colour.
   ============================================================ */
:root {
  --pat-orbits: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523000%27%20stroke-width%3D%271.6%27%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27240%27%20r%3D%2768%27%2F%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27240%27%20r%3D%27128%27%2F%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27240%27%20r%3D%27188%27%2F%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27240%27%20r%3D%27248%27%2F%3E%3Ccircle%20cx%3D%27240%27%20cy%3D%270%27%20r%3D%2758%27%2F%3E%3Ccircle%20cx%3D%27240%27%20cy%3D%270%27%20r%3D%27118%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --pat-coordinates: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523000%27%20stroke-width%3D%271.6%27%3E%3Cpath%20d%3D%27M47%2052H69M58%2041V63%27%2F%3E%3Cpath%20d%3D%27M171%2096H193M182%2085V107%27%2F%3E%3Cpath%20d%3D%27M93%20150H115M104%20139V161%27%2F%3E%3Cpath%20d%3D%27M195%20204H217M206%20193V215%27%2F%3E%3Cpath%20d%3D%27M23%20196H45M34%20185V207%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --pat-waves: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523000%27%20stroke-width%3D%271.6%27%3E%3Cpath%20d%3D%27M0%2054C58%2012%20182%2096%20240%2054%27%2F%3E%3Cpath%20d%3D%27M0%20124C58%2082%20182%20166%20240%20124%27%2F%3E%3Cpath%20d%3D%27M0%20194C58%20152%20182%20236%20240%20194%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --pat-cells: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523000%27%20stroke-width%3D%271.6%27%3E%3Cpath%20d%3D%27M0%2092L72%2058L170%20112L240%2092%27%2F%3E%3Cpath%20d%3D%27M72%2058V0%27%2F%3E%3Cpath%20d%3D%27M72%20240L116%20182L170%20112%27%2F%3E%3Cpath%20d%3D%27M116%20182L240%20206%27%2F%3E%3Cpath%20d%3D%27M0%20206L116%20182%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --pat-geometry: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523000%27%20stroke-width%3D%271.6%27%3E%3Ccircle%20cx%3D%27164.0%27%20cy%3D%27120.0%27%20r%3D%2758%27%2F%3E%3Ccircle%20cx%3D%27151.1%27%20cy%3D%27151.1%27%20r%3D%2758%27%2F%3E%3Ccircle%20cx%3D%27120.0%27%20cy%3D%27164.0%27%20r%3D%2758%27%2F%3E%3Ccircle%20cx%3D%2788.9%27%20cy%3D%27151.1%27%20r%3D%2758%27%2F%3E%3Ccircle%20cx%3D%2776.0%27%20cy%3D%27120.0%27%20r%3D%2758%27%2F%3E%3Ccircle%20cx%3D%2788.9%27%20cy%3D%2788.9%27%20r%3D%2758%27%2F%3E%3Ccircle%20cx%3D%27120.0%27%20cy%3D%2776.0%27%20r%3D%2758%27%2F%3E%3Ccircle%20cx%3D%27151.1%27%20cy%3D%2788.9%27%20r%3D%2758%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --pat-code: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Ctext%20x%3D%270%27%20y%3D%2734%27%20font-family%3D%27monospace%27%20font-size%3D%2722%27%20letter-spacing%3D%272.2%27%20fill%3D%27%2523000%27%3E10110100111001011010%3C%2Ftext%3E%3Ctext%20x%3D%270%27%20y%3D%2772%27%20font-family%3D%27monospace%27%20font-size%3D%2722%27%20letter-spacing%3D%272.2%27%20fill%3D%27%2523000%27%3E01001011000110100101%3C%2Ftext%3E%3Ctext%20x%3D%270%27%20y%3D%27110%27%20font-family%3D%27monospace%27%20font-size%3D%2722%27%20letter-spacing%3D%272.2%27%20fill%3D%27%2523000%27%3E11010010101100111010%3C%2Ftext%3E%3Ctext%20x%3D%270%27%20y%3D%27148%27%20font-family%3D%27monospace%27%20font-size%3D%2722%27%20letter-spacing%3D%272.2%27%20fill%3D%27%2523000%27%3E00101101110010100110%3C%2Ftext%3E%3Ctext%20x%3D%270%27%20y%3D%27186%27%20font-family%3D%27monospace%27%20font-size%3D%2722%27%20letter-spacing%3D%272.2%27%20fill%3D%27%2523000%27%3E10011010011101001011%3C%2Ftext%3E%3Ctext%20x%3D%270%27%20y%3D%27224%27%20font-family%3D%27monospace%27%20font-size%3D%2722%27%20letter-spacing%3D%272.2%27%20fill%3D%27%2523000%27%3E01110100101011010011%3C%2Ftext%3E%3C%2Fsvg%3E");
  --pat-tyai-orbits: url("assets/patterns/pattern-orbits.png");
  --pat-tyai-voronoi: url("assets/patterns/pattern-voronoi.png");
  --pat-tyai-flower: url("assets/patterns/pattern-orbit-flower.png");
  --pat-tyai-waves: url("assets/patterns/pattern-waves.png");
  --pat-tyai-coordinates: url("assets/patterns/pattern-coordinates.png");
}

/* base: paints the element's own colour through the pattern mask */
.pat { position: relative; }
.pat > * { position: relative; z-index: 1; }
.pat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-color: currentColor;
  -webkit-mask-repeat: repeat;         mask-repeat: repeat;
  -webkit-mask-size: var(--pat-size, 240px); mask-size: var(--pat-size, 240px);
  -webkit-mask-image: var(--pat);      mask-image: var(--pat);
  opacity: var(--pat-opacity, 0.06);
  border-radius: inherit;
}
.pat--orbits          { --pat: var(--pat-orbits); }
.pat--coordinates     { --pat: var(--pat-coordinates); }
.pat--waves           { --pat: var(--pat-waves); }
.pat--cells           { --pat: var(--pat-cells); }
.pat--geometry        { --pat: var(--pat-geometry); }
.pat--code            { --pat: var(--pat-code); }
.pat--tyai-orbits     { --pat: var(--pat-tyai-orbits); }
.pat--tyai-voronoi    { --pat: var(--pat-tyai-voronoi); }
.pat--tyai-flower     { --pat: var(--pat-tyai-flower); }
.pat--tyai-waves      { --pat: var(--pat-tyai-waves); }
.pat--tyai-coordinates{ --pat: var(--pat-tyai-coordinates); }

/* fade the pattern out at the edges so it never ends in a hard line */
.pat--fade::before {
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* --- placement -------------------------------------------------
   On the navy block the guide's own ratio applies (light art on a
   brand blue). On paper-coloured cards the same ratio would shout,
   so ink is screened much further back.                        */
.register-card  { --pat: var(--pat-orbits);      --pat-opacity: 0.22; --pat-size: 300px; }
.countdown-card { --pat: var(--pat-coordinates); --pat-opacity: 0.11; --pat-size: 200px; }
.about-card     { --pat: var(--pat-cells);       --pat-opacity: 0.10; --pat-size: 260px; }
.sponsor-card   { --pat: var(--pat-waves);       --pat-opacity: 0.075;--pat-size: 240px; }
.why-card-featured { --pat: var(--pat-geometry); --pat-opacity: 0.10; --pat-size: 230px; }

@media (prefers-reduced-motion: reduce) { .pat::before { opacity: var(--pat-opacity, 0.06); } }

.pat--stars { --pat: url("assets/patterns/starfield.svg?v=2"); --pat-size: 560px; --pat-opacity: .45; }