/* ============================================================
   Selehacks — bg.css · Fons de la portada
   Tècnica "grid paper" amb gradients CSS de Simey (simeydotme), del pen
   "Grid Paper Background using CSS gradients". Es manté la PALETA original del
   demo (to blau hue 220, paper tintat, línies al 20%/80%, opacitat 0.35, gap
   12px); només s'adapta el clar/fosc perquè segueixi el toggle del lloc en
   comptes de light-dark(). Tot CSS, estàtic, només a la portada.
   Set de gradients apilats: línies menors, línies majors (cada 5) i creus "+"
   a les interseccions majors (retallades per una màscara radial).
   ============================================================ */

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  --grid-hue: 220;        /* color del demo */
  --grid-gap: 12px;       /* mida del quadre menor (línia a línia) */
  --grid-opacity: 0.35;   /* opacitat de les creus */
  --grid-ink-l: 20%;      /* lluminositat de les línies (clar: fosques) */
  --grid-bg: hsl(var(--grid-hue) 50% 92%);   /* paper clar tintat, com el demo */
  --grid-border: var(--home-frame, 20px);    /* marge del contorn (com el demo) */
  --grid-frame: hsl(var(--grid-hue) 55% var(--grid-ink-l) / 0.5);  /* línia del contorn */

  --grid-minor: hsl(var(--grid-hue) 60% var(--grid-ink-l) / calc(var(--grid-opacity) * 0.125));
  --grid-major: hsl(var(--grid-hue) 60% var(--grid-ink-l) / calc(var(--grid-opacity) * 0.35));
  --grid-cross: hsl(var(--grid-hue) 60% var(--grid-ink-l) / var(--grid-opacity));

  --paper-lines-y: linear-gradient(var(--grid-minor) 0 1px, transparent 1px var(--grid-gap));
  --paper-lines-x: linear-gradient(to right, var(--grid-minor) 0 1px, transparent 1px var(--grid-gap));
  --paper-lines-y-major: linear-gradient(var(--grid-major) 0 1px, transparent 1px calc(var(--grid-gap) * 5));
  --paper-lines-x-major: linear-gradient(to right, var(--grid-major) 0 1px, transparent 1px calc(var(--grid-gap) * 5));
  --paper-cross-y: linear-gradient(var(--grid-cross) 0 1px, transparent 1px calc(var(--grid-gap) * 5));
  --paper-cross-x: linear-gradient(to right, var(--grid-cross) 0 1px, transparent 1px calc(var(--grid-gap) * 5));
  /* Tapa les línies "creu" i només deixa un "+" curt a cada intersecció major
     (forat radial de radi gap/2 centrat a la intersecció). */
  --paper-cross-mask: radial-gradient(circle at center,
      transparent calc(var(--grid-gap) / 2), var(--grid-bg) calc(var(--grid-gap) / 2) 100%);

  background-color: var(--grid-bg);
  /* L'ORDRE importa: la màscara de creus va per SOBRE de les línies-creu i per
     SOTA de les línies menors/majors. */
  background-image:
    var(--paper-lines-y),
    var(--paper-lines-x),
    var(--paper-lines-y-major),
    var(--paper-lines-x-major),
    var(--paper-cross-mask),
    var(--paper-cross-y),
    var(--paper-cross-x);
  background-size:
    var(--grid-gap) var(--grid-gap),
    var(--grid-gap) var(--grid-gap),
    calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5),
    calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5),
    calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5),
    calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5),
    calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5);
  background-repeat: repeat;
  /* Tota la graella comença desplaçada el gruix del marge; la màscara de creus,
     a més, va desplaçada mig quadre-major perquè els forats caiguin a les
     interseccions de la graella major. */
  background-position:
    var(--grid-border) var(--grid-border),
    var(--grid-border) var(--grid-border),
    var(--grid-border) var(--grid-border),
    var(--grid-border) var(--grid-border),
    calc(var(--grid-border) - var(--grid-gap) * 2.5) calc(var(--grid-border) - var(--grid-gap) * 2.5),
    var(--grid-border) var(--grid-border),
    var(--grid-border) var(--grid-border);
  /* Marge + contorn: el primer inset repinta el paper sobre el marge (amaga la
     graella als costats) i el segon deixa una línia fina de contorn. */
  box-shadow:
    inset 0 0 0 var(--grid-border) var(--grid-bg),
    inset 0 0 0 calc(var(--grid-border) + 1px) var(--grid-frame);
}

/* Fosc: paper fosc i línies clares, com el demo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-grid {
    --grid-ink-l: 80%;
    --grid-bg: hsl(var(--grid-hue) 20% 18%);
  }
}
:root[data-theme="dark"] .bg-grid {
  --grid-ink-l: 80%;
  --grid-bg: hsl(var(--grid-hue) 20% 18%);
}

/* ---- Composició de la portada sobre el paper emmarcat ----
   El marge del <body> deixa el contingut DINS del contorn del grid; la capçalera
   sura sobre el paper i el peu es converteix en una targeta blanca flotant. */
body.home {
  --home-frame: clamp(16px, 2.4vw, 30px);
  padding: var(--home-frame);
  min-height: 100svh;
}

body.home .site-header {
  background: transparent;
  border-bottom: none;
}

/* El peu ja és una targeta flotant (base.css); a la home només ajustem el marge
   perquè el frame del paper ja fa d'aire lateral. */
body.home .site-footer { margin: var(--space-8) 0 0; }