/* /play/matterfield.css
   MatterField substrate v1 (no images / no webgl)
*/

:root{
  --mf_glow: 0.82;
  --mf_grid_alpha: 0.16;
  --mf_noise_alpha: 0.10;
  --mf_scanline_alpha: 0.12;

  --accent_1: #7CFFB5;
  --accent_2: #58F2FF;
  --accent_3: #FF4AF7;

  --mf_bg_0: #020608;
  --mf_bg_1: #000000;
}

body.mf-theme{
  background: radial-gradient(120% 120% at 40% 25%, rgba(88,242,255,0.05), rgba(0,0,0,0) 55%),
              radial-gradient(120% 120% at 60% 75%, rgba(255,74,247,0.04), rgba(0,0,0,0) 60%),
              linear-gradient(180deg, var(--mf_bg_0), var(--mf_bg_1));
  color: rgba(255,255,255,0.82);
}

/* required substrate wrapper */
.mf-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* grid */
.mf-grid{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(124,255,181,var(--mf_grid_alpha)) 1px, transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg, rgba(124,255,181,calc(var(--mf_grid_alpha) * 0.8)) 1px, transparent 1px) 0 0/64px 100%;
  opacity: 1;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(88,242,255,0.06));
}

/* scanlines */
.mf-grid:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(255,255,255,var(--mf_scanline_alpha)) 3px,
      rgba(0,0,0,0) 5px
    );
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* noise */
.mf-noise{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04), rgba(0,0,0,0) 60%),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,0.03), rgba(0,0,0,0) 62%);
  opacity: var(--mf_noise_alpha);
  filter: blur(0.6px);
  mix-blend-mode: screen;
}

/* shimmer */
.mf-shimmer{
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(115deg,
      transparent 30%,
      rgba(88,242,255,0.06) 45%,
      transparent 58%),
    linear-gradient(115deg,
      transparent 10%,
      rgba(255,74,247,0.05) 23%,
      transparent 36%);
  transform: translateX(-30%);
  opacity: calc(0.20 + (var(--mf_glow) * 0.15));
  filter: blur(0.8px);
  mix-blend-mode: screen;
  animation: mfShimmerMove 10s linear infinite;
}

@keyframes mfShimmerMove{
  0% { transform: translateX(-35%); }
  100% { transform: translateX(35%); }
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .mf-shimmer{ animation: none !important; }
}