/* 3-Dees Visuals — Dual track grids (source of truth: index2.html)
   Architecture = blueprint ruitjespapier (72 + 18)
   Web         = retro digital cyan (10px) */

:root {
  --arch-grid-major: rgba(22, 22, 23, 0.09);
  --arch-grid-minor: rgba(22, 22, 23, 0.035);
  --arch-grid-major-size: 72px;
  --arch-grid-minor-size: 18px;

  /* Teal technical grid — tuned for warm light canvas (#F4F0EA) */
  --web-grid-line: rgba(0, 128, 128, 0.09);
  --web-grid-size: 10px;
  --web-grid-opacity: 0.9;
}

/* ——— Architecture blueprint grid ——— */
.panel--arch .panel__grid,
.grid-arch,
.grid-arch-surface::before,
body.theme-arch::before,
html[data-track="arch"] body::before,
html[data-surface="arch"] body::before {
  background-image:
    linear-gradient(var(--arch-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--arch-grid-major) 1px, transparent 1px),
    linear-gradient(var(--arch-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--arch-grid-minor) 1px, transparent 1px);
  background-size:
    var(--arch-grid-major-size) var(--arch-grid-major-size),
    var(--arch-grid-major-size) var(--arch-grid-major-size),
    var(--arch-grid-minor-size) var(--arch-grid-minor-size),
    var(--arch-grid-minor-size) var(--arch-grid-minor-size);
  opacity: 1;
}

/* ——— Web digital grid ——— */
.panel--web .panel__grid,
.grid-web,
.grid-web-surface::before,
body.theme-web::before,
html[data-track="web"] body::before,
html[data-surface="web"] body::before {
  background-image:
    linear-gradient(var(--web-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--web-grid-line) 1px, transparent 1px);
  background-size: var(--web-grid-size) var(--web-grid-size);
  opacity: var(--web-grid-opacity);
}

/* Body overlay chrome (split index skips this — panels own their grids) */
.grid-arch-surface,
.grid-web-surface,
body.theme-arch,
body.theme-web,
html[data-track="arch"] body,
html[data-track="web"] body,
html[data-surface="arch"] body,
html[data-surface="web"] body {
  isolation: isolate;
}

.grid-arch-surface::before,
.grid-web-surface::before,
body.theme-arch::before,
body.theme-web::before,
html[data-track="arch"] body::before,
html[data-track="web"] body::before,
html[data-surface="arch"] body::before,
html[data-surface="web"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}