/* ═══ INTERACTION ENGINE — grid, grain ═══ */

/* Orthogonal grid — reveals on scroll */
.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 10%, transparent 75%);
  transition: opacity 1.2s var(--ease-out-expo);
}

.grid-bg.is-visible {
  opacity: 0.35;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996;
  background: var(--glow-signal), var(--glow-cyan), var(--glow-deep);
  opacity: 0.9;
}

/* This is a viewport-fixed colour wash that sits above every section
   regardless of scroll position. On dark surfaces it reads as mood; on
   near-white surfaces the same tint reads as a dirty haze, so it's dialed
   back hard for light mode (on top of the already-fainter --glow-* values
   defined for this theme in tokens.css). */
[data-theme="light"] body::after {
  opacity: 0.72;
}

/* Magnetic elements */
[data-magnetic] {
  display: inline-flex;
  will-change: transform;
}

/* Section display titles */
.display-section {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Reveal mask utility */
.split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  perspective: 700px;
}

.split-line__inner {
  display: block;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}