/*
 * bg-grid-pattern.css — Aceternity Background Grid Pattern port (vanilla)
 * Source inspiration: https://ui.aceternity.com/components/background-grid-lines
 * Retrieved: 2026-06-10
 * Licence: UNCONFIRMED — do NOT merge to main until Brock clears the licence gate.
 *
 * @tokens-required
 *   --bg-page             (#050505)
 *   --hairline            (rgba(255,255,255,.06))
 *   --hairline-2          (rgba(255,255,255,.1))
 *   --red-primary         (#FF1A1A)
 *   --brand-red           (#FF2D2D)
 *   --sns-ease-soft
 *
 * Usage:
 *   Add class `bg-grid` to any section/div to get the SNS dark grid.
 *   Add `bg-grid--hero` for a larger cell size (page hero bands).
 *   Add `bg-grid--fade` to fade the grid toward transparent at bottom.
 *   Content must sit above the grid via relative positioning.
 *
 *   <section class="bg-grid bg-grid--hero bg-grid--fade">
 *     <div class="bg-grid__content">…</div>
 *   </section>
 *
 * Deviations:
 *   - SVG-based grid replaced with CSS repeating-linear-gradient (zero assets)
 *   - Tailwind classes replaced with SNS tokens
 *   - Radial fade center glow uses SNS crimson instead of white
 *   - Added prefers-reduced-motion guard on glow pulse animation
 */

/* ── Base grid ────────────────────────────────────────────────────────────── */
.bg-grid {
  position: relative;
  background-color: var(--bg-page, #050505);
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--hairline, rgba(255,255,255,.06)) 0px,
      var(--hairline, rgba(255,255,255,.06)) 1px,
      transparent 1px,
      transparent var(--bg-grid-cell, 40px)
    ),
    repeating-linear-gradient(
      90deg,
      var(--hairline, rgba(255,255,255,.06)) 0px,
      var(--hairline, rgba(255,255,255,.06)) 1px,
      transparent 1px,
      transparent var(--bg-grid-cell, 40px)
    );
  --bg-grid-cell: 40px;
}

/* ── Hero variant: larger grid cells ─────────────────────────────────────── */
.bg-grid--hero {
  --bg-grid-cell: 60px;
}

/* ── Radial center glow (SNS crimson replacing Aceternity's white center) ─── */
.bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 50% at 50% 0%,
    rgba(255, 45, 45, .12) 0%,
    rgba(255, 26, 26, .05) 40%,
    transparent 75%
  );
}

/* ── Fade to page bg at bottom ────────────────────────────────────────────── */
.bg-grid--fade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    var(--bg-page, #050505) 100%
  );
}

/* ── Content sits above grid layers ──────────────────────────────────────── */
.bg-grid__content {
  position: relative;
  z-index: 2;
}

/* ── Dot-grid variant (alternative to line-grid) ─────────────────────────── */
.bg-grid--dots {
  background-image:
    radial-gradient(
      circle,
      var(--hairline-2, rgba(255,255,255,.1)) 1px,
      transparent 1px
    );
  background-size: var(--bg-grid-cell, 40px) var(--bg-grid-cell, 40px);
}

/* ── Reduced motion: kill glow pulse if ever animated ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-grid::before {
    animation: none;
  }
}