/* ============================================================
   IT PULSE — lumen.css  (directional tile relighting)
   The pointer is a light source with height. Surfaces are TILES
   sitting on a ground plane: each has a resting lift, and a
   light-sensitive surface highlight that rakes across the face
   from the side facing the light. A continuous field (ambient +
   wash) keeps the whole scene gently lit so nothing reads flat.
   ============================================================ */

/* Continuous light field — ground/terrain light. */
#lumen-ambient {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(560px 560px at var(--Lx, 50%) var(--Ly, 28%),
    rgba(167, 139, 250, 0.12),
    rgba(94, 234, 212, 0.05) 44%,
    transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 700ms ease;
}
#lumen-wash {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(680px 680px at var(--Lx, 50%) var(--Ly, 28%),
    rgba(220, 212, 255, 0.10),
    rgba(150, 200, 255, 0.05) 38%,
    transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 700ms ease;
}
body.lumen-on #lumen-ambient,
body.lumen-on #lumen-wash { opacity: 1; }

/* Tiles. Resting lift is applied as a base drop-shadow by JS so
   they sit ABOVE the ground even before the light reaches them. */
.lumen { position: relative; }

/* --- tile insets: every lit tile holds its contents (text, circles,
   controls) comfortably INSIDE the rounded rectangle — nothing sits
   flush against or on top of a rounded edge. --- */
.vital-row.lumen { padding: 10px 14px; }
.hero-stat.lumen { padding: 14px 18px; }
.footer-col.lumen { padding: 18px 20px; }
.field.lumen { padding: 12px 14px; }
.phase.lumen { padding: 76px 18px 22px; }
.phase.lumen .node { left: 18px; }

/* Light-sensitive surface highlight: a directional gradient whose
   bright edge faces the light (--ang) and whose strength tracks
   proximity (--li). Bright side rakes from bottom→top as the light
   climbs, then top→bottom as it passes overhead. */
.lumen-surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(var(--ang, 180deg),
    rgba(222, 214, 255, calc(0.34 * var(--li, 0))) 0%,
    rgba(160, 235, 225, calc(0.12 * var(--li, 0))) calc(16% + 30% * var(--li, 0)),
    transparent calc(40% + 58% * var(--li, 0)));
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  #lumen-ambient, #lumen-wash, .lumen-surface { display: none; }
}