/* ──────────────────────────────────────────
   layout.css — Ambient effects & page layout
   ────────────────────────────────────────── */

/* ── Grid background ── */
.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, black 20%, transparent 100%);
}

/* ── Ambient glow orb ── */
.bg-orb {
  position: fixed;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 181, 212, 0.035) 0%, transparent 70%);
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  animation: orbPulse 10s ease-in-out infinite;
}

@keyframes orbPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* ── Section utility ── */
.section {
  position: relative;
  z-index: 1;
}