/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TRICO INTELLIGENCE FIELD - VISUAL EFFECTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ────────────────────────────────────────────────────────────────────
   GRAIN OVERLAY
   ──────────────────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-effects);
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  /* Static grain - no animation untuk performa */
  mix-blend-mode: overlay;
}

/* ────────────────────────────────────────────────────────────────────
   SCANLINES (Modern CRT-like engraving)
   ──────────────────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-effects);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 229, 160, 0.015) 50%
  );
  background-size: 100% 4px;
  opacity: 0.3;
  /* GPU accelerated */
  transform: translateZ(0);
  will-change: transform;
  animation: scanline-drift 8s linear infinite;
}

@keyframes scanline-drift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4px);
  }
}

/* ────────────────────────────────────────────────────────────────────
   VIGNETTE DEPTH
   ──────────────────────────────────────────────────────────────────── */
#intelligence-field::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(10, 22, 40, 0.3) 80%,
    rgba(10, 22, 40, 0.6) 100%
  );
  pointer-events: none;
  z-index: var(--z-effects);
}

/* ────────────────────────────────────────────────────────────────────
   AMBIENT GLOW BASE
   ──────────────────────────────────────────────────────────────────── */
#intelligence-field {
  /* Subtle box shadow untuk ambient glow dari canvas edge */
  box-shadow: 
    inset 0 0 200px rgba(0, 229, 160, 0.03),
    inset 0 0 100px rgba(0, 229, 160, 0.02);
}

/* ────────────────────────────────────────────────────────────────────
   PERFORMANCE: Disable effects untuk device lemah
   ──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}

/* Low-end device detection via orientation/hover capability */
@media (hover: none) and (max-width: 768px) {
  body::before {
    opacity: 0.008; /* Reduce grain */
  }
  body::after {
    animation-duration: 12s; /* Slower scanline */
  }
}