/* hexbg.css – hexagon background with a pulsing, lagging mouse glow */

:root {
  --hex-bg-color: #131217;     /* should match the fill color in images/hex.svg */
  --hex-glow-color: var(--accent);
  --hex-glow-size: 900px;     /* how far the falloff reaches (the whole fade fits inside this) */

  /* pulse */
  --hex-pulse-duration: 3s;    /* one full breath in + out */
  --hex-pulse-min: 0.8;        /* smallest size (1 = normal) */
  --hex-pulse-max: 1;       /* largest size */
  --hex-pulse-min-opacity: 0.1;
  --hex-pulse-max-opacity: 0.3;
}

/* Fixed layer behind the whole page */
#hex-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--hex-bg-color);
}

/* Positioning wrapper: hexbg.js moves this one. It does not pulse. */
#hex-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--hex-glow-size);
  height: var(--hex-glow-size);
  margin: calc(var(--hex-glow-size) / -2) 0 0 calc(var(--hex-glow-size) / -2);
  will-change: transform;
}

/* The visible glow: small bright core + long, eased tail, and it pulses */
#hex-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle closest-side,
    var(--hex-glow-color) 0%,
    color-mix(in srgb, var(--hex-glow-color) 80%, transparent) 6%,
    color-mix(in srgb, var(--hex-glow-color) 45%, transparent) 15%,
    color-mix(in srgb, var(--hex-glow-color) 20%, transparent) 30%,
    color-mix(in srgb, var(--hex-glow-color) 6%,  transparent) 55%,
    transparent 100%);
  animation: hex-pulse var(--hex-pulse-duration) ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes hex-pulse {
  0%, 100% { transform: scale(var(--hex-pulse-min)); opacity: var(--hex-pulse-min-opacity); }
  50%      { transform: scale(var(--hex-pulse-max)); opacity: var(--hex-pulse-max-opacity); }
}

@media (prefers-reduced-motion: reduce) {
  #hex-glow::before { animation: none; }
}

/* Hexagons are generated by hexbg.js and cover the glow, leaving thin gaps for it to shine through */
#hex-pattern {
  position: absolute;
  top: -44px;
  left: -50px;
  right: 0;
  bottom: 0;
}

#hex-pattern .hex {
  position: absolute;
  width: 44px;
  height: 50px;
  background: url("images/site_content/hex.svg") no-repeat;
  background-size: contain;
}