/*
 * Retro-Grid · perspektiv-rutnät som bakgrund på Bricks-sektioner
 * Aktivera per sektion i Bricks → Style → CSS classes → "retro-grid"
 *
 * Implementation:
 *   Ingen markup, ingen JS. ::before ritar rutnätet i perspektiv,
 *   ::after tonar ner det mot sektionens bakgrund.
 *
 * Geometri:
 *   ::before blottas symmetriskt utanför sektionen (inset med lika stora
 *   negativa värden på motstående sidor), så att dess mittpunkt sammanfaller
 *   med sektionens. Rotationen sker därmed kring sektionens centrum, och
 *   planet är stort nog att dess kanter aldrig hamnar i bild.
 *
 * OBS: perspective gör .retro-grid till containing block för
 * position:fixed-barn. Ligger något fixed inuti sektionen förankras det
 * mot sektionen istället för mot viewporten.
 */

.retro-grid {
  --rg-color: 158, 230, 39;              /* RGB för brand-grön, var(--primary) */
  --rg-alpha: .4;                        /* linjernas alpha */
  --rg-opacity: .55;                     /* hela effektens opacitet */
  --rg-fade-end: 60%;                    /* var fade-lagret slutar bita */
  --rg-size: 60px;                       /* rutstorlek */
  --rg-angle: 65deg;                     /* lutning, motsvarar angle-propen */
  --rg-speed: 1.2s;                      /* tid för en ruta — inte ett varv */
  --rg-perspective: 200px;               /* lägre = kraftigare djup */
  --rg-fade: var(--bg-ultra-dark, #000); /* vad rutnätet tonas ner mot */

  position: relative;
  overflow: hidden;
  isolation: isolate;
  perspective: var(--rg-perspective);
}

/* Rutnätet */
.retro-grid::before {
  content: "";
  position: absolute;
  inset: -150% -250%;                    /* 6× bred, 4× hög, centrerad på sektionen */
  background-image:
    linear-gradient(to right,  rgba(var(--rg-color), var(--rg-alpha)) 1px, transparent 0),
    linear-gradient(to bottom, rgba(var(--rg-color), var(--rg-alpha)) 1px, transparent 0);
  background-size: var(--rg-size) var(--rg-size);
  background-repeat: repeat;
  /*
   * Masken ligger i elementets egna koordinater, alltså före rotationen.
   * Den tonar därför bort planet på avstånd, inte på skärmhöjd, och tar
   * bort moaré-bandet där linjerna komprimeras till under en pixel.
   */
  -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 56%);
          mask-image: linear-gradient(to bottom, transparent 34%, #000 56%);
  opacity: var(--rg-opacity);
  transform: rotateX(var(--rg-angle));
  animation: rg-scroll var(--rg-speed) linear infinite;
  pointer-events: none;
  z-index: 0;
}

/*
 * Fade — döljer närfältet där rutorna blir stora och kantiga, så att
 * blicken dras mot horisonten. Originalets 90% svartnar i praktiken hela
 * sektionen; 60% låter rutnätet synas.
 */
.retro-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--rg-fade), transparent var(--rg-fade-end));
  pointer-events: none;
  z-index: 0;
}

/* Sektionens eget innehåll ligger över båda lagren */
.retro-grid > * {
  position: relative;
  z-index: 1;
}

/*
 * Exakt en ruta per cykel ger en sömlös loop. Originalet animerar
 * translateY(-50%) → 0, vilket sällan går jämnt upp mot rutstorleken
 * och därför hackar till vid varje varv.
 */
@keyframes rg-scroll {
  from { transform: rotateX(var(--rg-angle)) translateY(0); }
  to   { transform: rotateX(var(--rg-angle)) translateY(var(--rg-size)); }
}

/* Rutnätet står stilla men syns fortfarande */
@media (prefers-reduced-motion: reduce) {
  .retro-grid::before { animation: none; }
}