/* ============================================================
   backdrops.css — single backdrop: cyberpunk perspective grid
   with scanlines and a cursor-tracked spotlight.

   Mobile URL-bar fix: viewport-height units use `lvh` (large
   viewport, never changes) rather than `vh`. Otherwise the
   plane height recomputes every time iOS Safari / Android
   Chrome collapse or expand their URL bar, producing a visible
   "jump" in the backdrop projection on scroll.
   ============================================================ */

#backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--c-bg);
  perspective: 800px;
  perspective-origin: 50% 50%;
}

#backdrop::after {
  /* vignette over the grid */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    1200px 800px at 50% -10%,
    transparent 0%,
    rgba(var(--c-bg-rgb), 0.55) 70%,
    rgba(var(--c-bg-rgb), 0.9) 100%
  );
  pointer-events: none;
  z-index: 5;
}

.grid-bg__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 40% at 50% 30%,
      rgba(74, 222, 128, 0.10),
      transparent 70%
    ),
    linear-gradient(180deg, #0b1210 0%, #0d1814 60%, #0b1210 100%);
}

.grid-bg__plane {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -10%;
  height: 140lvh;
  transform-origin: 50% 100%;
  transform: rotateX(62deg);
  background-image:
    linear-gradient(rgba(74, 222, 128, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.22) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.grid-bg__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.015) 0px,
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

.grid-bg__spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mouse-x) var(--mouse-y),
    rgba(74, 222, 128, 0.14),
    transparent 60%
  );
  pointer-events: none;
}

/* No cursor on touch devices — hide the spotlight entirely.
   Also keeps Android Chrome from re-compositing the radial-gradient
   layer on every tap. */
@media (hover: none), (pointer: coarse) {
  .grid-bg__spot { display: none; }
}

/* ============================================================
   Light-mode adjustments.
   ============================================================ */

html[data-theme="light"] #backdrop::after {
  background: radial-gradient(
    1200px 800px at 50% -10%,
    transparent 0%,
    rgba(var(--c-bg-rgb), 0.5) 70%,
    rgba(var(--c-bg-rgb), 0.85) 100%
  );
}

html[data-theme="light"] .grid-bg__sky {
  background:
    radial-gradient(
      ellipse 60% 40% at 50% 30%,
      rgba(22, 163, 74, 0.08),
      transparent 70%
    ),
    linear-gradient(180deg, #f5f9f7 0%, #edf3f0 60%, #f5f9f7 100%);
}

html[data-theme="light"] .grid-bg__plane {
  background-image:
    linear-gradient(rgba(22, 163, 74, 0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 163, 74, 0.20) 1px, transparent 1px);
}

html[data-theme="light"] .grid-bg__scan {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.018) 0px,
    rgba(0, 0, 0, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
}

html[data-theme="light"] .grid-bg__spot {
  background: radial-gradient(
    400px circle at var(--mouse-x) var(--mouse-y),
    rgba(22, 163, 74, 0.10),
    transparent 60%
  );
}

/* ============================================================
   Reduced motion / reduced transparency.
   ============================================================ */

@media (prefers-reduced-transparency: reduce) {
  .grid-bg__scan,
  .grid-bg__spot {
    display: none;
  }
}